XtremeSkill.com

                                   Build a jigsaw puzzle game in Flash tutorial

Here we'll learn how to make a Flash jigsaw puzzle game using any artwork you prefer. It is fun, easy, and best of all it’s extendable! This tutorial will show you how to use Flash 8’s filters to make realistic puzzle pieces without using Photoshop effects. This will save you tons of time because you don’t have to render the effects in Photoshop and export each individual piece separately. You will learn how to make the puzzle pieces by masking the artwork, and then applying the Drop Shadow and Bevel filters. The benefit of this approach is you can change the puzzle artwork instantly by replacing the artwork PNG file. The puzzle pieces are randomly placed on the right-hand side and are draggable. As soon the player put it in the proper target (invisible movie clip), it will snap to the right position. When the puzzle is completed, it displays an animation and a button will appear that allows the browser to play again.

1. New document In Photoshop, make a new document 700 x 500px. Find a background image that you would like to use. Here we use a wood table texture background. To make a puzzle game box, first make a rectangle selection and then paste in the puzzle artwork. This is the intro scene of the game.	2. Boxing clever Using the same technique as in step one, create the two sides of the box. Tint the sides with 80% of black. Using the Type Tool, type in the text labels of the box (we also added a barcode just for fun). Then use the Gradient Tool to make the reflection on the box at the top-left corner.
3. Scrambled scene In separate layer group, make a smaller version of the puzzle box. Make one of the boxes upside down. Paste in the artwork and scale it down so the player can use this sample image for reference. Create a black playing board as the guide within which the puzzle should be placed.	4. Define the puzzle size Paste in the artwork and make sure it fits within the playing board. In this tutorial, our puzzle size is 294 x 367px. We will need this measurement to make the puzzle pattern. Now export all your graphics (wood background, board, boxes, and so on) to PNG files.
5. Puzzle pattern The quick and easy way to make the unique-looking puzzle pattern is to do it in Illustrator. First make a rectangle box 294 x 367px, which is the dimension of the artwork. Then use the Pen Tool and draw two different curve lines of the puzzle pattern.	6. Duplicate curve lines Duplicate the vertical curve line to the right side and flip it over. Make sure they are distributed evenly within the box. Now duplicate the horizontal line downward twice. Again, make sure they are distributed evenly. Set the curve strokes to a black stroke with no fill colour.
7. Path finding Now select the box and all the strokes. Go to Pathfinder palette, click on Divide. This will divide the box into different pieces. That’s it. Now we just make 12 different unique-looking puzzle shapes. Save this file – we will need it to make the puzzle pieces in Flash.	8. Flashy work In Flash, create a document 700 x 500px. Import the wood background and lock the layer. Make a new layer, name it ‘graphics’, and place the box in the middle. Create another layer, named ‘button’. Make a button and assign it go and stop at frame label “begin” on mouse release.
9. Game setting Make a new layer named ‘actions’ and assign a stop() event in frame1. Then in frame5 insert a keyframe and label it ‘begin’. In ‘graphics’ layer frame5, insert a blank keyframe. Import the small puzzle boxes, puzzle board and the sample artwork image we’ve created.	10. Puzzle shapes Make a new layer, called ‘invisible pieces’. Copy and paste the puzzle shapes we’ve created in Illustrator (step seven). Select the top-left shape and convert it to a movie clip symbol by pressing F8. Name this symbol ‘shape1’. Repeat this for the rest of the shapes: shape2, shape3, and so on.
11. Puzzle piece one Select all the puzzle shapes and copy them to the clipboard. Create a new movie clip symbol (Apple/Ctrl+F8). Name this ‘piece1’. Now you should be in the symbolediting mode. In the first layer of piece1, import the puzzle artwork PNG file and align the x and y origin to 0.	12. Set mask layer Make a new layer above the artwork. Now press Apple/ Ctrl+V to paste the puzzle shapes (copied in step 11) in the new layer. Keep all shapes selected, align them to x & y = 0. Deselect only shape1, press Apple/Ctrl+X to cut shape2 to shape12. Set this layer to mask.
13. Duplicate puzzle piece Right-click ‘piece1’ and Duplicate. Name it ‘piece2’. Doubleclick ‘piece2’ to edit it. Unlock the mask layer and delete the current shape. Hit Apple/Ctrl+Shift+V to paste shapes2-12. Deselect shape2, cut shape3-12. Select shape and artwork, align the shape x & y = 0. Repeat this for piece3, 4, 5, etc.	14. Set invisible targets Go back to the main timeline. Select the shape1 instance on stage and name it ‘target1’. Repeat this step for the rest of the shapes: target2, target3 and so on. Select all target shapes, go to the Properties palette and adjust the alpha to 0%. This will turn all target shapes to invisible.
15. Proper placement Make a new layer above the ‘invisible pieces’ layer. Drag all the puzzle pieces (piece1-12) from the Library to the stage. Now select the piece1 instance on the stage and name the instance ‘piece1’. Repeat this step and name the rest of the pieces in sequence order: piece2, piece3, and so on.	16. Apply a Bevel Select piece1 MC on stage. Go to the Filters palette and apply a Bevel filter (Blur X: 5, Blur Y: 5, Angle: 45, Distance: 1). Apply a Drop Shadow filter (Blur X: 5, Blur Y: 5, Angle: 180, Distance: 1). This will give a 3D effect to the puzzle piece. Repeat this step for the rest of the pieces.
17. Declare variables In the actions layer, frame5, type in the ActionScript code shown. Here we need two variables: no_piece (number of total puzzle pieces) and success (number of successful piece). A loop condition randomly places all puzzle pieces to the assigned region and scales them to 70%.	18. Swap shop Select ‘piece1’ MC on stage. In the Actions palette, type in the ActionScript code shown. Here we use swapDepths() event to swap the depth of this movie clip to the highest level. This will stop the pieces overlapping. Use startDrag() event to make this clip draggable on mouse pressed.
19. On release Type in the code as shown. On mouse release, we will disable the dragging function. Then there is a if condition: if this droptarget is equal to target1 MC on stage, then this X & Y = target1’s X & Y. Then, it will resize this MC to 100%, disable the button, and add 1 to variable success.	20. Return to random Then there is another if condition: if the variable success is equal total number of piece, it will play frame label “completed”. If the droptarget of this movie clip does not match the target MC on stage, it will then place it back randomly to the assigned region.
21. Copy the code Select the entire code and copy it to clipboard. Now select ‘piece2’, in the Actions palette, paste in the code. Change all reference of ‘target1’ to ‘target2’. Repeat this step for the rest of the puzzle pieces. Be sure to remember to change the target name according to the piece number.	22. Completed frame In the ‘actions’ layer, enter a keyframe at frame 12. In the Actions palette, type in the code as shown above. Here we have a for loop condition that will remove piece1 to piece12 movie clip. This will remove all of the puzzle pieces from the stage.
23. Fade-in final artwork In the ‘graphics’ layer, make a fade-in animation of the final artwork. In frame 22 of the ‘actions’ layer, enter a stop(); event to stop the animation. Make a button and assign the ActionScript to go back to frame label ‘begin’. This will allow the player to play over and over again.