Imagine por exemplo um Website que carrega, em sua galeria de fotos, as imagens presentes em um arquivo XML, ou a lista de imagens presentes num arquivo de texto (na sessão intermediário você encontra artigos descrevendo como carregar arquivos XML).

Não sabemos quantas imagens estarão no XML, a quantidade será variável. Dessa forma, precisamos de um mecanismo para carregar as imagens enquanto houver imagens.

Observe que nesse exemplo, temos um processo a se repetir (carregar as imagens) e uma condição (enquanto houver imagens).

Para execução desse tipo de tarefa o Action Script nos fornece os laços de repetição, dentre os quais destacam-se o laço while (que significa enquanto) e o laço for (que significa para). Vejamos a sintaxe deles:

while (condição)
{
	// Comandos.
}

for (var nomeDaVariavel = valorInicial; condicao; comando)
{
	// Comandos.
}

Vamos a um exemplo simples. Vamos criar uma função para calcular o fatorial de um número. O fatorial de um número é o próprio número multiplicado por todos os seus antecessores positivos. Por exemplo, o fatorial de 3 e 3 x 2 x 1 = 6. O fatorial de 5 é 5 x 4 x 3 x 2 x  1 = 120.

Observamos nesse exemplo, que trata-se de uma tarefa repetitiva, onde iremos empregar um laço de repetição. A tarefa a se repetir é a multiplicação e a condição é que o valor a ser mutiplicado seja maior que zero.

Vamos para o Flash. Criarei dois campos de texto no stage. Um será do tipo input text (chamarei ele de fatorial_txt), e será usado para que o usuário digite o valor o qual ele deseja calcular o fatorial. O outro será um dynamic text (chamarei ele de resultado_txt) e será usado para que mostremos ao usuário o resultado. Criarei também um botão (de nome calcular_btn). Quando o usuário clicar nesse botão o cálculo será realizado (o arquivo com o exemplo está disponível para download no fim do tutorial):

Criando os campos de texto.

Vamos ao código:

// Função que realiza o cálculo do fatorial. Essa função é invocada quando
// o usuário clica em calcular.
function Fatorial(evt: MouseEvent)
{
	// Verifica se o usuário informou o valor.
	if (fatorial_txt.text == "")
	{
		resultado_txt.text = "Informe o valor.";
	}
	else
	{
		// Recupera o valor que o usuário digitou, convertendo-o
		// para o tipo int
		var valor = int(fatorial_txt.text);

		// Cria uma variavel para armazenar o resultado. Inicializa essa variável
		// com valor 1.
		var resultado = 1;

		// Usa o laço while para calcular o resultado.
		while (valor > 0)
		{
			// Multiplica o resultado pelo valor.
			resultado = resultado * valor;

			// Subtrai o valor em 1.
			valor = valor - 1;

			// Exibe o valor (apenas para entendermos melhor).
			trace(valor);
		}

		// Exibe o resultado.
		resultado_txt.text = "O resultado é" + resultado;
	}
}

// Associa o evento de clicar no botão à função que calcula o fatorial.
calcular_btn.addEventListener(MouseEvent.CLICK, Fatorial);

Na linha 06 verificamos se o campo de texto input foi preenchido pelo usuário. Caso não tenha sido, exibimos a mensagem “Informe o valor.” no campo de texto fatorial_txt. Na linha 14 recuperamos o valor digitado pelo usuário. Veja que temos que fazer uma conversão (também chamada cast), usando o comando “int(alvo)”. Isso porque o que o usuário digita em um campo de texto assume o tipo textual (String), e não podemos realizar operações matemáticas em uma String. Assim armazenamos na variável valor o que foi digitado pelo usuário, mas em formato numérico.

Na linha 21 executamos o laço while. Assim, tudo que estiver dentro deste laço (o que é definido pelas chaves { }), vai se repetir enquanto a condição estabelecida entre os parênteses for verdadeira.

Vamos fazer uma simulação para entendermos melhor. Vamos supor que o usuário digite 3 e clique em calcular. A variável resultado é iniciada como 1 e o valor como 3.

Primeira repetição: a condição é satisfeita, tendo em vista que o valor é 3, sendo maior que 0. A linha 24 faz o resultado passar a valer 3. A linha 27 faz o valor valer 2.

Segunda repetição: a condição é satisfeita, tendo em vista que o valor é 2, sendo maior que 0. A linha 24 faz o resultado passar a valer 6. A linha 27 faz o valor valer 1.

Terceira repetição: a condição é satisfeita, tendo em vista que o valor é 1, sendo maior que 0. A linha 24 faz o resultado passar a valer 6. A linha 27 faz o valor valer 0.

Quarta repetição: a condição não é satisfeita, tendo em vista que o valor é 0, não sendo maior que 0. O laço de repetição termina.

O laço for também poderia ser utilizado para solucionar esse mesmo problema. Veja como seria (apenas o trecho do laço de repetição):

for (var resultado = 1; valor > 0; valor--)
{
	// Multiplica o resultado pelo valor.
	resultado = resultado * valor;
}

O laço for é mais compacto. Veja que em apenas uma linha eu consigo declarar e iniciar a variável resultado, estabelecer a condição do laço (valor > 0) e determinar um comando para ser executado a cada repetição (valor–). O comando “valor–;” equivale a “valor = valor – 1;” assim como “valor++;” equivale a “valor = valor + 1;” São apenas formas compactas de se escrever essas idéias.

