Secret Messages

Making a Puzzle Template

Open Flash and create a new document
Open the Properties Window if it is not already opened
Click on Size to change the document's size:
Change the document size to 650 x 400
Select the Rectangle Tool
Select No Stroke
Select any fill color
Draw a rectangle of any size then select the shape with the Selection Tool and adjust properties in the Properties Window. Make the rectangle 550x300
Click on frame two and insert an blank keyframe (F7)
Click on frame 1
Select the lasso tool
Cut out a puzzle piece from one corner of the rectangle
CTRL+click or Right click on the piece and convert it to a movie clip. While the dialog box is open, name it piece0
Click on Export for Actionscript
In the Properties Window to name the instance a0
Press +X to cut the piece, then click on frame 2 and Paste-in-Place (-Shift-V). (This instance serves to record the position of this piece in the final puzzle. When the Flash movie is published, a script will use this information to make a real picture-bearing puzzle piece, and then will delete this instance).
Repeat the cutting-out process until you've dissected the entire rectangle into movie clips. Remember to name each piece piece0, piece1, piece2, etc.. Do not make more than 20 pieces.
Insert a new Symbol
Name it something like startScreen
Make sure you are in Scene 1
Click on frame 1
Open Library ( +L) and drag an instance of your startScreen movie clip into frame 1. In the Properties Window adjust position
Also in the Properties Window name the instance ss
Double click on the movie clip, you should now be inside startScreen
Add content including a button (you can make your own or find one in Common Libraries). You need to name the instance of your "button" startBtn
Click on scene 1 to get out of your movie clip
Add a new layer
Double click on the layer name and rename it ACTIONS
Click in frame 1 of the ACTIONS layer and open the Actionscript window by clicking on the arrow in the Properties Window:

In the Actionscript window add:

stop();
_root.ss.startBtn.onRelease = function() {
    this._visible = 0;
    _root.gotoAndPlay(2);
};

Insert a new Symbol and name it like this:
Save your movie as puzzleTemplate

Adding Sound

Open Audacity and create two wav files, one for pickin up a puzzle piece and one for placing it. If creating your own sound files, save them in your work folder in your folder. (You can also look in demos_and_samples:sounds).
Import sounds to Flash:
Set the linkage to Export for ActionScript (CTRL+click on the sound in the library)

Your Puzzle Content

You have to create 2 swf files. Either or both can be animations. Think of one as your puzzle and one as your main content (the swf that will be displayed after the puzzle is completed). A faded version of your main content will be displayed under where the puzzle pieces should be placed.

If your puzzle is a static image, you will copy the image (the puzzle image) and place it in the first frame of main content.

puzzle.swf—More Information

Create a new Flash document.
Open the Properties Window if it is not already opened
Click on Size to change the document's size:
Change the document size to 550 x 300
Select the Rectangle Tool
Select No Stroke
Select a fill color for your background (if you leave it white, you will not be able to see the edges of the puzzle pieces)
Draw a rectangle of any size then select the shape with the Selection Tool and adjust properties in the Properties Window
This movie can be a static image or an animation. Either way, remember to use layers.
Save file as puzzle in your work folder, but either Export the swf or create an swf (+RETURN). In either case, you will have to move the swf over to your web folder.

main_content.swf—More Information

Create a new Flash document.
Open the Properties Window if it is not already opened
Click on Size to change the document's size:
Change the document size to 550 x 230
If your puzzle.swf is a static image copy all the layers (+C)
Click on frame 1 and paste in place (+SHIFT+V)
Insert a blank keyframe at frame 10
Create a new layer
Name the layer ACTIONS
Click in frame 1 of the actions layer and add the following in the actioscript window:
```
stop();
```
Create your main content in frame 10. If you create an animation in the timeline, on the last frame add another script:
```
this.gotoAndPlay(10);
```
If your animation is inside a movie clip on frame 10 then include this script:
```
stop();
```
Save file as main_content in your work folder, but either Export the swf or create an swf. In either case, you will have to move the swf over to your web folder.

.as File

This movie uses a class file. Remember the empty movie clip called PuzzlePieceSymbol? This is the script that makes it work. These files are text based and live in the same folder as your flash files.

Open a new actionscript file

Paste the following in the blank document:

  class PuzzlePiece extends MovieClip {

    // static (class) properties set by script in the .fla 
    static var puzzleContent : String;
    static var upClick : Sound;
    static var downClick : Sound;
    static var tol : Number;
    static var pieces : Array; 

    // static (class) properties for internal use
    private static var maxDepth : Number = 100;

    // object properties
    var templatePiece : MovieClip;        // original piece on stage
    var mask : MovieClip;                // the mask for this clip
    var maskPiece : MovieClip;            
    var holder : MovieClip;
    private var _index : Number;
    private var draggable : Boolean = false;  // whether piece is draggable


    public function PuzzlePiece() {
    }

    function init(templatePiece : MovieClip, index : Number) : Void {
        _index = index;    

        // make a holder movie clip, and load content into it 
        holder = this.createEmptyMovieClip("holder", 1);

        holder.loadMovie(puzzleContent);

        //create a mask, and attach the puzzle piece to the mask
        createEmptyMovieClip("mask", 2);
        mask.attachMovie("piece" + index, "piece" + index,  index);
        maskPiece = mask["piece" + index];    // reference to the mask piece
        maskPiece.number = index;        // the piece knows its own number
        setMask(mask);

        // move the puzzle piece to its proper position
        this.maskPiece._x = templatePiece._x;
        this.maskPiece._y = templatePiece._y;

        // remove the original piece
        templatePiece.swapDepths(99);
        templatePiece.removeMovieClip();

        // add this piece to the array of pieces
        pieces.push(this);

        // update MaxDepth
        maxDepth = Math.max(maxDepth, this.getDepth());
        
        // assign functions to call on press and release
        this.onPress = pressFunction; 
        this.onRelease = this.onReleaseOutside = releaseFunction;
    }    

    public function toString() : String {
    return ("puzzle piece " + _index);
    }

    private function pressFunction() {
    if(!draggable) return;
    this.swapDepths(++maxDepth);     // bring piece above other pieces
    downClick.start();                // emit click sound
    this.startDrag();                // start dragging the piece
    delete this.onEnterFrame;            // cancel randomization
    }

    private function releaseFunction() {
    if(!draggable) return;
    upClick.start();                // emit a lower-pitched click
    this.stopDrag();                // stop dragging

    // check for connection to neighboring pieces
    var otherPiece : MovieClip;
    var maskPiece : MovieClip;
    for(var j in pieces) {
        otherPiece = pieces[j];
        if(otherPiece == this) continue;        
        if( !this.mask.hitTest(otherPiece.mask) ) continue;     
        if( Math.abs(this._x - otherPiece._x) > tol || Math.abs(this._y - otherPiece._y) > tol ) continue;
        for(var m in otherPiece.mask) {
            maskPiece = otherPiece.mask[m];
            var n = this.mask.attachMovie("piece" + maskPiece.number, "piece" + maskPiece.number, maskPiece.number);
            n.number = maskPiece.number;
            n._x = maskPiece._x;
            n._y = maskPiece._y;
        }
        pieces.splice(parseInt(j), 1);
        otherPiece.removeMovieClip();
    }
    _root.checkForCompletion();
    }
}

Save this file as PuzzlePiece.as in the same folder as yor swf files in your web folder.