Basic Drag-and-Drop Interactivity


One of the fundamental types of interactivity you can add to a Flash movie is basic drag-and-drop. After you understand how to use drag-and-drop, a whole new world of possibilities opens up. With drag-and-drop, you can click an object, drag it across the screen, and drop it in a new position. You can control what happens when the object is dropped. You can set it up so that the object can drop only on a specific area, or you can set it up so that the dragged movie changes when it's dropped on a specific area or target.

Drag-and-drop functionality, though simple, is an important and understandable user -interface element. Why do you think the visual operating systems, such as the Mac OS and Windows, won the operating system wars? It's because they enable users to pick up and drag their files and other screen elements around just like pieces of paper. It's a metaphor people understand.

What do you need to do to a get a drag-and-drop interaction to work?

  • You need something to drag.

  • Your draggable object has to respond to a mouse event, so there's going to be a button involved.

  • The actions you assign to a button directly affect the timeline in which the button exists. If you assign a Drag action to a button on the main timeline, you end up dragging the whole movie around. To get around this, embed the button in a movie clip.

  • You need to attach a startDrag() action to the button inside the movie clip.

  • You need to be able to drop the movie clip you're dragging (stopDrag())either anywhere on the Stage or onto a specific target.

That's really all there is to it. Of course, there are a few other tricks you can use along the way, but those are the basics.

In the first exercise, you use basic drag-and-drop functionality to pick up trash and throw it into a garbage can.

Exercise 17.1 Using Basic Drag-and-Drop Interactivity

The file for this exercise has already been started for you. It's a ruined city scene with three pieces of trash on the ground. You'll set up each piece of trash so that it can be picked up and dropped into the trash can.

  1. Open trash.fla from the Chapter_17/Assets folder on the CD. Save it to your hard drive.

    The file has five layers : Sky, Background, Foreground, Garbage, and Trashcan. Your goal is to clean up the city and put all the trash in the trash can.

  2. Begin by selecting the dead fish graphic on the Stage and embedding it in a button (Insert > Convert to Symbol) named dead fish button.

  3. Don't stop there! Embed your new dead fish button inside a movie clip called dead fish MC. To do that, select the dead fish button and choose Insert > Convert to Symbol from the main menu. Give your new symbol movie clip behavior, and name it dead fish MC. Remember that unless you want to drag the entire movie around, you have to embed the buttons on the main timeline inside movie clips.

  4. Now you can start adding actions. Double-click the dead fish MC on the Stage to open it in Symbol-Editing mode. Select the dead fish button (which is now on the Stage) and launch the Actions panel. (See Figure 17.1.)

    Figure 17.1. You add your drag actions to the dead fish button inside the dead fish MC. That way, you'll drag just the dead fish around, not the entire movie.

    graphics/17fig01.gif

  5. You want to be able to drag the dead fish after it's been clicked. In the Actions list, enter the following code:

     on (press) {     startDrag ("");  } 

    Notice that you don't have to specify what it is you're dragging. If you don't specify a target, Flash assumes you'll be dragging whatever movie clip in which the button is embedded.

    If you test your movie now, you'll be able to drag the dead fish, but you won't be able to drop it. You fix that next .

  6. The dead fish should drop on the Stage when you release the mouse button. That's going to require another on() event. In the Actions panel, add a new line after the last curly brace and enter the following code:

     on (release) {     stopDrag ();  } 
  7. That's all there is to it. You've now mastered the basic concept behind drag-and-drop interactivity. If you're having any problems, just make sure your actions match those in Listing 17.1.

  8. Repeat Steps 27 for the crumpled paper and soda can graphics, changing the button and movie clip names as appropriate. (Hint: Crumpled paper button, crumpled paper MC.)

    If you have any problems setting up the Actions for the crumpled paper or the soda can, you can examine the finished file, trash_final.fla, on the CD.

Listing 17.1 All the Code You Need to Set Up a Workable Drag-and-Drop Interaction
 on (press) {     startDrag ("");  }  on (release) {     stopDrag ();  } 

Pretty straightforward, right? Although this works for just dragging and dropping the piece of trash, it doesn't yet handle what happens if you drop your piece of garbage on the trash can.



Inside Flash
Inside Flash MX (2nd Edition) (Inside (New Riders))
ISBN: 0735712549
EAN: 2147483647
Year: 2005
Pages: 257
Authors: Jody Keating

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net