Objectives:

  • Use ActionScript to Make Shapes Draggable

Making Shapes Draggable

In this lesson you will learn to make your shape draggable. The user will be able to click and drag your shape anywhere across the screen. A lot of Flash games use this principle. You can do things like change a figures clothes, make puzzles, even build cities and structures.

Here's an example:

Make A Disguise.

And another example:

The Hat Guy.

There's two important things to know about this: First, The shapes need to be movieclips, and two, the movieclips need an "invisible button" that has ActionScript attached to it. Let's say you want to draw a face and then make draggable shapes out of all the hair, mustache, and other parts. This is how you do it:

  1. Start by drawing your starting shape. In my case it is the drawing of a face.

  2. Convert it to a graphic symbol and lock the layer.The face itself is not going to drag, so we don't need to worry about programming it.

  3. Add a new layer and name it whatever your draggable shape will be. Let's say "hair."

  4. Draw a hairpiece over the head so that it lines up correctly with the scalp.

  5. Convert the hairpiece to a graphic symbol.First, select the shape and then: Insert -> Convert to Symbol -> Graphic.

  6. Name the graphic symbol "hair" or "hair graphic" if it helps you remember what type of symbol it is.

  7. While the hairpiece is still selected, convert it to a Movieclip symbol as well.Insert -> Convert to Symbol -> Movieclip. Give it a name like "hair movieclip" or "hair mc."

  8. Insert a new button symbol. This is going to be an "invisible button" meaning all the frames are empty except for the "hit" state. Insert -> New Symbol -> Button. Give it a name like "hair button".

  9. This part is a little tricky: Make sure your library is open, so you can see all the symbols you have made. Drag the graphic symbol you made from the library onto the stage. Now you will see a dot in the "up" state of the button. Click and drag the dot to the far right so that the dot is now in the hit state.

  10. Double click the movieclip symbol in your library to go into editing mode.

  11. Drag the button you made in the library right on top of your movieclip symbol on the stage.

  12. Right-click on the button and select actions.

  13. You will see that the ActionScript window will be open. Copy and past this sample code into the ActionScript window:

    Sample code

  14. Test your movie to see if the drag feature is working.

Assignment
  1. Make your own draggable shapes project using at least 5 draggable movieclips. Examples: a puzzle, a figure with costumes, a face with features, an apartment with furniture, a building.
  2. Repeat the process so that you have completed a total of three draggable shapes projects.


<< Back to Skyline