Flash Tutorial: - webwasp.co.uk

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.

The construction of the single jigsaw piece does not have a string or sub string as the round peg in a square hole above. This means that the ActionScript inside the button is simpler to construct but it cannot be repeated without editing the ActionScript each time. There is also a movie clip which plays on mouse roll over and sounds that play.

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");
              }
       }
}

This jigsaw has a sequence which plays when all the pieces are in place. This is achieved in the action script.