Nos tutoriais da sub-categoria Intermediário encontraremos exemplos mais completos, que usarão os conceitos aprendidos. Caso tenha alguma dúvida, fique a vontade em postar! Até o próximo tutorial!

Tutorial laços de repetição em Actionscript 3.

Imaginemos, por exemplo, um website de comércio eletrônico. Em uma determinada sessão, teríamos a listagem de produtos, como acontece por exemplo no mercado livre. Podemos desejar que se um produto não tiver imagem, uma imagem padrão seja exibida.

Algo como:

se o produto atual tem imagem então
- exiba a imagem do produto atual
se não
- exiba a imagem padrão
fim

Essa é a forma como devemos pensar as condições que vão compor o nosso projeto. O equivalente a essa lógica, em Action Script, seria:

//...

// Verificamos se a propriedade imagem do objeto que representa o produto
// está definida.
if (produtoAtual.imagem != null)
{
	// Adicionamos a imagem ao local onde a imagem deve aparecer.
	fotoProduto_mc.addChild( produtoAtual.imagem );
}
else
{
	// Adicionamos a imagem padrão ao local onde a imagem deve aparecer.
	fotoProduto_mc.addChild( imagemPadrao );
}

//...

Na linha 5, utilizamos o operador “!=” para verificar a condição de diferença. Tal trecho de código equivale a avaliação da condição:

“imagem do produto atual diferente de nulo”

Utilizamos o valor null (nulo) para verificar se a instância de um objeto, que não seja primitivo, está definida (iniciada).  Sempre que criamos uma variável ela possuirá um valor padrão, até que este seja alterado por nós. Veja na tabela a seguir:

Tipo                                         Valor padrão
————————————————-
String                                           null
int e Number                             0 (zero)
Boolean                                      false
Objetos não primitivos                 null

Para entender melhor, execute o código a seguir:

// Cria uma variavel do tipo boolean (tipo primitivo).
var variavelBooleana: Boolean;

// Cria uma variavel do tipo int (tipo primitivo).
var variavelInteira: int;

// Cria uma variavel do tipo String (tipo primitivo).
var variavelTextual: String;

// Cria uma variavel do tipo MovieClip (tipo não primitivo).
var variavelMovieClip: MovieClip;

// Exibe o valor inicial da variável tipo boolean.
trace("O valor inicial da variável boolean é " + variavelBooleana);

// Exibe o valor inicial da variável tipo int.
trace("O valor inicial da variável int é " + variavelInteira);

// Exibe o valor inicial da variável tipo String.
trace("O valor inicial da variável String é " + variavelTextual);

// Exibe o valor inicial da variável tipo MovieClip.
trace("O valor inicial da variável MovieClip é " + variavelMovieClip);

Voltando ao exemplo do site de comércio eletrônico, comparar o valor da imagem do produtoAtual com null nos fornece uma condição para saber se aquela variável foi preenchida em alguma outra parte do site. Caso ela não tenha sido preenchida, significa que o produto não possui imagem. Assim, adicionamos uma imagem padrão (representada pela variável “imagemPadrao” no exemplo, que poderia ser um MovieClip por exemplo) ao container de imagem (fotoProduto_mc).

Vamos desenvolver agora um exemplo simples e funcional, combinando o uso de Eventos e Estruturas condicionais. Vamos iniciar um projeto flash e criar uma caixa de texto dinâmico, a qual irei chamar de texto_txt:

Estrutura do exemplo

Desejo agora escrever um código Action Script que preencha a caixa de texto informando se o cursor do mouse está a direita ou esquerda do centro do Stage. Vejamos:

// Função que irá tratar o evento de movimentação
// do cursor do mouse.
function AtualizarPosicao(evt: MouseEvent)
{
	// Caso a posição do cursor seja superior à metade da largura
	// do Stage.
	if (mouseX > stage.stageWidth / 2)
	{
		texto_txt.text = "Cursor do mouse a direita";
	}
	// Caso contrário.
	else
	{
		texto_txt.text = "Cursor do mouse a esquerda";
	}
}

// Associamos o evento de mover o mouse sobre o stage à função AtualizarPosicao
stage.addEventListener(MouseEvent.MOUSE_MOVE, AtualizarPosicao);

Na linha 7 introduzimos uma nova propriedade, pertencente a classe MovieClip. Trata-se da propriedade mouseX que indica a posição horizontal do mouse em relação ao MovieClip. Como não especificamos um nome de instância de MovieClip, o flash assumirá a timeline que possui o código Action Script (ou seja, a Timeline principal, o root) como sendo a “dona” dessa propriedade. Também existe a propriedade mouseY que indica a posição vertical, funcionando da mesma forma.

Assim, em “mouseX > stage.stageWidth / 2″ estamos avaliando se a posição horizontal do cursor do mouse (em relação ao movie clip root) é maior que a metade da largura do stage.

É importante lembrar que esse evento será disparado sempre que o cursor do mouse se mover, o que garantirá a exibição da informação atualizada com relação à sua posição.

No próximo artigo discutiremos as estruturas de repetição, que como o nome indica, nos permite executar rotinas de forma repetitiva, enquanto uma condição se manter. Em caso de dúvidas, pergunte! Até lá.

Eu posso desejar por exemplo, que o meu site exiba uma janela de cases apenas quando o visitante clique no botão “Cases” do menu. Ou posso desejar que 5 segundos após o site ser aberto, seja exibido um banner com uma promoção em destaque.

