The AS3 'this' keyword and how to randomize the size of a MovieClip instance on the stage

In this lesson, we'll learn about the this keyword. But before I explain what the this keyword is, let's first recall that we can put some ActionScript code on keyframes in the main timeline. But we can also put some ActionScript code on the keyframes inside MovieClip symbols as well. If we place ActionScript code on the keyframes inside of MovieClip symbols, then it means that the code is inside the MovieClip symbol's timeline, instead of being on the main timeline.

It's important to take note of this, because the this keyword references whichever object the this keyword is placed in. Is it within the code in the main timeline, or is it within the code nested inside a MovieClip symbol instead? If we placed the this keyword within the code inside one of the keyframes in the main timeline, then the this keyword will refer to the main timeline. If the this keyword was placed inside the timeline of a MovieClip symbol, then the this keyword will refer to the instance of the MovieClip symbol instead (or instances, if there are more than one). So what this is, depends on where this is.

To hopefully make things a little more clear, let's create an example.

Step 1

Create a new Flash ActionScript 3.0 document.

Step 2

Select the first keyframe of the main timeline, then open up the Actions Panel.

Step 3

In the script pane, type:

trace(this);

Let's try to trace this to see what it will output. Basically, when we create this trace statement, it's like we are asking: what is this?

And in this example, the answer to that is: the main timeline. Since we selected the first keyframe of the main timeline when we added the code, this means that our code is on the main timeline. So in this example, this refers to the main timeline.

Step 4

Test the movie.

In the output window, you should see the message: [object MainTimeline]. So the message in the output window confirms that the this keyword in our example refers to the main timeline. It refers to the main timeline since the this keyword was placed in one of the frames of the main timeline. When using the this keyword, this refers to wherever this is.

Step 5

Now let's try placing the this keyword inside a MovieClip symbol instead. But first, go back to the actions panel and erase the trace statement that we placed on the main timeline so as not to make things confusing when we're trying to trace the MovieClip objects we're about to create.

Step 6

Next, let's create the symbol.

Using the oval tool, draw a circle on the stage and convert it into a MovieClip symbol named Circle.

Step 7

Then give the MovieClip instance an instance name.

Make sure that the instance on the stage is selected (do NOT double-click on it because that will bring you inside the MovieClip symbol's timeline). Once it's selected, go to the properties inspector and type circle1_mc in the instance name input field.

Step 8

Now, let's add some ActionScript inside the MovieClip symbol's timeline.

This time, you can double-click on the MovieClip instance on the stage in order to go inside the MovieClip symbol's timeline.

Step 9

Double-check that you are, in fact, inside the MovieClip symbol's timeline by looking at the edit bar. The edit bar should say Scene 1 > Circle.

Step 10

Once you've confirmed that you are inside the MovieClip symbol, add another layer on the timeline, and name it Actions.

Remember: this timeline belongs to the MovieClip symbol. We are not on the main timeline.

Step 11

Then select the first keyframe of the Actions layer, then go to the actions panel and type:

trace(this.name);

Here, we are not simply referencing this, but specifically, we are tracing its name. You can use the this keyword to access properties and methods of objects as well. Basically, in this example, our trace statement is trying to ask: what is the name of this object?

Since the statement that contains the this keyword is inside the MovieClip symbol's timeline, it's going to output circle1_mc in the output window. The this keyword references objects or instances that contain it. So the this keyword is going to refer to the specific instance of the MovieClip symbol on the stage, and not the symbol in the library. This is why it's going to output circle1_mc (which is the instance name), and not Circle (which is the symbol's name).

Step 12

Now let's go back to the main timeline by clicking on the scene 1 link.

Step 13

Once we are back on the main timeline, go to the library and drag another instance of the Circle symbol onto the stage. Give this one circle2_mc for its instance name. Since this is also an instance of the Circle symbol, it's also going to have the same trace statement inside it already. Whatever code you have inside the timeline of a MovieClip symbol will also be inside any of its instances that are on the stage. There is no need for us to add it again. So when we test the movie, Flash is also going to output the name of this second instance in the output window.

Step 14

Go ahead and test the movie.

You should see the names circle1_mc and circle2_mc displayed in the output window.

Why would we want to use the this keyword?
Sometimes, you might want to place some code inside a MovieClip symbol's timeline. That way, every single instance of the MovieClip symbol will have the same code inside it when you place it on the stage. This saves you some time, because you won't have to repeatedly type the same code over and over. You just have to put it inside the MovieClip symbol's timeline once, and then every instance of that MovieClip symbol will have the code already placed inside it. The this keyword lets us explicitly tell Flash that our code is meant for that specific instance that contains the this keyword.

Let's see this in action by adding more code to our example.


Step 15

Go back inside the Circle MovieClip's timeline by double-clicking any of the instances on the stage. Then select the first keyframe of the Actions layer and open up the Actions Panel.


Step 16

Remove the trace statement, and add these lines of code in its place:

this.scaleX = 3;

this.scaleY = 3;

Here, we've added some lines of code that will increase the size of each instance of the MovieClip symbol that we place on the stage. Basically, the code is saying: scale this to 3 times its original size. So when the Flash movie runs, the MovieClip instances on the stage will be 3 times larger.

Step 17

Go back to the main timeline, by clicking on the scene 1 link.

Step 18

From the library, add more instances of the Circle MovieClip symbol until you have ten instances on the stage.

Step 19

Test the movie.

You should see that each circle is now three times larger than its original size. Since we placed the code inside the MovieClip symbol's timeline, instead of the main timeline, then we only had to write those lines once, and each instance will have the same lines of code built-in. This is why every single instance of the Circle MovieClip became bigger.


Step 20

In this next step, we'll modify the code so that each instance of the Circle MovieClip will have a different, randomized size.

Go back to the Circle MovieClip symbol's timeline by double-clicking any of the instances on the stage. Then select the first keyframe of the Actions layer and open up the Actions Panel.

Step 21

In the script pane, replace the current code with this:

var nScale:Number = Math.random() * 3;

this.scaleX = nScale;

this.scaleY = nScale;

The first line of code creates a variable named nScale. And then to this variable, we are assigning the expression Math.random() * 3. What this does is it generates a random number that can be anywhere between 0 and 3. If you want Flash to choose from a higher range of values, then simply replace 3 with a higher value (but don't make it too high since we are going to use it to scale the size of the objects). Then once that random number is generated, the number is assigned to the scaleX and scaleY properties. This is going to happen for each instance of the Circle MovieClip that we have on the stage. So chances are, they'll each generate a different value, thus making them all have different sizes once the Flash movie runs.

Step 22

Test the movie and you should see your circle's all in different sizes. And since the values are generated randomly, you'll see different sizes every time you test the movie.