Building an AS3 component framework: Events and Inheritance

Building a component architecture in AS3 is much easier than it was in AS2. The structure and features of the language help us to write better code. At the conceptual level we have polymorphism in the shape of a consistent API and loose coupling thanks to the native event architecture.

Events in AS3
To be fair there was a mix-in event architecture for AS2 but it required the use of a rather inelegant Delegate (that's hard to say) class or a 3rd party alternative such as Grant Skinners GDispatcher class. Thankfully those days are behind us.

Understanding how events work is now crucial to building anything in AS3. Events are not only an integral part of the language, they are far more versatile than they were in AS2. I was going to write an overview of all the new event functionality but to be perfectly honest you can't beat the official Adobe article on the subject: 'Introduction to event handling in ActionScript 3.0'. The key points you'll want to understand are the three event phases and how event propagation works.

The dynamic duo
It makes sense to me to separate the component graphics from their functionality as I want to be able to design and skin them using the drawing and animation tools inside Flash. Functional code will live inside an AS3 class and the component graphics will live inside a Flash FLA file. Each component therefore will consist of a MovieClip containing its graphics which is bound (using the Linkage properties in the library) to an AS3 class containing its functionality. This workflow is really no different from AS2 although the linkage properties in AS3 can be a little more prescriptive.

Inheritance: choosing a base class
I've mentioned this in earlier posts but my other fundamental design decision is to create a base component class for all my components. This will keep all the common "system wiring" in one place. I'm going to call this class AbstractComponent.as.

If this class extends an existing class then it will inherit all of the properties and methods of its parent. An interesting consequence of the integrated event architecture is that inheritance is now preferred over composition when creating components. Again I wont dwell on the details but if you're interested then you should read Colin Moock's post about Composition vs inheritance for Sprite and MovieClip.

I want to take full advantage of the animation features of the Flash IDE so I'm going to be extending MovieClip rather than the Sprite class. The full inheritance chain looks like this: AbstractComponent > MovieClip > Sprite > DisplayObjectContainer > InteractiveObject > DisplayObject > EventDispatcher > Object and the class looks like this:

package org.computus.core
{
  import flash.display.MovieClip;
  public class AbstractComponent extends MovieClip 
  {
    // ------------------------------------------ 
    // CONSTRUCTOR 
    public function AbstractComponent():void 
    {
      super();
    }
  }
}