Forums Développement Multimédia

Dans la nouvelle architecture, une application flash possède une liste d'affichage (“display list”). Cette liste contient tous les éléments visibles. Ces éléments se repartissent en 2 types :

• DisplayObject : élément visible qui se caractérise par sa position, ses dimensions, etc…
• DisplayObjectContainer : zone rectangulaire qui peut contenir aussi bien des DisplayObjectque des DisplayObjectConteneur.

Voici d'ailleurs une représentation de la liste d'affichage d'une application flash :

En regardent cette liste d'affichage, nous pourrions la comparer à un arbre dans lequel les feuilles sont les DisplayObjects et les noeuds sont les DisplayObjectContainers.

D'ailleurs cette structure est basée sur le design pattern Composite :

A la base de cette liste d'affichage, nous trouvons le type Stage qui est le conteneur principal. Nous pouvons le comparer au _root de cette application. L'accés a ce conteneur principal se fait à l'aide de la propriété stage de tous les DisplayObjects .

Mais ou sont dans tout ca, les MovieClip, les TextField, etc… voici un schéma qui nous les situe :

Nous remarquerons au passage que tout est EventDispatcher, ce qui signifie que tous les éléments de ce schèma peuvent émettre des évènements.

Nous allons voir a travers une application, les comportements que nous proposent DisplayObject et DisplayObjectContainer. Dans cette application, 3 outils en haut à droite nous permettent d'ajouter et retirer des formes rectangulaires et ovales. Nous pouvons sélectionner une forme, cette sélection est indiquée par une flèche rouge, et lui ajouter ainsi d'autres formes grâce au comportement des DisplayObjectContainer sachant que chaque forme peut être déplacée :

Application de l'architecture AS3

J'ai d'abord créer une classe Application qui hérite de la classe Sprite que je passe en tant que document flash (voir tutorial : La classe document dans Flash 9). Lorsque la fonction constructeur est appelée je créer 3 outils, je laisse la classe Tool pour un prochain tuto, voici la fonction constructeur commentée :

public function Application() {
        // Creation d'un conteneur de formes
	screen = new Square(250,250,0xFFFFFF);
	screen.name = "screen";
 
        // Comme je le disais tout est EventDispatcher
        // Ici nous ecoutons les evenements de pression et relachement
        // de la souris
	screen.addEventListener(MouseEvent.MOUSE_DOWN,selectShape);
	screen.addEventListener(MouseEvent.MOUSE_UP,stopDragShape);
 
        // Definit par defaut la forme active
	activeShape = screen;
 
        // Creation des 3 outils pour l'ajout des formes rectangulaire, ovales et la suppression
	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);
	//
 
        // Instancie un element graphique present dans la bibliotheque
	ptr = new Pointeur();
	ptr.name = "pointeur";
        // Nous faisons en sort de desactive l'utilisation de la souris sur cet element
	ptr.mouseEnabled = false;
 
        // Ajout des elements a notre liste d'affichage
	addChild(screen);
	addChild(toolAddRect);
	addChild(toolAddOval);
	addChild(toolEraser);
}

Examinons les gestionnaires d'évènements :

private function selectShape(e:MouseEvent):void {
        // Nous verifions si la forme active contient une fleche rouge
        // si c'est la cas nous la retirons a l'aide de la methode removeChild
        // comportement de la classe DisplayObjectContainer
        // Cette methode nous demande la reference du DisplayObject, ici fleche rouge
	if(activeShape.contains(ptr)) {
		activeShape.removeChild(ptr);
	}
 
        // Si la cible de l'evenement est screen
        // Nous l'attribuons en tant que forme active 
	if(e.target == screen) {
		activeShape = screen;
	} else {
                // Dans le cas contraire
                // nous attribuons la cible de l'evenement
                // comme forme active
		activeShape = e.target;
                // Nous lui ajoutons une fleche pour indiquer
                // quelle est la forme active
		activeShape.addChild(ptr);
                // Et nous pouvons commencer a la deplacer
		activeShape.startDrag();
	}
}
 
private function stopDragShape(e:MouseEvent):void {
        // Nous arretons le deplacement de la forme active
        // Lorsque le bouton gauche de votre souris est relachee
	activeShape.stopDrag();
}

Regardons la méthode executée lorsque nous supprimons une forme :

private function eraseShape(e:ToolEvent):void { // ToolEvent est un evenement personnalise
        // Nous verifions que nous ne somme pas sur le screen
        // afin d'eviter de le supprimer
	if(activeShape != screen) {
               // Nous recuperons le parent de la forme active
               // a l'aide de la propriete parent de DiplayObjectContainer
		var container:DisplayObjectContainer = activeShape.parent;
               // Le parent nous permet ainsi de supprimer la forme active a  l'aide de la
               // methode removeChild qui nous demande la reference de cette derniere
		container.removeChild(activeShape);
	}
}

Nous venons de voir a travers cet exemple, la nouvelle architecture de AS3, pour ceux qui sont interessés par le code, vous le trouverez ici : architecture.zip

Par ITERATIF - BUGALOTTO Olivier (2006) Vous pouvez retrouver ce tutorial et des commentaires à ce sujet sur mon blog