Flash Article

Creating self-voicing puzzles in Flash

Examining the Life Cycle of a Frog puzzle

This article concerns a puzzle called Life Cycle of a Frog (see Figure 1), which you are going to build. You solve this puzzle by using click and drop with the mouse: You click a piece to pick it up, move it to the proper hit area, and then click again to place it.

Figure 1. Life Cycle of a Frog puzzle with five pieces corresponding to the five stages of the life cycle of a frog.

• Launch the application: Life Cycle of a Frog puzzle (on snertstudios.com)

Mobility-impaired users can also solve the puzzle by tabbing to the puzzle pieces, pressing Enter to pick one up, tabbing to a hit area, and then pressing Enter again to place it. Similarly, visually impaired users can tab to the puzzle pieces, press Enter to pick one up, tab to a hit area, and press Enter to place it.

The blue access button in the lower right corner comes up on tabbing only. It provides a description of the images on the screen, instructions on how to play the game, and a keypress overlay of available keyboard shortcuts. The self-voicing features and audio come up only when tabbing, not using the mouse.

Setting up the puzzle pieces

You can start by downloading the sample files linked to at the beginning of this article, or have your own vector image ready that you want to make into a puzzle.

Launch Flash Professional 8 and open the FrogLifeCycle_starter.fla file you downloaded. You will find the complete Life Cycle of the Frog image as well as a grid that will aid in cutting out the puzzle pieces.

Press Control+ B (or choose Modify > Break Apart from the main menu) to break down the vector image into its pieces.

Tip: You don't have to break down the entire illustration in order to be able to cut out the pieces. Sometimes with vector images that were created in Adobe Illustrator this does not always work the way you expect. For the Lifecycle of the Frog image, I left the frogs in separate movie clips and broke down only the areas that will be cut by the lines.

With lines set to a different color that offsets well and set to hairline width, draw the outlines of the pieces on a layer above the flat image, or use the red grid provided in the starter file. Once they are in the right position, copy and paste the lines onto the flat image. The lines will cut the image into pieces, which you can then extract (see Figure 2).

Figure 2. Cutting out the pieces of the puzzle after dividing them by the lines

Make sure you select all small elements close to the lines as well by zooming into the movie (press Control+ +/= or choose View > Zoom In from the main menu). Select the flat pieces and press F8 (or choose Modify > Convert to Symbol in the menu) to turn them into movie clips called, respectively, pp1, pp2, and so on.

Go into each puzzle piece movie clip and move the piece so that the registration point falls somewhat in the middle (see Figure 3).

Tip: The transformation point (white circle in a symbol) is not the same in Flash as the registration point. After having moved the registration point to the middle of the puzzle piece, you can reset the transformation point by double-clicking it.

Figure 3. Moving the puzzle piece's registration point to the middle

Setting up the hit areas

The hit areas are the places where the puzzle pieces are supposed to go. Make a copy of all the puzzle piece movie clips and assemble them correctly on the Stage. Select all of the pieces and change their alpha values to 0% in the Property inspector. Give each one an instance name that matches the actual puzzle pieces: hitarea1 for pp1, hitarea2 for pp2, and so on (see Figure 4).

Figure 4. Giving the hit areas instance names and setting the alpha values to 0%

Now that you have set up the hit areas, you also need an indication of where the user can place the pieces. In the background, draw the outlines of the pieces so that the user can see where the pieces can be placed. For this puzzle, make a gray outline of each piece and number them from 1 to 5, corresponding to the stages in the life cycle of a frog. Place the outlines behind the invisible hitareas on the Stage. Figure 5 shows the final assembly.

Figure 5. Setting up the hit areas

© 2006 Snert Studios

Page 2 of 6

Previous Page

Next Page