“Usuário clicar no botão” e “passar 5 segundos” são eventos. Eventos nada mais são que acontecimentos. Eles podem ser oriundos da interação do usuário ou não. Existem diversos tipos de eventos: clique do usuário, usuário digita uma tecla, usuário move o mouse, fim de load de uma imagem externa, passagem de tempo, etc.

Quando queremos tomar ações a partir da ocorrência de um evento precisamos definir o tratador do evento (event handler). Fazemos isso criando uma função, que será invocada quando aquele evento acontecer.

Vamos a um exemplo simples, onde irei exibir uma mensagem a depender da posição do cursor do mouse em relação a um movieclip. Vamos criar um MovieClip chamado “bola_mc” e adicionarmos ao centro do Stage.

Criando MovieClip "bola_mc".

Adicionemos também um Dynamic TextField abaixo da bola, chamado “texto_txt”.

Adicionando Dynamic Text.

Observe que nesse exemplo eu utilizei os sufixos “_mc” e “_txt” no nome das intâncias do MovieClip e do TextField respectivamente. Esses sufixos são úteis, pois indicam ao flash o tipo da instância, fornecendo-nos acesso a um recurso chamado “code completion”. Asssim, se em um código action script escrevermos o nome da instância seguido de ponto ‘.’ e pressionarmos Ctrl + Barra de espaço o flash exibirá para nós a lista de propriedades e métodos daquela instância, com base no tipo que o sufixo indica.

Experimente digitar no código AS3 “bola_mc.” e pressionar Ctrl + Barra de espaço. Esse recurso é fundamental para acelerar o desenvolvimento, evitando erros, bem como para auxiliar-nos no conhecimento das propriedades e métodos das classes.

Voltando ao nosso exemplo, vamos inserir o código Action Script para tratar alguns eventos sobre esse objeto. Para isso, clicamos na primeira frame da timeline e digitamos F9:

// Função tratadora do evento MOUSE_OVER. Tal evento é disparado quando o cursor
// do mouse é posicionado sobre o alvo.
function MouseSobreBola(evt: Event)
{
	// Alteramos o texto do componente de texto que inserimos no stage.
	texto_txt.text = "Mouse sobre a bola";
}

// Função tratadora do evento MOUSE_OUT. Tal evento é disparado quando o cursor do mouse é
// posicionado fora do alvo.
function MouseForaBola(evt: Event)
{
	// Alteramos o texto do componente de texto que inserimos no stage.
	texto_txt.text = "Mouse fora da bola";
}

// Função tratadora do evento CLICK. Tal evento é disparado quando o usuário clica no alvo.
function MouseClickBola(evt: Event)
{
	// Alteramos o texto do componente de texto que inserimos no stage.
	texto_txt.text = "Clique na bola";
}

// Associamos os tratadores de eventos que criamos aos eventos. Dessa  forma, quando o evento
// ocorrer o tratador de evento será invocado.

// Evento MOUSE_OVER
bola_mc.addEventListener(MouseEvent.MOUSE_OVER, MouseSobreBola);

// Evento MOUSE_OUT
bola_mc.addEventListener(MouseEvent.MOUSE_OUT, MouseForaBola);

// Evento CLICK
bola_mc.addEventListener(MouseEvent.CLICK, MouseClickBola);

O método addEventListener, percentente a classe MovieClip, permite que associemos uma função tratadora de eventos a um evento (na verdade o método addEventListener não pertence a classe MovieClip e sim a uma de suas superclasses, mas não pense nisso por enquanto). “addEventListener” significa mais ou menos “adicionar ouvinte do evento”. E é isso que acontece.

A função que informamos como 2° parâmetro desse método irá ser notificada sempre que o evento definido pelo 1° parâmetro do método addEventListener ocorrer.

Execute o exemplo e veja o resultado.

Nos próximos artigos iremos estudar estruturas condicionais e de repetição, fundamentais para elaboração de rotinas Action Script mais complexas. Caso tenha dúvida, sinta-se a vontade em perguntar!

Métodos definem um conjunto de ações que serão executadas quando o método for chamado. Assim como acessamos as propriedades, podemos utilizar o caractere “.” (ponto) para acessar métodos de uma instancia. Ao contrário das propriedades, após o nome de um método devemos escrever “()” (abre e fecha parênteses), assim o flash saberá que estamos  tentando invocar um método.

Vamos a um exemplo. Vamos criar um MovieClip e aplicar um tween de rotação nele, da frame 0 a frame 60. Vamos também adicionar o comando stop(); na primeira frame do filme, conforme a figura a seguir:

Figura 1 - Método stop() e Tween na timeline principal.

Vamos então executar o exemplo da figura 1. Ao ser executado, esse projeto irá permanecer parado na frame 1. O Tween que criamos não será executado. Isso ocorre por conta do comando (chamada ao método) “stop()”. Ao escrevermos “stop()” no Action Script estamos invocando um método sobre o MovieClip dono da timeline onde escrevemos o comando, e que no caso do nosso exemplo é o root.

O root é a timeline principal de um projeto, e também é um movieclip. Ao escrevermos o comando “stop()” na timeline principal e como nao especificamos nenhum alvo (o que poderiamos fazer através do operador ‘.’), o flash buscará pelo método “stop()” no root, executando-o, e fazendo com que o filme interrompa sua reprodução em sua timeline principal.

Ou seja, o mesmo principio de escopo das propriedades se aplica ao método. Ao escrevermos uma chamada a função em uma frame na timeline do root ou de um símbolo, o flash buscará por aquele método na lista de métodos do símbolo (dono da timeline) e dentre as funções que criamos.

