back

Making the leap to ActionScript 3.0

by R Blank

Adobe Flash® Player 9, the player for SWF files authored in both Adobe® Flex™ 2 and Flash CS3 Professional, represents a huge leap in the power of the Flash platform. With it, you can author experiences that run up to 30 times faster (that's 30 times, not 30%) than equivalent projects authored in Flash 7 or 8.

Flash Player 9 achieves such a massive performance boost through a complete rewrite of the ActionScript™ Virtual Machine (AVM) — the part of Flash Player that understands the code that Flash and Flex developers write. The new version of ActionScript that accompanies the new generation of Flash technology, ActionScript 3.0, also represents a major overhaul. ActionScript 3.0 is much more powerful than its predecessors and brings the ActionScript language into full accordance with the international ECMAScript standard. At the same time, ActionScript 3.0 is much stricter than many current Flash developers are used to.

If you're a trained programmer who's fresh to Flash, you'll probably find ActionScript 3.0 easier than ActionScript 2.0 — much of the legacy architecture that made ActionScript 2.0 confusing to outsiders has been cleaned up. (Timelines are like kryptonite to traditional programmers.) But many existing Flash users with a self-taught ActionScript 1.0 or ActionScript 2.0 background may be intimidated at first by what is, in effect, a real programming language.

One important fact that contributes to this intimidation is that ActionScript 3.0 is an all-or-nothing proposition. When ActionScript 2.0 emerged, you could mix and match ActionScript 1.0 and ActionScript 2.0 as you felt comfortable (with absolutely no effect on the quality or performance of the user experience of your Flash movie). In Flash CS3, you must choose either ActionScript 3.0 or ActionScript 1.0/2.0 — you cannot mix and match your code in the same Flash document. Indeed while Flash 9 SWF files may load Flash 8 SWF files (and vice versa), neither can communicate with each other without workarounds.

In Flash CS3, you can certainly continue writing Flash movies in ActionScript 1.0 or ActionScript 2.0, just as you could use ActionScript 1.0 when ActionScript 2.0 was released. However, the version of ActionScript you use has a direct and massive impact on user experience — even without all the new things you can do in ActionScript 3.0. Developers who seek to master and use it will be able to write applications that blow away their competition.

When I first encountered ActionScript 3.0 in Flash Professional 9 ActionScript 3.0 Preview last year (which was available for many months in Adobe Labs), I was actually shocked by how much Adobe was expecting its current developers to change. But after working with the new language for a while, I realized that a few central concepts and tips would really expedite the transition from ActionScript 1.0/2.0 to ActionScript 3.0. While I won't pretend that the switch to ActionScript 3.0 will be easy for all Flash users, I do believe that a few key tips can rapidly accelerate your learning (and eventual mastery) of this new version of ActionScript.

The benefits of the new language are difficult to overstate, so the quicker you learn, the more your work and possibly your career will benefit. I think most of the ActionScript 1.0/2.0 developers who make the leap to ActionScript 3.0 will really appreciate the nature of the new language once they get used to it — it provides a far more coherent and elegant platform for producing any code-based Flash creations.

Alpha on a scale from 0 to 1

In ActionScript 1.0/2.0, the alpha property of movie clips was set on a scale of 0 to 100. In ActionScript 3.0, it is set on a scale of 0 to 1. In and of itself, this is a minor change — but it's just the sort of small change that can lead a first-time ActionScript 3.0 developer to waste hours on hair-pulling debugging, which increases frustration and decreases the motivation to continue.

There are many other similar, small-scale changes. For instance, all the underscores are gone from all MovieClip properties (for example, _x is now x, and _width is now width), and the attachVideo() method of the Video class is now more appropriately called attachNetStream(). To begin your process of mastering ActionScript 3.0, I strongly suggest visiting the ActionScript Technology Center.

MovieClips

Wouldn't it be nice if this line of code could work?

var mc:MovieClip = new MovieClip();

Well, in ActionScript 3.0 it does. This is probably the biggest conceptual leap that existing Flash developers will have to make. There is a new display list, which is essentially the physical architecture of your SWF file in Flash Player. One of the heaviest burdens from Flash's legacy was its treatment of the movie clip as the parent type of all physical objects in your SWF file — not everything needs to be a movie clip, and not everything needs a timeline.

In ActionScript 3.0 there is a new class called DisplayObject, and MovieClip is just one type of display object. Sprites are another. Each type of DisplayObject has different powers (and consumes different resources). That is, there are things you can do on movie clips that you can't do on sprites, and vice versa.

Just because the code above creates a movie clip doesn't mean you can see it. You need to attach your DisplayObject class to the Stage or to other display objects. You need to explicitly tell Flash where to put the movie clip (or any display object), using the addChild() or addChildAt() methods. This is actually tremendously liberating. In previous versions of Flash, your movie clips were bound to a specific single timeline. If you wanted to move it to a different timeline, you couldn't. Now you can use removeChild() and addChild() to change the location of your display objects in the display list dynamically. (For example, you can remove your movie clip from one timeline in one part of your project and move it to an entirely different movie clip in an entirely different portion of your project.) Wrangling a messy tangle of timelines is a thing of the past.

Where's the _root?

Along with the change to the nature of the display list, the concept of _root is now gone — there is no pointer to the main timeline of your SWF file. (Indeed, you don't even need to have a main timeline.) The universally accessible Stage class is also gone.

So, what's an equivalent concept in ActionScript 3.0? Well, each display object that has been attached to the Stage, or to a child of the Stage, has a pointer to the Stage that's called Stage. You can reference what you used to think of as _root through that Stage property.

Get Adobe Flash Player

Jonathan Duran, senior Flash quality engineer, talks about some of his favorite new features in Flash CS3 Professional.

A brand new package

It's not the size of the package that matters; it's how many classes you can fit in it. A package is a set of classes — a tool that developers use to organize their code. In ActionScript 2.0, packages are just the folders on your computer that house your class files — a handy tool for organizing your code. But you can only have one class per file, and the name of the class has to match the name of the file.

But now you have actual packages, defined with package statements, in your ActionScript (.as) files. An AS file may contain a package (or nested packages) that may in turn contain one or more classes. Although it may seem like programmer gobbledygook, once you begin experimenting with these new code structures, you will likely find them tremendously liberating. At first I wasn't certain how much this feature would change my personal coding style, but as I progressed, I discovered how much easier it was to create classes — particularly pure data classes — as I worked. This is an aspect of ActionScript 3.0 that will teach many ActionScript programmers how to better utilize object-oriented programming.

Importing key packages and classes

Once you start working with class files in ActionScript 3.0, you will quickly realize that, unlike ActionScript 2.0, ActionScript 3.0 requires you to explicitly import those Flash Player classes that in previous versions of ActionScript were inherently present. For instance, to create a text field, you must first explicitly import the text field class:

import flash.text.TextField;

Or to import all the classes in the text package, you could use:

import flash.text.*;

There's nothing new about import statements — they work the same as in ActionScript 2.0. You just need to use them a bit more frequently than you did before. You can do very little in a class file without explicitly importing the proper classes you need.

If you're just getting started with ActionScript 3.0 packages and class files, and you don't want to worry about finding the classes you need, these seven packages contain a large percentage of the classes you will need in most any Flash application or FLA (in professional development practices, you import only the classes you need):

import flash.net.*;
import flash.events.*;
import flash.display.*;
import flash.geom.*;
import flash.ui.*;
import flash.utils.*;
import flash.text.*;

Document class

While the document class can benefit all developers, it will most benefit those of you with one-frame main timelines. Many developers code applications in Flash in which everything in the FLA is placed on a single frame, and then they use a single line of ActionScript to invoke an external class file where all the magic happens. Now you don't even need that single line of code. You can assign a document class to your FLA — a class file for your FLA — either in the Publish Settings dialog box or directly in the Properties panel when your Stage is selected. The class must extend either the sprite or the movie clip (since it is your document class), and the constructor function for that class will automatically be called when your SWF file is loaded. This is an elegant evolution of the code, one whose benefits you will realize when you begin experimenting with it.

Loading bitmaps and movies

Because the loadMovie() method — or the MovieClipLoader() class (as it was called in ActionScript 1.0 and ActionScript 2.0) — has become essential to so many Flash developers, I want to give you the key seven lines of code to begin loading any Flash movie or bitmap (JPEG, PNG, or GIF) into your Flash 9 content. This code is just a simple sample using a sprite; there are many possible variations:

var bgToLoad:String = "05092007.gif";
var bgLoader:Loader = new Loader();
var bgURL:URLRequest = new URLRequest(bgToLoad);
bgLoader.load(bgURL);
var bg:Sprite = new Sprite();
bg.addChild(bgLoader);
addChild(bg);

In this code, you first create a Loader object and instruct it to load your external media using a URLRequest object pointing to the media file. You ensure there is a display object present, bg, in which to load the media. Because this code exists on your main timeline, the final line, addChild, places your bg sprite on out stage.

Loading XML

Just as many Flash users have come to rely on loading external SWF files and bitmaps, so have many become accustomed to using XML to load data into their movies. For those XML consumers, ActionScript 3.0 has some unbelievably amazing leaps. But before we can get to those, I want to share the basic code required to load XML files:

var xmlSrc:String = "myData.xml";
var ur:URLRequest = new URLRequest(xmlSrc);
var ul:URLLoader = new URLLoader();
ul.addEventListener(Event.COMPLETE,dataLoaded);
ul.load(ur);

function dataLoaded(evt:Event):void
{
trace(evt.target.data);
}

In this code, we create a URLRequest object pointing to our XML file. We then create a URLLoader to load the URLRequest, first attaching the dataLoaded() method as a listener for the COMPLETE event (when the XML is fully loaded). Within the dataLoaded() method, we trace the XML by pointing to the data property of the target property of the event itself.

Parsing XML

Now you're ready for the amazing part of working with XML in ActionScript 3.0. It's called ECMAScript for XML (E4X). (ECMAScript 262 is the international open standard with which ActionScript 3.0 is fully compliant.) This is a topic for another article, but I want to highlight it since working with data is so essential and ActionScript 3.0 improves the process so dramatically.

In ActionScript 2.0, most developers parse their XML into Flash data immediately upon loading it, which is very time-consuming and processor-consuming. In ActionScript 3.0 with E4X, you can walk your XML tree just like a file system by addressing the nodes directly. And you can run Regular Expression (RegEx) queries inline in your ActionScript code.

Flash 9 crack

I hope this information has helped you become more comfortable experimenting with ActionScript 3.0. Now you're ready to play with a few of the new features in Flash Player 9 that radically expand the breadth of possible experiences.

The first is full-screen mode. This was designed specifically to enable more compelling video experiences (with absolutely no JavaScript), but it can be used in any application — although keyboard input is disabled. What's really great about Flash CS3 is that the updated video playback components come with the feature built-in. So you can quickly build your own full-screen video applications without any ActionScript in just minutes. (Just be sure to set the allowFullScreen parameter to true in your object embed and/or SWFObject code in the HTML.) For more information, check out Exploring full-screen mode in Flash Player 9 by Tracy Stampfli in the Flash Player Developer Center.

Another killer function is audio spectrum analysis — the tool you would need to build a music visualizer, for instance (such as the ones you see demonstrated in the Ascension application for Apollo). The new SoundMixer class includes a method called computeSpectrum() that turns your music into numbers. Then you draw based on those numbers to create cool audio animations and visualizations. For an amazingly effective tutorial on this topic, read Peter deHaan's blog post about it.

Conclusion

Before I conclude, I want to provide a few guides on where to look for more information. First off, kudos to the Flash support team for assembling such comprehensive help files for Flash CS3 Professional — especially given an entire new language to document.

ActionScript 3.0 and Flash CS3 are still pretty young so few resources exist, but more are sure to come. The first step is to bookmark the Flash Developer Center, which contains lots of new and updated articles, samples, and Quick Start tutorials for ActionScript 3.0 and Flash CS3. Also be sure to consult the Flash CS3 and Flex 2 LiveDocs on Adobe.com. These are great resources for continuously updated help files (as I've referenced repeatedly in this article), and Adobe support techs and other developers respond to comments on the individual notes.

In addition, I would like to personally extend a big thank-you from the Flash community to Joey Lott for single-handedly filling the void since the middle of 2006 with multiple books and DVDs that cover ActionScript 3.0 and Flex 2. They are very accessible resources. Now let's all join in a moment of silent personal prayer to expedite Essential ActionScript 3.0. Ohhhm Colin.

I hope this helped you break through some of the conceptual barriers to ActionScript 3.0 so you can start experimenting with this amazing new technology.


R Blank is CTO of Almer/Blank, an Adobe Alliance Partner based in Venice, California, that specializes in video and application development in Flex, Flash, and open-source technologies for clients including E! Entertainment Television, Microsoft, Apple, and IKEA. R also founded and manages LA Flash, a community of over 2,800 Flash industry professionals and home to three Adobe User Groups for Flash. He also serves on the information technology faculty at the University of Southern California (USC) Viterbi School of Engineering. R is the author of the DMTS Flash CS3 Jumpstart online training and the upcoming AdvancED Flex Applications from Friends of Ed.