Flash Tutorial, Drag and Drop
One of the greatest things about flash is its ability to interact with the user. In this Flash CS3 and CS4 Tutorial, lets go over how to control an object with the mouse in Flash and ActionScript 3.0
As always, some of the work has been done for you. If you open the file start01 you will see a big smiley face. The smiley face has been labeled smiley_mc. If you move into the smiley face MovieClip you will see a lot of key frames. If you download the source files you will see that some of the basic animation as been created for you.
This Flash CS3 and CS4 Tutorial is about controlling graphics with the mouse, creating the tweens will not be covered. However, you will learn how to make the smiley face react to the mouse. Lets make the MovieClip do something every time the mouse moves over it. Start by coping the code from the example to the first key frame in the actions layer.
smiley_mc.addEventListener(MouseEvent.MOUSE_OVER , smiley);
The code creates an Event Listener and adds that Event Listener to the MovieClip smiley_mc. Event listeners have been covered in more depth other Flash CS3, CS4 Tutorials. The Event Listener is simply listening for the MouseEvent Mouse over. Then once the event happens ActionScript is telling the MovieClip smiley_mc to play.
Press Control-Enter to see the Smiley Face react with the mouse.
If you once again go into the Smiley MovieClip and look at the key Frames you will see how this works. When the Event Listeners detects that the mouse has passed over or onto the smiley_mc, ActionScript tells the smiley_mc to play, thus playing the movie until something tells the smiley_mc movie to stop. In this case there are key frames in the actions layer that simply have the stop action added to them. You can create any form of animation inside a movie clip then use action script to control when the movie plays.
Drag and Drop
Lets add some more interactivity to the smiley face by adding a drag and drop ability.
Copy the example code and add it below the current event listener.
smiley_mc.addEventListener(MouseEvent.MOUSE_DOWN , smileyDrag);
Once again you will see the standard event listener. What is new would be the smiley_mc.startDrag();. The startDrag method tells Flash to enable a MovieClip to be moved around the stage. You define which MovieClip by placing the name of the MovieClip in front of the startDrag method, separated with a period. If you test the movie at this point you will see that when you click on the smiley face it movies with the mouse curser, but how do you stop dragging the smiley around. Well, you need to add another Event Listener.
smiley_mc.addEventListener(MouseEvent.MOUSE_UP , smileyStopDrag);
The first Event Listener listened for the mouse to be pressed down. This time you need Flash to listen for the mouse up event. Since you want the smiley_mc to stop dragging when the mouse button is released you will add the method stopDrag to the MovieClip. Basically, you use the same thing to stop dragging as you do to start dragging.