Assim, podemos observar uma forma alternativa de invocarmos métodos, sem utilizar o caractere “.” (ponto), omitindo a instancia a qual estamos nos referindo. O flash assumirá que a instancia desejada é a que possui a timeline onde escrevemos o método.

O mesmo resultado poderia ser obtido se o Tween estivesse presente dentro do MovieClip do quadrado preto, nomeássemos este de por exemplo “quadrado”, e utilizássemos o comando “quadrado.stop();” na primeira frame da timeline principal:

Figura 2 - Tween dentro do símbolo, e método stop() sendo chamado sobre a instancia do quadrado.

Nesse caso estamos especificando quem é o alvo do comando” stop()”: o movieclip de nome “quadrado”. Assim, a ação”stop()” será executada apenas sobre esse objeto, interrompendo a reprodução apenas de sua timeline.

Podemos utilizar também, o método “play()” ou “gotoAndPlay()” para iniciar a reprodução da timeline de um MovieClip. Se acrescentarmos a chamada ao método “play();” logo após a chamada ao método “stop();” em qualquer um dos exemplos anteriores, veremos que o Tween criado será reproduzido (lembrando que no segundo exemplo precisamos utilizar “quadrado.play();”).

O método “gotoAndPlay()” é um pouco diferente. Ele recebe um argumento. Argumentos definem parâmetros para os métodos que estamos invocando, eles servem para se especificar parte do comportamento do método (veja mais no artigo sobre Funções).

O método “gotoAndPlay()” recebe como argumento a frame para onde desejamos que a reprodução do filme vá. O playhead da timeline do objeto para o qual estamos invocando o “gotoAndPlay()”, será desviado para a frame que especificamos como argumento do método, e a partir dali o filme será reproduzido.

No exemplo da figura 1, se após o “stop();” adicionarmos “gotoAndPlay(30);”

stop();
gotoAndPlay(30);

veremos que o filme iniciará sua reprodução já no frame 30, ou seja, já com o quadrado inclinado.

Em aplicação reais nunca usaremos um “stop();” seguido de um “play();” ou “gotoAndPlay();”, pois não faria sentido. O propósito aqui é apenas ilustrar o uso dos comandos “stop()”, “play()” e “gotoAndPlay()”.

Para conhecer todas as propriedades e métodos das classes do Flash utilize o Help. Digite o nome da classe em qualquer lugar do código Action Script (escreva por exemplo “MovieClip”), clique com a tecla direita do mouse e clique em “View help”.

No próximo artigo discutiremos um aspecto crucial ao entendimento e utilização do Action Script para desenvolvimento de projetos em Flash: eventos. Caso tenha dúvida, sinta-se a vontade em perguntar!

Linguagens de programação possibilitam que agrupemos trechos de código em funções, podendo assim utilizar aquele mesmo trecho em diversos lugares, apenas invocando a função que definimos.

Funções agrupam um conjunto de comandos que você define para realizar uma determinada tarefa.

Quando você define uma função você também pode definir parâmetros para ela. Parâmetros são valores que você pode enviar a função quando a invoca (chama). Isso permite que a função possua um comportamento customizado e retorne resultados específicos aos parâmetros que nós passamos.

O uso de funções oferece diversas vantagens:
- Reduzem a quantidade de linhas de código.
- Facilitam o entendimento do código.
- Facilitam a manutenção, uma vez que caso seja necessária alguma alteração, precisamos fazê-la em apenas um lugar.
- Favorecem uma melhor organização e documentação do projeto.
- Permite que agrupemos trechos que representam um mesmo bloco lógico.

A definição de funções em Action Script segue a seguinte sintaxe:

// Sintaxe para definição de funções em Action Script 3.
function NomeDaFuncao (    [nomeDoParametro1: tipoDoParametro1][,nomeDoParametro2: tipoDoParametro2]...,[,nomeDoParametroN: tipoDoParametro3]    )
{
	// Aqui entra o código da função.
	//...
	[return valorDeRetorno];
}

Observe a forma de definição. Primeiro devemos escolher um nome para a função, nome que utilizaremos quando desejarmos invocá-la. O nome deve ser simples e refletir bem o que a função faz.

Em seguinda, devemos definir os parâmetros que a função recebe. Se definirmos parâmetros ao invocarmos essa função devemos obrigatoriamente fornecer um valor para cada parâmetro (depois veremos parâmetros opcionais, mas por enquanto tome isso como verdade). Assim, podemos por exemplo criar uma função que calcule o valor do fatorial de um número. Essa função, receberá como parâmetro o número a ter o fatorial calculado.

Por fim devemos fornecer o código Action Script da função. Ele será responsável por fazer o que desejamos que a função faça. No exemplo citado (cálculo de fatorial) deveríamos escrever um código que multiplicasse o número passado como parâmetro por todos os seus anteriores exceto zero.

Vejamos um exemplo bem simples, uma função que calcula o valor de um número elevado ao quadrado.

// Definição da função que realiza o cálculo de um número elevado ao
// quadrado.
function ElevaAoQuadrado(numero: int)
{
	// Criamos um variáveis para armzenar o valor do resultado do cálculo
	// do número elevado ao quadrado.
	var resultado: int;

	// Fazemos o calculo (multiplicamos o número por ele mesmo uma vez) e
	// armazenamos em resultado. Lembrando que o sinal '*' (asterisco) é
	// o símbolo da operação de multiplicação.
	resultado = numero * numero;

	// Retornamos o resultado (o quadrado do número) para quem nos chamou.
	return resultado;
}

