Linguagem de Programação para Animação Web | Unidade D

D
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

Unidade

PROGRAMANDO NO FLASH
Prezado(a) aluno(a),
Nesta unidade, você estudará a linguagem de programação do Flash, o ActionScript 3.0. Conhecido pela sigla
AS. o ActionScript, poderosa linguagem de programação, permite o desenvolvimento de aplicações para Web,
dispositivos móveis e para desktop.
Bons estudos!!!

1. ActionScript
O ActionScript é uma OOP (linguagem de programação orientada a objetos) que é uma forma de programar
aproximada da maneira que interagimos com o mundo real. É a linguagem dos ambientes de tempo de execução
do Adobe Flash e Adobe AIR. Permite interatividade e manipulação de dados, além de ser familiar aos desenvol-
vedores com um conhecimento básico de programação orientada a objetos.

Painel Ações
Para que você aplique um código Action Script em seu projeto, precisa utilizar o painel Ações (actions). Pode
chamar este painel através da tecla de atalho F9 ou através do menu Janela – Ações

29
 Linguagem de Programação para Animação Web | Unidade D

O painel Ações divide-se em duas partes: biblioteca de ações (à esquerda) e janela de código (à direita). Na parte
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

superior à direita do painel de ações, encontramos alguns botões:

2. Linguagem do ActionScript
Variáveis
Para você declarar uma variável deve utilizar a palavra-chave var seguido do nome da variável. Ainda é neces-
sário atribuir o tipo de dado colocando o caractere dois pontos (:) e o nome do tipo de dado. Pode atribuir um
valor a esta variável utilizando o caractere de igualdade (=).
var nome : tipo de dado = valor;

Os tipos de dados mais usados são:

• String – armazena textos.
var curso:String = “Animação”;

• Number – armazena números.

var pontos:Number = 20;

• Boolean – armazena apenas dois tipos de dados true (verdadeiro) e false (falso).
var carro:Boolean = true;

Vamos praticar?
Abra o painel Ações (F9) e digite o seguinte código:
var nome:String = “Rogério Weymar”;
trace(nome); //retorna Rogério Weymar
Usamos a função trace para verificar o valor da variável na janela de saída.
Pressione as teclas Ctrl + Enter para testar o código.

30
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense Linguagem de Programação para Animação Web | Unidade D

Após testar o código com uma variável do tipo String, vamos testar com uma variável do tipo Number.
No painel Ações digite:
var numero1:Number = 20;
var numero2:Number = 4;
trace (numero1);
Pressione as teclas Ctrl + Enter e veja na janela o valor da variável numero1 que é 20.

31
 Linguagem de Programação para Animação Web | Unidade D
Operadores e expressões
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

Operadores aritméticos
• Adição
var soma:Number = 3+2; //retorna 10

• Subtração
var subtrai:Number = 3-1; //retorna 2

• Multiplicação
var multiplica:Number = 6*2; //retorna 12

• Divisão
var divide:Number = 20/4; //retorna 5

• Módulo
var resto:Number = 8 % 5; //retorna 3

Operadores de Igualdade
• Atribuir e somar
var soma:Number = 3;
soma += 2; //retorna 5

• Atribuir e subtrair
var subtrai:Number = 10;
subtrai -= 5; //retorna 5

• Atribuir e multiplicar
var multiplica:Number = 8;
multiplica *= 4; //retorna 32

• Atribuir e dividir
var divide:Number = 9;
divide /= 2; //retorna 4.5

Operadores de comparação
• Diferente
var diferente:Boolean = 4 != 7; //true

• Menor
var menor:Boolean = 10 < 20; //true

• Menor e/ou Igual

var menorigual:Boolean = 6<= 6; //true

• Maior
var maior:Boolean = 9> 2; //true

• Maior e/ou Igual

var maiorigual:Boolean = 2 >= 5; //false

• Igualdade
var igual:Boolean = 8 == 8; //true

32
 Linguagem de Programação para Animação Web | Unidade D

Estruturas condicionais
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

if.else
A instrução condicional if..else permite testar uma condição e executar um bloco de código se esta condição for
verdadeira, ou executar um bloco de código alternativo caso seja falsa.
Exemplo:
var vagas:Number = 20;
if(vagas > 50)
{
trace(“Grande capacidade.”);
}
else if(vagas < 50)
{
trace(“Pequena capacidade.”);
}

