DISPLAY OBJECTS E AS3

.: Display List

Neste tutorial, veremos algumas das principais diferenças entre Actionscript 3.0 e Actionscript 2.0/1.0, que são o Display List, DisplayObjects e DisplayObjectContainers. Inicialmente veremos o Display List. O Display List gerencia todos os objetos que podem ser mostrados pelo Flash Player e consequentemente o caminho dos objetos incluídos nele. A seguir vermos um exemplo de como criávamos um novo objeto (neste caso, um MC) e incluíamos o mesmo no Stage com AS2.0/1.0 e então veremos como fazer com AS3.0.

- Actionscript 1.0/2.0

// Timeline Principal: frame 1
this.createEmptyMovieClip(“meu_mc”, this.getNextHighestDepth());
trace(meu_mc);
// Saída (output): _level0.my_mc

- Actionscript 3.0

// Timeline Principal: frame 1
var meuMovieClip:MovieClip = new MovieClip();
this.addChild(meuMovieClip); // inclui uma instância do meuMovieClip no filme principal
trace(meuMovieClip);
// Saída (output): [object MovieClip]

O que notamos inicialmente é que no AS 3.0 podemos agora criar um objeto usando a instrução (comumente chamada de statement) “new“. Isto inclui Botões e TextFields também. Outra coisa que observamos é que usávamos o getNextHighestDepht para trabalhar com as “profundidades” e que agora não o fazemos mais. Ao invés disso quando criamos um objeto no AS 3.0, este não é incluído no Stage! O Display List gerencia todos os objetos visíveis no Stage, qualquer coisa que não esteja separada no Display List é considerada invisível. Se quisermos incluir o objeto no Stage, devemos usar o método addChild em algum DisplayObjectContainer (a timeline principal ou “_root” é um DisplayObjectContainer como veremos adiante rapidamente). Notamos também que no AS 3.0, não demos um nome de instância ao nosso objeto MovieClip. Para fazer isso, precisamos usar a propriedade MovieClip.name e definir o nome. Veja o exemplo a seguir:

meuMovieClip.name = “meu_mc”;

.: DiplayObjects e DisplayObjectContainers

A classe DisplayObject é a classe básica para todos os objetos que podem ser colocados no Display List. Há dois tipos: DisplayObject e DisplayObjectContainer. DisplayObjects são objetos que não podem ter children (como um objeto Shape ou TextField). Portanto, como deve ter presumido, o DisplayObjectContainer é um DisplayObject que pode ter children, podendo ser outros DisplayObjects ou outros DisplayObjectContainers. DisplayObjectsContainers são os que permitem que organizemos objetos no Stage. Vejamos um exemplo:

// Timeline principal: frame 1
var meuMovieClip:MovieClip = new MovieClip();
var container1:Sprite = new Sprite();
var container2:Sprite = new Sprite(); container1.addChild(meuMovieClip);
container2.addChild(container1);
this.addChild(container2);

Criamos 3 objetos, um MovieClip e dois Sprites (sprites são uma novidade no AS 3.0, eles são basicamente MovieClips muito leves, sem timeline, perfeitos para serem usados como containers). A seguir usamos o método addChild para adicionarmos children a eles (container1 e container2). Incluímos meuMovieClip como um child para o container1, container1 como um child de container2 e finalmente, container2 como um child da Timeline Principal (ou _root). O Display List ficou assim:

Display List
timeline principal ( _root)
container2 (child de _root)
contianer1 (child de container2)
meuMovieClip (child de container3, ou seja, o _root)

A vantagem do Display List é sua versatilidade sobre o gerenciamento de profundidade, ou seja, nosso objeto MovieClip, sendo pai ou aninhado dentro de dois outros objetos (se contarmos o _root), nós podemos ainda facilmente mover nosso MovieClip de um pai para outro. Vejamos um exemplo de deslocamento de um objeto MovieClip para o _root:

// Timeline principal: frame 1
container1.removeChild(meuMovieClip);
this.addChild(meuMovieClip);
trace(meuMovieClip.parent); // output (saída): [object MainTimeline]

Agora meuMovieClip é um child (filho) da timeline principal ou _root. Para fazer isso com AS 1.0/2.0 teríamos um grande trabalho e em muitos casos seria impossível.

.: Trabalhando com Children

Agora que sabemos como DisplayObjectContainers podem incluir children e como o Display List os gerencia, veremos como é simples gerenciar múltiplos children. Se considerarmos o DisplayObjectContainer como um array, podemos considerar algo parecido com isto:

var parent:Array = new Array(child1, child2, child3, child4);

O child4 está sobre o child3, que por sua vez está sobre o child2, que está sobre o child1.

Quando usamos o método addChild() para incluir um child, ele é automaticamente incluído no final da lista (em nosso exemplo, seria um child5), similarmente como um método Array.push(). Podemos mover ou incluir um child em uma posição específica da lista de child através método addChildAt() que permite a inclusão e mudança de índice (posição) de um child dentro do parent. Vejamos um exemplo:

// timeline principal: frame 1
var portaRetrato:Sprite = new Sprite();
var fig1:Bitmap = new Bitmap();
var fig2:Bitmap = new Bitmap();
var fig3:Bitmap = new Bitmap();fig1.name = “figura1″;
fig2.name = “figura2″;
fig3.name = “figura3″;

