Ted Patrick > { Events & Community } > Adobe Systems

If you develop SWF files using Flash or Flex you develop in a tree whether you realize it or not. Trees are the base structure within the Flash Player DisplayList or better named, the DisplayTree. The Tree within the Flash Player 9 using ActionScript 3 starts with the base class of your SWF either inherits from flash.display.Sprite or flash.display.MovieClip classes. These two classes inherit from flash.display.DisplayObjectContainer and thus have methods and logic to adding and removing children.

The inheritance chain looks like so:

flash.display.DisplayObject
^
flash.display.InteractiveObject
^
flash.display.DisplayObjectContainer ( Methods for managing children)
^
flash.display.Sprite ( Sprite has 1 frame )
^
flash.display.MovieClip ( MovieClips has 1+n frames )

With only one root class this is not much of an application but as you will see the basis for building great things is within understanding this simple model. The ability to add and remove children within the DisplayTree is the essence of Flash Player and it is the most important paradigm to understand. Real interactivity comes with the ablity to create a visible tree of objects nested within one another in a tree structure. Flash Player 9 has greatly improved this paradigm by simplifying the API's for adding/removing children and allowing instances to exist both on and off the DisplayTree.

Lets get into some code.

For those using Flex Builder:
1. File > New > ActionScript Project
2. Type "Dounut"
3. Press Enter

package {
   import flash.display.Sprite;
   public class Donut extends Sprite
   {
      public function Donut()
      {}
   }
}

SWF Compiled: 298 bytes ( SWF can be very small! )

Ok so we have a working base class Donut that inherits from Sprite. It is rather boring but it compiles and we are off to the races.

So lets create some children and add them.

So lets make a Ball class. This class will create instances of Balls of various colors and help us create this virtual SWF donut.

package
{
   import flash.display.Sprite;

   public class Ball extends Sprite
   {
      public var color:uint;
      public var radius:Number;

      public function Ball( radius:Number , color:uint ):void
      {
         this.color = color;
         this.radius = radius;
         this.draw();
      }

      public function draw():void
      {
         this.graphics.beginFill( this.color );
         this.graphics.drawCircle( 0 , 0 , this.radius );
         this.graphics.endFill();
      }

   }
}

Ok so we can make balls now or various radius and color. Now lets add the balls into our base class. I typically like to manage a pool of like instances within an Object for simplicity, I think there is a slight hit performance wise when references are looked up this way as the items in an Object are untyped and thus use hash table lookups. But this is for example purposes and as you will see we will be making lots of balls (they are the sprinkles too).

So here are the change to Donut:

package {

   import flash.display.Sprite;
   import Ball;
   public class Donut extends Sprite
   {
      public var balls:Object = new Object()
      public function Donut()
      {
         //create 2 balls
         this.balls.red = new Ball( 100, 0xFF0000 );
         this.balls.blue = new Ball( 50 , 0x0000FF );
         //set ball properties x,y
         this.balls.red.x = 200;
         this.balls.red.y = 200;
         this.balls.x = 25;
         this.balls.y = 25;

         //add the red ball to the base class as a child
         this.addChild( balls.red );

         //add the blue ball as a child of the red ball
         balls.red.addChild( balls.blue );
      }
   }
}

Wow that is one ugly donut but hey this is virtual and its my donut not yours.

The real key here is the last 2 lines of the Donut constructor. The calls to addChild are very important as these are the keys to understanding the DisplayTree. See as everything here inherits from DisplayObjectContainer, addChild, removeChild are methods in every instance of both Dounut and Ball classes. This allows them to be inserted into one another seamlessly as children. It is this behavior that builds up the tree in the Flash Player.

I have got to run to a custom visit but I will be covering reparenting next time. Experiment with creating more Ball instances and creating a tree of them. As you will see this pattern is wildly extensible and is the root of all interactivity in Flash Player.

If you understand this lesson, you can do amazing things in Flex and Flash Blaze.

Part 2 on Monday!

Cheers,

Ted :)