switch
A instrução Switch avalia uma expressão e usa o resultado para determinar qual bloco de código será executado.
Exemplo:
var diadasemana:Date = new Date();
var dia:uint = someDate.getDay();
switch(dia)
{
case 0:
trace(“Domingo”);
break;
case 1:
trace(“Segunda”);
break;
case 2:
trace(“Terça”);
break;
case 3:
trace(“Quarta”);
break;
case 4:
trace(“Quinta”);
break;
case 5:
trace(“Sexta”);
break;
case 6:
trace(“Sábado”);
break;
default:
trace(“Fora da faixa”);
break;
}

33
 Linguagem de Programação para Animação Web | Unidade D

Estruturas de repetição
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

for
A repetição For faz uma iteração por meio de uma variável para um intervalo de valores específicos.
Exemplo:
var j:int;
for (j = 0; j < 5; j++)
{
trace(j);
}

while
A repetição While é como uma instrução IF, que é repetida desde que a condição seja verdadeira.
Exemplo:
var a:int = 0;
while (a < 5)
{
trace(a);
a++;
}

Funções
Uma função são blocos de códigos reutilizáveis. Utilizando funções conseguimos códigos menores. Uma função
é iniciada com a palavra-chave function e sua sintaxe é a seguinte:
function nome da função (parâmetros)
{
// comandos;
};

Exemplo:
function teste()
{
trace(“Rogério”);
}

34
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense Linguagem de Programação para Animação Web | Unidade D

Para chamar uma função, basta você escrever o nome dela seguido de (). Por exemplo:

teste();
Podemos passar um parâmetro à função criada. Veja o exemplo abaixo:
function teste( nome:String)
{
trace(“Olá “ + nome);
}
teste(“Rogério”);
teste(“Adriane”);
Podemos perceber, pelo exemplo, a ideia de uma função. Reutilizamos o mesmo código para conseguir diferen-
tes resultados que em nosso exemplo foi cumprimentar dois usuários diferentes.

Vamos praticar?

1. Crie um novo arquivo chamado função.fla

2. Importe para o palco uma imagem de uma ilha para o fundo.
3. Crie uma nova camada e nela desenhe um circulo amarelo representando o sol.
4. Transforme este círculo em um símbolo Clipe de filme e dê o nome de instância sol.
5. Clique no primeiro quadro da camada 2 e pressione a tecla F9 para chamar o painel de Ações.
6. Digite o seguinte código:
function mudarSol():void{
sol.scaleX=1.5;
sol.scaleY=1.0;
}
mudarSol();
Teste seu código, pressionando Ctrl + Enter.

35
 Linguagem de Programação para Animação Web | Unidade D

Eventos
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

Os eventos são ações que ocorrem durante a reprodução de um arquivo swf, como um clique com o mouse, o
pressionar de uma tecla, etc. Vamos conhecer alguns eventos?

Mouseevent
• CLICK
mc_botao.addEventListener(MouseEvent.CLICK, onClick);
function onClick(evt:MouseEvent):void
{
trace(“CLICK”);
}
• MOUSE_OVER
mc_botao.addEventListener(MouseEvent.MOUSE_OVER, onOver);
function onOver(evt:MouseEvent):void
{
trace(“EM CIMA DO OBJETO”);
}

Vamos praticar?
Antes de testar os dois eventos de mouse que você conheceu, vamos criar um botão.
• Abra um novo arquivo e escolha a opção ActionScript 3.0.
• Desenhe no palco (stage) um círculo pequeno utilizando a ferramenta oval.
• Selecione o círculo usando a ferramenta de seleção e pressione a tecla F8 para converter em símbolo. Escolha, no tipo,
a opção Botão, no nome digite botão e clique em OK conforme a figura a seguir.

Para criar uma ação para o botão é necessário criar um nome para a instância do botão, e em seguida criar uma
ação no Painel Ação. Na janela Propriedades digite o nome mc_botao conforme figura abaixo.

36
 Linguagem de Programação para Animação Web | Unidade D

Agora abra o Painel Ação e digite o seguinte código:

Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

mc_botao.addEventListener(MouseEvent.MOUSE_OVER, onOver);
mc_botao.addEventListener(MouseEvent.CLICK, onClick);

function onOver(evt:MouseEvent):void
{
trace(“EM CIMA DO OBJETO”);
}
function onClick(evt:MouseEvent):void
{
trace(“CLICK”);
}
Pressione as teclas Ctrl + Enter para rodar o exemplo. Sempre que o mouse estiver em cima do objeto irá disparar
o evento MOUSE_OVER que irá chamar a função onOver, e sempre que clicar no objeto irá disparar o evento
CLICK que irá chamar a função onClick.

