header
ask question
Click here to ask Question Now Its free No registration required. Flash, Flex, Flash Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
Bookmark and Share

Tutorial create a simple jigsaw puzzle game in flex.
Posted By : Redni | Posted At: 11/5/2009 3:52:52 AM



Summary:Tutorial to create a simple jigsaw puzzle game in flex.
Requirements: Flex installed, Flash CS.
Project Source files :Tutorial to jigsaw puzzle in flex.zip

Solution: To create jigsaw puzzle Game we need an image which will be divided inti movieclips os shape and size required accourding to design. These movieclips will be used by flex project to display pieces of image randomly and attach mouse events to drag and drop pieces and bind them together to solve th puzzle. Here I am using an mickey mouse cartoon cut into four pieces placed randomly in flex .You can drag and drop them to solve the puzzle.
First of all we need to create flash symbols of or jigsaw puzzle game.

Step 1: Open Flash CS:

Create a new flash file File-->New---> Flash file(Actionscript 2.0).

  • Import the picture into flash stage File--> Import--> Import to Stage
  • Break Apart the Image by selecting image and press CTrl+B or Modify --> Break Apart.
  • Now divide the image into parts as you want it to appear in jigsaw puzzle game.
  • Select each part Press F8 Select Movieclip and name as s1. Similarly s2,s3 and s4 for other three parts.
  • Open Library by pressing Ctrl+L or Window --> Library.
  • There you can see your movieclips are listed as s1,s2,s3,s4 . now right click on each symbol and select linkage as shown in pic:



  • Following window appears :

  • Select the Export for actionscript Box and Export in first frame check boxes.
  • Similarly do the same for other three clips .
  • Generate the swf file by pressing Ctrl+ Enter.

  • Step 2: Creat new project in flex

  • Copy the jigsaw.swf in src forlder
  • Now place four image components on stage
  • In the image tag add mousedown and mouse up listeners like this
  • Add the following function to script inside cdata

    private function dragIt(e:Event):void{
    e.target.startDrag();
    }
  • Final Flex jigsaw puzzle game.

    As you can see that once a image component clicked it starts draging itself by calling dragIt() function and as soon as user releases the mouse the clip is draged by mouse up event.
    Thats all you can extend this application by cutting clips into more complex shapes and adding more functionality as you wish. Source files are here.




    Members Login

    Email  
    Password
    Forgot Password





    New Features

  • Registered users can rate articles.
  • Registered users can accept answers.
  • Subscribe to articles.
  • Subscribe to any Question.

  • This website focus on: Flash | Flex | FMS | RED5 | WOWZA | Flash Media Server | Adobe AIR | ActionScript,Flash Solutions | Flash Question | Flash Answers | Flash Developers | Flash Problem, Flash Help, Flash bugs, Flash workaround | Flash Blog | Flex Question Answers | Flash Forum | Flex Development | Actionscript development | Flash development | Adobe AIR development
    Copyright © 2008 AskMeFlash.com. All rights reserved. Privacy Policy | Terms & Conditions