g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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.

Join us in the Flash forum.

Add Flash+Drag+and+Drop+Code+Snippet to Twitter Add Flash+Drag+and+Drop+Code+Snippet to Facebook Add Flash+Drag+and+Drop+Code+Snippet to MySpace Add Flash+Drag+and+Drop+Code+Snippet to Del.icio.us Digg Flash+Drag+and+Drop+Code+Snippet Add Flash+Drag+and+Drop+Code+Snippet to Yahoo My Web Add Flash+Drag+and+Drop+Code+Snippet to Google Bookmarks Add Flash+Drag+and+Drop+Code+Snippet to Stumbleupon Add Flash+Drag+and+Drop+Code+Snippet to Reddit


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

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor