Migrando para ActionScript 3 – Parte 2

Este artigo define uma série de alterações feitas no ActionScript 3. Todos os códigos de exemplos podem ser copiados e colados no painel de ActionScript, não necessitando de qualquer elemento visual no stage.

Aqui falo sobre objetos visuais como Sprite e SimpleButton, bem como inseri-los no palco e trocar a ordem de seu posicionamento na display list (em ActionScript 2 chamados depths). Não existe qualquer download ligado a este artigo, pois ele é inteiramente para estudo. É fundamental para qualquer um que esteja ingressando no novo modelo de programação do Flash.

Pré-Requisitos

Não existe qualquer pré-requisito, mas conhecer a linguagem ActionScript 2 facilita muito o entendimento.

Também é importante ler o artigo anterior, o primeiro desta série.

DisplayObject x DisplayObjectContainer

Core display classes

O pacote flash.display na ActionScript 3.0 inclui as classes para objetos visuais, que podem aparecer no Flash Player. A seguinte ilustração mostra as relações das subclasses do núcleo de classes do pacote display object.

A ilustração mostra a hierarquia de classes da Display Object. Note que algumas destas classes, especificamente StaticText, TextField, e Video, não estão no pacote de flash.display, mas herdam também a classe DisplayObject.

Todas as classes que estendem a classe de DisplayObject herdam seus métodos e propriedades. Para mais informação, veja as propriedades e os métodos do DisplayObject.

Você pode instanciar os objetos das seguintes classes contidas no pacote flash.display:

Bitmap – Você usa a classe Bitmap para definir os objetos bitmap, carregados de arquivos externos ou renderizados com ActionScript. Você pode carregar bitmaps de arquivos externos através da classe Loader.

Loader – Usado para carregar arquivos externos.

Shape Você deve usar essa classe para criar gráficos vetoriais, como retângulos, círculos, etc.

SimpleButton – Um SimpleButton em ActionScript representa um símbolo Button. Uma instancia de botão contem três estados: up, down, e over.

Sprite Um objeto Sprite pode conter gráficos e outros tipos de objetos visuais, assim como outros DisplayObjectContainer.

MovieClip Um objeto MovieClip é o mesmo símbolo MovieClip criado via ferramenta em tempo de autoria. Na prática, um MovieClip é similar a um objeto Sprite, com a exceção de que um MovieClip contem uma timeline.

As seguintes classes, não estão no pacote flash.display, mas são subclasses da DisplayObject:

A classe TextField, incluída no pacote flash.text, é um objeto que serve para exibição de textos dinâmicos, bem como campos de formulário para preenchimento(input).

A classe Video, incluída no pacote flash.media, é um objeto usado para exibição de vídeos.

Resumindo, DisplayObject são objetos visuais que não podem conter outros objetos dentro de si, e DisplayObjectContainer são objetos que podem conter outros objetos, inclusive outros objetos do tipo DisplayObjectContainer.

Propriedade graphics

Podemos criar desenhos via programação, a maioria dos display objects, como Shape, Sprite, Button e MovieClip. Todas essas classes contem uma propriedade graphics, que é uma instância da classe flash.display.Graphics. A classe Graphics define uma API (Application Programming Interface) para desenhar conteúdos via programação.

import flash.display.Sprite;
var desenho:Sprite = new Sprite();
desenho.graphics.lineStyle(1, 0x990000);
desenho.graphics.moveTo(50, 50);
desenho.graphics.lineTo(100, 100);
addChild(desenho);

A classe Graphics contém métodos definidos para sejam criados quaisquer tipos de desenhos, incluindo curvas, linhas, e desenhos geométricos prontos, como é o caso do circulo e de retângulo, bem como métodos para preenchimento de cor desses objetos, complexos ou não.

SimpleButton

Quando estamos em tempo de execução, também podemos criar instâncias do tipo Button, flash.display.SimpleButton. Que contém três áreas (frames) principais e mais um frame de hitTest, que indica sua área de colisão. Com ActionScript definimos essas áreas através de propriedades, que indicam uma instância para cada estado.

Definindo estados para um botão

upstate – Define o que o botão apresenta quando este não é pressionado nem clicado.

overState – Define o que o botão apresenta quando o usuário passa o cursor sobre ele.

downstate – Define o que o botão apresenta quando o usuário o pressiona.

hitTestState – Define a área clicável de um botão.

Exemplo:

