Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Manipulating Movie Clips

VCA224 Multimedia 2

Ex: Manipulating Movie Clips

Most Flash-based interactives make liberal use of movie clip symbols. Movie clips can contain animation and (more importantly), you can attach scripts to them (unlike graphic symbols). What's more, you can manipulate 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.

Specifications

• Size: 550 x 400 (default Flash size)
• Frame Rate: 12 fps (default)
• Length: 1 frame
• Due Date: week 7 (11/20)
• Deliverables: both the FLA and exported SWF files.

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, but I find it useful to end the name of a movie clip with "_mc" so I know what it is later when I see it in the library or referenced in some code. I will call this one move1_mc.
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. In the upper-left corner of the Properties window there is a box that should say <Instance Name>; put it in there. Let's call this instance move1Instance_1. Instance names are important because that is how we refer to specific movie clips with the code. We usually don't want to refer to the clips by their symbol name because thee 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 ad one to stop it. Create two button symbols (or just one with two instances on the stage).
7. Next we add the code. Select the button you wish to be the "start/play" button and open the script window. Write this code:

on (release) {
move1Instance_1.play();
}

Note the simple structure to the script. First there is a handler that says that the action will be triggered by a mouse button click. Next, the action tells move1Instance_1 to play. It's that simple.

8. Of course, it's already playing. How do we stop it? Add the following code to the stop button:

on (release) {
move1Instance_1.stop();
}

9. What if you don't want it to play until you hit the start button? Select move1Instance_1 and add to following code to it:

onClipEvent(load) {
this.stop();

}

The onClipEvent(load) handler takes effect when the clip first loads and it happens only once.

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 Flash movie we started above. Drag a new instance of your movie clip on to the stage and call it move1Instance_2.
2. Create a new layer and call it Actions. We're going to set it up so that the movie clip is hidden at the start of the movie (of course you could opt to have a movie clip be visible at the start if appropriate for your concept; if so, just skip this step and the next one).
3. Select frame 1 on the Actions layer and attach the following code:

move1Instance_2._visible = false;

_visible is a Flash command; it can be set to true (visible) or false (hidden).

4. Test it out; the movie clip should be invisible when you preview the movie.
5. Okay that's great, but how do you bring it back? Once again, you need two buttons. You can use instances of the same buttons you created previously.
6. Select one button and attach the following code:

on (release) {
move1Instance_2._visible = true;
}

7. You can probably figure out what to put on the other button:

on (release) {
move1Instance_2._visible = false;
}

8. Test it out.
9. Variation: instead of _visible, try _alpha = 50 to make the clip semi-transparent. _alpha = 100 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 very simple.

1. Create a new movie clip without animation (it will make it easier to drag if it's not moving around).
2. Place an instance of the clip on the stage.
3. Add the following code to the movie clip:

on (press) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.startDrag();
}
}

on (release) {
if (this.hitTest(_root._xmouse, _root._ymouse)) {
this.stopDrag();
}
}

This code is a little more complex and requires some explanation. First, it makes use of a couple of "if" statements. These are used to compare states, to check if a given condition exists. In this case it is coupled with the hitTest function which is used to see if the mouse is over a specified movie clip when the button is pressed (or released); the _root._xmouse, _root._ymouse bit basically compares the x-y positions of the mouse and movie clip to see if they match. The term this refers to the movie clip that the code is attached to; in other words, you could translate the code as "When the mouse button is pressed, if the cursor's x-y position is the same as this movie clip's x-y position..." If it is, the startDrag function is executed and the movie clip follows the mouse. On release, the stopDrag function causes the movie clip to stop moving.

4. Try it.
5. Export a .swf and turn-in both .swf and .fla files.

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 move1Instance_1 is actually inside a movie clip with an instance of bigClipInstance; 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:

on (release) {
bigClipInstance.move1Instance_1.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 a clip from within? For example, what if move1Instance_1 was actually a button that needed to control it's surrounding movie clip bigClipInstance? You would refer to it as _parent (the html equivalent is ../). So the code might look like this:

on (release) {
_parent.play();
}

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

on (release) {
_parent.move1Instance_1.play();
}

Clips on the main timeline can always be referred to by _root followed by the clip name. For example:

on (release) {
_root.bigClipInstance.play();
}

And you can refer to the clip you are currently in with the this designation. So you could but this code on the movie clip move1Instance_1 directly to bypass the start button way back in the stop example:

on (release) {
this.play();
}

So what can I do with all this?

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

Point Breakdown

Course Outline

Syllabus

Student Resource