DRAG AND DROP GAME

MAKE A DRAG AND DROP GAME WITH RESPONSES

STEPS:

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.

4. Once happy with your background elements, lock the layer by clicking on the dot underneath the lock on the background layer.

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.

6. Once you have drawn your objects to be dragged, select each one individually and select Insert > 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.

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.

9. Convert what you have drawn into a movie clip symbol by selecting it and choosing Insert > Convert to Symbol. Ensure you click the Movie Clip behaviour.

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.

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 > Keyframe. In this keyframe, draw what you want the user to see when they get the object in the correct place.

12. Add a stop action to each keyframe by clicking on each keyframe in the timeline and typing stop(); in the Actions Panel.

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.

14. Select one of the movie clips that will be draggable.

15. Open the Actions Panel by pression 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);

}

}

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.

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 you’ve 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.

20. 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.

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.

23. Tick the file formats you want and click on the Publish button.