tutorials flash architecture_as

In the new architecture, a flash application possesses a ‘display list’. This list contains all the visible elements. These elements are split into 2 types:

• DisplayObject : a visible element characterised by its position, dimension etc
• DisplayObjectContainer : a rectangular zone which can as easily contain a DisplayObject as another DisplayObjectContainer.

Here is a representation of the display list of a flash application :

In looking at this display list, we can compare it to a tree of which the leaves are DisplayObjects and the nodes are DisplayObjectContainers

This structure is based on the Composite design pattern :

At the root of this display list, we find the Stage type which is the main container. We can compare it to the _root of this application. Access to the main container is achieved with the help of the stage property of all DisplayObjects.

But where are the MovieClips, TextFields etc. in all of this? Here is a diagram which positions them:

We quickly notice that everything has an EventDispatcher, which signifies that all of the elements in this diagram can emit events.

With the use of an application, we are going to see the behaviors which DisplayObject and DisplayObjectContainer propose to us. In this application, 3 tools at the top right allow us to add and delete rectangular and oval shapes. We can select a shape; this selection is shown by a red arrow and can add can add it to the other shapes thanks to the behavior of DisplayObjectContainers with the knowledge that each shape can be moved:

Application of the AS3 architecture

I have initially created an Application class which inherits the Sprite class which I change into a flash document (please see the following tutorial: The document class in Flash 9). Once the constructor function is called I create 3 tools (I will leave the Tool class for a future tutorial). Here is the commented constructor function:

public function Application() {
        // Creation of a shapes container
	screen = new Square(250,250,0xFFFFFF);
	screen.name = "screen";
 
        // As I previously said, everything is an EventDispatcher
        // Here we listen to events of the mouse click and release
	screen.addEventListener(MouseEvent.MOUSE_DOWN,selectShape);
	screen.addEventListener(MouseEvent.MOUSE_UP,stopDragShape);
 
        // The active shape is defined by default
	activeShape = screen;
 
        // Creation of 3 tools for the addition and deletion of rectangular and oval shapes
	toolAddRect = new Tool(new RectangleIcon());
	toolAddRect.commandType = "rect";
	toolAddRect.addEventListener(ToolEvent.COMMAND_TYPE,addShape);
	toolAddRect.move(225,10);
 
	toolAddOval = new Tool(new OvalIcon());
	toolAddOval.commandType = "oval";
 
	toolAddOval.addEventListener(ToolEvent.COMMAND_TYPE,addShape);
	toolAddOval.move(225,35);
 
	toolEraser = new Tool(new EraserIcon());
	toolEraser.commandType = "erase";
	toolEraser.addEventListener(ToolEvent.COMMAND_TYPE,eraseShape);
	toolEraser.move(225,60);
	//
 
        // Instance of a graphic element present in the library
	ptr = new Pointer();
	ptr.name = "pointer";
        // We deactivate the use of the mouse on this element
	ptr.mouseEnabled = false;
 
        // Addition of elements to our display list
	addChild(screen);
	addChild(toolAddRect);
	addChild(toolAddOval);
	addChild(toolEraser);
}

Let’s examine the event managers:

private function selectShape(e:MouseEvent):void {
        // We check if the active shape contains a red arrow
        // If this is not the case we remove it with the removeChild method behaviour of the DisplayObjectContainer class
        // This method asks the DisplayObject reference, in this case the red arrow
	if(activeShape.contains(ptr)) {
		activeShape.removeChild(ptr);
	}
 
        // If the event target is screen
        // We give it an active shape status 
	if(e.target == screen) {
		activeShape = screen;
	} else {
                // Otherwise
                // we activate the target of
                // the event
		activeShape = e.target;
                // we give it an arrow to indicate
                // that it is active
		activeShape.addChild(ptr);
                // and we can start to drag it
		activeShape.startDrag();
	}
}
 
private function stopDragShape(e:MouseEvent):void {
        // We stop the dragging of the active shape
        // once your mouse’s left click is released
	activeShape.stopDrag();
}

See here the method executed when we delete a shape:

private function eraseShape(e:ToolEvent):void { 
        // ToolEvent is a personalised event
        // We check that we are not on the screen
        // so as to avoid deleting it
	if(activeShape != screen) {
               // We recuperate the active shape’s parent
               // with the help of the parent property of the DiplayObjectContainer
		var container:DisplayObjectContainer = activeShape.parent;
               // The parent allows us to delete an active shape with the help of the removeChild method passing a reference to the latter
		container.removeChild(activeShape);
	}
 

With this example we have just seen the new AS3 architecture. For those interested in the code, you can find it here: Architecture.zip

By ITERATIF - BUGALOTTO Olivier (2006). You can find this tutorial and comments on the subject on my blog