Understanding the changes in the display API in ActionScript 3.0

There are many differences between ActionScript 2.0 and ActionScript 3.0. This article focuses on the changes in the display API. In this article, I provide two very simple Adobe Flash files, one written in ActionScript 2.0 and the other written in ActionScript 3.0. Though these applications are very simple, you can use them to learn the basics of how the display API works in ActionScript 3.0. The article covers only the basics of the display API. If you need more information about it, please refer to the sources mentioned at the end of the article.

The first section of this article shows you some simple code written in ActionScript 2.0 that draws a red rectangle and a text field. When you click the rectangle, the text field changes its text. In the second section, I rewrite this example in ActionScript 3.0—and, before I show you the code, I explain a little bit about the new concepts that ActionScript 3.0 uses. In this process, you will learn some basic ideas of how the display system works in ActionScript 3.0.

A very simple example written in ActionScript 2.0

Take a look at the example written in ActionScript 2.0. The following script draws a red rectangle on the Stage:

This code creates an empty movie clip by using the createEmptyMovieClip() method of the top level _root object. Then I use the drawing methods of the newly created movie clip to draw a red rectangle.

To have this movie clip respond to a mouse click, I wrote an event handler:

The following code creates a text field:

It creates a text field using the createTextField() method of the _root object and assigns a value to the text property of the text field.

You can view the Flash content by pressing Control + Enter in Flash. The SWF file is pretty simple: A user clicks the rectangle and the value of text field changes.

Rewriting the example in ActionScript 3.0

Now I will write the same example using ActionScript 3.0. Before I actually write any code, I need to explain a few things.

Figure 1 shows the display list of an ActionScript 3.0 application. The display list is a tree structure that contains all display objects that have been added to the Stage. As you can see, there is no "_root" movie clip in ActionScript 3.0. The top-level display object in ActionScript 3.0 is the Stage. Other display objects descend from that top-level object. The default display object is the MovieClip object, which represents the SWF file itself. It is the parent of all other display objects. The two display objects that the code creates are added as children of the default display object.

In the ActionScript 2.0 example, the _root object itself is a movie clip. Actually, in ActionScript 2.0, there is not much choice when you need to create a displayable object. It has to be a movie clip or a text field.

By contrast, ActionScript 3.0 includes many display object classes, such as Shape, Sprite, MovieClip, and so forth—these are included for a reason. In ActionScript 2.0, you can use a MovieClip object to draw shapes and lines, interact with a movie clip, and load a SWF file into a movie clip. However, sometimes you only need to draw an object, without using all of the other functionality. In this case, creating a fully functional movie clip wastes memory and CPU time. In ActionScript 3.0, you can use a Shape object. The Shape class contains the drawing API but it doesn't support interaction or loading another movie clip, so it saves resources compared to using a fully functional MovieClip object.

Let me show you the ActionScript 3.0 code. First, it draws the red rectangle:

The Sprite class defines a type of display object in ActionScript 3.0. It supports drawing and interaction. I use it because the rectangle needs to respond to a mouse click by the user. If you don't need interaction, just use the Shape class.

Now the code declares a variable named mySprite and uses the new keyword to create a new instance of a Sprite object. Note that the code does not draw the rectangle. Flash doesn't draw the rectangle through a method of the Sprite object; rather, it draws the rectangle using a method of the graphics property of the Sprite object. Each of the classes that support drawing (Shape, Sprite, and MovieClip) has a property named graphics. This property is an instance of the Graphics class. It contains all of the drawing methods.

Then the code includes add the event hander for the click event (which is defined by the MouseEvent.CLICK constant). Adding an event listener is not the focus of this article, so I will not go into further details here. Just look at the code; it is similar to the way you add event listeners to an object in ActionScript 2.0:

After that, the code adds the newly created mySprite object to the top-level container (the default display object in Figure 1):

Next, the code instantiates a text field:

It's easy to understand the code that creates the text field. It is similar to the code that creates the Sprite instance.

Finally, the code uses the addChild() method to add this text field to the top-level container:

Run this example; you will find that it acts exactly as the ActionScript 2.0 version does.

Where to go from here

In the two examples in this tutorial, I demonstrate how to use ActionScript 3.0 to display content. It is a simple example that illustrates the basics of creating display objects in ActionScript 3.0.

This article discusses only a small part of the API. If you want to learn more about ActionScript 3.0, refer to the ActionScript language migration page, which describes the language differences between ActionScript 2.0 and 3.0.

Attributions

I researched this topic using the LiveDocs ActionScript Language Reference.