Flash CS3 Tutorial, DragAndDrop

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. Some basic animation as been created for you. This Flash CS3 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); function smiley(event:MouseEvent):void{

smiley_mc.play() };

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 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.

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); function smileyDrag(event:MouseEvent):void{

smiley_mc.startDrag(); };

Once again you will see the slandered event listener. What is new would be the smiley_mc.startDrag();. The startDrag method tells Flash CS3 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 cursor., but how do you stop dragging the smiley around. Well, you need to add another Event Listener. smiley_mc.addEventListener(MouseEvent.MOUSE_UP , smileyStopDrag); function smileyStopDrag(event:MouseEvent):void{

smiley_mc.stopDrag(); };

The first Event Listener listened for the mouse to be pressed down. This time you need Flash CS3 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.

See the Complete Flash Tutorial