How to Change the Size of a Movie Clip Using ActionScript 3 - Assigning AS3 instance names and modifying some AS3 movie clip properties

by Alberto Medalla
Lecturer, Ateneo de Manila University

In this lesson, I'm going to discuss the concept of instance names and how they are needed in ActionScript in order to control display objects (objects that can be seen on the stage). Let's say that you've got a display object on the stage (such as an instance of a movie clip symbol that you created), how can you use ActionScript 3 in order to make that object change in size? By the end of this lesson, that is something that you should already be able to do.

Let's begin.

I've mentioned that we can control display objects using ActionScript. Think of ActionScript as the language that we use so that we can "communicate" with these objects and tell them what to do (e.g. change color, change size, change location, become clickable, etc...). We refer to each individual display object on the stage as an instance - it can be a button, a movie clip or a text field. In order to be able to "communicate" with these instances, we must give them names.

When we communicate with real people, we address them by name - "Hey, John. Can you send me that document from our previous meeting?" In ActionScript, to communicate with these instances on the stage, we must address them by their names as well. These names are referred to as instance names.

NOTE: Instances of graphic symbols and static text fields cannot be used with ActionScript, because they cannot be given instance names. But instances of movie clips and buttons, as well as text fields that are of the dynamic, input and all TLF types can be given instance names.

In the following exercise, you will learn how to assign instance names to display objects.

HOW TO GIVE OBJECTS INSTANCE NAMES
1. Create a new Flash ActionScript 3 document.

2. Draw a circle on the stage.

3. Convert this circle into a movie clip symbol. You must convert the shape into a movie clip or button symbol in order to be able to give it an instance name.

NOTE: The symbol name (the one you type in the Convert to Symbol dialog box) is NOT the same as the instance name.

4. Make sure that the circle is selected, then go to the Properties Inspector.

NOTE: When selecting instances of symbols on the stage, do NOT double-click them. Double-clicking will open up symbol-editing mode. To select an instance, just click on it once using the selection tool (the black arrow).

5. Then in the properties inspector, you will see an input field for the instance name. Type circle1_mc inside the input field.

You've now given the currently selected instance the name circle1_mc. The same step is followed if you wish to give buttons or text fields instance names as well.

6. Add another instance of the circle symbol by dragging it from the library down to the stage.

7. Make sure that this second instance is selected, then go to the Properties Inspector and give it the name circle2_mc.

You now have 2 movie clip instances on the stage, each one with a unique instance name.

And this concludes the first exercise of this lesson.

++++++

Instance names are author defined, meaning you decide what names to give them. But there are still some rules that you need to follow. Let's take a look at those rules.

RULES TO FOLLOW WHEN GIVING INSTANCE NAMES

1. Instance names must be unique. No instances within the same scope should have the same name.
2. The characters in an instance name can only be made up of: letters, numerical characters, underscores (_), and dollar signs ($). No other characters can be used.
3. The first character in an instance name can only be: a letter, an underscore (_), or a dollar sign ($). You CANNOT start an instance name with a numerical character.
4. Instance names are case-sensitive. John is different from john.

Make sure you follow these rules to help avoid some errors.

++++++

MODIFYING PROPERTIES OF AN INSTANCE
Now that the instances have names, you will be able to target them using ActionScript. In this exercise, you will add some ActionScript code that will modify some of the properties of the instances on the stage. You will modify the size using the scaleX and scaleY ActionScript 3 properties. You'll also modify the opacity using the alpha property.

1. Create a new layer for the ActionScript code. You can name this one Actions, but it's not required.

2. Make sure that frame 1 of the Actions layer is selected, then launch the Actions Panel by choosing Window > Actions from the main menu.

3. In the Script Pane of the Actions Panel, type in the following lines of code:

circle1_mc.scaleX = 2;
circle1_mc.scaleY = 2;

These lines of code will scale up the circle1_mc instance to 2 times its original size (or 200%). The scaleX property controls the horizontal scaling, while the scaleY property controls the vertical scaling.

4. Then add one more line below the first 2 lines of code:

circle2_mc.alpha = .5;

This reduces the alpha property value of circle2_mc to .5. The alpha property controls the opacity. A value of .5 brings the opacity down to 50%. You can assign a value from 0 to 1 for the alpha property. The object becomes less visible as the value approaches 0.

5. Test the movie by pressing ctrl + enter (pc) or cmd + return (mac) on your keyboard. You should see that the circle1_mc instance is now larger, and the circle2_mc instance is lighter.

What are properties?
In the exercise above, you modified some properties of movie clip instances. Think of properties as characteristics that describe instances (e.g. size, color, rotation).

Some properties of MovieClip instances are:

• scaleX - scales the instance horizontally by a specified number
• scaleY - scales the instance vertically by a specified number
• x - controls the x coordinate of the instance
• y - controls the y coordinate of the instance
• rotation - rotates the instance to the angle specified
• width - adjusts the width of the instance
• height - adjusts the height of the instance
• alpha - adjusts the opacity level of the instance

To access a property, add a dot to the end of the instance name followed by the property name. Then use the equals sign to assign a property value.

Syntax:
instanceName.property = value;

*This is referred to as dot syntax, because it uses dots.

Examples:
circle1_mc.x = 50;
circle1_mc.rotation = 45;
circle2_mc.scaleY = .5;

*Each statement is ended with a semi-colon.

In summation, instance names allow us to target the instances on our stage so that we can control them using ActionScript 3. Each instance name must be unique in order to differentiate the instances from each other, therefore allowing us to target each instance individually. Once an instance has a name, it's properties can be accessed using dot syntax, and can be modified by assigning new values to these properties.

And that concludes this basic tutorial on how to assign instance names in order to control instances using ActionScript 3. I hope you learned something useful. To support this site and expand your knowledge further, sign-up for 10 days of free unlimited access to Lynda.com. This gives you full access to thousands of training videos in the Lynda.com library.