A Drag and Drop Jigsaw puzzle Part 1: Photoshop

macabretoothsomeSoftware and s/w Development

Jul 4, 2012 (4 years and 11 months ago)


Drag and drop jigsaw puzzle- 1

A Drag and Drop Jigsaw puzzle
Part 1: Photoshop
Open the picture you want to use in Photoshop. Using the lasso tool, make a selection that resembles a
piece of a jigsaw puzzle. You will need at least four pieces, so bear that in mind when determining the
size of your initial selection.

Once your selection is made, go to Edit>Cut and it will disappear from the original image. Go to
File>New, leave the default size selection intact, as it defaults to the size of the image on your clipboard.
You will, however, need to be sure you have a transparent background for this new document. This is
vital for later use in Flash.

In the new canvas, go to Edit>Paste, and your puzzle piece will appear in this new place. You will save
these pieces as a file type that permits the transparency of the background to stay intact. Go to
File>Save as, navigate to your folder, and save the first piece as puzzle_1. Make sure to select a GIF as
Drag and drop jigsaw puzzle- 2

the type of file you will use. A PDF will also maintain transparency, but a GIF is generally smaller in size
and will work just as well.

Return to your original picture and make a second selection. You must only be careful when drawing
your selection through the picture. When you make the selection for the part that now borders blank
space, you need not be too particular. You can fix that more easily than you can make a precise

Again, cut the selection from this image, make a new file with a transparent background and paste the
contents. You will see that there is extra white space on the side of the puzzle piece. Use the magic
wand tool, select it and delete it. After that, proceed with saving the file.

Drag and drop jigsaw puzzle- 3

Make sure you save it as puzzle_2.gif.
Repeat these processes to create puzzle pieces 3 and 4. When you are done with this, open Flash, make
sure you are in an ActionScript 2.0 document and import your freshly made puzzle pieces to your library.
Part 2: Flash

Import your puzzle pieces to your library by selecting File>Import>Import to library. Navigate to your
saved pictures and bring them into your document. In much the same way you made the drag and drop
elements work in your Mr. Potatohead project, you will make a new layer for each piece, make a movie
clip and a button from each gif file, place the button inside the movie clip and script the button.
Note, if your puzzle pieces appear larger than they should be, resize your stage by selecting
Modify>Document and changing the dimensions.
Rename layer 1 and call it puzzle 1 or P1. Drag puzzle_1.gif from the library to the stage. Convert it to a
symbol by selecting Modify>Convert to symbol or pressing F8. This will be a movie clip. For ease in
naming, simply call it p1mc. Make sure you select Movie Clip as the type of symbol you wish to create.
Once that is done, delete the movie clip from the stage. Locate the file puzzle_1.gif in the library a
second time. You will convert this to a symbol, as well, but this one will be a button called p1bt. Delete
that from the stage, as well.
Getting Button and Movie Clip Ready for Object Actions
Drag p1mc (Movie clip) from the Library onto the stage. Double click the p1mc image to send it to the
editing window. Drag the p1bt from the Library onto the stage on top of the movie clip. The properties
panel will reflect that a button is
selected. In the upper right corner of
that panel, click the arrow icon to
open the ActionScript window.
The Object Action Script must be
applied to the Button. The Button is
the only object that a mouse action can be applied to. However the Button must be inside a movie clip,
otherwise other objects on the stage will be moved with the Button.
Drag and drop jigsaw puzzle- 4

Creating the Script
Create this script by expanding the Global Functions selection, then the Movie Clip Control selection.
When the list of options appears, click On. This will write your script to the right and generate a
subsequent list of options. The Action Script is asking you, “On what?” Select press. Your script should
look like this:
on (press) {
Place your cursor at the beginning of line 2 (before the bracket), then select startDrag from the same list
on the right. Once that script is inserted, the program asks for further guidance. To set this so that
there is no absolute destination, type this,true inside the parenthesis without spaces. Your script should
look like this:
on (press) {
You’ll notice that the script is appearing in blue text, but the punctuation marks are in black. So far, you
have told this object on your stage to react when clicked and dragged. It will go where the user drags it.
The problem is that there is no stop point. You have to tell the object to stop following the mouse
around when the mouse button is released. To make that happen, click into the last line of scripting
below the bracket. This should be on line 4 of your ActionScript window.
Select On once again, but this time, instead of choosing press from the subsequent list, you will select
ReleaseOutside. Now, to go the beginning of the next line (line 5) just before the bracket and click to
move your cursor there. You have to indicate what you want the object to do when the mouse button is
released. On the right, find the command stopDrag and double click it. Your script should now read:

on (press) {
on (releaseOutside) {
Close the Action Script window. You are still in editing
mode for the p1mc symbol. Using the buttons at the top
left of the stage, return to Scene 1.

Go to Control>Test movie and see if your button is moveable.
Creating the Remaining Moveable Objects
Each of the remaining puzzle pieces is made in the same way. Each exists on its own layer and contains
the same scripting. Be sure to use a new layer for each puzzle piece.
When all parts have been scripted, publish the file as an .swf file.