References

One important variable type was left out of our earlier discussion on the subject, but we are now ready to talk about the reference variable. We saw earlier that variables can contain numbers , strings, and booleans ”but that's not all. Sometimes we want a variable to refer to a movie clip instance on the stage. In fact, you've already seen this several times in our previous examples. When you name an object on the stage ball1 , you receive a reference variable in your script that allows you to refer to it by name. In addition to the reference you receive from naming a clip, you can create your own movie clip references. Assume that we have a movie with one clip on the stage called ball1 . We have named this clip ball1 in the Properties panel as usual. If we wanted to, we could make the ball invisible with the following script attached to frame 1 of the main movie:

 myBallReference = ball1; myBallReference._visible = false; 

Notice that we create a new reference variable called myBallReference and then we assign it the value of ball1 . This means we now have two different variables that refer to the same movie clip. We can use either one to change properties of the clip using the dot operator. In this case, we used the new reference to change the _visible property to false .

Note  

So far we've only been talking about movie clip reference variables. These are the most common type, but there are others. In future chapters, you will see references to objects, text fields, arrays, functions, and so on.

This might seem like a silly example to you, and it is. It's a simple example, and soon you'll have many real reasons to use your own reference variables. Let's now look at a couple of important references that Flash gives to us.

The _root Reference

In previous versions of Flash, the _root reference was extremely common. New features in MX make this reference something of an endangered species, but it does still have some valid uses. That makes it worth talking about.

The _root reference is available in any scope, and it is a reference to the main movie time-line. That means that you can use it to access something in the main timeline from anywhere in your movie. Let's look at an example of this.

