Flash Drag and Drop Code Snippet

Flash Drag and Drop Code Snippet
Flash CS5 includes code snippets that you can use as a starting point for your projects. Let's take a look at the drag and drop code snippet.

Start a new ActionScript 3.0 project. You will notice that we have the default one frame on Layer 1 in the Timeline and a blank stage.

Open the Code Snippets panel (Window � Code Snippets). You will find the Drag and Drop code snippet in the Actions folder.

To apply a code snippet, just double-click on the snippet's name in the panel. However, when we do this, FlashR tells us that we need to attach the snippet to an object on the stage. A code snippet can be added to a movie clip or TLF text object. Let's draw a square on the stage with the Rectangle tool. Now, select the square on the stage and double-click the snippet again.

Now, Flash tells us that we need to convert the square to a Movie Clip and give the Movie Clip an Instance Name. It offers to do this for us. So, click OK. The Actions panel will open automatically to display our drag and drop code. Close this panel for a little while so that we can examine what else has happened in our Flash fla.

On the Timeline, we now have a new Actions layer (top layer) and Frame 1 has a small "a" to indicate that the ActionScript code has been added to that frame. We still have our Layer 1 with the square but if we click on the square and look at the Properties panel, we see that Flash has made it a new movie clip named "Symbol 1" with an Instance Name of "movieClip_1".

Now we can test our Flash movie. Click Control � Test Movie � In Flash Professional. Click on the square and drag it to another location on the stage.

Let's open the Actions panel again, and check out the code. The code snippet contains to functions and two event listeners. The first line of code (after the comment) adds an event listener to our movieClip_1. The event listener listens for the MOUSE_DOWN MouseEvent. When Flash notices that the mouse button has been clicked down, it will run the first function called fl_ClickToDrag.

The fl_ClickToDrag function applies the startDrag(); function to our movieClip_1. This startDrag function is a "built-in" Flash function that allows the target (movieClip_1) to be dragged over the stage. We can only have one movie clip draggable at a time and this movie clip remains draggable until one of two things happen. The first is a stopDrag(); function is called. We will talk about this in the next paragraphs. The second is to apply the startDrag(); function to another object on the stage.

Now that we can drag our movie clip, we need to look at the code that will "drop" our movie clip. As you can see, the next line of code will add an event listener to the stage (not the movie clip). It tells Flash to listen for the MOUSE_UP MouseEvent and run the fl_ReleaseToDrop function when this occurs.

The fl_ReleaseToDrop function applies another built-in Flash function stopDrag(); to the movieClip_1 object. This function stops or removes the startDrag() ability from the movie clip.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.