Virtualize Interatividade Digital

Criando MovieClips dinamicamente com Action Script 3 – III

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 terceira finalidade.

Para acessar os recursos de desenho nós utilizaremos a propriedade graphics dos MovieClips. Essa propriedade nos fornece acesso a um objeto do tipo Graphics, que está presente em todos os MovieClips.
Ao realizar uma chamada a um método da classe Graphics o flash realiza a ação sobre o movieclip proprietário do atributo graphic correspondente. Por exemplo, se você usa “movie_mc.drawCircle()”, você estará desenhando um círculo dentro do MovieClip de nome “movie_mc”. Execute o exemplo a seguir no flash:

// Criamos um MovieClip vazio.
var circulo_mc = new MovieClip();

// Definimos a cor (ox123456) ao desenharmos dentro do MovieClip circulo_mc.
circulo_mc.graphics.beginFill(0x123456);

// Desenhamos um círculo com a cor específicada no comando anterior, na posição
// 100,100 e com raio de 50 pixels.
circulo_mc.graphics.drawCircle(100, 100, 50);

// Adicionamos o MovieClip criado/desenhado ao root.
addChild(circulo_mc);

Os recursos da classe Graphics permite-nos a criação de aplicações muito intessantes. Existem até mesmo programas de edição gráfica disponíveis na Web que utilizam a classe Graphics. Sugiro ao leitor acessar o help da classe Graphics do flash. Lá encontramos a lista completa de métodos da classe.

Vamos a um exemplo um pouco mais complexo. Crie um projeto em flash e adicione dois botões ao stage, um chamado “desenhar_btn” e outro chamado “apagar_btn”. Esses botões vão assumir a função dos botões de lápis e borracha da toolbar de uma aplicação gráfica, como o paint, por exemplo. Veja:

Agora adicione o código Actionscript a seguir na primeira frame do projeto:

// Indica se o botão do mouse está pressionado.
var desenhando   = false;

// Indica qual ação deve ser realizada de acordo com o botão clicado (desenhar ou apagar).
var modo		 = "";

// Ouvintes para os eventos do mouse.
stage.addEventListener(MouseEvent.MOUSE_DOWN	, IniciarDesenho);
stage.addEventListener(MouseEvent.MOUSE_UP		, TerminarDesenho);
stage.addEventListener(MouseEvent.MOUSE_MOVE	, Desenhar);

// Ouvintes para os botões.
desenhar_btn.addEventListener(MouseEvent.CLICK	, AlterarModo);
apagar_btn.addEventListener(MouseEvent.CLICK	, AlterarModo);

// Tratador do evento de movimentação do cursor do mouse. Realiza o desenho
// quando o usuário pressiona a tecla do mouse.
function Desenhar(evt: Event)
{
	if (desenhando)
	{
		// Desenha um circulo preto na posição do mouse (lápis).
		if (modo == "desenhar")
		{
			container_mc.graphics.beginFill(0x000000, 0.5);
			container_mc.graphics.drawCircle(mouseX, mouseY, 2);
		}
		// Desenha um circulo branco na posição do mouse (borracha).
		else
		{
			container_mc.graphics.beginFill(0xFFFFFF, 1);
			container_mc.graphics.drawCircle(mouseX, mouseY, 20);
		}

		// Assegura que o desenho estará atrás dos demais elementos (botões).
		if (getChildAt(0) != container_mc) swapChildren(container_mc, getChildAt(0));
	}
}

// Tratador do evento de clique nos botões "Desenhar" e "Apagar".
function AlterarModo(evt: Event)
{
	if (evt.target.name == "desenhar_btn")	modo = "desenhar";
	else modo = "apagar";
}

// Tratadores dos eventos de pressionar e soltar tecla do mouse.
function IniciarDesenho(evt: Event)
{
	desenhando = true;
}

function TerminarDesenho(evt: Event)
{
	desenhando = false;
}

Nas linhas 7 a 10 criamos os EventListeners para os eventos do mouse, pois desejamos que quando o usuário clique no stage ele desenhe ou apague na posição clicada.

Nas linhas 13 e 14 criamos os EventListeners para os botões “desenhar_btn” e “apagar_btn”, pois desejamos que quando o usuário clique nesses botões a aplicação mude o a ferramenta selecionada (lápis ou borracha).

Nas linhas 18 a 38 definimos a função que será executada quando o cursor do mouse for movimentado sobre o stage. Nas linhas 23 a 33 executamos a ação apropriada de acordo com o botão clicado pelo usuário. Caso seja “desenhar”, desenhamos um círculo preto com transparência 0.5 (na linha 25 definimos a cor e o alpha do circulo) de raio 2 e na posição do cursor do mouse (na linha 26 definimos onde o círculo será desenhado e qual o seu raio).

O mesmo se repete para a ação de apagar (linhas 31 e 32), só que dessa vez usamos um raio maios e a cor branca sem transparência.

Nas linhas 41 a 45 definimos o tratador para o evento de clique nos botões, que define a ação de acordo com o botão clicado pelo usuário. Nas linhas 48 a 56 identificamos se o usuário está com o botão do mouse pressionado ou não, armazenando true ou false na variável desenhando.

Em caso de dúvidas é só perguntar! Até o próximo artigo!

Tags: actionscript 3, criação de sites, criando movieclips dinamicamente, tutorial action script, tutorial actionscript