Current Classes | Syllabus | Class Schedule

COMM 414 Introduction to Rich Media for the Web

Controlling Movie Clips (Flash AS3)

Introduction

Most Flash-based interactives make liberal use of movie clip symbols. Movie clips can contain animation and they have their own timelines. What's more, you can control movies clips a number of useful ways with actionscripts; for example, you can start them and stop them, cause them to appear and disappear, even make them "draggable." In this exercise we will explore simple ways to achieve these basic effects.

Turning movie clips on and off

1. Open a new Flash file and save it right away as movieClipExercise.fla.
2. First you will need a movie clip that contains an animation. Choose Insert > New Symbol and select new movie clip. You may call it whatever you like I will call this one spinner.
3. In the movie clip's timeline create a shape. Now animate it in some way (spin it, morph it, change its color, etc.). Remember, if you wish to use a motion tween, you will have to convert this shape into a symbol (giving you a symbol inside a symbol, which is actually quite common in Flash projects).
4. Go back to the main timeline. Place an instance of your movie clip on the stage. If you preview the movie, the symbol should play as a repeating loop.
5. Give the instance an instance name. Let's call this instance spin_mc. Instance names are important because that is how we refer to specific movie clips with the code. We don't refer to the clips by their symbol name because there can be multiple instances of the same symbol on the stage at any given time, all doing different things. Thus we use instance names instead.
6. Now we need two buttons—one to start the clip and one to stop it. Create two button symbols (or just one with two instances on the stage). Give one button the instance name start_btn, and the second stop_btn.
7. Next we add the code. Create a new layer for actions. Select the keyframe in the actions layer and write:

   start_btn.addEventListener(MouseEvent.CLICK, startSpin);    
   stop_btn.addEventListener(MouseEvent.CLICK, stopSpin);  

   This creates listeners for our two buttons. But we're not done yet; each listener calls a particular function that we have to write next.
8. Add the following functions to the code we've already written:

   function startSpin(myEvent:MouseEvent):void { 
       spin_mc.play(); 
   }    
   function stopSpin(myEvent:MouseEvent):void { 
       spin_mc.stop(); 
   }  

   These should be pretty self-explanitory. The first function (startSpin) causes the spin_mc to play; the second function causes it to stop. Pretty straightforward, eh?
9. Of course, it's already spinning. What if you don't want it to play until you hit the start button? Add the following code to the top of the script:

   spin_mc.stop();  

Hiding / showing movie clips

Another common Flash technique for making things appear and disappear (like pop-up windows) is to create movie clips and then hide them (and reveal them) with actionscript.

1. We can use the same movie clip instance we used above (spin_mc).
2. Place two new button instances on stage. You can use instances of the same buttons you created previously, or make something new. Call these button instances hide_btn and show_btn.
3. Now we need to modify the code. First, add two new handlers to our script:

   hide_btn.addEventListener(MouseEvent.CLICK, hideSpin);    
   show_btn.addEventListener(MouseEvent.CLICK, showSpin);  

4. Now our two new functions:

   function hideSpin(myEvent:MouseEvent):void { 
       spin_mc.visible=false; 
   }    
   function showSpin(myEvent:MouseEvent):void { 
       spin_mc.visible=true; 
   }  

5. Test it out.
6. Variation: instead of visible, try alpha = .5 to make the clip semi-transparent. alpha = 1 will make the clip visible, alpha = 0 will make the clip invisible.

Draggable movie clips

Many Flash movies contain "draggable" movie clips, especially movies that contain games or puzzles. Making a movie clip draggable is fairly simple.

1. Create a new movie clip or use the one we created previously (spin_mc) again.
2. Place an instance of the clip on the stage (if new). Make sure you give it an instance name.
3. Now we need to attach a couple of listeners to the movie clip we want to drag—one for the mouse-down action, and one for the mouse-release action:

   spin_mc.addEventListener(MouseEvent.MOUSE_DOWN, spinDrag);    
   spin_mc.addEventListener(MouseEvent.MOUSE_UP, spinDrop);  

4. Note that we once again call a couple of new functions. Now let's write them:

   function spinDrag(myEvent:Object):void {
       spin_mc.startDrag(); 
   }    
   function spinDrop(myEvent:Object):void {
       spin_mc.stopDrag(); 
   }  

   Pretty straightforward once again.
5. Try it.
6. But wait—when you mouse over the movie clip, the cursor doesn't change into a hand like it does when you mouse over the buttons. How will users know that the movie clip is clickable? The solution is simple—we can have the little hand appear by adding one line of code:

   spin_mc.buttonMode = true;  

   This effectively turns the movie clip into a button-like object in the way that it behaves—causing the cursor to change when it mouses over.

A few words about targeting movie clip instances

The examples above contain code that refers to movie clips by their instance names and nothing more. However, if you want to access a clip that is inside another clip, you need to include the names of both instances in your code. For example, let's say that spin_mc is actually inside a movie clip with an instance of bigClip_mc; you would write the name of the first (parent) clip, followed by a dot, then the internal clip. So the code in part 1 above would look something like this:

function startSpin(myEvent:MouseEvent):void { 
    bigClip_mc.spin_mc.play(); 
}

For every level down you go, add another dot followed by the name of the next clip (like using slashes in Web urls).

What if you want to control an external clip from within a nested clip? For example, what if spin_mc was actually a button that needed to control it's surrounding movie clip bigClip_mc? This is a little trickier; you have to cast the containing object (parent) as a movie clip like this:

function startSpin(myEvent:MouseEvent):void { 
    MovieClip(parent).play(); 
}

You could also combine these to go up a level and then back down into a "sister" movie clip like this:

function startSpin(myEvent:MouseEvent):void { 
    MovieClip(parent).anotherClip_mc.play(); 
}

Clips on the main timeline can also be referred to using root. Once again, root must be cast as a movie clip:

function startSpin(myEvent:MouseEvent):void { 
    MovieClip(root).play(); 
}

So what can I do with all this?

Here's a cool little game that a former student, Joe Milbach, put together with these tools: