Tutorials Flash & Swish Flash Tutorials Drag and drop effect in flash

Drag and drop effect in flash

$erjik Flash Tutorials Apr 08, 2010

Flash is a powerful tool for creating a dynamic and interactive user experience. Mouse-responsive objects are one of the most popular effects used on many websites and online applications. In this tutorial you will learn how to create a basic "drag-and-drop" flash file in Flash CS4 and ActionScript 3.0. It's very easy to achieve and just in ten minutes you will get to know how to control an object with the mouse. So read on and learn!

For this tutorial you will need Adobe Flash CS3 or greater because we are using ActionScript 3.0.

First, open Flash CS3 or CS4 and create a new Actionscript 3.0 Flash file.

image 1

Now you have to add some object you actually want to drag and drop with your mouse. To do this, go to File => Import => Import to Library and choose the necessary file from your computer. It automatically appears in your Flash files library, so you can now simple drag it to the stage:

image 2

The next step is to convert our image into a Movie Clip symbol: press F8 and in the Type filed select Movie Clip. Give a symbol a name, which is logo_mc in our case.

image 3

Now give your object an instance name by clicking on the object and going into its properties. (see the screenshot below). Give the same name to the first layer. The image we use for this tutorial is labeled logo_mc.

image 4

Now we can start making our logo react to the mouse. Create a new layer and name it Actions.

image 5

Select the first keyframe and press F9. In the opened actions window write the following code:

image 6

With this block of code we've created an event listener that basically tells Flash to execute the function logoDrag as soon as someone clicks the logo_mc movie clip. The function logoDrag implies our logo object starts moving with the cursor once the mouse event Mouse Down  happens.

Click Ctrl+Enter to test the movie. You will see that when you click on a logo it sticks to your mouse cursor. You will also notice that you can't actually "get rid" of that object. To stop dragging an object around, you need to add another event listener. Here it is:

Drag and Drop Effect in Flash

Here things are much similar to the previous step – this time you just tell Flash to listen to the Mouse Up event. In other words, the block of code you see above makes the logo object stop dragging as soon as the button is released.

Press Ctrl+Enter to test the movie.

That's it, our nice interactive flash file is done! You can download the source files here.

subscribe to newsletter