KEYBOARDEVENT
• KEY_DOWN
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown);
function onDown(evt:KeyboardEvent):void
{
trace(“tecla pressionada”);
}
• KEY_UP
stage.addEventListener(KeyboardEvent.KEY_UP, onUp);
function onUp(evt:KeyboardEvent):void
{
trace(“tecla solta”);
}
VERIFICAR SE UMA TECLA FOI PRESSIONADA
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown);
function onDown(evt:KeyboardEvent):void {
if(evt.keyCode == 65)
{
trace(“A tecla A foi pressionada!”);
}
}

Links
Você pode abrir uma página web, através de um botão. Basta adicionar o código dentro da função chamada por
um dos eventos do mouse. Eis o código:
var url:URLRequest = new URLRequest(“http:tsiad.ifsul.edu.br/moodle/”);
navigateToURL(url);
Para testar, utilize o exercício de eventos de mouse e adicione o código abaixo, após o código trace(CLICK). Ao
clicar no botão, irá abrir o navegador com a página escolhida.

37
 Linguagem de Programação para Animação Web | Unidade D

3. Clipe de filme e suas propriedades

Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

Clipe de filme (movieclip), é um pequeno filme ou animação independente que possui sua própria linha do tem-
po, camadas e códigos AS.
Para exemplificar vamos converter um objeto do palco em um clipe de filme. Desenhe um quadrado no palco
utilizando a ferramenta retângulo. Selecione este retângulo inclusive com sua borda. Clique no objeto com o bo-
tão direito do mouse e escolha a opção Converter em Símbolo. Abrirá a janela Converter em Símbolo. No campo
nome, dê um nome para o movieclip, por exemplo, mc_retangulo. Em Tipo
selecione Clipe de filme e clique no botão OK.

Após criar o movieclip no palco, devemos atribuir a ele um nome de instância. Este nome será utilizado nos códi-
gos do ActionScript. Assim poderemos identificar o objeto e interagir com ele usando nosso código.
Para dar um nome de instância temos que abrir o painel Propriedades. Caso não esteja aberto, clique no menu
Janela e na opção Propriedades.
No painel Propriedade, há um campo chamado <Nome da ocorrência>. Digite neste campo um nome de instân-
cia como por exemplo mc_retangulo_verde.

A interação com movieclips é muito simples, e com o ActionScript podemos mudar algumas propriedades destes
movieclips.

Height e width
Essas propriedades mudam a height (altura) e a width (largura) do movieclip.
Exemplo:
mc_retangulo_verde.height = 300;
mc_retangulo_verde.width = 300;

38
 Linguagem de Programação para Animação Web | Unidade D

Coordenadas x e y
Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

Definimos a posição do movieclip no palco, alterando as coordenadas x (horizontal) e y (vertical).

Exemplo
mc_retangulo_verde.x = 200;
mc_retangulo_verde.y = 300;

Visible
Indica se o movieclip ficará visível ou não. Esta propriedade utiliza valores do tipo boolean:
True – visível
False – invisível
Exemplo:
mc_retangulo_verde.visible = false;

Rotation
Rotaciona o movieclip no palco. Os valores são em graus. Positivo para sentido horário e negativo para o sentido
anti-horário.
Exemplo:
mc_retangulo_verde.rotation = 20;
mc_retangulo_verde.rotation = -20;

Vamos praticar?
Crie um movieclip a partir de um retângulo na cor verde, e dê o nome mc_retangulo_verde como nome de ins-
tância. Digite o seguinte código:
stage.addEventListener(KeyboardEvent.KEY_DOWN, onDown);
function onDown(evt:KeyboardEvent):void {
if(evt.keyCode == 65)
{
trace(“A tecla A foi pressionada!”);
mc_retangulo_verde.rotation += 15;

}
if(evt.keyCode == 66)
{
trace(“A tecla B foi pressionada!”);
mc_retangulo_verde.rotation -= 15;

}
}
Para testar pressione as teclas Ctrl + Enter. Pressionando as teclas A ou B nosso movieclip irá rotacionar no palco.
Experimente as outras propriedades que estudamos.

39
 Linguagem de Programação para Animação Web | Unidade D

ATIVIDADE D – ActionScript 3.0

Sistema Universidade Aberta do Brasil - UAB | IF Sul-rio-grandense

Caro(a) aluno(a),
Utilizando os códigos AS que você aprendeu, crie uma aplicação para calcular a média de três temperaturas me-
didas ao longo do dia. Se a média for menor que 15, informe que a “temperatura está abaixo da média”, se for
igual a 15 informe que a “temperatura está na média” e se for maior que 15 informe que “ a temperatura está
acima da média”. Bom trabalho!

40