« How to Drag Clock Hands in a Circle
What Fonts are Common to Windows and Mac? »

Building a Drag-and-Drop Jigsaw Puzzle

Flash ActionScript 2.0

Here’s another freebie from Community MX.  I had a lot of fun with this one!  In this two-part series, I step the reader through an ActionScript 2.0 class that builds a jigsaw puzzle engine.  The complete code and sample files are included as a download with the tutorial — yes, even in Part 1, which is free.  Part 2 (published in a week or two) covers the second half of the code in detail and shows how to incorporate the puzzle into a more elaborate layout.

http://www.communitymx.com/content/article.cfm?cid=8A2E0

If this sort of content appeals to you, you may want to give Community MX a shot.  Plenty of content is free.  Other content is usually priced around $5 per article (give or take a few bucks).  The stuff is honestly inexpensive, and every article is peer-reviewed.  For a subscription, you get all-the-time access to over 1,700 articles, as of this writing.

The more time I spend with the CMX partners, the happier I am to have joined the team.  Good bunch of people.  :)

This entry was posted on Monday, August 21st, 2006 at 8:18 am and is filed under Flash, ActionScript 2.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 Responses to “Building a Drag-and-Drop Jigsaw Puzzle”

  1. Alex Says:
    November 26th, 2006 at 1:19 pm

    Hi David,

    I had a good read through the drag-and-drop Jigsaw puzzle, very nicely done. Still getting my head around it.

    just one question though - How would I be able to replace the squares with actual jigsaw puzzle pieces?

    Regards
    Alex

  2. David Stiller Says:
    November 27th, 2006 at 2:40 am

    Alex,

    The rectangular pieces you see are innately a part of the CMXJigsawPuzzle class code. To replace those shapes with actual jigsaw puzzle pieces, you’d have to re-write the area that draws the rectangular masks (lines 130 – 148). It’s something I’m interested in figuring out myself, but haven’t yet taken the time to analyze. My hunch is that it would take longer to figure out a jigsaw shape algorithm than it would to figure out the rest of the code.

  3. Alex Says:
    November 27th, 2006 at 4:38 pm

    Yea that makes sense, but what if you didnt programmatically draw the puzzle shapes, but had them as MC in your library? Would that be hard to implement?

  4. David Stiller Says:
    November 29th, 2006 at 11:19 pm

    Alex,

    Your question is a good one, definitely. Part 2 of that Community MX article is likely to give you considerably more guidance, because it steps through all the methods called by the buildPuzzle() method discussed in the first one. The drawAndApplyMask() method is responsible for “cutting” the image into rectangles, so you would skip that. Instead of attaching the same image repeatedly (then masking), as the current version does, you could attach a series of pre-cut images from the Library. It might help if you named your Library assets sequentially, so you could pull them with a for loop interator.

    Go ahead an experiment with it! I try to make my Community MX articles as informative as they are fun. You might consider a free trial membership, so you can get Part 2 without charge (as well as a huge selection of other useful articles).

Leave a Reply