Learning ActionScript 3.0

Earlier, in the "Event Phases in Action" post, we discussed using the event listener capture phase. This post shows an animation-based example of the capture phase in use.

Before AS3, if I wanted to reference a bunch of unnamed clips I would use a for..in loop:

// as2 style
for (var i:String in this) {
    trace(this[i]);
}

I would follow this up with a check to see if this[i] was a movie clip and, if it was, I would do something with it. This approach no longer makes much sense with the advent of the AS3 display list. Instead, you would use something like this:

for (var i:uint = 0; i < numChildren; i++) {
    trace(getChildAt(i));
}

If we wanted to get at all the nodes of the display list our code would start to look a bit more complicated. We addressed this in the book in Chapter 4, in the "Displaying the Display List" section beginning on page 54. As an interesting alternative we can use the ADDED_TO_STAGE event's capture phase to get at all the nodes on the display list. Here is a simple example:

var container:Sprite = new Sprite();
container.name = "container";
var one:Sprite = new Sprite();
one.name = "one";
var two:Sprite = new Sprite();
two.name = "two"
var three:Sprite = new Sprite();
three.name = "three";
var four:Sprite = new Sprite();
four.name = "four";

one.addChild(two);
two.addChild(three);
three.addChild(four);

container.addChild(one);

container.addEventListener(Event.ADDED_TO_STAGE, onAdded, true, 0, true);
addChild(container);

function onAdded(evt:Event):void {
    trace(evt.currentTarget.name + " " + evt.target.name);
}

This will trace the following to the output window:

container one
container two
container three
container four

The above code starts off by creating a set of nested sprites. Sprite container holds sprite one, sprite one contains sprite two, etc. Given this group of sprites we add a listener to the container sprite with the capturePhase boolean set to true. Because all sprites dispatch an ADDED_TO_STAGE event, the listener function runs for each sprite starting with one moving down the display list to two and so on. The currentTarget property of the event object remains container.

 

Applied Example

A few weeks back one of my students asked me about the animation that happens on http://thomasedison.org/. I went through a few basic steps to simulate this type of animation. I started off by tracing a bitmap in Flash. Then, to quickly create many movie clips, I exporting to an AI file and re-importing to use the new AI import feature. That quickly gave me 300+ unnamed movie clips. I then used the for..loop display list approach to add a simple Hooke's law (see Chapter 7) animation to each clip.

A couple days later I was thinking about uses for the capture phase. After doing a test similar to the timeline code above, I did a thomasedison.org-esque animation using a capture phase approach:

  Download Capture Phase Face (806.1 KB, 148 hits)

Here is the capture phase part of the code:

Since the faceSketch movie clip is placed on the stage within the FLA, we just remove it, add our listener, add faceSketch to the display list and we can actually do away with our listener right after that - no need to keep it around. The ScatterEase class animates each of the unnamed clips nested within faceSketch.

 Print This Post

Related Content

• Event Phases in Action
• Mandatory Argument Types
• Dispatching Custom Events
• Stopping Event Propagation
• The Event Object