// Criamos uma variavel para armazenar o resultado do calculo.
var resultadoDeDois;

// Chamamos (invocamos) a função passando como parâmetro o número que
// desejamos que seja calculado (2), armazenando o resultado na
// variavel.
resultadoDeDois = ElevaAoQuadrado(2);

// Imprimimos o resultado (imprimirá 4).
trace(resultadoDeDois);

No artigo anterior comentamos sobre o escopo de um código Action Script. O conceito de escopo também se aplica a variáveis dentro de funções. Assim, observe no exemplo anterior que dentro da função de nome “ElevaAoQuadrado” criamos uma variavel chamada “resultado”. Tal variável só estará disponível dentro da função “ElevaAoQuadrado”, ou seja, dentro do escopo onde ela foi declarada.

Usando o exemplo anterior, caso desejemos acessar a variável resultado fora da função, por exemplo, adicionando a linha a seguir no final do nosso código

trace(resultado);

não obteremos êxito, pois o escopo dessa variável é restrito a função onde foi declarada. Variáveis declaradas dentro de funções são chamadas variáveis locais, indicando que só podem ser acessadas localmente (no escopo).

Por outro lado, variáveis declaradas fora de funções podem ser acessadas fora e dentro de funções (respeitando-se o escopo de timeline, conforme discutido no artigo anterior), e são chamadas variáveis globais.

Podemos reescrever o exemplo anterior de outra forma:

// Criamos uma variável global para armazenar o resultado.
var resultado;

// Definição da função que realiza o cálculo de um número elevado ao
// quadrado.
function ElevaAoQuadrado(numero: int)
{
	// Fazemos o calculo (multiplicamos o número por ele mesmo uma vez) e
	// armazenamos em resultado. Lembrando que o sinal '*' (asterisco) é
	// o símbolo da operação de multiplicação.
	resultado = numero * numero;
}

// Chamamos (invocamos) a função passando como parâmetro o número que
// desejamos que seja calculado (2), armazenando o resultado na
// variavel.
ElevaAoQuadrado(2);

// Imprimimos o resultado (imprimirá 4). O resultado ficou armazenado na
// variavel global.
trace(resultado);

Este exemplo, além de ilustrar o conceito de variável global nos mostra que uma função não precisa necessariamente retornar um valor. O valor pode ser armazenado em uma variável global, acessada logo em seguida, ou simplesmente a função pode realizar operações sobre elementos do projeto e não retornar valor algum.

Infelizmente não existem regrar precisas para determinar que tipo de abordagem utilizar em funções (variáveis globais ou locais). A orientação que dou é que você deve buscar a abordagem que necessite de menos variáveis globais.

No próximo artigo introduziremos os métodos, que são como funções só que no contexto de objetos. Até lá.

resultado

Os símbolos que críamos no flash para compor nosso projeto são representados internamente no arquivo .swf como objetos. Assim, podemos manipulá-los através do Action Script. Dominar a manipulação de símbolos é uma tarefa fundamental para criarmos aplicações interativas.

Só é possível manipular através de Action Script elementos de Stage que sejam Movieclips ou Buttons. Formas desenhadas diretamente no Stage ou importadas de programas como o Illustrator não poderão ser acessadas, deverão ser convertidas em MovieClip. Para projetos mais avançados é aconselhável não se utilizar Buttons, pois eles são muito mais limitados que MovieClips, e na prática, você pode simular Buttons através de Movieclips. No exemplo abaixo, importei o desenho de um carro e o converti para MovieClip.

Figura 1 - MovieClip Carro

Para manipular a instancia de um símbolo você poderá clicar nela e ter acesso a sua pane de propriedades (Properties), onde poderá definir entre outras coisas, sua posição e tamanho. Uma informação interessante é que todas as propriedades e transformações que você consegue realizar em uma instancia através das ferramentas do flash (rotação, posicionamento, escalonamento, filtros, etc) você também conseguirá fazer através de Action Script.

Vamos nos concentrar numa propriedade chamada “name”. Tal propriedade nos permite dar um nome a aquela instancia que está no stage, e usando desse nome poderemos nos referenciar a ela através do Action Script. Vou chamar o carro que adicionei de “carro”.

Figura 2 - Nomeando uma instancia

Vimos no artigo sobre objetos como criá-los atribuindo-lhe um nome. O que estamos fazendo aqui é semelhante. Estamos atribuindo um nome a um objeto do tipo MovieClip que está no Stage. A diferença é que aqui o objeto foi criado através da interface do Flash (no momento em que importei o desenho do Ilustrattor e o converti para MovieClip). Interessante não?

A manipulação de instancias em Action Script é feita através de propriedades e métodos. As propriedades são as características do objeto enquanto os métodos são as ações que ele pode fazer. É uma analogia ao mundo real, onde por exemplo, podemos ter um carro, cujas propriedades poderiam ser peso, cor, tamanho e os métodos poderiam ser ligar, desligar, acelerar e freiar.

Para acessarmos propriedades ou métodos de uma instancia, utilizamos o caractere “.” (ponto). Propriedades de instancias podem ser lidas ou escritas (definidas), ou seja, eu posso tanto saber qual a cor do carro como definir a cor dele. Métodos não são lidos ou escritos, eles são chamados (invocados). Ao ser chamado um método executa um conjunto de ações sobre aquele objeto.

Por exemplo, para acessar a posição do carro no stage, eu posso usar “carro.x” e “carro.y” (ou seja, estou acessando as propriedades x e y do carro, que no flash indicam suas posições x e y). Para definir a posição do meu carro no stage eu posso usar uma atribuição, utilizando o caractere “=” (igual):

