Using Sliding Puzzle AS3

The following are authoring parameters that you can set for each Sliding 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.

gridSpacing is a number, indicating the space in pixels, that will be set between the pieces. The possible values are 0-10. The default value is 1.

emptyCorner indicates the piece that will be hiden. The possible values are: "LT" for left-top, "RT" for right-bottom, "LB" for left-bottom, and "RB" for right-bottom. The default value is "RB".

hintStyle indicates the style of the hint numbers. The possible values are: "none", "count" and "matrix". "none" 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: "full", "short" and "none". "short" by default.

finishMixAt indicates the corner that the mix will be finished at. The possible values are: "LT" for left-top, "RT" for right-bottom, "CC" for the center, "LB" for left-bottom, and "RB" for right-bottom. The default value is "LT".

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

Creating an application with the Sliding Jigsaw Puzzle AS3 Component

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

To create an application with the Flash SlidingPuzzle 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 Sliding Puzzle AS3 Component to render the picture.

1. Drag a SlidingPuzzle 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".