Flash CS3: A Jigsaw Puzzle in ActionScript3

Page 1 of 2

A Jigsaw Puzzle in ActionScript3

In this lesson we will create a jigsaw puzzle from a photo.
1. Look at the girl puzzle at http://www.helloworld.com/Flash/example/girl-puzzle.php
2. Download the two files, PuzzlePiece.as and
PuzzleGame.as and save them to the same
location (a folder or the desktop.)
3. Start a new ActionScript3 movie and save it as
puzzle.fla, also in the same location.
4. Import a photo to the stage and break it apart
(Ctrl+B or from the menu: modify, break apart.
5. With the pencil tool on the smooth setting, and
using a hairline setting for the line draw lines
through the picture to make it a puzzle. Make sure that you break the puzzle up completely by extending the
lines past the edge of the picture. Do not use swirly lines that might make very tiny pieces.
6. After the lines have been drawn on top of the
picture, you will be able to select each piece by
single clicking it. Click each section and convert it
to a movie clip (F8) .
7. Name the first piece Piece0 (Capital P)
8. Select Export for Actionscript. (You may have to
click Advanced to see this option.)
9. The base class must be PuzzlePiece. Click the
green check mark to make sure that the base class
is found.
10. Name the instance on the stage piece0 (lower
case P.)
11. Continue until you have done this for each piece
naming them Piece0, Piece1, with the instance
name piece0, piece1, etc.
12. Double click on one of the lines that extends past
the edge of the picture.
13. Make this into a movie clip and name the instance
lines.
14. Double click on lines and draw a rectangle with no
fill around the picture to make a border. After you
draw the border, you can remove the bits of line that extend past the border.
15. Add a button and name it btnScramble.
16. Add a text box. Select dynamic text, then name the textbox txtMessage.
Copyright Hello-World.com all rights reserved worldwide.

Janet E. Joy

Flash CS3: A Jigsaw Puzzle in ActionScript3

Page 2 of 2
17. Click on the stage so that nothing is selected and you can see the properties of the document. Fill in
PuzzleGame as the document class. Click the green check mark to make sure it is OK.
.
You can now run the program and press the button to play the game.

Debugging
If you followed the directions your puzzle should work. If your program does not work check these until you find the
problem.
1. It is case sensitive! You should have btnScramble, txtMessage, lines, piece0, piece1, etc. on the stage
2. If nothing happens, you probably have not named btnScramble correctly.
3. If there is an error message it may say that it cannot find txtMessage. Make sure that you named it correctly.
4. If the error message says that a piece such as piece5 does not exist, check that you did not skip a number or
spell one of the names wrong.
5. There can be NOTHING on the stage but the pieces, lines, btnScramble and txtMessage. Even one tiny dot will
cause the movie to fail. If that happens, create a new layer and move the pieces to the new layer using shift +
CTRL +V to paste them in the exact same spot. Hide the new layer until you find the extra line or dot that is
causing the problem.

Copyright Hello-World.com all rights reserved worldwide.

Janet E. Joy