import flash.display.SimpleButton;
import flash.display.Sprite;

var up:Sprite = new Sprite();
up.graphics.beginFill(0x990000);
up.graphics.drawRect(50, 50, 50, 50);
up.graphics.endFill();

var over:Sprite = new Sprite();
over.graphics.beginFill(0xFF0000);
over.graphics.drawRect(50, 50, 50, 50);
over.graphics.endFill();

var down:Sprite = new Sprite();
down.graphics.beginFill(0xCCCCCC);
down.graphics.drawRect(50, 50, 50, 50);
down.graphics.endFill();

var hit:Sprite = new Sprite();
hit.graphics.beginFill(0xCCCCCC);
hit.graphics.drawRect(50, 50, 50, 50);
hit.graphics.endFill();

var botao:SimpleButton = new SimpleButton();
botao.upState = up;
botao.overState = over;
botao.downState = down;
botao.hitTestState = hit;

this.addChild(botao);

Adicionando um item a uma Display List

Quando criamos um objeto via ActionScript, ele não se torna visível automaticamente. Para anexá-lo a algum lugar, precisamos fazer isso explicitamente, os métodos addChild e addChildAt nos permitem fazer esse trabalho.

import flash.display.Sprite;

var quadro:Sprite=new Sprite();
quadro.graphics.lineStyle(1, 0x000000);
quadro.graphics.beginFill(0x000000, .2);
quadro.graphics.drawRect(50, 50, 100, 100);
quadro.graphics.endFill();

this.addChild(quadro);

Para adicionar um item em uma posição especifica utilizamos o addChildAt(), no exemplo abaixo, crio um objeto de nome quadro e depois um objeto de nome elipse, em seguida coloco um objeto de nome circulo entre os quadro e elipse:

import flash.display.Sprite;

var quadro:Sprite=new Sprite();
quadro.graphics.lineStyle(1, 0x000000);
quadro.graphics.beginFill(0x000000);
quadro.graphics.drawRect(50, 50, 100, 100);
quadro.graphics.endFill();

this.addChild(quadro);

var elipse:Sprite=new Sprite();
elipse.graphics.lineStyle(1, 0x000000);
elipse.graphics.beginFill(0x990000);
elipse.graphics.drawEllipse(70, 70, 100, 100);
elipse.graphics.endFill();

this.addChild(elipse);

var circulo:Sprite=new Sprite();
circulo.graphics.lineStyle(1, 0x000000);
circulo.graphics.beginFill(0xFF00FF);
circulo.graphics.drawEllipse(50, 90, 100, 100);
circulo.graphics.endFill();

var index:uint = getChildIndex(quadro);
this.addChildAt(circulo, index1);

Removendo um item de uma Display List

Para remover um objeto, indique seu nome através do método removeChild(). No exemplo abaixo removeremos o objeto circulo ao clicar em qualquer lugar do palco.

import flash.display.Sprite;
import flash.events.MouseEvent;

var quadro:Sprite=new Sprite();
quadro.graphics.lineStyle(1, 0x000000);
quadro.graphics.beginFill(0x000000);
quadro.graphics.drawRect(50, 50, 100, 100);
quadro.graphics.endFill();

this.addChild(quadro);

var elipse:Sprite=new Sprite();
elipse.graphics.lineStyle(1, 0x000000);
elipse.graphics.beginFill(0x990000);
elipse.graphics.drawEllipse(70, 70, 100, 100);
elipse.graphics.endFill();

this.addChild(elipse);

var circulo:Sprite=new Sprite();
circulo.graphics.lineStyle(1, 0x000000);
circulo.graphics.beginFill(0xFF00FF);
circulo.graphics.drawEllipse(50, 90, 100, 100);
circulo.graphics.endFill();

var index:uint = getChildIndex(quadro);
this.addChildAt(circulo, index1);

stage.addEventListener(MouseEvent.CLICK, apagaCirculo);
function apagaCirculo (evt:MouseEvent):void {
	removeChild(circulo);
}

Para excluir um objeto através de seu índice, utilize o método removeChildAt(). No exemplo abaixo removemos item a item, já que em ActionScript 3.0, quando uma posição deixa de existir, todas as outras descem um índice.

import flash.display.Sprite;
import flash.events.MouseEvent;

var quadro:Sprite=new Sprite();
quadro.graphics.lineStyle(1, 0x000000);
quadro.graphics.beginFill(0x000000);
quadro.graphics.drawRect(50, 50, 100, 100);
quadro.graphics.endFill();

