Unidade PROGRAMANDO NO FLASHuab.ifsul.edu.br/tsiad/conteudo/modulo5/_pdf/lpa_ud_1.pdfaproximada da...
Transcript of Unidade PROGRAMANDO NO FLASHuab.ifsul.edu.br/tsiad/conteudo/modulo5/_pdf/lpa_ud_1.pdfaproximada da...
29
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
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. ActionScriptO 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çõesPara 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
PROGRAMANDO NO FLASHUnidade d
30
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
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
superior à direita do painel de ações, encontramos alguns botões:
2. Linguagem do ActionScriptVariáveisPara 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.
31
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
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.
32
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade DOperadores e expressões
Operadores aritméticos• Adição
var soma:Number = 3+2; //retorna 10
• Subtraçãovar subtrai:Number = 3-1; //retorna 2
• Multiplicaçãovar multiplica:Number = 6*2; //retorna 12
• Divisãovar divide:Number = 20/4; //retorna 5
• Módulovar 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
33
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
Estruturas condicionais
if.elseA 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.”); }
switchA 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; }
34
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
Estruturas de repetição
forA 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); }
whileA 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çõesUma 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”);}
35
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
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.fla2. 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.
36
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
EventosOs 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_OVERmc_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.
37
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
Agora abra o Painel Ação e digite o seguinte código:
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_UPstage.addEventListener(KeyboardEvent.KEY_UP, onUp); function onUp(evt:KeyboardEvent):void { trace(“tecla solta”); }VERIFICAR SE UMA TECLA FOI PRESSIONADAstage.addEventListener(KeyboardEvent.KEY_DOWN, onDown); function onDown(evt:KeyboardEvent):void { if(evt.keyCode == 65) { trace(“A tecla A foi pressionada!”); } }
LinksVocê 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.
38
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
3. Clipe de filme e suas propriedadesClipe 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 widthEssas propriedades mudam a height (altura) e a width (largura) do movieclip.
Exemplo:
mc_retangulo_verde.height = 300;mc_retangulo_verde.width = 300;
39
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
Coordenadas x e yDefinimos 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;
VisibleIndica 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;
RotationRotaciona 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.
40
Sis
tem
a U
nive
rsid
ade
Abe
rta d
o B
rasi
l - U
AB
| I
F S
ul-r
io-g
rand
ense
Linguagem de Programação para Animação Web | Unidade D
ATIVIDADE D – ActionScript 3.0Caro(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!