Join David Gassner for an in-depth discussion in this video Adding drag and drop, part of Flash Professional CS5: Code Snippets and Templates in Depth.
One of the most common approaches to creating interactivity in a Flash presentation is to implement drag-and- drop, that is, give the user the ability to click on an object and drag it around the screen. Flash Professional CS5 includes a code snippet to implement a very simple version of this feature. I'll show you how to use that code snippet, and then give you some ideas about how to modify it to make it a little bit more efficient. I'll work in a file from the exercise files area in the chapter two folder. The name of the file is MapWithDragAndDrop.fla. I'll open the file with and then set it to fit in the window and then expand the stage to full screen.
This presentation has five icons, lined up across the top, with labels of Growing, Picking, Extracting and so on. Each of these is a movie clip symbol instance that you'll be able to drag around the screen, and then there are five graphics intended as targets for a drag-and-drop operation. They have numeric values of 1, 2, 3 and so on, but they use the same graphics to give the user a visual indication of what they are supposed to click-and-drag. We're going to use code snippets to allow the user to click-and-drag these icons onto their targets.
Now, the code snippet is an object snippet, so I'm going to click the object that I want to drag-and-drop, the first one with a label of growing. Then I'll go to the Code Snippets panel and open the Actions category. Here is the code snippet labeled Drag and Drop. I'll double-click to add the code snippet. Here is how Drag and Drop works. It takes two event listeners. The first event listener is for the MOUSE_DOWN event, and the second one is for the MOUSE_UP event. When the user presses their mouse button while the cursor is over the object, that causes Flash to call a method called startDrag.
The startDrag method is called as a member of the object the user clicked on, and then as long as the mouse button stays down, the movement of the object will track with the cursor position on the stage. Then when the user releases the mouse button, causing the MOUSE_UP event to be dispatched, you'll then call the method stopDrag and that will cause the object to stop moving around the stage. Now, there is one little flaw in this code that is added by Flash. The addEventListener method should not be called from the stage object. Instead, it should be called from the object that you clicked on originally.
So, I'm going to replace the value of stage with growing_mc and then I'll test the movie. I could now move my cursor over the growing object, click and start to drag it, and it will now move around the screen. In this presentation, I can drop it anywhere. In a more sophisticated presentation you might match the location of this object to the location of its target, and perhaps snap it into place. We won't go that far in this demonstration. All we're trying to show is how to move the object in the first place. Now, there is one other thing you might want to do to give this a more complete effect.
You might have noticed when I moved the cursor over the object I was going to drag, that I didn't get any visual indication that the object could be dragged. I've liked the cursor to shape to a Hand icon. Here's how you do that. I'll move the cursor above the existing code, and I'll use the same instance name, growing_mc, and set a property named buttonMode to a value of true. That means treat the object as a button, and that includes changing the cursor shape when the mouse hovers over it. I'll test the movie again and now I see the hand cursor as part of the interactivity.
Now let's do the same thing for another icon. I'll go back to the stage and click on the Picking icon, the second one, then I'll go to the Code Snippets panel and double-click Drag and Drop again. You'll see that I get the same bit of code, this time for the new icon. But you can also see that if I continue down this road, I'll end up with an enormous amount of code. It's actually pretty easy to reuse the functions from the first version of the code snippet for all of the different icons. So, instead of going down this road, I'm going to delete that version of the icon and come back to my original code.
Here is the key to reusing Event Listener functions. Right now, in my MOUSE_DOWN and my MOUSE_UP event handlers, I'm referring to the object for which I'm calling the startDrag and stopDrag functions by the actual instance name. To make this reusable, I'm going to use an expression called event.currentTarget. This expression refers to the object that actually called the function, that is, the object that dispatched the event I was listening for. So, in the first function, I'll replace growing_mc with event.currentTarget.
Make sure you spell this exactly as I have it here, including capitalization, and then I'll do exactly the same thing for the second version, changing growing_mc to currentTarget. Now, I'm calling the startDrag and stopDrag on whatever object was clicked. Then to reuse the functions, I'll simply add more copies of the event listeners. Because I'm going to have to do this a couple of times, I'll create a list of all of the icons that I want to listen to. And then I'll do a little creative copying and pasting.
Let's take a look at the icon names. I'll go back to the Stage and click on each icon and look at the instance name in the Properties panel. I have Picking, Extracting, I'll close the Code Snippets panel and get that out of the way, Bottling and Tasting. I'll go back to the Actions panel to my first frame, and I'll go ahead and type in those names, picking_mc, extracting_mc, bottling_mc and tasting_mc. Now, I'm going to use this list a few different times, so I'll select and copy it, and then I'll paste it right after the call to the buttonMode property, and then I'll paste it again after the call to the addEventListener for the MOUSE_UP event.
So, then I'm going to copy and paste each of the bits of code to each of the items in the lists. I'll start with the setting up buttonMode, copying, and then pasting four times. I'll do the same thing for the addEventListener for the MOUSE_DOWN event. Finally, I'll do the same thing for the addEventListener for the MOUSE_UP event. Now, my movie should be ready to test. I'm now able to click-and-drag any of the five icons, move them around the screen, drop them on their appropriate targets.
I've done it all with a minimal amount of code. The goal is to use the code snippet to model the code, to understand what it's supposed to do, and then copy and paste creatively, so that you get all of the functionality you need without repeating code unnecessarily.
- Touring the Code Snippets panel
- Adding simple and complex code snippets
- Handling mouse and keyboard events
- Starting and stopping video and sounds
- Loading external SWF files, images, and text
- Customizing code snippets
- Understanding template types and categories
- Replacing template content
- Creating a slide show