Author Archive for Zevan



06
Dec

Sound Mixer Source


In Chapter 11 we took an extensive look at sound in AS3. We’ve created a sound mixer demo to showcase some of the techniques covered in the book.

Continue reading ‘Sound Mixer Source’

02
Dec

Complex Particles Source


In Chapter 7 we talked extensively about programming motion with AS3, and created a basic particle system. This post contains source for a more complex particle system, based on the book example.

Continue reading ‘Complex Particles Source’

20
Nov

Dispatching Custom Events


In Chapter 3, we cover the basics of using events. One topic that’s not covered extensively (appearing in later chapters), is using the dispatchEvent() method to send a specific, or even custom, event. This method is contained within the EventDispatcher class.

The dispatchEvent() method takes an Event object as its first and only argument. The following code will dispatch a custom event of type “my event”:

dispatchEvent(new Event("my event"));

You can also use any AS3 event constant:

dispatchEvent(new Event(Event.INIT));

The below class dispatches an event after a one second timer has elapsed:

package {

    import flash.utils.Timer;
    import flash.events.TimerEvent;
    import flash.events.EventDispatcher;
    import flash.events.Event;

    public class DispatchEventExample extends EventDispatcher {

        private var _timer:Timer;

        public function DispatchEventExample() {
            _timer = new Timer(1000, 1);
            _timer.addEventListener(TimerEvent.TIMER, onTimer,
                                    false, 0, true);
            _timer.start();
        }

        private function onTimer(evt:TimerEvent):void {
            dispatchEvent(new Event("one second elapsed"));
        }
    }
}

To listen for the event, use the addEventListener() method. Similar to when dispatching events, as discussed previously, you can either listen for an event constant (such as Event.ENTER_FRAME, or your own custom event class), or a simple string. Here is an example document class that listens for the “one second elapsed” event:

package {

    import flash.display.Sprite;
    import flash.events.Event;

    public class Main extends Sprite {

        private var _dispatchExample:DispatchEventExample;

        public function Main() {
            _dispatchExample = new DispatchEventExample();
            _dispatchExample.addEventListener("one second elapsed",
                                      onOneSecond, false, 0, true);
        }

        private function onOneSecond(evt:Event):void {
            trace("_dispatchExample has dispatched an event");
        }
    }
}

Continue reading ‘Dispatching Custom Events’

19
Nov

Stopping Event Propagation


Stopping an event’s propagation, or continued movement through the display list, is another option for more advanced event processing. In most cases, an event will not die at the target phase right after it is executed. Instead, it will bubble back up through any existing ancestors. However, you can also prevent the event from continuing on its journey by halting the propagation process.

Continue reading ‘Stopping Event Propagation’

19
Nov

Interesting Use for Capture Phase


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.

Continue reading ‘Interesting Use for Capture Phase’

17
Nov

The Event Object


When we use addEventListener() to assign a method or function to handle an event, that method or function receives an event object as its only argument. The event object has a few properties that help us to get information about the event we're handling. The events, such as MouseEvent.CLICK, for example, are nearly self-explanitory. Try running this code snippet in your timeline:

ActionScript 3.0:
  1. var box:Sprite = new Sprite();
  2. box.name = "box";
  3. box.graphics.beginFill(0);
  4. box.graphics.drawRect(0,0,100,100);
  5. box.x = box.y = 50;
  6. addChild(box);
  7.  
  8. box.addEventListener(MouseEvent.CLICK,
  9.                      onClicked,
  10.                      false, 0, true);
  11.  
  12. function onClicked(evt:Event):void {
  13.     trace("type: " + evt.type);
  14.     trace("bubbles: " + evt.bubbles);
  15.     trace("eventPhase: " + evt.eventPhase);
  16.     trace("cancelable: " + evt.cancelable);
  17.    
  18.     trace("target: " + evt.target + " " + evt.target.name);
  19.     trace("currentTarget: " + evt.currentTarget +
  20.           " " + evt.currentTarget.name);
  21. }

After you've pasted this code in your timeline, run your movie and click on the black box. The onClicked function will give you information about the CLICK event in your output window:

type: click
bubbles: true
eventPhase: 2
cancelable: false
target: [object Sprite] box
currentTarget: [object Sprite] box

