Introduction to OOP in Flash and ActionScript, Part 1
Pages: 1, 2

11. Now that we've added the code, let's test the movie. This time you should notice that the movie-clip object appears on the right side of the stage instead of the left. This is because the _x property affects the x coordinate of the object. By assigning it a value of 450, we told Flash to move the object so that its x coordinate would be 450. When you're done testing the movie, close the .swf and return to the authoring environment.

12. For good measure, let's assign a few more values to a few other properties of the movie clip. Add two more lines of code just after the first:

circle_mc._alpha = 30;
circle_mc._xscale = 150;

13. When you test the movie now, you should see that the movie clip is somewhat transparent and has been scaled to 150% in the x direction.

Figure 6. Test of the movie clip.

Here's another experiment in which we'll utilize one of the methods of a movie-clip object.

1. Create a new Flash document and within it create a new movie-clip symbol named MorphingCircle.
2. Within the MorphingCircle, use the circle drawing tool to draw a filled circle on Frame 1.
3. Select Frame 30 and press F7 to create a new blank key frame.
4. In Frame 30 use the rectangle drawing tool to draw a square in approximately the same location on the stage as you drew the circle on Frame 1.
5. Add a shape tween between frames 1 and 30. Move the playhead between frames 1 through 30 to make sure the shape tween causes the circle to morph into a square.

   
   Figure 7. Morphing a circle into a square.

6. Return to the main timeline and open the library.
7. As a best practice, rename the default layer to Circle Morph.
8. Drag an instance of MorphingCircle onto the stage.
9. With the instance selected, open the Property inspector and give it a name of circleMorph_mc.
10. Test the movie. At this point we just want to verify that the movie clip's timeline plays by default. When you have verified this you may close the .swf and return to the authoring environment.
11. Add a new layer named Actions.
12. With the first frame of the Circle Morph layer selected, open the Actions panel by pressing F9.
13. Make sure you are working in Expert mode, and add the following code to the Script pane:

    circleMorph_mc.stop();

    The stop() method tells the object from which it is called to stop playback of the timeline. Notice that the method call has two parentheses, called the function call operator (or, in this case, perhaps more accurately, the method call operator). This operator tells Flash to look for a method by this name instead of a property.
14. Test the movie. This time the movie clip's timeline should be paused at the beginning. This is because you have instructed the movie clip to stop the playback.

Notice that in both of the preceding examples the properties and the method that were referenced affected only the object from which they were referenced. This is part of the design of OOP. Each object has its own set of properties and methods, and when they are referenced from that object, they affect only that object. For example, if you have two movie clips -- circle_mc and square_mc -- then setting the _x property of circle_mc affects only circle_mc, not square_mc. Likewise, if you tell square_mc to play its timeline using the play() method, then square_mc's timeline will play, but not circle_mc.

Gettin' Classy

All movie clip instances are individual objects. Each of them shares a common set of properties, but each one has different values for those properties. And while all movie clips are capable of producing certain actions, they are not necessarily producing those same actions at the same time. This is akin to our orange example. Though oranges share common characteristics, they are all going to be different sizes with variations in color, flavor, etc. Likewise, not all oranges are growing at the same time. Nor are all oranges falling from the tree at the same time.

So how does an object like a movie clip know that it should have a certain set of properties and methods? If you look in the Actions toolbox or the Reference panel within Flash, you see that there are many different types of built-in objects, from the movie clip (MovieClip) and button (Button) types to the XML and Array types. Further examination will reveal that each type has its own properties and methods.

For example, movie clips have properties such as _alpha, _x, _y, and _visible (although these properties show up under the main Properties folder, and not within the MovieClip/Properties folder), while an XML object has properties like nodeType and xmlDecl.

Note: When we talk about built-in classes in Flash/ActionScript, this means that Macromedia has defined these classes, and they are available by default within the Flash authoring application and player.

