Tutorial Flash

FLASH CLASSROOM TUTORIAL - MAKE A DRAG AND DROP GAME IN FLASH CS3

MAKE A DRAG AND DROP GAME
In this tutorial, you will learn how to make a simple drag and drop game in Flash CS3 using Actionscript 3 (AS3). To create this game you will make a series of movie clips and then add some actionscript which will enable each movie clip to be able to be dragged and dropped. The example I will use forthis tutorial is a dress-up game that I created for the Gidgits project. A screenshot of the game is shown below. In this game, users can choose different clothing items and drag them on or off the Gidgit girl. Note that the clothing is on a layer above the girl image so that it always appears in front.

SETTING UP YOUR FILE 1. Open Flash CS3 and select the Flash File (Actionscript 3.0) type. 2.On layer 1, add any elements you want in the background of your game. In my example, the text ‘Gidgits Style’, the girl and the white rounded rectangle shape are located on this layer. These are all of the items on the stage that will not be able to dragged. 3. Name the layer ‘Background’ by double-clicking on the text Layer 1 and typing in the word ‘Background’. 4. Lock the layer by clicking onthe dot on the layer that is underneath the lock icon. 5. Add a second layer by clicking on the Insert Layer button at the bottom of the timeline. Double click on the text Layer 2 and rename your layer Objects. On this layer you will draw or insert all of the objects that you want to be able to drag in the game. Each of these objects will need to be put through the process outlined on page 2 ofthis tutorial.
The Flash Classroom — www.flashclassroom.com Tutorial by Kristine Kopelke—Page 1 of 4

FLASH CLASSROOM TUTORIAL - MAKE A DRAG AND DROP GAME IN FLASH CS3

CREATING YOUR MOVIE CLIP SYMBOLS To make the objects in your game draggable, we need to convert each drawing or imported object into a movie clip symbol. Follow these three steps to convert each object and to give each object aninstance name. 6. Select an object that the user will be able to drag in the game. Once selected, convert this object to a movie clip symbol by choosing Modify > Convert to Symbol (or F8). 7. We are now going to give the object a name. In Flash developers usually give objects a name that ends with a naming convention. If it is a movie clip symbol, it will end with _mc. If it is a button symbol,the name ends with _btn. As all of the objects you want to be dragged are going to be movie clip symbols, the names you should give your symbols should end with _mc. In my example above, I have called my new symbol blueglasses_mc. Name your symbol and select the Movie clip type option. Click OK.

8. Now that you have converted your object into a symbol, we need to give your object an instancename. This is because when we add script later, the script will refer to the instance name of the object. To add the instance name for your new symbol, click on the symbol you just converted and in the Properties panel, type in the name of your symbol in the instance name cell.

Repeat steps 6 - 8 for each object in your game that the user will be able to drag.

ADDING ACTIONSCRIPT TO MAKE THEGAME WORK Flash CS3 is different to previous versions of Flash as it has moved to a new, more sophisticated scripting language called Actionscript 3.0. One key difference with Actionscript 3.0 is that it can’t be attached to movie clips or buttons. All of the script is placed on the main timeline or on the timelines within symbols. Whilst this is a new way of thinking for those that have done Flashscripting in the past, it has many benefits - the main being that in most Flash files all your script is in the one place. This saves time and makes it much easier to troubleshoot. In the steps on the following page, you’ll set up an Actions layer and add and edit the script you’ll need to make your game work.

The Flash Classroom — www.flashclassroom.com Tutorial by Kristine Kopelke—Page 2 of...