The type property is a string of the event type. In our example the type is "click"—the string representation of the MouseEvent.CLICK constant. The bubbles property is a boolean that is true when the event bubbles up through the display list and false when it doesn't. The eventPhase property contains an integer representing the phase the event is in at the time the proeprty is queried (1 for capture, 2 for target, 3 for bubble). The cancelable property is a boolean that is true if default behaviors associated with an event can be disabled.

The last two properties are the most commonly used properties of the Event object: target and currentTarget. The target property contains a reference to the display object reached during the "target" phase. For a CLICK event this will normally be whatever display object is directly under the mouse when the CLICK event is triggered. You can see this clearly in the prior "Event Phases in Action" post.

The currentTarget property contains a reference to the display object that is actively processing the event. It's easy to get the target and currentTarget properties mixed up. To make this clearer, let's edit our timeline code slightly to get a better look at the difference. Instead of adding your event to btn, add it to the stage:

Change your addEventListener() method accordingly:

stage.addEventListener(MouseEvent.CLICK,
                       onClicked,
                       false, 0, true);

Now run your movie, click the black box, and take a look at your output window:

type: click
bubbles: true
eventPhase: 3
cancelable: false
target: [object Sprite] box
currentTarget: [object Stage] null

Comparing this to our previous output we can see that the event is no longer getting handled in the "target" phase. Since there is no longer a CLICK event directly associated with btn the event isn't handled until the bubble phase when the CLICK event makes it's way back up to the stage. The currentTarget property reflects this - it shows us that the object processing the event is the stage. This differentiation is important and powerful.

Continue reading 'The Event Object'

11
Nov

Event Listener Priority


The familiar format we've used for event listeners includes five parameters.

//btn.addEventListener(eventType, listenerFunction, useCapture, priority,
//                     useWeakReference);
btn.addEventListener(MouseEvent.CLICK, onBtnClick, false, 0, true);

The first and second parameters are mandatory, and are the event type and function that is called when the listener is triggered. The third, fourth, and fifth parameters are optional. The third determines the event phase used (see "Event Phases in Action" for more information), and the last specifies whether or not a weak reference is used (see "Garbage Collection" on page 47 of the book for more information).

The fourth parameter, however, is an integer that sets the priority of the listener. Because a single object can use multiple listeners for the same event, it is sometimes useful to specify the order in which the similar listeners are executed.

The default value for the priority parameter is 0. If the optional parameter is omitted, all listeners will have a value of 0 and events will be handled in the order in which they were added. If unique integers are used, the listener with the highest priority will be executed first, and so on down the line.

The below code snippet uses the priority parameter to execute the events in the opposite order in which they were added:

ActionScript 3.0:
  1. var btn:Sprite = new Sprite();
  2. btn.graphics.beginFill(0);
  3. btn.graphics.drawCircle(0,0,10);
  4. btn.x = btn.y = 100;
  5. addChild(btn);
  6.  
  7. btn.addEventListener(MouseEvent.MOUSE_DOWN, onPriority0, false, 0);
  8. btn.addEventListener(MouseEvent.MOUSE_DOWN, onPriority1, false, 1);
  9. btn.addEventListener(MouseEvent.MOUSE_DOWN, onPriority2, false, 2);
  10.  
  11. function onPriority0(evt:Event):void {
  12.     trace("priority 0 event");
  13. }
  14.  
  15. function onPriority1(evt:Event):void {
  16.     trace("priority 1 event");
  17. }
  18.  
  19. function onPriority2(evt:Event):void {
  20.     trace("priority 2 event");
  21. }

This will trace:

priority 2 event
priority 1 event
priority 0 event

While it is not common for objects to have multiple listeners listening for the same event, if that need arises, you can still control their execution order using the priority parameter. For example, you may require that an initialization routine execute prior to another function. We'll revisit this topic again in future posts, so check back periodically if you're interested in this topic.

10
Nov

Event Phases in Action


In Chapter 3 we discuss the new event model and many of its new features. Over the next few posts we'll dig a little deeper and look at some of the more detailed aspects of dealing with events. Here, we'll talk about event phases and how they work.

Continue reading 'Event Phases in Action'

03
Nov

More Properties (Blend Modes and Filters)


In Chapter 3 we cover some of the basic properties of display objects: x, y, width, height, scaleX, scaleY, rotation, alpha etc.... In this post we've expanded a bit on the demo included in our book. We've added the the blendMode property and the filters array property.

Continue reading 'More Properties (Blend Modes and Filters)'




Speaking



Archives