Click here to open FLASH: Jigsaw file
The file above is very similar to the elephant file further down the page. The red circle is paired with the white square. The instance of the white square being called space1. The instance of the red circle being called piece1. In the elephant jigsaw below there is also a space2/piece2 space3/piece3 etc. In the above file the red circular is a dragable object. The instance of the circle is 85 per cent the size of the original symbol in the library. The reason for this is so that there is a visible jump into the square hole. The only code of any interest is embedded inside the red circle movie clip. We need to have a movie clip as it will not work if the instance is not named piece1 and we cannot name an instance of a button. The button is nested inside the movie because if we do not have a button we cannot drag the red circle. In this case the button does not contain any visible element, but this is not important. What is important is the code attached to the dragable button which is as follows:
| on (press) { startDrag ("", false, 21, 21, 529, 129); setProperty ("", _xscale, 85); setProperty ("", _yscale, 85); } on (release) { if (substring(getProperty("", _name), 6, 2) eq substring(getProperty("", _droptarget), 7, 2)) { setProperty ("", _x, getProperty("/Space" add substring(getProperty("", _name), 6, 2), _x)); setProperty ("", _y, getProperty("/Space" add substring(getProperty("", _name), 6, 2), _y)); setProperty ("", _xscale, 100); setProperty ("", _yscale, 100); stopDrag (); } else { stopDrag (); } } |
It is worth noting that you can have as many jigsaw pieces as you like as long as every piece has an associated space. The ActionScript above does not change, as long as you name the individual instances as pairs: space1/piece1 space2/piece2 etc. This is why it may be advantageous to have a single invisible button, as the same button (incorporating the same ActionScript) may be used repeatedly.
All the references in the script to scale are not essential. They are there to enhance the visual effect only.
Simple Jigsaw
Click here to open FLASH: Jigsaw 1st male file
Click for a detailed description of how this jigsaw is made.
Animated Jigsaw Piece
Click here to open FLASH: Jigsaw 2nd
male file
After you have opened the file you will need to save it to your local PC
or the student folder on the server before you can edit or test the movie.
From a design point of view the most important difference is that once the jigsaw piece has been placed into the drop target you cannot remove it. This is achieved by playing two movie clips which are triggered by placing the jigsaw piece into the drop target:
- The first is that the dragable object goes to frame two and stops. Frame two is empty so there is no longer an object to drag, nor is there a visible object.
- The drop target is also a movie clip and plays. This animation contains an object which looks like the original and is not dragable. The animation goes to the last frame and stops.
Below is the script which is attached to the dragable button:
|
on (rollOver) { tellTarget ("_root.SoundClick") { gotoAndPlay (1); } } on (press) { startDrag ("/Male"); } on (release) { stopDrag (); if (_droptarget eq "/MaleShape") { tellTarget ("/MaleShape") { gotoAndPlay ("2"); } tellTarget ("/Male") { gotoAndStop ("2"); } } } |
Completion Movie Clip
Click here to open FLASH: Jigsaw 2
piece file
This jigsaw has a sequence which plays when all the pieces are in place. This is achieved in the action script.
Click for a detailed description of how this is done.
Reset Button
Click here to open FLASH: Jigsaw 2
piece & reset
This jigsaw also has a reset button.
Timer
Click here to open FLASH: Jigsaw
2 piece & reset & timer
This jigsaw has a timer.
