jigsaw puzzle

Copyright 2000-2010 ActionScript.org. All Rights Reserved. Your use of this site is subject to our Privacy Policy and Terms of Use.

(Reply to this comment)







vicky Rating: said this on 08 Jun 2009 5:19:07 AM C ST

am still a beginner, please can u explain step by step how u were able to create your ownpuzzle.

Nora Parra Rating: said this on 27 Nov 2008 2:57:32 PM C ST

Please...dón't understand how or where to put the pseudocodes on flash CS4, I'm trying to make a puzzle,but don't know where is the plase where I supposed to write the code...

Thanks.

lee Rating: said this on 04 A ug 2009 11:02:02 PM C ST

hey thats a nice application, i was wondering if there is anyway to get a wrong message if get the piece on a wrong place in the puzzle??? it seems to be a little difficult

Andrew Rating: said this on 06 O c t 2009 4:45:39 AM C ST

Another jigsaw game tutorial but in flex . <a href='http://askmeflash.com/tutorial_m.php?p=tutorial&tid=3'>http://askmeflash.com/tutorial_m.php?p=tutorial&tid=3</a>

Mishkat Rating: said this on 16 Mar 2010 1:24:50 PM C ST

It's a nice app. I'm so glad after I got it..........

alison Rating: said this on 15 A ug 2010 9:50:36 PM C ST

I'm having a lot of trouble with the code, your tutorial wasn't very descriptive. :S

PSD TO HTML Rating: said this on 28 O c t 2010 4:53:47 AM C ST

Very Nice Read! Looking forward to more on this subject Bookmarked the blog. Was just curious ifanybody could point me to some related material. Thanks in advance.

Rate this article and leave a reply:

Rating: * Poor Excellent

Your Name *: Email (private) *: Website:

Please copy the characters from the image below into the text field below. Doing this helpsus prevent automated submissions.

Security Code:

Submit

22/11/2010 Jigsaw Puzzle

actionscript.org/resources/…/Page1.html 3/3



them directly onto the ‘container’ movieclip stage and aligned them with ‘joined_mc’.

10. The ‘off-stage’ layer contains a text-box placed at a position so that it will be off stage and therefore

invisible when the puzzle is played. I have made it into a dynamic text type box with the instance name

of ‘no_of_pieces’.

11. The ‘axns’ layer contains some but not all the action! Two variables ‘n’ and ‘success’ have been

initialized on this layer. The variable ‘n’ takes its value from the ‘no_of_pieces’ text-box. I have assigned

random positions to the p1, p2, p3 and p4. The code is as follows:

n = parseInt(no_of_pieces.text);

success = 0;

for(i=1;i<= n;i++)

{

this["p"+i]._x = Math.random()*180;

this["p"+i]._y = Math.random()*200;

this["p"+i]._xscale = 50;

this["p"+i]._yscale = 50;

}

12. Click on the start button and go to the actions panel. The code attached is as follows:

on(release)

{

for(i=1;i<=n;i++)

{

this.joined_mc["p"+i]._visible = false;

}

}

Basically this code just makes ‘joined_mc’ disappear.

13. Click on p1 through p4 and you’ll notice that all of them have just on line of code

#include "ascript.as"

14. Now go to the project folder and open the ascript.as.txt file. In this file, I have stored all the code for

handling the puzzle pieces. It looks a bit lengthy but the jist of the code is this:

a) When the user clicks on a piece, start dragging the piece.

b) When the user releases the mouse, stop dragging.

c) Check the target of the dropped piece. If it is the corresponding invisible piece, then make the

corresponding piece of the joined_mc visible and increment the value of the variable ‘success’.

d) Else send the piece back to a random position.

e) If the value of success equals the value of variable n, make the ‘puzzle’ movieclip invisible and play

the animation.

f) The ActionScript for the above pseudocode is as follows:

on(press)

{

if(this.hitTest(_root._xmouse,_root._ymouse))

{

this.startDrag();

}

}

on(release)

