Wednesday, May 11, 2011

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.

31 comments:

  1. This was very helpful thank you very much.

    ReplyDelete
  2. It is nice tutorial.Good for beginners.Thank you

    ReplyDelete
  3. Your explanation is simple and Vivid. Thanks alot.

    ReplyDelete
  4. Thanks this is easily Understandable

    ReplyDelete
  5. it is really good and one of the best tutorial i have ever found on net

    ReplyDelete
  6. i like it, its very easy to understand but every single book ive read says that its better to use classes and that its a bad coding habit to write all your code in the timeline

    ReplyDelete
  7. I prefer teaching timeline-based coding to beginners. I find that it's easier to explain and understand. Say you're a designer who simply wants to learn how to make a few buttons clickable, then teaching the OOP route might be a little overkill. But definitely as you progress, I would recommend that you move on to learning object oriented programming as well.

    ReplyDelete
  8. Thanks, this was useful for me as a beginner.

    ReplyDelete
  9. I know nothing about action script or any other code but I need it to build exercises and simple games or movies for my students. Your tutotial is understandable for anyone and it is very helpful for anyone like me. Thank you very very much!

    ReplyDelete
  10. You're welcome! I started writing these tutorials for my students, and I think it's great that other teachers out there are learning from it, too. I hope your students enjoy your Flash games and movies!

    ReplyDelete
  11. A very gret tutorial sir..thanks.. i'm making my thesis w/c is all about physics simulations via user input..do you think it's possible in actionscript? please reply thnx..or e-mail me at franzmacatangga@gmail.com

    ReplyDelete
  12. thank youu soo muucchhh.. very good tutorial indeed..

    ReplyDelete
  13. I have started to learn AS3 with try-error-try-error-ups, I succeeded, what happened -method.

    Now I finally start to r e a l l y understand what is happening and WHY, thanks to this tutorial!

    ReplyDelete
  14. Thank you very much....
    this tutorial is very useful for beginner. I am so happy I have done this practices by own. Again thanks a lot... :)

    ReplyDelete
  15. Good Stuff. Another tech teacher here. Thanks

    ReplyDelete
  16. Excellent! Simple and fantastic tutorial

    ReplyDelete
  17. It is very helpful for beginners Thank you

    ReplyDelete
  18. Superb....to easy to understand...

    ReplyDelete
  19. Thx! This was exactly the info I needed to get a start with it!

    ReplyDelete
  20. nice tutorial i lili like it ^^

    ReplyDelete
  21. very nice tutorial...can i use it in its entity for my first class on AS3 with my students

    ReplyDelete
  22. Its very ... very ...best tutorial

    ReplyDelete
  23. Very helpfull... Thanks Man :)

    ReplyDelete
  24. Thank u Sir...
    The language is very easy to understand.. described beautifully...

    ReplyDelete
  25. Thanks a lot!!!!!!!!!!

    Very Nice tutorial... Interesting...... Wonderful!

    ReplyDelete