Tuesday, 11 October 2011

Creating a Jigsaw in Flash

I have browsed the internet for creating a jigsaw in flash and I came upon this tutorial http://www.ilike2flash.com/2008/05/drag-and-drop-jigsaw.html. So I will have ago at following it and have ago at creating my own jigsaw for my site. The first thing I did was to find an image online of the Olympic Stadium in London which I would use as my jigsaw. Once I found the image I imported it to the stage in flash. Then I went to Modify in the menu bar at the top of the screen and scrolled down to Break Apart (cmd key + B). Once I had done this I selected the Lasso Tool from the Tools Bar Menu and began cutting out shapes from the image to make thejigsaw pieces. Once I had cut the jigsaw pieces out and moved them away from the image I selected each piece and converted them to movie clips by going to Modify and scrolling down to Convert to Symbol (F8). I then gave each piece an appropriate name in the properties panel ie piece1 up to piece6 and an instance name of stadium_mc, stadium_mc2, stadium_mc3, stadium_mc4, stadium_mc5,stadium_mc6. Then following the tutorial I created a new layer and called it actions and clicked on frame one and opening up the actions panel by going to window in the menu bar at the top and scrolling down to Actions (alt + F9). Then in frame one of the actions panel I add the following code:

//Array to hold all the puzzle movie clip instances.
var stadiumArr:Array = new Array (stadium_mc, stadium_mc2, stadium_mc3,
stadium_mc4, stadium_mc5, stadium_mc6, stadium_mc7);

//For loop to control the drag and drop of each burger by adding a
//mouse up and d
own to each movie clip.
for (var i:uint =0; i < stadiumArr.length; i++) {
stadiumArr[i].addEventListener(MouseEvent.MOUSE_DOWN, drag);
stadiumArr[i].addEventListener(MouseEvent.MOUSE_UP, drop);
}

//This function drag the movie clips when the mouse is pressed.
function drag(event:MouseEvent):void {
event.currentTarget.startDrag();
}

//This function drop the movie clips when the mous
e is released.
function drop(event:MouseEvent):void {
event.currentTarget.stopDrag();
}


Once this code was added I tested the jigsaw to see if it worked by going to Control in the top menu bar and scrolling down to Test Movie and clicking on that. When I tested the jigsaw it worked so I was happy with the outcome. Below are screenshots of the jigsaw I created.











After creating this jigsaw I had ago at creating another one which I did and I chose to do a jigsaw of Usain Bolt. I did it the same way I did before apart from changing the instance names to bolt_mc and the jigsaw turned out like the one below.



No comments:

Post a Comment