PESQUISA: 

 

Fórum de Flash
Fórum de discussão sobre Flash moderados por especialistas.

tutoriais
Os melhores tutoriais de Flash escritos em Português.

open sources
Milhares de "open sources" devidamente catalogadas e classificadas.

jogos
Centenas de viciantes jogos desenvolvidos em Flash.

websites
Selecção dos melhores websites em Flash.

bibliotecas
Bibliotecas de software, componentes, fontes e sons para Flash.

artigos
Artigos técnicos indispensáveis para profissionais em Flash.

Newsletter
Receba todos os dias a newsletter do Flash Web Training com as principais notícias sobre tecnologia e informática.
 
Curso Online
Curso de Flash 5 e MX com acompanhamento de formadores especializados.
 
flash shopping
Online Store com os melhores produtos dedicados ao Flash.
 
conferências
Principais conferências e eventos sobre Internet e Novas Tecnologias.
 
job opportunities
Anúncios de emprego para empresas que procuram profissionais de Flash.
 
suporte técnico
Caso tenha alguma dificuldade, contacte o nosso suporte técnico.

 

 
Homepage Tutoriais ActionScript

Ficha Técnica
Autor: Flash Web Training
Versão: Flash MX
Dificuldade: Actionscript
Data de Publicação: 21/11/2002


Introdução

A utilização de arrays em conjunto com ciclos permite surpreendentes resultados. O exemplo é um logótipo formado a partir de um Array de Arrays e utiliza dois ciclos for, um dentro de outro, vamos ver neste tutorial como se faz isto.

Ficheiro Swf

Downloads:

Flash Player icon Ficheiro Fla e Swf Tutorial em PDF
 

O array chamado "desenho" é formado por 7 elementos, cada um é um array com 5 elementos, os elementos são 0se 1s, o número servirá para indicar a cor que deve ter cada ponto do desenho, se prestares bem atenção verás a letra A desenhada com o número 1.

desenho[0]=[0,0,0,0,0];
desenho[1]=[0,1,1,1,0];
desenho[2]=[0,1,0,1,0];
desenho[3]=[0,1,1,1,0];
desenho[4]=[0,1,0,1,0];
desenho[5]=[0,1,0,1,0];
desenho[6]=[0,0,0,0,0];

Será baseado neste principio que vamos gerar o nosso logótipo.

Vamos desenhar os elementos gráficos

Desenha duas circunferências, uma com o centro azul e a outra com o centro de branco ou uma cor mais clara.
Agora criamos um Movie Clip com cada uma das circunferências, a uma chamamos "azul" e à outra "branco".

Agora abre a janela "Library", clique direito em cima do símbolo"azul" e no menu, selecciona a opção "linkage".

Uma nova janela é aberta, selecciona a Chek Box "Export for ActionScript" e na Text Field "Identifier" aparece o nome que demos ao Movie Clip, "azul", se por alguma razão deste outro nome, altera-o para"azul" pois será este o nome pelo qual será conhecido para o actionscript, quando por exemplo utilizarmos a action attachMovie. No fim carrega no botão "ok". Faz o mesmo para o símbolo"branco" e chama "branco" ao "Identifier" do linkage. Por fim, apagamos os dois símbolos que estão no stage para que fique completamente limpo.

Agora vamos à programação.

Nota: todo o código será colocado numa única frame.

A primeira coisa a fazer é criar o Array, que se chamará "desenho".

desenho= new Array();

Agora já temos o Array "desenho" criado temos que lhe inserir conteúdo:

desenho[0]=[0,0,0,0,0];
desenho[1]=[0,1,1,1,0];
desenho[2]=[0,1,0,1,0];
desenho[3]=[0,1,1,1,0];
desenho[4]=[0,1,0,1,0];
desenho[5]=[0,1,0,1,0];
desenho[6]=[0,0,0,0,0];

Inicializamos as variáveis que utilizaremos para colocar os elementos no ecrã:

profundidade=1;

A variável "profundidade" irá ser incrementada cada vez que criamos um novo ponto no ecrã.
Para a colocação dos elementos no ecrã inicializamos as variáveis X e Y