// Significa 'atribua 200 a propriedade x do objeto de nome carro', ou seja
// posicione o objeto de nome carro a 200 pixels da margem esquerda
// do stage.
carro.x = 200;

// Significa 'atribua 0 a propriedade y do objeto de nome carro',
// ou seja, posicione o objeto de nome carro a 0 pixels da
// margem superior do stage.
carro.y = 0;

Se eu adicionar o código de mudança de posição do carro na frame 30,

Figura 3 - Alterando a propriedade de uma instancia através de Action Script

e executar o projeto verei que após um certo tempo o carro mudará de lugar. Isso, porque quando a reprodução do filme atingiu a frame, o código foi lido e interpretado, e o comando de mover o carro para a posição (200,0) foi executado. A posição de um objeto, quando manipulada via Action Script, é sempre feita em função do ponto de registro, que no caso do carro do nosso exemplo, se encontra no canto superior esquerdo do símbolo (como podemos ver na figura 2, o ponto de registro é onde aparece uma cruz).

Outras propriedades bastante utilizadas são “alpha” e “visible”, que definem o nível de transparência (variando de 0 a 1, com 0 sendo 100% transparente e 1 100% visível) e a visibilidade de um objeto (false para invisível, ou true para visível). Essas propriedades são muito úteis quando desejamos ocultar elementos que estão no stage e exibi-los de acordo com alguma interação do usuário.

Para entendermos melhor a utilização de propriedades e métodos cabe citar algumas características importantes sobre o Flash e o Action Script:

• Root é a palavra utilizada para se referenciar à timeline principal do projeto.
• O root também é um MovieClip. Dessa forma, ele também possui as propriedades e métodos que os MovieClips possuem.
• Quando trabalhamos com flash, utilizamos uma estrutura de aninhamento (hierarquia) para organizar nosso projeto. Dessa forma, frequentemente criamos MovieClips dentro de MovieClips para representar nossa cena.
• Por exemplo, podemos criar um MovieClip “Carro”. Dentro do “Carro” podemos ter o MovieClip “Roda”, o movieClip “Volante”, todos com sua própria Timeline e animações.
• Conforme mencionamos o root também é um MovieClip, e ele contem todos os demais MovieClips que inserimos no Stage.

Movieclips dentro de Movieclips se constituem novas propriedades do primeiro. Vamos esclarecer. Se por exemplo, tenho um Movieclip de nome “roda” dentro do MovieClip de nome “carro”, da mesma forma que posso utilizar o comando “carro.x = 200;” para definir a posição do carro no Stage, posso utilizar “carro.roda.x = 100;” para definir a posição da “roda” dentro do MovieClip “carro”.

No artigo sobre objetos, falamos que objetos são conjuntos de propriedades e métodos (variáveis e funções) lembra? Assim, se tenho um MovieClip “roda” dentro do MovieClip “carro”, o primeiro nada mais é que uma propriedade do segundo!

É importante lembrar que cada MovieClip tem o seu próprio sistema de coordenadas. Enquanto a posição 0,0 do Stage é no canto superior esquerdo, no caso de um MovieClip a posição 0,0 é no seu ponto de registro.

Outro aspecto importante é o escopo do seu código Action Script. Se você escreve o código “carro.x = 200;” numa frame presente na timeline principal (Stage), o Flash irá procurar por um símbolo de nome carro na frame da timeline principal onde você escreveu o código.

Isso porque, conforme ja falamos, a timeline principal (root) é um MovieClip também. Sempre que escrevemos um código Action Script numa frame de um MovieClip, o flash irá procurar as variáveis ao qual nos referenciamos no código dentre a lista de variáveis que o símbolo possui. Essa lista inclui as variáveis que criamos (na timeline do MovieClip) e as variáveis já existentes do símbolo, como por exemplo as propriedades x e y, percententes aos MovieClips.

Caso você escreva “carro.x = 200;” na timeline do MovieClip “carro”, o Flash irá buscar a instancia “carro” ali, e não encontrará, gerando o mais comum de todos os erros de Action Script: “Access of undefined property…”. Por outro lado, se dentro do seu MovieClip “carro” houver um movieclip chamado “roda”, você poderá escrever na Timeline do MovieClip “carro” o código “roda.x = 200;”. Você também poderá escrever na timeline principal (root) o comando “carro.roda.x = 200;”.

Uma boa prática é sempre manter o seu código Action Script em uma única frame na Timeline principal. Isso facilita a manutenção do seu projeto (você não terá que ficar entrando em símbolo por símbolo para procurar códigos Action Script perdidos).

Por fim, uma ferramenta bastante útil para se conhecer propriedades e métodos dos Símbolos é a ajuda do Flash. Clique em uma frame, abra a pane de Action Script (F9), digite “MovieClip”, clique com a tecla direita do mouse sobre a palavra “MovieCllip” e clique em “View help”:

Figura 4 - Documentação do Flash. Propriedades e métodos dos MovieClips

Através do help você terá acesso a toda a documentação do MovieClip: sua definição, seu conjunto de propriedades e métodos, para o que eles servem e exemplos. É o maior amigo do desenvolvedor.

No próximo artigo estudaremos funções, um recurso muito importante para organizarmos/estruturarmos nosso projeto e utilizar controle de eventos. Até lá!

