Traversing the movie clip

Movie clip hierarchy

Since you can have movie clips inside of other movie clips which are inside of other movie clips, it's important to figure out how best to navigate this hierarchy of movie clips.

Remember the main movie is itself a movie clip. You can access this movie clip using the word _root. You can do the same things to _root that you do to other movie clips. For example, if you wanted to change the opacity of the entire movie, you could write _root.alpha=50. Going to the _root level of a movie clip lets you access all of the movie clips inside the main movie. Say you place an instance of a movie clip inside the _root movie clip called ball. You can access the timeline, variables, methods and properties of that movie clip by using the dot operator.

Traversing the movie clip

When you start developing projects with nested movie clips, you need to learn how to access those movie clips, their methods and properties from anywhere inside your movie. You can access movie clips by either absolute or relative references.

An absolute reference means you start from the _root of the movie. Let's say you have an instance called ball in the main movie, and the ball clip you have another instance called square. If we wanted to change the transparency of the square, but not the transparency of the ball, we would type this. _root.ball.square._alpha=50. Because the reference is absolute, it doesn't matter where you put this script. It could go in the main timeline or inside a movieclip's onLoad handler, or even in the timeline of one of the movie clips.

Using a relative reference means that you are accessing an instance that is relative to the movie clip making the call. There's a couple of ways to use a relative reference. If you are referring to an instance that is inside the current movie clip, you can simply use the name of the movie clip. Using the example above, if you are creating a frame script on the "ball" instance, you can refer to the "square" instance and change it's alpha property by simply typing square._alpha=50. Since you are typing this script inside the "ball" script, there's no need to refer to the _root because the "square" script resides inside the "ball" script and the "ball" script is well aware of it. now if we had two ball instances "ball1" and "ball2" and "ball1" had a square inside of it. If we wanted "ball2" to refer to the square with the ball, we could use a relative reference like _parent.ball1.square._alpha=50.

Relative and absolute reference are the type of things that are best experienced so let's do an exercise that will help you understand this extremely useful concept.

Exercise 2-Building a movie clip face

For this exercise we're going to build a face with eyes, noses, hairs and mouths. You can use the brush tool to create the different faces. Once we have these drawn, we will practice navigating through the different levels of movie clips by using absolute and relative paths. We'll use _root and _parent. Your movie clip should looks something like this and I'll show you how to make it switch when you click on the different parts of the face.

Buttons as a special rule

One very confusing aspect regarding button instances is that when we place then inside movie clip symbols, they don't quite have the same characteristics as movie clips. If you have a movie clip inside a movie clip and you type in a command in that movie clip's onClipEvent handler like _parent._alpha=50, that means to make the transparency of the movie clip containing your current instance 50%. If you do the same thing to a button, it goes up two levels instead of the expected one. Be very careful when calculating hierarchies in your clips to make sure you take that into consideration.

Invisible Buttons

Let's modify the movie above to use invisible buttons to better understand this issue. Invisible buttons are a special type of button. If you create a button which has an empty first keyframe, the button becomes invisible when the movie is run. You can use invisible buttons for all kinds of special effects.One way that you could use them in the movie clip above is to make it easier to select certain areas.

An insteresting aspect of invisible buttons is that if you put a movie clip on top of a button, that button should still be clickable behind the movie clip through an on() event. But if you put a button on top of a button with on() handlers, the top button will capture the click and the bottom wont.

Movie Clips as buttons

Since Flash player 6.0. Movie clips can utilize the same events as buttons (except for main movies): rollover, press, etc. You cannot nest on () events on movie clips inside other movie clips. Something weird happens though. When you use the on() handler inside a movie clip, variables, properties and methods refer to the movie clip instead of the parent like they do in a button. This can be real confusing and create typical movie clip scoping issues. Let's create a movie clip with an on() event and a button with an on() event and try to rotate them.