Creating Drag and Drop puzzle in Flash

Development work covered during lesson
Today we created a drag and drop puzzle for our IMP in Flash. To begin with we opened up the picture we wanted in Photoshop so that we could edit it, in order to make sure that  it was suitable for the Drag and Drop puzzle. After we had imported the picture we cut it up into four main pieces by selecting the cut tool on the left hand side. There was no guidelines or templates that were available for us to use for this section of the activity so therefore I had to use my own initiative when deciding what I was going to do with the picture in order to make it suitable for the Drag + Drop puzzle. I started off by using the cut tool to cut around the top left corner of the picture by clicking the top left hand corner and dragging the box around the section I wanted to cut. I then put the mouse back to the original cursor so that I was able to click the 'edit' tab at the top of the page and then select cut. After I did this the top left corner that I had highlighted disappeared and then I opened a new file in Photoshop by clicking the 'file' tab and then selecting new. This opened up a new photoshop document which I then pasted the first section of my picture on by clicking the 'edit' tab and selecting 'paste'. A small box then appeared in the centre of the page where I had to give a name for the photo, so I gave it an appropriate name 'Topleftcorner'. Lastly, I saved the filed by going to the 'file' tab at the top of the page, clicking save as and then saving it my project folder where all of my other files for my IMP were located. I then had to repeat this process for the other three sections of my picture in order to ensure that I had done everything I needed to do before I could start creating the Drag and Drop puzzle in Flash.


After I had completed editing the picture and I had saved all of the different sections I could then begin the next  step of creating my Drag and Drop puzzle. Firstly I opened up Flash and selected the Action Script 3.0 option which was the same application I have used when creating my IMP. Next I had to create the object which I was going to use for my drag + drop puzzle by importing each of the four pictures to the document. I started this by going to the file tab at the top of the page, clicking import, import to stage and then opening the the first picture that I wanted to upload which was 'topleftcorner' and I then repeated this for the other four sections of my picture. When doing this it was very important that I imported the pictures the the correct frame on the correct layer otherwise my puzzle would not have worked properly. I also made sure that all of the pictures were all the correct size by clicking on each individual picture, going to properties and then I set them to 150 by 150 as I thought this was the most suitable size for them. Next I converted all of the four pictures into symbols by clicking F8 and giving them each appropriate names. Furthermore I also had to make sure that the drag down box was selected for each of the pictures to ensure that they would work properly and then I clicked 'OK'. After that I changed the instance name of each of the pictures to ensure that they would work properly. I did this by clicking the picture, going to the properties tab on the right side of the page and then I named the first picture 'burger_mc', the second picture 'burger2_mc' and so on. It is really important to give the pictures these names as it helps to ensure that they work properly and they do everything they are supposed to do. Next on the timeline I inserted a new layer and called it 'actions', and then right clicked on the first frame and clicked 'actions'. I copied the code that was in the drag + drop tutorial and pasted it into the box that appeared. Once I had done this my drag and drop puzzle was completed so I clicked CTRL + Enter in order to test it to see if it was working correctly. Lastly, I added an unload button so that the user could exit the puzzle by going to windows, common libraries and then buttons.


How the development work fitted into the client brief
The drag and drop puzzle fits into my client brief as it makes it a lot more interactive and enjoyable for the user. It also contains an unload button so therefore it helps with the navigation of the IMP. Below is the section of the client brief that it fits into:

'As well as that my front end must also be interactive in order get the user involved and make the IMP a lot more enjoyable.  I am going to add buttons to each page so that the user can navigate them around the front end a lot easier and I will also make the videos more interactive by adding a skin which includes various different buttons they can click depending on what they want the video to do. I will also make my front end interactive by including a drag and drop puzzle as well as a scratch game which are related to the theme that my IMP is about. A drag and drop puzzle is a simple game where the user can pick up puzzle pieces using their mouse and then drop them into a box in order to make a picture.  This is quite a fun game and will help to make my IMP a lot more exciting and will also help to portray the message of the IMP a lot more effectively.'

New skills table reference number
5