Virtualize Interatividade Digital

Criando MovieClips dinamicamente com Action Script 3 – I

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

Para criar um MovieClip como container, basta apenas criar um MovieClip vazio e utilizar o metódo “addChild()” para adicionar o conteúdo. Posteriormente podemos acessar o conteúdo que adicionamos ulizando variáveis ou alguns recursos da classe MovieClip.

Vejamos o exemplo a seguir:

// Array (vetor) com os endereços das imagens que iremos
// carregar.
var imagens = new Array("http://assets3.blogblogs.com.br/avatars/0/131/avatar_131176_50.jpg",
	"http://assets3.blogblogs.com.br/avatars/0/119/avatar_119276_50.jpg",
	"http://babado.ig.com.br/images/2/2/2/1702400.babado_mercado_atrizes_1gente___fotos_40_39.jpg",
	"http://1.gravatar.com/avatar/7b9b4d233fdd7dccfea4aeab695c960b?s=48&d=wavatar",
	"http://www.minhaserie.com.br/imagens/usuarios/avatar/m/p/19529.jpg",
	"http://contigo.abril.ig.com.br/imagem/foto/outra/bem-pagas/280708-bem-paga-5.jpg" );

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

// Adicionamos o MovieClip ao nosso filme.
addChild(containerImagens_mc);

// Ouvinte do evento CLICK no botão Carregar.
function CarregarImagens(evt: Event)
{
	// Percorre o array de imagens carregando-as.
	for (var i = 0; i < imagens.length; i++)
	{
		// Cria um objeto Loader.
		var loader = new Loader();

		// Solicita o load da imagem.
		loader.load(new URLRequest(imagens[i]));

		// Posiciona o objeto a direita do anterior.
		loader.x = i * 60;

		// Adiciona o objeto Loader no MovieClip container.
		// Quando a imagem for carregada ela será exibida.
		containerImagens_mc.addChildAt(loader, i);
	}
}

// Ouvinte do evento CLICK no botão Apagar.
function ApagarImagens(evt: Event)
{
	// Enquanto existirem elementos dentro do MovieClip containerImagens_mc.
	while (containerImagens_mc.numChildren > 0)
	{
		// Removemos o primeiro elemento da lista de elementos.
		containerImagens_mc.removeChildAt(0);
	}
}

// Associamos o evento de click no botão "carregar_btn" à função CarregarImagens.
carregar_btn.addEventListener(MouseEvent.CLICK    , CarregarImagens);

// Associamos o evento de click no botão "apagar_btn" à função ApagarImagens.
apagar_btn.addEventListener(MouseEvent.CLICK    , ApagarImagens);

Na linha 11, criamos um MovieClip vazio, utilizando o comando “new MovieClip()”. Conforme vimos em artigos anteriores, utilizamos o operador new para criar novos objetos de uma determinada classe.

Na linha 20 utilizamos um laço de repetição “for” para percorrer o array de urls que criamos na linha 1. Caso você tenha dificuldades em entender esse trecho, sugiro que você procure pelo tutorial sobre laços de repetição e sobre arrays (vetores) na categoria básico.

A cada iteração do nosso laço “for”, uma nova ordem de load de imagem é enviada ao flash. Lembre-se que os comandos são executados independente do load da imagem ter sido concluído ou não, ou seja, a instrução de load de imagem é enviada para o Flash e o load é iniciado em paralelo ao laço “for” que avançará para o próximo item do vetor “imagens”.

Na linha 29 posicionamos o objeto loader de acordo com o valor da varíavel i. Dessa forma, as imagens não ficarão uma em cima da outra.

Na linha 33 adicionamos o objeto loader ao MovieClip containerImagens_mc. Assim, logo que o load finalizar, o conteúdo correspondente será exibido dentro do MovieClip containerImagens_mc. A função “addChildAt()” permite especificarmos a posição Z onde o elemento será adicionado ao MovieClip alvo do método. A posição Z define a ordem dos elementos dentro de um MovieClip, ou seja, qual elemento vem a frente de qual. Dessa forma, estamos adicionando elementos com propriedade Z crescente iniciando 0.

Já na função ApagarItens na linha 41 criamos um laço de repetição que se repete enquanto o MovieClip “containerImagens_mc” possuir elementos filhos (elementos dentro dele). Assim, enquanto essa condição for verdadeira, o código presente na linha 44 realiza a remoção do primeiro elemento da lista de filhos dele.

Neste artigo apresentamos alguns recursos que nos permitem, por exemplo, criar uma galeria de imagens. Podemos usar um MovieClip vazio para armazenar, posicionar e remover imagens.

Nos próximos artigos veremos outras finalidades para a criação dinâmica de MovieClips. Em artigos futuros também exploraremos exemplos mais completos. Em caso de dúvidas, fique a vontade para perguntar.

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