portaRetrato.addChild(fig1);
portaRetrato.addChild(fig2);
portaRetrato.addChildAt(fig3, 2);
trace(portaRetrato.getChildAt(2).name); // saída (output): figura3

Como podemos perceber, é muito fácil incluir um objeto BitMap (figura3) na posição 2 (ou outra qualquer) como vimos no exemplo. Outra grande vantagem deste método é que através dele podemos posicionar figura3 na mesma posição que figura2, sem sobrescrever. Ao invés disso, figura2 é automaticamente movido um índice acima na lista. Em AS 1.0/2.0 seria mais complicado fazer a mesma coisa.

.: Juntando tudo

Agora que entendemos como funciona o Display List e o DisplayObject, vamos unir todos esses conceitos. No próximo exemplo, criaremos um conjunto de retângulos no Stage. Quando o usuário clica num deles, os índices dos retângulos child são configurados como última posição da lista (fazemos isso através da propriedade numChildren do DisplayObjectContainer) e é trazido para a frente de todos os retângulos. O usuário pode também pressionar, segurar e arrastar o retângulo pelo Stage.

import flash.text.TextField;
import flash.text.TextFormat; stage.align = “TL”;
stage.scaleMode = “noScale”;

var retanguloContainer:Sprite = new Sprite();

var colunas:int = 5;
var linhas:int = 5;

var retanguloEspaco:int = 2;

var retanguloAltura:uint = stage.stageWidth / linhas;
var retanguloLargura:uint = stage.stageHeight / colunas;
var inicioX:Number = retanguloEspaco;
var inicioY:Number = retanguloEspaco;
var retanguloIndice:int = 0;

var sombra:DropShadowFilter = new DropShadowFilter();
sombra.distance = 3;
sombra.angle = 45;
sombra.alpha = 20;
sombra.blurX = sombra.blurY = 6;

for(var j:int = 0; j < colunas; ++j){
inicioX = retanguloEspaco;
for(var i:int = 0; i < linhas; ++i){
var retangulo:Sprite = new Sprite();

retangulo.name = “caixa”+ ++retanguloIndice;

retangulo.x = inicioX;
retangulo.y = inicioY;
retangulo.buttonMode = true;
retangulo.graphics.lineStyle(1, 0×999999, 1, true);
retangulo.graphics.beginFill(0×333333, 1);
retangulo.graphics.drawRect(0, 0, retanguloLargura – retanguloEspaco, retanguloAltura – retanguloEspaco);
retangulo.filters = [dropShadow];

retangulo.addEventListener(MouseEvent.MOUSE_OVER, retanguloOnMouseOver);
retangulo.addEventListener(MouseEvent.MOUSE_OUT, retanguloOnMouseOut);
retangulo.addEventListener(MouseEvent.MOUSE_DOWN, retanguloOnPress);
retangulo.addEventListener(MouseEvent.MOUSE_UP, retanguloOnRelease);

inicioX += retangulo.width + retanguloEspaco;

var retanguloNome:TextField = new TextField();
retanguloNome.text = retangulo.name;
retanguloNome.width = retanguloLargura;
retanguloNome.height = 25;
retanguloNome.y = (retangulo.height / 2) – (retanguloNome.height / 2);
retanguloNome.mouseEnabled = false;
retanguloNome.wordWrap = true;

var retanguloNomeFormato:TextFormat = new TextFormat(“verdana”, 10, 0×666666, null, null, null, null, null, TextFormatAlign.CENTER);
retanguloNOme.setTextFormat(retanguloNomeFormato);

retangulo.addChild(retanguloNome);
retanguloContainer.addChild(retangulo);
}
inicioY += retangulo.height + retanguloEspaco;
}
addChild(retanguloContainer);

function retanguloOnMouseOut(evt:MouseEvent){
if(evt.eventPhase == EventPhase.AT_TARGET){
evt.target.graphics.clear();
evt.target.graphics.lineStyle(1, 0×999999, 1, true);
evt.target.graphics.beginFill(0×333333, 1);
evt.target.graphics.drawRect(0, 0, retanguloLargura – retanguloEspaco, retanguloAltura – retanguloEspaco);
}
}

function retanguloOnMouseOver(evt:MouseEvent){
if(evt.eventPhase == EventPhase.AT_TARGET){
evt.target.graphics.clear();
evt.target.graphics.lineStyle(1, 0×333333, 1, true);
evt.target.graphics.beginFill(0×999999, 1);
evt.target.graphics.drawRect(0, 0, retanguloLargura – retanguloEspaco, retanguloAltura – retanguloEspaco);
}
}

function retanguloOnPress(evt:MouseEvent){
if(evt.eventPhase == EventPhase.AT_TARGET){
evt.target.parent.setChildIndex(evt.target, (evt.target.parent.numChildren – 1));
evt.target.startDrag();
}
}

function retanguloOnRelease(evt:MouseEvent){
if(evt.eventPhase == EventPhase.AT_TARGET){
evt.target.stopDrag();
}
}

Sugestão para teste: clique e arraste um dos retângulos e depois clique no retângulo que ficou sob ele. Perceba que o retângulo clicado é trazido para frente!

Download (arquivo fonte )

(Fonte: ActionScript.org)