{

stopDrag();

name = this._name;

That’s it. The puzzle is ready. To change the puzzle you just have to swap the instances of all movieclips

in the container movieclip with the new instances, put the #include action on each puzzle piece, type the

value into the ‘no_of_pieces’ text box and swap the anim movieclip on the main timeline with the new

one.

Spread The Word

del.icio.us it Digg this Furl Reddit Yahoo! this! StumbleUpon

Google Bookmarks Live Favorites Technorati

Related Articles

Flex 2 and Flash 9 Together?

9 Responses to "Jigsaw Puzzle"

Art Redhead Rating: said this on 12 O c t 2007 9:41:59 AM C ST

Learned from the article but when trying to use found that I was unable to use for over 4 pieces.

jdougan273 Rating: said this on 31 Jan 2008 3:23:43 PM CST

Very nice tutorial. I was able to use more than 4 pieces when I tried it, it's just that you needto make sure to update the instance names, add new ones as needed foe new pieces, and forsanity sake try to keep everything on it's own layer (adding new ones for newpieces). Thanks!



Advertise | About us | Site map | Syndicate | Search site | Mailing list | View Authors | Become an Author

Featured Jobs

Flash Developer - LOCAL ONLY Irvine, USA

- More ActionScript, Flash and Flex jobs in theEmployment Section.

- Advertise a job for free

Recent Articles

Say "Good Bye" to EventDispatcher and "Hello" toNResponderBy Diney Bomfim

Creating Full Flash Websites with SPAS 3.0: Part 1By Pascal ECHEMANN

Building database driven applications using Flash, PHPand MySQL.By Maurice Price

I’m a Web Developer. Do I need Adobe CS5?By Gerard Mason

The word is 'interpolation'By Alex Nino

Search

Home Tutorials Forums Articles Blogs Movies Library Employment Press

Supuneet Bismil

View all articles by Supuneet Bismil

Home Tutorials Flash Intermediate Jigsaw Puzzle

Jigsaw PuzzleEmail to Friend Print Article

By Supuneet Bismil | Published September 9, 2005 | Intermediate | Rating:

Page 1 of 1

Tutorial details:

Written by: Supuneet Bismil

Difficulty Level: Intermediate

Requirements: FlashMX

Download FLA

OBJECT ORIENTED PROGRAMMING IN FLASH

1. The aim of the project is to demonstrate the object oriented capabilities of Flash. I have created a

simple four piece jigsaw puzzle, programmed with ActionScript. The coding is done in such a way that

new puzzles can be created using the same file, with very little effort.

2. To view the final product of this project, open the puzzle.fla file in Flash MX, and then go to File –

Publish Settings and check the Windows projector box (if you are using Mac check the Mac Projector

box). Then click on the publish button. Open the folder where you published the file and view the

puzzle.exe file.

3. Now for the project. Open the file ‘puzzle.fla’ on the CD-ROM.

4. Now open the library (Window-Library or Ctrl+L). I have arranged all the graphics elements, buttons

and sounds required for the project in folders.

5. If you look at the timeline, you’ll notice only two layers on the main timeline:

a) puzzle: this layer contains an instance of the movieclip symbol ‘container’.

b) anim: this layer contains an instance of the movieclip symbol ‘xmastree_anim’. I have added an

action to this movieclip to make it invisible initially.

6. Go to the library, open the movie_clips folder and double click the ‘container’ movieclip. This opens

the ‘container’ movieclip on the stage. I have organized the timeline layers into three folders and two

separate layers.

7. Open the ‘static’ folder and you’ll see that it contains layers for the text elements, start button, a

frame for the puzzle and also a layer for holding the movieclip ‘complete_puzzle’. I have given the

‘complete_puzzle’ the instance name ‘joined_mc’.

8. The ‘pieces’ folder contains layers one each for the pieces in the puzzle. The pieces are just dropped

anywhere on the stage. I have given them instance names of p1 through p4.

9. For the ‘inv_pieces’ folder, I just copied the pieces from the ‘complete_puzzle’ movieclip and pasted

Categories

Tutorials (413)

Flash (379)

Flex (23)

Articles (86)

Best Practices (26)

Product Reviews (38)

Third Party (16)

Press Releases (353)

The Community (8)

Recommended Links

Flash Templates

Flash Gallery

Flash Menu

Flash Audio & Video

PhotoSight.com - share your photography



jigsaw puzzle

Documents