Prática 6 ActionScript

Prática 6 ActionScript 1. Objetivos Se familiarizar com o ActionScript. Usar comandos e funções básicas. 2. Recursos Necessários Computador com o programa Macromedia Flash MX ou superior. 3. Conceitos Gerais e Procedimentos 3.1. O que é ActionScript? ActionScript é a língua de programação do FlashMx. Ela permite que você tenha mais do que uma animação linear na linha de tempo. Com ActionScript seu filme pode reagir a eventos, como escolhas do usuário ou efeitos randômicos. O ActionScript no Flash Mx é derivado de duas fontes. A primeira é o conjunto de macro comandos que existem em todas as versões anteriores, onde uma linguagem de programação similar, mas bem básica, é usada. A outra influencia no flash Mx é o JavaScript. Para ser mais fácil de desenvolvedores Web aprenderem ActionScript, muitos dos novos comandos, funções e outras sintaxes foram feitas para parecerem como JavaScript. Os programas ActionScripts são listas de instruções para o Flash Mx seguir. Eles podem ser colocados em vários lugares no filme Flash. Saber onde colocar um script já é um grande passo. Vamos olhar em alguns lugares onde os scripts podem ser colocados e quando o Flash usa estes scripts. 3.1.1. Frame Scripts Você pode colocar scripts nas keyframes na linha de tempo principal do seu filme. Para isto, slecione a keyframe no filme principal e digite F9. O painel de ações (Actions Panel) aparece junto com Actions-Frame na barra de títulos, no topo do painel. Scripts para frames podem conter dois elementos de scripts diferentes. O primeiro é uma lista do comandos que são executados assim que as keyframes são alcançadas quando o filme está passando. Estes comandos são seguidos, um depois do outro, até que o script seja completado. O segundo tipo de elemento de script que pode ser incluído num quadro é chamado função. Funções são pedaços reusáveis de código que podem ser usados por comandos no quadro ou no filme. 3.1.2. Button Scripts Você pode anexar scripts à botões que aparecem no palco. Primeiro, você tem que criar o botão como um elemento da biblioteca. Então, arrastá-lo para o palco. Com o botão selecionado no palco, digite F9 para chamar o painel de ações, caso ele não esteja ativo. 1

O painel de ações é agora intitulado Actions-Button. Você deve falar ao botão como ele deve reagir à diferentes eventos de botão, como ser pressionado, ter o mouse sobre ele e etc. O código que lida com eventos é chamado handler. Scripts de botões são séries de um ou mais handlers. 3.1.3. Movie clip Scripts Você também pode anexar um script a um movie clip. Para fazer isto, primeiro você deve criar um movie clip de modo que ele apareça na biblioteca. Então, arraste-o para o palco e abra o Action Panel com o movie clip selecionado. O Actions Panel é intitulado Actions Movie Clip. Os comandos devem ser colocados dentro dos handlers que reagem a eventos que ocorrem a movie clips. Os movie clips reagem a uma série de eventos diferentes dos botões e frames. 3.2. Atividade 1 - Usando o Actions Panel O primeiro comando que você deve aprender é chamado trace. O comando trace escreve algumas informações à janela do Flash Output, uma pequena janela de texto que pode aparecer quando você pré-visualiza seu filme em Flash. É tipicamente usada para enviar mensagens de eliminação de erros enquanto você desenvolve seu programa. Embora este exemplo pode não ser algo que você vá usar num filme real, é o modo mais rápido de mostrar que você pode escrever ActionScript que pode verdadeiramente fazer o Flash fazer alguma coisa. a) Para criar este exemplo, abra um novo filme. A linha de tempo automaticamente contém uma única camada com uma única keyframe. Selecione este quadro chave e digite F9 para abrir o Actions Panel. Então troque o Actions Panel para o modo expert através do pop-up menu que aparece no canto superior direito da janela. b) Agora você pode clicar na área em branco e digitar: trace( Oi Mundo!"); Note que uma vírgula é usada no fim de cada comando completo, que aparece numa única linha. O comando trace é uma função pré-programada do Flash. Funções usam parênteses para conter parâmetros. Parâmetros são bits de informação dados à funções para que elas possam completar sua tarefa. O comando trace requer só um parâmetro: o texto que deve aparecer na janela Output. Algumas funções requerem mais que um parâmetro, enquanto outras não requerem nenhuma. Seu Actions Panel deve se parecer como a figura seguinte: 2

c) Agora rode este filme, escolha Control> Test Movie. O Flash vai criar o arquivo.swf e então abre o arquivo na janela de pré-visualização. Esta janela permanece em branco porque não tem gráficos no filme. Entretanto, a janela Output também abre, mostrando as palavras Oi Mundo!. d) Salve o filme como p6_ativ1_seunome.fla. 3.3. Atividade 2 Controlando o filme a) Crie um novo filme com 550px de largura e 400 de altura. Desta vez, você vai adicionar vários keyframes nele. Cria uma série de quatro keyframes, cada um ocupando 10 frames. Clique em cada um dos keyframes e nomeie-os de parte1, parte2, parte3, parte4. b) Em cada uma destes keyframes acrescente um texto estático para que os usuários possam saber que parte está sendo vista na tela. Ex: selecione o frame parte1, clique no palco de edição, selecione a ferramenta texto, no painel de propriedades confira se está com a opção 3

