Introduction to OOP in Flash and ActionScript, Part 1 by Joey Lott, author of ActionScript Cookbook 08/12/2003

Object-oriented programming, or OOP, often seems to be shrouded in a veil of mystery. It sounds esoteric, perhaps the kind of thing into which you need to be initiated. And for many, it remains that way because the learning curve with so many development platforms is so high. Enter Flash and ActionScript, and the whole picture changes quite significantly.

Unlike trying to create applications using C++, C#, Java, and the like, Flash and ActionScript don't require any sophisticated IDEs, complicated class path configurations, command line compilation, or ritualistic incantations. With Flash, you just install the authoring application, add your code to a key frame or two, and export your movie. That's one of the benefits. But that's just the tip of the proverbial iceberg.

One of the greatest traditional stumbling blocks with learning object-oriented programming is the inherent abstractness. Just what is an object, after all? Again, Flash and ActionScript come to the rescue. In ActionScript one of the most central types of object happens to be something that can be seen, something with which almost every Flash developer is already reasonably familiar -- the movie clip. Finally, here is an object that we can see. So with this in mind, let's begin by first talking about the definition of an object.

Object Schmobject

Related Reading Actionscript Cookbook Solutions and Examples for Flash MX Developers By Joey Lott

Perhaps surprisingly, an object in computer science and an object in the face-to-face world are remarkably similar. In OOP terminology, an object is something with particular, predictable qualities. We can know the qualities of an object based on its type. This, of course, is not unlike objects with which you interact every day.

For example, an orange is an object. All oranges belong to the orange type. And based on that, we know that the orange object will have certain predictable qualities such as roundness, an orange color, sweetness, etc. In OOP terminology the qualities of an object that are descriptive are called properties. The qualities of an object that produce some kind of action are called methods. For example, an orange can grow, fall from the tree, etc. These are actions for an orange object.

As already mentioned, most programming languages don't make it easy to wrap your mind around this whole object concept. But in the ActionScript world we can see several of the many types of objects, including movie-clip objects. This can really help facilitate the learning of OOP concepts, and make it easier to understand. Not only can we see the objects, but we can also see the effects of the properties and methods of movie-clip objects.

OK. Here's the part where you get to follow along if you want. In order to illustrate the effects of a movie clip's properties and methods, let's try a few experiments.

1. Within a new Flash document create a new movie clip symbol named Circle. And using the circle drawing tool, draw a filled circle on the stage within the Circle symbol.

Figure 1. Creating a new movie clip symbol called Circle.

2. Return to the main timeline (Scene 1) and open the library if you have not yet done so.

3. For best practices, make sure to rename the default layer. Let's name it Circle.

4. Drag an instance of the Circle movie-clip symbol onto the stage so it appears on the left side of the stage.

Figure 2. Dragging a Circle movie clip symbol onto the left side of the stage.

5. Assign an instance name of circle_mc to the new object you just created. You can do this by selecting the circle on the stage, opening the Property inspector, and typing the name in the field that says <Instance Name>.

Figure 3. Assigning an instance name of circle_mc to the new object.

6. Test the movie (ctrl+Enter or cmd+Enter, or choose Control --> Test Movie). At this point we just want to verify that the object appears in the exported movie just as it does during authoring time. This is because in a moment we are going to assign new values to some of the properties, and we want to see the contrast. Once you have verified that the circle appears as it does during authoring time, you can close the .swf and return to the authoring environment.

7. Now we're going to add some simple ActionScript code to assign new values to some of the object's properties. But before we do that, let's add a new layer to the main timeline. It is best to add all your ActionScript to its own layer on any given timeline. By convention, let's name the layer Actions.

8. Select the first (and only) key frame on the Actions layer, and open the Actions panel. You can open the Actions panel by pressing F9.

9. If your Actions panel is in Normal mode, change it to Expert mode now. You can do so by selecting Normal mode from the View Mode menu in the Actions panel. Expert mode enables you to type directly into the Script pane.

Figure 4. Changing the Actions panel to Expert mode.

10. Now, if you recall, we've created an object with the name of circle_mc. In the Script pane let's add some code that tells that object to relocate itself to the right side of the stage. We can accomplish this by assigning new values to the object's _x and _y properties. The first thing we do is address the object by typing its name:

circle_mc

Then, we use a dot to indicate that what will follow will be either a property or method of that object:

circle_mc.

We then add the name of the property with which we want to work:

circle_mc._x

And then, just as with a variable, we can use this property in an assignment statement:

circle_mc._x = 450;

You want to add this single line of code to the Script pane.

Figure 5. Adding the assignment statement to the Script pane.