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.
or 