FLASH CLASSROOM - MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

In this tutorial, you will learn how to create a drag and drop style game in Flash where the user receives feedback if they drop the object in the correct spot. An example of this type of game is the Help Old McDonald game that I created for the Switched-On Learning project. In this game, students consolidate their understanding of positional language such as on/in/under/next to by completing the tasks on the Farm Checklist. The first instruction on the checklist is to put the ducks in the pond. I have dragged the ducks into the pond and a tick has appeared in the checklist. As each animal or group of animals is dropped in the right place, a tick will appear next to the instruction. Once all the instructions are checked, the user moves on to a new scene. You can view this game in the gallery section of the Flash Classroom site. To create a similar game, you will need to: - design a background for your movie; - create movie clip symbols of each object you want to be moved in the game; - create movie clip symbols with multiple frames to provide the user with a response; - add instance names to each of the movie clip symbols; - add actionscript to each of the draggable movie clip symbols you create. Lets start creating the game 1. Open a new flash file. 2. Name the first layer Background by double clicking on the text Layer 1 in the timeline and typing background. 3. On this layer, draw any of the elements of your game that do not need to be moved. In my example above, the sky, grass, pond, barn and back parts of the fence were located on this background layer. 4. Once happy with your background elements, lock the layer by clicking on the dot underneath the lock on the background layer.
The Flash Classroom www.flashclassroom.com Tutorial by Kristine Kopelkeemail kkope1@eq.edu.au - Page 1 of 6

FLASH CLASSROOM - MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

5. Create a new layer for the objects you want to be able to be dragged. You can make a layer for each object if you wish, though this is usually only necessary if you are going to animate the objects. On this new layer, draw the objects that are going to be dragged. In my example to the right, I have created my new layer, named it animals and have drawn three different animals that will be able to be dragged. Your file should at this stage look similar. 6. Once you have drawn your objects to be dragged, select each one individually and select Modify > Convert to Symbol. Ensure that you check the Movie Clip Behaviour option. Repeat this process for each of the objects that will be made draggable. Designing the Response for your game In my game, when the user drags the animal to the correct location, a tick appears in the checkbox next to the relevant instruction. This occurs because the actionscript tells the flash player that if the animal is dropped within certain x and y coordinates on the stage, the flash player should display the second frame of the checkbox movie clip. This second frame contains a tick. At this point, you need to think about what sort of response your user will receive when they drop each object into the correct spot. For example, you could make a smiley face appear on the screen or an animation appear. Its really up to you. The instructions over the next few pages however, will show you how to do it with a simple 2 frame checkbox movie clip. You will need to create one of these for each of the draggable objects you wish to be given a response. 7. Make a new layer and name it response. 8. On this layer, you are going to create the movieclip symbols that will supply the user with the response. Draw what the user will see before they have dragged the object into the correct location. In my case, this is an empty square. 9. Convert what you have drawn into a movie clip symbol by selecting it and choosing Modify > Convert to Symbol. Ensure you click the Movie Clip behaviour. The Flash Classroom www.flashclassroom.com
Tutorial by Kristine Kopelkeemail kkope1@eq.edu.au - Page 2 of 6

FLASH CLASSROOM - MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

10.

We are now going to set the movie clip up to have a second frame that Flash will go to when you are correct. To do this, click once on the movie clip symbol you just created and right click to bring up the context menu. From this menu, select Edit in Place. Note: You are now editing the library symbol. You can tell that you are doing this by checking under the timeline. Next to the words Scene 1 will be the name of your movieclip. Once you are finished editing the symbol, you can go back to the scene by selecting the Scene 1 link.

11.

You are now going to add a second keyframe to the movieclip symbol. To do this, click on the next frame and select Insert > Timeline > Keyframe. In this keyframe, draw what you want the user to see when they get the object in the correct place. E.g. In my movieclip, frame 1 contains the empty box, whereas frame 2 contains the ticked box.
Frame 1 Frame 2

12.

Add a stop action to each keyframe by clicking on each keyframe in the timeline and typing stop(); in the Actions Panel. If your actions panel isnt visible on screen, press F9 to open it.

What you have done is created a 2 frame movie clip that will stay on frame 1 until the user performs a task which will make it move to frame 2. In this game, the task will be the user dragging the object into the correct spot. Select the Scene 1 link at the bottom of the timeline to return to the scene.
The Flash Classroom www.flashclassroom.com Tutorial by Kristine Kopelkeemail kkope1@eq.edu.au - Page 3 of 6

FLASH CLASSROOM - MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

Adding an Instance Name to the Response Movieclips Each of the 2 frame movieclips that you create to provide the responses, need to be given instance names. In my example, I have 3 checkbox movie clips. These are checkbox1, checkbox2 and checkbox3. I have given these movie clips instance names that are exactly the same. 13. To give your movie clips instance names, click on each one and type the instance name in the box shown in the left-hand side of the Properties Panel. This is a very important step, if the movie clips dont have instance names, the user will not receive a response. Its Serious Actionscripting Time By now, you should have created a background, a series of movie clips you want to be able to be dragged and a series of movie clips with instance names that will provide the user with a response. It is now time to add and edit the actionscript that will enable this program to work. This actionscript will be attached to the draggable movieclipsin my case, these movieclips are the animals. 14. Select one of the movie clips that will be draggable. 15. Open the Actions Panel by pressing F9. 16. Type or copy and paste the following actionscript into the panel.
on (press) { startDrag(this); } on (release) { stopDrag(); if ((this._x>=76.9) & (this._x<=132.6) & (this._y>=286.4) & (this._y<=337.5)) { _root.checkbox1.gotoAndStop(2); } else { _root.checkbox1.gotoAndStop(1); } }

The Flash Classroom www.flashclassroom.com Tutorial by Kristine Kopelkeemail kkope1@eq.edu.au - Page 4 of 6

FLASH CLASSROOM - MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

17. To make this script work in your game, you need to make some edits. I

have highlighted these in blue bold so it is clear what parts you need to change.

To begin with, you need to change the coordinates that are listed in the if statement. To do this, you need to move your object to the highest top left location you will allow the user to drop the object. (See picture to the right to see the x and y coordinates for the ducks highest left position). Record the x and y coordinates of this location down on a piece of paper. Then move the object to the lowest right-hand location you will allow the user to drop the object and still receive the correct response. Record this second set of x and y coordinates on the piece of paper. You can now edit the x and y coordinate values within the actionscript. Note that the lowest x values and y values are entered first as this line of code says that if the duck is placed at an x coordinate between 76.9 and 132.6 the user will get a response.
if ((this._x>=76.9) & (this._x<=132.6) & (this._y>=286.4) & (this._y<=337.5)) {
Enter the lowest x coordinate here Enter the lowest y coordinate here Enter the lowest x coordinate here

Enter the highest x coordinate here

18. The second part of the script you need to change is the name of the movieclip instance that contains the 2 frames. In the script supplied above, the instance name is checkbox1 change both of the checkbox1 instances above to the instance name you used for your response movie clips. 19. Once youve edited your script, see if it works by selecting Control > Test Movie . If you get a response, you have followed all the instructions correctly, if not, double check that you have copied the script correctly, have entered the correct x and y coordinates and have made sure you have given the response movie clips instance names. To complete your game, add and edit the actionscript for each of the draggable objects. Ensure that you have a response movie clip for each object that is being dragged.

20.

This process can be quite time-consuming but if you put in the effort and a little bit of creativityyou can come up with some great games.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine Kopelkeemail kkope1@eq.edu.au - Page 5 of 6

FLASH CLASSROOM - MAKE A DRAG AND DROP GAME WITH RESPONSES IN FLASH 8

PUBLISH & SHARE YOUR GAME 21. Save your work by selecting File > Save. 22. Turn your flash file into a game that can be played on any computer by publishing it in different file formats. To do this select File > Publish Settings. The box shown below will appear.

14. Tick the file formats you want and click on the Publish button. These files will be saved in the same location you saved your original file. If you want your game to be a standalone file that can be played on Windows or Macintosh machinesensure you check the Windows Projector (.exe) and Macintosh Projector (.exe) format options. CongratulationsIf youre up to here, chances are youve created and published a great game. Dont forget to check out the other great game design tutorials on the Flash Classroom website.

The Flash Classroom www.flashclassroom.com Tutorial by Kristine Kopelkeemail kkope1@eq.edu.au - Page 6 of 6