PROGRAMANDO NO FLASH. Prezado(a) aluno(a), 1. ActionScript. Painel Ações. UnidadeD

Transcrição

1 UnidadeD 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!!! PROGRAMANDO NO FLASH 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 desenvolvedores 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

2 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 ActionScript Variáveis Para você declarar uma variável deve utilizar a palavra-chave var seguido do nome da variável. Ainda é necessá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

3 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 é

4 Operadores e expressões 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

5 Estruturas condicionais 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. 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. var diadasemana:date = new Date(); var dia:uint = somedate.getday(); switch(dia) case 0: trace( Domingo ); case 1: trace( Segunda ); case 2: trace( Terça ); case 3: trace( Quarta ); case 4: trace( Quinta ); case 5: trace( Sexta ); case 6: trace( Sábado ); default: trace( Fora da faixa ); 33

6 Estruturas de repetição for A repetição For faz uma iteração por meio de uma variável para um intervalo de valores específicos. 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. 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; ; function teste() trace( Rogério ); 34

7 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 diferentes 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

8 Eventos 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

9 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_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( ); 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

10 3. Clipe de filme e suas propriedades Clipe de filme (movieclip), é um pequeno filme ou animação independente que possui sua própria linha do tempo, 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 botã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ódigos 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ância 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. mc_retangulo_verde.height = 300; mc_retangulo_verde.width = 300; 38

11 Coordenadas x e y 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 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. 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 instâ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

12 ATIVIDADE D ActionScript 3.0 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 medidas 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