FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2

laborermaizeΛογισμικό & κατασκευή λογ/κού

4 Ιουλ 2012 (πριν από 5 χρόνια και 3 μήνες)

332 εμφανίσεις

FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

By using a few basic tools in Flash, and writing some Actionscript, we can create
a jigsaw puzzle that can be made into a .SWF file.

People can then do the jigsaw by mouse clicking pieces and moving them
around. The puzzle will be a small file size that can easily be emailed to friends.

First we need to get a good picture to use.

If the picture is bigger than normal Flash 550x400 pixels size; then we need to
take it into a photo editor, and reduce it down to around 550x400. In Adobe
Fireworks, we would do this using Modify > Canvas > Image Size (with the
“Contrain Proportions” box ticked), and set the width to around 500 pixels.

Here is a picture that we will be using as our example.





















Once we have our picture around 500x400 pixels in size, we start up Flash CS3.

We need to open a new document, and make sure it is “Actionscript 2.0” :








Make a Jigsaw Puzzle in Flash Page 1 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Once the document is open, we need to change its size to 800x600.

Do Modify > Document and change the pop up window to be like this:



Now we need to bring in our picture, by using “Import”. Do File > Import >
Import to Stage and then find your picture and click on it.

Leave the pop up window set up like below, and click ok:



When the picture comes in, it will be in the top left corner of the “stage” work
area.
Make a Jigsaw Puzzle in Flash Page 2 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Reduce the zoom to around 50%, and move the picture into the middle of the
stage like this:




















We now need to break the picture apart into pixels so that we can cut it up to
make the jigsaw puzzle pieces. Have the picture selected, then Right mouse
click > Break Apart and the picture should get some white dots on it like this:
















( Sometimes it takes a couple of “Break Aparts” to get this to happen) .


We are now ready to cut up our picture into pieces.
Make a Jigsaw Puzzle in Flash Page 3 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

We do this using the Lasso Tool and setting it to Polygon Lasso at the bottom of
the Tools List like this:


Using the Lasso tool can be a little bit tricky. The Polygon Lasso
tool is used by moving the mouse and “dot to dot” clicking points
together to make a shape.

Once we get to the end of the shape, we double click the lasso,
and then part of our picture should turn to faded “white dots”.

We then can move our cut-out piece away from the rest of the
shape as shown below.

To get out of lasso mode, just double click the mouse button.

Also remember that Control-Z can make things go back and be
undone, if we make mistakes.











































Make a Jigsaw Puzzle in Flash Page 4 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Now would be a good time to Save our project. However, make sure that the
type is changed from the default CS3 to Flash8 like this:




















We need to save it as Flash8 to have Actionscript 2 set up, which we will need
later.

Continue cutting up the picture into around 5 to 10 pieces, and shuffle them
around, so it ends up something like this:
















You may need to also do Modify > Document and make your stage larger, but
try not to go past 1000 pixels x 800 pixels. Also use the Eraser tool to remove
any leftover small lines or marks.
Make a Jigsaw Puzzle in Flash Page 5 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Now we need to define each of our puzzle pieces as a “Movie Clip” and also give
the pieces “Instance Names”. We do this one by one for each piece.

Click and select the first piece, then press “F8” function key for “Convert to
Symbol”. On the resulting pop up menu, set it up like this:





Make sure that the Name has no space in it.

Eg. Type “Piece1” or “Piece_1” but do not
leave spaces by doing “Piece 1” . Also make
sure the Type is set to Movie Clip.

The piece should now go into the Library on
the right hand side of screen (Do Window >
Library if it is not showing).










Make a Jigsaw Puzzle in Flash Page 6 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Now for something else important we need to do.
When our Piece1 is selected, in the properties panel bottom left hand corner,
there is an Instance Name box like this:























We need to set the instance name on the properties (for later use by
Actionscript). The easiest thing to do is make it the same name as the Movie
clip, and so we type “Piece1” into the instance name box, and then press enter.

The properties should then look like this:










We now have to repeat this entire process for each puzzle piece:

Select the piece and press “F8” and give it a Movie Clip type and a name like
Piece2, Piece3, etc.

Make a Jigsaw Puzzle in Flash Page 7 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

We then need to also select our piece again, and this time change the bottom of
screen properties panel Instance Name to be the exact same name as the movie
clip, eg. Piece2, or Piece3, etc.

Now would be a good time to Save our project again, but Use Save As
So that it can be saved as Flash8 type, rather than CS3.

Once we have all of our pieces named, we only have to do the Actionscript.

We need to add a new Layer to put the Actionscript into. We make a new layer
on the timeline by doing Insert > Timeline > Layer .

Where it has the Layer on the timeline as “Layer2” double click this name, and
rename it to AS to stand for Actionscript like this:











We now need to be clicked onto frame1 of the AS layer and press the F9 key,
which will open up the Actionscript writing editor window like this:



















Make a Jigsaw Puzzle in Flash Page 8 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Onto this screen we need to type the following scripting commands like this:

Piece1.onPress = function () {
startDrag(this);
}
Piece1.onRelease = function () {
stopDrag();
}
What these commands do is make Piece1 get selected when we press the
mouse on it. We can then move Piece1 around with the mouse button held
down.

When we have finished moving the piece and let go of the mouse button, we
need Flash to release it. This happens in the “onRelease” instructions above.

We now need to repeat the above instructions for all of our other pieces, and so
for a six piece puzzle we end up with this :

Piece1.onPress = function () {
startDrag(this);
}
Piece1.onRelease = function () {
stopDrag();
}
Piece2.onPress = function () {
startDrag(this);
}
Piece2.onRelease = function () {
stopDrag();
}
Piece3.onPress = function () {
startDrag(this);
}
Piece3.onRelease = function () {
stopDrag();
}
Piece4.onPress = function () {
startDrag(this);
}
Piece4.onRelease = function () {
stopDrag();
}
Piece5.onPress = function () {
startDrag(this);
}
Piece5.onRelease = function () {
stopDrag();
}
Piece6.onPress = function () {
startDrag(this);
}
Piece6.onRelease = function () {
stopDrag();
}
Make a Jigsaw Puzzle in Flash Page 9 of 10
FL Make a Jigsaw Puzzle in Flash 8 Actionscript 2.0

Make a Jigsaw Puzzle in Flash Page 10 of 10
(To save time, try and copy and paste the Actionscript from these instructions,
rather than trying to type it all in by hand.)

We now need to use the top right hand “x” to close the Actionscript editor, and
then do a Save As of our project.

At last we are ready to test out our puzzle.

Press Control and Enter and we should get the hand symbol each time we move
our mouse over a piece of the puzzle. To move a piece click the mouse, hold the
button, move the piece and then release the mouse to drop it into position.


























Eventually, if we move the above pieces a little bit more, they should go back
together to form the original picture.

Make sure you do File > Save As and set the Type to Flash8 .


So Congratulations to us, we have made a fun little puzzle and also learnt some
basic Flash Actionscript 2.0 . ☺