Virtualize Interatividade Digital

Criando MovieClips dinamicamente com Action Script 3 – II

Criar MovieClips dinamicamente, utilizando Action Script 3, é uma tarefa fundamental para ao desenvolvimento de aplicações dinâmicas e interativas.

Quando falamos em criação de MovieClips dinamicamente, temos três finalidades:

1. Utilizar o MovieClip criado como container para outros símbolos.
2. Utilizar o MovieClip criado como um elemento de interface modelo (que se repetirá).
3. Desenhar dinamicamente o conteúdo do MovieClip.

Nesse artigo iremos falar sobre a segunda finalidade.

O Action Script nos permite criar um MovieClip no Flash e adicioná-lo dinamicamente ao Stage durante a execução da aplicação.

Isso é muito útil e fundamental para algumas finalidades. Imagine por exemplo um jogo de tetris. Desejamos que as peças apareçam aleatoriamente, e que o jogo não tenha fim. Evidentemente não iremos posicionar milhões de peças durante a criação do projeto no Flash, a adição das peças será feita dinamicamente via Action Script. Precisamos apenas dizer pro Flash que ele deve disponibilizar os MovieClips para que possamos adicioná-los dinamicamente.

Para exportamos um MovieClip para uso em Action Script basta clicarmos com a tecla direita do mouse sobre o MovieClip desejado na biblioteca e clicar em “Linkage” (o código fonte deste artigo está disponível no final):

Será exibida uma janela chamada “Linkage properties”. Nessa janela devemos marcar “Export for ActionScript” e no campo de texto “Class” devemos informar o nome que desejamos utilizar para instanciar esse MovieClip (nome da classe). Vou chamar apenas de “Quadrado”.

Após isso será exibida uma janela “ActionScript Warning”. Clique em Ok. Agora, para criarmos dinamicamente uma cópia desse MovieClip, precisamos apenas usar “new Quadrado()”. Veja o exemplo:

// Quantidade de quadrados dinâmicos que criaremos.
var QUANTIDADE_QUADRADOS = 10;

// Laço de repetição que cria os quadrados.
for (var i = 0; i < QUANTIDADE_QUADRADOS; i++)
{
	// Instancia o quadrado (usando a classe que exportamos no linkage)
	var quadrado_mc = new Quadrado();

	// Posiciona o quadrado de acordo com o valor de i.
	quadrado_mc.x = i * 30;

	// Cria os ouvintes de evento para os eventos MOUSE_DOWN (pressionar tecla do mouse)
	// e MOUSE_UP (soltar tecla do mouse) sobre o quadrado em criação.
	quadrado_mc.addEventListener(MouseEvent.MOUSE_DOWN    , IniciarDrag);
	quadrado_mc.addEventListener(MouseEvent.MOUSE_UP    , PararDrag);

	// A propriedade buttonMode define se o MovieClip deverá se comportar como um botão.
	// Se buttonMode for true, o cursor do mouse irá virar uma mão quando estiver sobre
	// o MovieClip.
	quadrado_mc.buttonMode = true;

	// Define a transparência do MovieClip de acordo com o valor de i.
	quadrado_mc.alpha = (i+1) * (1 / QUANTIDADE_QUADRADOS);

	// Adiciona o quadrado_mc ao root (timeline principal).
	addChild(quadrado_mc);
}

// Ouvinte do evento MOUSE_DOWN dos quadrados.
function IniciarDrag(evt: Event)
{
	// Recuperamos o MovieClip (quadrado) que foi clicado.
	var alvo_mc = MovieClip(evt.target);

	// O método startDrag() da classe MovieClip faz o
	// movieclip seguir o cursor do mouse.
	alvo_mc.startDrag();
}

// Ouvinte do evento MOUSE_UP dos quadrados.
function PararDrag(evt: Event)
{
	// Recuperamos o MovieClip (quadrado) que foi clicado.
	var alvo_mc = MovieClip(evt.target);

	// O método stopDrag() da classe MovieClip faz o
	// movieclip parar de seguir o cursor do mouse.
	alvo_mc.stopDrag();
}

Neste exemplo, introduzimos mais alguns recursos da classe MovieClip. A propriedade “buttoMode” permite definirmos se desejamos que o MovieClip se comporte como um botão. Caso seja definida com true, ao posicionarmos o cursor do mouse sobre o MoviveClip, o cursor assumirá a aparência de uma mão (hand cursor). Caso seja false, o cursor permanecerá uma seta.

Os métodos “startDrag()” e “stopDrag()” iniciam e interrompem o drag do mouse. O drag faz com que o MovieClip siga o cursor do mouse.

No próximo artigo veremos como desenhar dinamicamente utilizando as funções de desenho presentes em MovieClips. Sinta-se a vontade para perguntas!

Clique aqui para fazer o download do arquivo-fonte deste tutorial

Tags: actionscript 3, criando movieclips dinamicamente, tutorial action script, tutorial actionscript