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.

Tutorial

On Fri 7th October I was given the go ahead from my tutors Sally and Jay for my final major project. During this meeting we discussed what I should include on the site and it was agreed I should break the events down to their chosen venues ie Olympic Stadium = Track and Field. Then just pick one or two events from each venue to add on the site. It was also discussed that I look at creating games for the kids to play on the site ie jigsaws, quizzes, to keep them entertained. It was suggested I look at the Blue Peter, Newsround websites and their rss feeds because that is something I could add on my site.

So I intend to go away and look at the things Sally and Jay suggested and work on them at home.