Using Jigsaw Puzzle AS3

Flash Jigsaw Puzzle AS3 Component parameters

The following are authoring parameters that you can set for each Jigsaw Puzzle Component instance in the Component Inspector panel:

source provides traditional source parameter functionality of fl.containers package. Gets or sets an absolute or relative URL that identifies the location of the SWF or image file to load, the class name of a movie clip in the library, a reference to a display object, or a instance name of a movie clip on the same level as the component.

sourceRenderAs Defines the way the source will be rendered. Available options are Bitmap and MovieClip. Prefer Bitmap, for better performance, if you're not about to render a movie.

splitHorizontal indicates one of the numbers (horizontal or vertical depending on the picture dimensions), the picture will be split to. This property is applied to bigger value of width and height if it is bigger than splitVertical. Available values are 2 to 36. The default value is 4.

splitVertical is the second resolution value and the multiply with splitHorizontal gives the total piece number of the puzzle. Available values are 2 to 36. The default value is 5.

rotatePieces is a Boolean value indicating if the puzzle pieces can be rotated using the spacebar, arrow keys and mouse wheel. Don't forget to put a notice to your application about functionality of the keys.

shapeStyle indicates the style of the shapes. The possible values are: "classic", "oval", "sqare", "triangle" and "mixed". "classic" by default.

startAfterLoad is a Boolean value indicating if the puzzle shall start with the parameters set in the Component Inspector panel. If it's false a start() command is expected to trigger the puzzle. True by default.

scrollContent is a Boolean value indicating if pictures bigger than the work area will be resized, or a biger scrollable work area will be supplied to cover the size of the picture. False by default.

mixAnimation indicates the style of the animation while mixing pieces. The possible values are: "snap+mix", "mix" and "none". "snap+mix" by default.

You can write ActionScript to control these and additional options for JigsawPuzzle components using its properties, methods, and events. For more information, see JigsawPuzzle Class documentation .

Creating an application with the Flash Jigsaw Puzzle AS3 Component

The following procedure explains how to add a JigsawPuzzle component to an application while authoring.

To create an application with the Flash Jigsaw Puzzle AS3 Component, follow these steps:

a) Importing the picture and converting it to symbol (skip this step if you want to render an external image file).

1. Select File > Import to Stage.
2. In the Import dialog box, select your picture file and click Open. Your picture must appear on the stage.
3. Select your picture, select Modify > Convert to Symbol (or pres F8). In the Convert to Symbol dialog select Movie Clip as Behavior, Top-Left corner as registration, select Export for ActionScript and Export in first frame, enter myPicture in the Class field and click Ok.
4. Delete the picture from the stage or resize it as a thumbnail to give visual idea to your users about the result of the puzzle.

Now you have your picture in your Library panel, marked as Export for ActionScript with Class name myPicture, and you are ready to continue with step b.

b) Setting Flash Jigsaw Puzzle AS3 Component to render the picture.

1. Drag a JigsawPuzzle component from the Components panel to the Stage.
2. Resize the component so it can contain the picture and some free space to be left in order to users can handle with the pieces.
3. In the Property Inspector, enter the instance name myPuzzle.
4. In the Component Inspector, enter myPicture or somedir/somefile.jpg for the picLinkage parameter and numbers between 2 and 36 for splitHorizontal and splitVertical.
5. Select Control > Test Movie.

c) Adding a done listener to the puzzle.

1. Select Frame 1 in the Timeline, open the ActionScript panel, and enter the following code:

   
   import com.somefrogs.puzzle.PuzzleEvent;
   myPuzzle.addEventListener(PuzzleEvent.PUZZLE_DONE, pzlDone);
   function pzlDone(e:Event){ // triggered when the puzzle is done 
   	gotoAndPlay("done");
   }  

   This block of code creates an event handler for the done event that send the player to the frame named "done".