Variáveis isoladamente não conseguem representar conceitos complexos. Por exemplo, vimos que através de uma variável textual podemos representar o nome de uma pessoa, mas o que fazer quando desejo representar uma pessoa? Ou um MovieClip?

Em uma visão simplificada, objetos são um conjunto de variáveis e funções (falaremos sobre funções mais a frente, apenas registre essa informação). No contexto de objetos convencionou-se chamar de propriedade uma variável pertencente a um objeto, e de método uma função pertencente a um objeto.

Objetos são definidos através de classes. Uma classe nada mais é que o tipo de um objeto. Assim como em variáveis temos os tipos String, int, number e Boolean no Action Script, para um objeto também teremos um tipo, tipo esse que será especificado através de uma classe, e que inclusive poderá ser definida por nós.

Nesse artigo não abordarei como criar classes, nem conceitos de orientação a objetos. Apenas tentarei explicar o que são, para que você possa utilizar as classes já existentes do flash e componentes já prontos que encontramos na Internet. Isso já lhe possibilitará desenvolver projetos bem interessantes. Em artigos futuros, na categoria Intermediário, abordaremos mais detalhadamente classes e orientação a objetos.

Voltando ao exemplo da pessoa, poderíamos então ter uma classe “Pessoa”. Essa classe poderia ter as propriedades nome, nascimento, sexo, altura, peso e os métodos CalcularIdade() e CalcularIMC().

A classe “Pessoa” permitiria a nós criarmos objetos do tipo “Pessoa”. Pessoa é uma conceito, e é isso que uma classe representa. Um objeto dessa classe representará uma pessoa específica.

Para criarmos objetos a partir de uma classe usamos a sintaxe a seguir:

// Sintaxe para criação (instanciação) de um objeto.
var nomeDoObjeto: nomeDaClasse= new nomeDaClasse();

ou simplesmente

// Sintaxe para criação (instanciação) de um objeto (forma compacta).
var nomeDoObjeto = new nomeDaClasse();

Então, se desejassemos criar representações de pessoas em Action Script utilizariamos:

// Crio um novo objeto do tipo pessoa, o qual chamo de jamesKirk.
var jamesKirk = new Pessoa();

// Defino o valor para a propriedade nome do objeto.
jamesKirk.nome = "James Tiberius Kirk";

// Defino o valor para a propriedade idade do objeto.
jamesKirk.idade=38;

// Defino o valor para a propriedade altura do objeto.
jamesKirk.altura=1.78;

// Crio um novo objeto do tipo pessoa, o qual chamo de michael.
var michael = new Pessoa();

// Defino o valor para a propriedade nome do objeto.
michael.nome = "Michael Jackson";

// Defino o valor para a propriedade idade do objeto.
michael.idade=50;

// Defino o valor para a propriedade altura do objeto.
michael.altura=1.74;

// Exibirá "James Tiberius Kirk"
trace(jamesKirk.nome);

// Exibirá "Michael Jackson"
trace(michael.nome);

// Exibirá 1.78.
trace(jamesKirk.altura);

Relembrando que é necessário, para que esse código funcione, a definição da classe Pessoa, que não mostrarei aqui como é feita. O objetivo aqui é abordar a utilização de classes já prontas. Caso você deseje executar o código, o exemplo exibido aqui (completo) está disponibilizado para download no fim do artigo.

É importante percebermos que tudo que criamos em um projeto Flash, seja feito através de código Action Script ou seja feito através das ferramentas de desenho ou tween do Flash, será representado internamente como uma instancia de uma determinada classe.

Assim, quando adicionamos um MovieClip, uma forma desenhada, uma imagem ou um som ao stage no Flash, na verdade estamos instanciando objetos dos tipos MovieClip, Shape, Bitmap ou Sound respectivamente. Só que estamos fazendo isso através da interface do Flash ao invés de código Action Script.

Essa informação nos abre portas para entedermos que tudo que podemos fazer através da interface do flash (desenho, criação de movie clips, tweens, etc) poderá também ser feito através de Action Script, bastando para isso conhecermos as classes correspondentes.

MovieClip é sem dúvida a classe mais importante do Action Script. Quando arrastamos um MovieClip para o nosso stage, estamos na verdade criando (instanciando) um objeto do tipo MovieClip. Esse objeto, conforme já foi falado, possuirá propriedades (variáveis) e métodos (funções).

Nos próximos artigos veremos como manipular movieclips através de Action Script, acessando suas propriedades e métodos. Em caso de dúvidas, sinta-se a vontade em perguntar!

Baixar código-fonte do exemplo.

Variáveis são elementos que criamos, dando-lhe um nome, e que ao longo da execução do programa, podemos acessar e alterar o seu valor.

A criação de uma variável segue a sintaxe a seguir:

var nomeDaVariavel: tipoDaVariavel;

Variáveis possuem um tipo que define a forma como o valor armazenado por elas deve ser interpretado. No Action Script os principais tipos de variável são:

• Numéricas       : Armazenam números. Os tipos numéricos do Action Script 3 são int (valores números inteiros) ou Number (valores inteiros e decimais).
• Textuais           : Armazenam textos. O tipo textual do Action Scrtip 3 é String.
• Booleanas        : Armazenam o valor veradeiro ou o valor falso. O tipo booleando do Action Script 3 é Boolean.

Para atribuir valor a uma variável utilizamos a sintaxe a seguir:

nomeDaVariavel = expressao;

onde expressão pode ser um valor constante (fixo), uma variável, uma chamada a uma função que retorne um valor, ou uma combinação disso tudo.