this.addChild(quadro);

var elipse:Sprite=new Sprite();
elipse.graphics.lineStyle(1, 0x000000);
elipse.graphics.beginFill(0x990000);
elipse.graphics.drawEllipse(70, 70, 100, 100);
elipse.graphics.endFill();

this.addChild(elipse);

var circulo:Sprite=new Sprite();
circulo.graphics.lineStyle(1, 0x000000);
circulo.graphics.beginFill(0xFF00FF);
circulo.graphics.drawEllipse(50, 90, 100, 100);
circulo.graphics.endFill();

var index:uint = getChildIndex(quadro);
this.addChildAt(circulo, index1);

stage.addEventListener(MouseEvent.CLICK, apagaCirculo);
function apagaCirculo(evt:MouseEvent):void {
	if (numChildren >0) {
		removeChildAt(0);
	}
}

Movendo objetos para frente ou para trás

O método setChildIndex() move o objeto para um índice especifico.

O método getChildIndex() retorna o índice de um objeto especifico.

O método getChildAt() retorna o objeto encontrado num índice específico.

import flash.display.Sprite;
import flash.events.MouseEvent;

var quadro:Sprite=new Sprite();
quadro.graphics.lineStyle(1, 0x000000);
quadro.graphics.beginFill(0x000000);
quadro.graphics.drawRect(50, 50, 100, 100);
quadro.graphics.endFill();

this.addChild(quadro);

var elipse:Sprite=new Sprite();
elipse.graphics.lineStyle(1, 0x000000);
elipse.graphics.beginFill(0x990000);
elipse.graphics.drawEllipse(70, 70, 100, 100);
elipse.graphics.endFill();

this.addChild(elipse);

var circulo:Sprite=new Sprite();
circulo.graphics.lineStyle(1, 0x000000);
circulo.graphics.beginFill(0xFF00FF);
circulo.graphics.drawEllipse(50, 90, 100, 100);
circulo.graphics.endFill();

var index:uint = getChildIndex(quadro);
this.addChildAt(circulo, index1);

stage.addEventListener(MouseEvent.CLICK, moveQuadroParaFrente);
function moveQuadroParaFrente(evt:MouseEvent):void {
	setChildIndex(quadro, getChildIndex(elipse));
}

Um exemplo completo sobre como arrastar objetos simulando janelas de softwares segue abaixo.

import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.MouseEvent;

var quadro:Sprite=new Sprite();
quadro.graphics.lineStyle(1, 0x000000);
quadro.graphics.beginFill(0x000000);
quadro.graphics.drawRect(50, 50, 100, 100);
quadro.graphics.endFill();
quadro.addEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown);
quadro.addEventListener(MouseEvent.MOUSE_UP, _onMouseUp);
this.addChild(quadro);

var elipse:Sprite=new Sprite();
elipse.graphics.lineStyle(1, 0x000000);
elipse.graphics.beginFill(0x990000);
elipse.graphics.drawEllipse(70, 70, 100, 100);
elipse.graphics.endFill();
elipse.addEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown);
elipse.addEventListener(MouseEvent.MOUSE_UP, _onMouseUp);
this.addChild(elipse);

var circulo:Sprite=new Sprite();
circulo.graphics.lineStyle(1, 0x000000);
circulo.graphics.beginFill(0xFF00FF);
circulo.graphics.drawEllipse(50, 90, 100, 100);
circulo.graphics.endFill();
circulo.addEventListener(MouseEvent.MOUSE_DOWN, _onMouseDown);
circulo.addEventListener(MouseEvent.MOUSE_UP, _onMouseUp);

var index:uint = getChildIndex(quadro);
this.addChildAt(circulo, index1);

function _onMouseDown(evt:MouseEvent):void {
	evt.target.startDrag();
	setChildIndex(DisplayObject(evt.target), numChildren-1);
	evt.target.addEventListener(MouseEvent.MOUSE_MOVE, _onMouseMove);
}
function _onMouseUp(evt:MouseEvent):void {
	evt.target.stopDrag();
	evt.target.removeEventListener(MouseEvent.MOUSE_MOVE, _onMouseMove);
}
function _onMouseMove(evt:MouseEvent):void {
	evt.updateAfterEvent();
}

Autor: Leandro Amano

WebSite: www.leandroamano.com.br

De 0 a 10, o quanto você recomendaria este artigo para um amigo?