static text e escreva Parte 1. Faça o mesmo para as outras partes, de modo que no frame parte2 esteja com o texto Parte 2 e assim por diante. c) Abra o Actions Panel e selecione o segundo keyframe. Digite na janela do Actions Panel: gotoandplay( parte4 ); O comando gotoandplay significa uma ordem para ir à um frame e continuar. Note que depois que você adicionou um ActionScript à um keyframe, ele contém a letra a na linha de tempo. d) Este é o único ActionScript no filme. Teste o filme. Quando você testa este filme, aqui está o que deve acontecer: o filme inicia no keyframe parte1, então ele mostra o texto Parte 1. Então ele avança até atingir o segundo keyframe parte2, que é o lugar aonde está o nosso ActionScript. Então, o Flash segue o comando e pula para o keyframe parte4. Ele faz isto antes mesmo de exibir o texto Parte 2. Então o filme está agora no parte4 e o texto Parte 4 é exibido. O filme então continua a se mover até o fim da linha de tempo. Chegando no fim, o filme recomeça e o texto Parte 1 reaparece. Todo o processo se repete indefinidamente. e) Salve o arquivo como p6_ativ2_seunome.fla. 4

3.4. Atividade 3 Criando botões para dar controle ao usuário No exemplo anterior, o ActionScript controlou o filme sem nenhuma interação com o usuário. Vamos adicionar alguns botões que vão permitir que o usuário diga ao filme para onde ir. O primeiro passo para dar ao usuário algum controle sobre o filme é intervindo no padrão do Flash. O Flash quer animar. Ele começa com o primeiro quadro e vai em frente para o próximo quadro. Você pode dizer ao Flash para parar com isto, pelo uso do comando stop(). a) Abra o arquivo anterior, salve-o com o nome p6_ativ3_seunome.fla. b) No primeiro frame, acrescente um ActionScript: stop(); Isto vai fazer com que o filme pare no primeiro frame e nunca mais vá para frente. c) Agora que o filme parou, é hora de dar ao usuário algum controle. Crie quatro botões simples, só para testar o filme, como o círculo que está de exemplo. d) No filme principal, acrescente uma nova camada. Chame-a de botões. Selecione o primeiro frame desta camada e arraste os botões que você criou para o palco. e) No frame parte2 troque o script gotoandplay( parte4 ); por: stop(); f) Acrescente o comando stop(); para os frames parte3 e parte4. g) Selecione o primeiro botão e, na janela do Actions Panel, escreva o script: On (press) { gotoandstop ( parte1 ); } 5

Este é um script comum para botões. Ele usa handlers par definir o que deve ser feito durante diferentes ações de botões. Neste caso, a ação é pressionar (press). A sintaxe on é usada para definir o começo de um handler como este. Então os símbolos das chaves { e } são usadas para conter os comandos que dever ser executados quando os eventos ocorrem. Neste caso, um comando gotoandstop é usado para ir à um frame e parar ao invés de continuar o filme. h) Anexe scripts similares aos outros botões. A única diferença deve ser que os outros botões pulem para os frames parte2, parte3 e parte4. i) Salve o arquivo como e publique-o como.swf. 6

3.5. Atividade 4 Animando com ActionScript Agora você precisa saber como mover como mover os itens no palco com ActionScript. Para fazer isto, você vai colocar um script no movie clip no mesmo jeito que você colocou no botão. a) Comece criando um novo filme. Você pode fazer algo simples como um círculo. b) Arraste o filme que você acabou de fazer da biblioteca para o palco. Neste ponto, você deverá ter somente um filme com uma única camada e um único frame. c) Clique em seu movie clip e, no Actions Panel escreva o script: onclipevent(enterframe) { this._x--; } Ao invés de usar on para definir o handler, você precisa usar onclipevent para definir eventos que afetam movie clips. No caso queremos usar o evento enterframe, que é um evento que acontece automaticamente, muitas vezes por segundo. Se o filme está preparado para rodar à 12fps, então o evento de enterframe deve ser enviado 12 vezes por segundo. Assim como com o handler on(press) no script do botão, o onclipevent(enterframe) usa chaves { e } para conter os comandos que serão executados quando o evento ocorrer. Só tem um comando aqui, que move o movie clip 1 pixel para a esquerda. Em this._x--, o this é usado quando o código num movie clip é usado para referenciar a si mesmo. Depois dele tem um ponto, que é usado depois de um objeto significa que você quer acessar uma propriedade do objeto. A propriedade neste caso é _x, a qual se refere a posição horizontal do movie clip. O -- é um comando diminutivo. Ele pega o valor do que está antes dele e reduz por exatamente 1. Comando this._x-- pega a posição horizontal do filme e subtrai 1, movendo o movie clip para a esquerda. Se você quisesse mover o movie clip para a direita você poderia usar ++, chamado comando aumentativo. Entretanto, se você quisesse mover o movie clip vários pixels de uma vez, você poderia usar += ou -+, como abaixo: onclipevent(enterframe) { this._x-=5; } O código acima move o movie clip 5 píxels de uma vez para a esquerda. d) Salve o arquivo como p6_ativ4_seunome.fla. Publique o arquivo como.swf. Atenção: Faça uma cópia de todos os arquivos desta aula para no diretório escolhido pelo professor para correção. Boa semana! 7