Atenção: o operador “=” significa atribuição e não comparação. É bastante comum confundir esse significado. Vejamos alguns exemplos:

// Criamos uma variável textual (String) cujo nome é “nome”
var nome: String;

// Atribuímos o valor “James Kirk” a essa variável
// Sempre que fomos trabalhar com valores textuais, precisamos especifica-los
// entre aspas.
nome = “James Kirk”;

// Exibimos o valor dessa variável na janela Output do Flash:
trace(nome);

Uma observação: em action script, tudo que estiver após // em uma linha ou entre /* e */ é ignorado pelo Flash. Utilizamos isso para comentar o nosso código, facilitando assim tanto nosso entendimento, quando pegamos um código antigo para dar manutenção, quanto o entendimento de outra pessoa que venha a utilizar nosso código.

Outra observação: Para escrever um código em Action Script, selecione a frame desejada e tecle F9 ou acesse Window -> Actions. Uma boa prática é criar uma layer exclusiva para conter as frames com os códigos Action Script. Quando a reprodução do filme atingir a frame onde o código está escrito, o código será executado, e as ações que ele define serão tomadas.

Nesse exemplo introduzimos o uso do comando “trace()”. O trace é uma função do flash para exibir um conteúdo na janela output. Sempre que executamos um projeto no flash (ctrl+enter) todos os comandos “trace” presentes no nosso projeto direcionarão mensagens para a janela output. O conteúdo exibido pelo comando trace corresponde ao que especificamos entre o ‘(‘ e o ‘)’, podendo ser um texto, uma variável, uma chamada a uma função, uma expressão, ou uma combinação de tudo isso.

Exemplos:

// Exibirá James Tiberius Kirk na janela output.
trace(“James Tiberius Kirk”);

Comando trace("James Tiberius Kirk") e o resultado na janela output

Sugiro ao leitor, testar outros exemplos:

// Exibirá 2 na janela output.
trace(1 + 1);

// Exibirá 3 na janela output.
var n: int;
n = 2;
trace(n + 1);

É importante perceber a diferença entre valores constantes e variáveis. Números e valores especificados entre aspas são constantes. Palavras que iniciem por uma letra e não façam parte do conjunto de palavras reservadas do flash são variáveis. O flash buscará pela definição dessa variável, e caso não encontre irá exibir uma mensagem de erro.

As palavras reservadas são aquelas que compõem a linguagem. Vimos nesse artigo a palavra “var” que é utilizada para criação de uma variável. “var” é um exemplo de palavra reservada.

Um outro aspecto muito importante do Action Script, é que ela é uma linguagem “case-sensitive”, ou seja, letras maiúsculas e minúsculas fazem direferença. Assim, “N” é diferente de “n”, trace é diferente de TRACE ou trAce. Tenha atenção como relação a isso ao escrever os seus códigos.

No próximo artigo falaremos sobre objetos, que são tipos mais complexos de variáveis. Em caso de dúvidas, sinta-se a vontade em perguntar!

Action Script (popularmente referenciado simplesmente como AS) é a linguagem de programação do Flash. Muitas pessoas estigmatizam as linguagens de programação. Acreditam que é “coisa de maluco” aqueles numerozinhos e códigos coloridos. Na verdade, as linguagens de programação são linguagens como outras quaisquer: apenas definem uma gramática e uma sintaxe para que se possa expressar uma idéia através de símbolos.

O Action Script permite dizermos ao flash o comportamento que esperamos que os elementos de nosso projeto tenham de acordo com as interações do visitante. Podemos expressar idéias como:

“Se o visitante clicar neste botão, eu quero que você exiba essa sessão.”

Podemos ainda expressar idéias mais complexas, como por exemplo:

“Na primeira vez que o visitante clicar nesse botão, exiba esta animação e depois vá para a sessão X. Já na segunda vez, vá direto para essa sessão X.”

Infelizmente, a forma como escrevemos as idéias citadas anteriormente em Action Script não são tão próximas da nossa comunicação comum, e isso é o maior dificultador para quem está começando (e principalmente para quem não é da área de T.I.). Mas programar em Action Script não é difícil, exige apenas dedicação para aprender, planejamento e organização para executar.

• Pessoas que já trabalharam com o Flash, mas não utilizaram o Action Script;
• Pessoas que utilizaram o Action Script superficialmente ou que utilizaram funções avançadas pegando códigos prontos e que gostariam de entender o funcionamento da linguagem para produzir ou alterar programas em Action Script;

Para melhor entendimento dos artigos aqui presentes, é necessário possuir conhecimento básico no Adobe Flash, tendo trabalhado com:

• As ferramentas de desenho do Flash.
• Camadas / quadros / animação.
• Biblioteca de símbolos.
• Tipos de símbolos: MovieClips, Buttons, Shapes.
• Símbolos e Timelines.

Sugerimos também que os artigos sejam lidos sequencialmente, dos mais antigos para os mais recentes.

Não é o objetivo desses artigos discutir os recursos de criação de animações através das ferramentas do Flash. Focaremos apenas em Action Script, se você não conhece o Flash poderá encontrar outros tutoriais mais básicos na Internet.

Caso você já tenha um conhecimento básico em Action Script 3, sugiro que você vá para a categoria intermediário, onde apresentaremos exemplos práticos envolvendo classe TweenLite, load de arquivos XML, controle de redimensionamento do site, implantação de formulários de contato, entre outros.

Esperamos colaborar com a comunidade de desenvolvedores e postar semanalmente novos artigos. Então, vamos ao trabalho!