x=30;
y=10;

Agora, um ciclo desenha a imagem no ecrã através da informação do Array "desenho". Esta é a parte mais complicada de explicar.. trata-se de um ciclo for dentro de outro ciclo for, o ciclo mais externo recorre aos elementos do Array "desenho" , enquanto que o segundo ciclo, o interno, recorre a cada elemento do Array "desenho", que também é um array.


for (i=0; i<desenho.length; i++) {
	x = 30;
	y += 10;
	for (e=0; e<desenho[i].length; e++) {
		if (desenho[i][e] == 1) {
			cor = "azul";
		} else {
			cor = "branco";
		}
	  	attachMovie(cor, "ponto"+[i]+[e], profundidade);
	  	_root["ponto"+[i]+[e]]._x = x;
	  	_root["ponto"+[i]+[e]]._y = y;
	  	profundidade += 1;
	  	x += 20;
  	}
}
	  

Vamos tentar explicar o que faz este ciclo.

A primeira coisa que é feito é a inicialização da variável "i" a 0, este ciclo é executado enquanto a variável "i" for inferior ao número de elementos que compõem o Array "desenho" que neste caso são 7 e no final de cada ciclo, adiciona 1 valor à variável "i", tudo isto é feito na linha for(i=0 ; i < desenho.length ;i++)

Porque inicializamos outra vez a variável X a 30?

Essa resposta está mais abaixo. O passo seguinte do ciclo é adicionar 10 à variável Y em cada ciclo, isto acontece 7 vezes e serve para que cada vez que é terminada a leitura de um dos Arrays que formam os elementos do Array "desenho" a variável Y aumenta 10 valores e dessa forma a colocação dos pontos referentes ao novo elemento do array "desenho" serão colocados 10 px abaixo dos pontos do elemento anterior.

Vamos ao segundo ciclo, este ciclo encarrega-se de desenhar cada linha horizontal. Verifica se o valor de cada elemento é 0 ou 1 e em função do valor encontrado atribui à variável "cor" a string "azul" ou "branco" que servirá para a action "attachMovie" colocar no ecrã o Movie Clip "azul" se a variável "cor" tiver o valor "azul" ou "branco" se o valor for "branco". As duas seguintes linhas posicionam o elemento no ecrã. Depois do ponto posicionado é necessário incrementar as variáveis profundidade em 1 e x em 10 para que no ciclo seguinte o ponto não apague o ponto anterior e esteja 10 pixels mais à direita.

E volta a repetir o ciclo enquanto a variável "e" for inferior ao número de elementos que formam o Array "i".

O código final terá este aspecto:

desenho = new Array();
profundidade = 1;
x = 30;
y = 10;
desenho[0] = [0, 0, 0, 0, 0];
desenho[1] = [0, 1, 1, 1, 0];
desenho[2] = [0, 1, 0, 1, 0];
desenho[3] = [0, 1, 1, 1, 0];
desenho[4] = [0, 1, 0, 1, 0];
desenho[5] = [0, 1, 0, 1, 0];
desenho[6] = [0, 0, 0, 0, 0];
for (i=0; i<desenho.length; i++) {
x = 30;
y += 10;
for (e=0; e<desenho[i].length; e++) {
if (desenho[i][e] == 1) {
cor = "azul";
} else {
cor = "branco";
}
attachMovie(cor, "ponto"+[i]+[e], profundidade);
_root["ponto"+[i]+[e]]._x = x;
_root["ponto"+[i]+[e]]._y = y;
profundidade += 1;
x += 20;
}
}

Coloca todo este código na primeira frame de uma layer qualquer da timeline principal e é tudo.

Experimenta a mudar os 0s e 1s dos Arrays que constituem o Array "desenho", bem como os valores dos incrementos das variáveis x e y e vê como as imagens são alteradas.

 
Espero que este tutorial te tenha ajudado. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.
 
Ângelo Castanheira
angelo.castanheira@flashwebtraining.com
 
« Anterior   
 
Copyright ©2002-2008 Desenvolvimento de Sites , Serviços de Web Design Todos os direitos reservados