The answer to our question as to how an object knows what set of properties and methods it should have is that all objects are associated with a prototype. In object-oriented terminology we call this prototype a class. Each of the types listed in the Actions toolbox is a built-in class. MovieClip is a class from which all movie-clip objects are derived. Even though each instance is an individualized object, each movie clip originated from the MovieClip prototype. Therefore, whatever is defined for the prototype (the class) is automatically inherited by each of its instances. So all movie clips have the same set of properties and methods. Likewise, all arrays are derived from the Array class, all XML objects are derived from the XML class, etc.

Constructing Objects

So far, so good? This OOP thing is easier than you thought, right? Now that we've had a chance to examine how to work with movie-clip objects, let's also take a look at some of the other types of objects you can create in ActionScript.

In order to create a movie-clip object you dragged a movie-clip symbol from the library onto the stage and gave it a name. That was simple enough. But how about other types of objects? You cannot create an array symbol or an XML symbol and drag it onto the stage. So how do you go about creating these other types of objects?

Actually, movie clips, buttons, and text fields (all types of objects) are unique in how they are instantiated. The majority of objects are not represented visually on the stage. Instead, most objects are created programmatically using what are known as constructors. A constructor is a special function that shares its name with the class, and when used in a new statement (new is a keyword, a word with specific meaning in ActionScript) these constructors create a new instance of the class. The most fundamental type of object is derived from the Object class. Here's an example of an Object object (an object derived from the Object class) created using a constructor.

var oMyObject = new Object();

The preceding statement tells Flash to create a new object derived from the Object class. The new object is assigned to a variable, oMyObject, so that we can reference it later on in the code.

All the built-in ActionScript classes are dynamic. That means you can add new, custom properties and methods to an instance in addition to getting and setting the properties and methods that are inherited from the class. In order to assign a new custom property you use dot syntax just as if you were assigning a value to an inherited property. If Flash cannot find the property within the object, it creates a new one.

var oMyObject = new Object();
oMyObject.newProperty = "Yay for dynamic properties!";
trace(oMyObject.newProperty); // Displays: Yay for dynamic properties!

Some constructors take parameters. For example, if you want to create a new instance of the Date class that represents a specific time and date, you need to pass it parameters indicating the year, month, day, hour, minutes, seconds, and milliseconds.

var dThen = new Date(2003, 6, 29, 12, 51, 33, 24);
trace(dThen.getFullYear()); // Displays: 2003

Conclusion

We've now taken an introductory look at basic object-oriented principles in ActionScript. I hope this article has helped clarify a few points for you. Obviously, this article only begins to touch on the depth of OOP. In the next installment of this article we'll discuss creating your own custom classes in ActionScript. Between now and then you may also want to consult my ActionScript Cookbook and/or ActionScript for Flash MX: The Definitive Guide for reference material on the built-in ActionScript classes. Additionally, you may find the following links to be useful references:

• Example FLA files from this article -- Here is a zip archive of the FLA files referred to in this article.

• http://www.debreuil.com/docs/ -- Here you can find an introduction to OOP as it applies to Flash 5. Most of the material still applies to Flash MX.

• http://moock.org/asdg/ -- The companion site for ActionScript for Flash MX: The Definitive Guide.

Joey Lott is a founding partner of The Morphic Group. He has written many books on Flex and Flash-related technologies, including Programming Flex 3, ActionScript 3 Cookbook, Adobe AIR in Action, and Advanced ActionScript 3 with Design Patterns.

O'Reilly & Associates recently released ActionScript Cookbook.

• Sample Chapter 16: Storing Persistent Information, is available free online.

• You can also look at the Table of Contents, the Index, and the Full Description of the book.

• For more information, or to order the book, click here.

Return to the Web DevCenter.

Comments on this article

---

1 to 3 of 3

2. Trackback from http://blog.csdn.net/kinytx/archive/2005/08/18/457585.aspx
   Action Script 2
   2005-08-17 17:00:11  [View]
   
   
4. Trackback from http://www.jackhsieh.org/archives/000009.html
   兩篇物件導向觀念應用在 Flash 和 ActionScript 的文章
   2004-02-11 10:15:35  [View]
   
   
6. An Introduction to OOP in Flash and Actionscript, Part 1, by Joey Lot
   2003-08-13 11:36:33  anonymous2 [View]
   
   

1 to 3 of 3