Instantiate a new ball on the stage and name it ball . You should now have a rotating message and a ball movie clip as your only stage elements. Select the message clip and change the attached script to be the following:

 onClipEvent(enterFrame){     trace(_rotation);                 //output rotation value     _rotation += change++;            //add to rotation and increment change     if(change > 30){         change = 5;                    //reset change         _root.ball._width += 10;      //increase ball width     } } 

What's happening here is that when change becomes large (more than 30), it is reset to 5; at the same time, the ball movie clip is widened by 10 pixels. The important thing to see here is that this code is attached to the rotating message, so the ball movie clip is out of scope. If you tried to widen the ball by simply referring to it by name, you would fail (nothing would happen). Instead, we need to first refer to the main timeline where the ball clip exists. From there, we can access the ball by name, and in turn , access its _width property. We do this using the _root reference and dot notation with the following line of code:

 _root.ball._width += 10; 

Caution  

It doesn't really make sense to change the ball clip's width from within the message clip. This is generally considered bad script design, and I only used it to demonstrate how it can be done. The new MX ActionScript features make this kind of _root reference virtually obsolete, as you will see in the next chapter.

The this Reference

The this reference seems somewhat strange at first because it is used to enable a movie clip to refer to itself. For example, we can make a ball grow wider by attaching the following script to an instance of the ball clip:

 onClipEvent(enterFrame){     this._xscale += 10; } 

Because this script is attached to the ball movie clip, the this reference refers to the ball clip. The tricky part is understanding the difference between using the this reference and leaving it off altogether. Consider the following code:

 onClipEvent(enterFrame){     _xscale += 10; } 

This script looks similar to the first example except that the this reference is omitted. This new script actually does the same thing as the first script, but it is not equivalent. The outcome is the same due to circumstances only. Let me explain.

When you omit the this keyword, a locally scoped variable is implied . In this case, when Flash sees the _xscale property with no this reference, it infers that _xscale is a locally scoped variable. Because there actually is a locally scoped variable named _xscale and it happens to be the property of the clip we want, everything works.

Now I know all this must be confusing, but early in the next chapter, we will be talking about some important functionality, and this same mechanism will not apply. Instead, the two examples I gave would give different results entirely because of some peculiar scoping rules we'll get to later.

For now, just realize that the this reference allows a movie clip to refer to itself. In the future, we will make heavy use of it, but for the time being, it can usually be left off. Many of the following examples could be using the this reference, and I am omitting it. In the future when we get to the topic of script consolidation and dynamically instantiated clips, the this reference will become important to us.

The _parent Reference

This reference is similar to the _root reference, but instead of referring to the main movie timeline, the _parent reference refers to whatever timeline the clip is instantiated in. An example will make this clear.

The next example requires a bit of work creating some symbols. You are welcome to follow the directions to create it yourself, but if you want to skip that, I've included an .fla file containing the symbols with the CD. In the Chapter 03 directory, open shapes .fla and you can safely skip the next paragraph.

Note  

The _parent reference is undefined on the main timeline. That's because there is no other timeline at a higher level of scope than the main one. It wouldn't make sense to refer to the parent of the main timeline because there isn't one.

Create two new movie clip symbols ”one called square and one called triangle. Edit the square movie clip in the library and draw a square using the Rectangle tool. Now edit the triangle and draw a triangle. You can use the Line tool to draw the outline of the triangle and then fill the inside with the Paint Bucket tool. Now edit the ball movie clip in the library and instantiate the square movie clip inside it. This, of course, creates an instance of the square clip inside each ball clip. Now edit the square clip in the library and instantiate the triangle clip inside it. Again, this creates an instance of the triangle clip inside the square clip, which already exists inside the ball clip. We now have a hierarchy like the one in Figure 3.11.

Figure 3.11: The ball clip contains an instance of the square clip, which in turn contains an instance of the triangle clip.

Go back to editing the main movie again (the Scene 1 button on the stage). Because we already had one instance of the ball movie clip on the stage and we've now placed the other instances inside the ball movie clip, you should have all three objects showing on your stage, as in Figure 3.12. The ball instance contains a square instance which itself contains a triangle instance. We'll now start attaching script to these three instances using the _parent property to demonstrate that property's use.

Figure 3.12: The three shapes are combined as one instance on the stage. This is how mine looked before I started adding script.

Edit the square movie clip in the library. Select the triangle instance and attach the following script to it:

 onClipEvent(load){     _parent._xscale = 50; } 

Which clip will this script affect? It will be the square clip, of course, because it is the parent of the triangle instance. See Figure 3.13.

Figure 3.13: The triangle clip has script attached that sets its _parent 's _xscale to 50.The square clip, which contains this triangle instance, is affected.

Notice that not only has the square shape been altered , but the triangle has as well. That's because when you alter a clip that has other clips attached, the appearances of attached clips are also affected. The interior clip's properties are not actually changed, but when Flash draws the inner clip on the stage, alterations to its parent's properties are affected on the inner (child) clip.

Now edit the ball clip in the library, select the square instance, and attach the following script:

 onClipEvent(load){     _parent._xscale = 20; } 

As you can see in Figure 3.14, the ball clip is now squashed after having its _xscale set to 20. That happened because it's the parent of the square clip. The square clip, because it's attached to the ball clip, is affected by the change to the ball as well. This, in turn, affects the triangle clip, which is attached to the square clip. When everything is run, the ball is scaled down to 20 percent, which scales down the square and triangle. Then the square is scaled down by 50, which in turn scales the triangle down as well. So when the accumulated scale is applied to the square and triangle, the square and triangle are reduced to 10 percent of the original width.

Figure 3.14: The square clip has script attached that sets its _parent 's _xscale to 20. The ball clip, which contains this square instance, is affected.

Note  

You will most often use references to point down the hierarchy of movie clips which, as you know, simply involves using the instance names . It is occasionally convenient to point up the hierarchy using the _root and _parent references.

Function References

Not only can movie clips have references, but functions can as well. Consider the following example script:

 function foo(){     trace("calling foo"); } fooReference = foo; fooReference(); 

We have defined a function called foo and then created a variable called fooReference and assigned it the value of foo . We now have two ways to call the function. In other words, after the preceding script, the following two lines of code have the same effect:

 foo(); fooReference(); 

This might seem trivial and silly to you now, but that will change. We will eventually be attaching functions to movie clips, and when we do, you'll see how powerful and convenient function references can be.