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.
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.
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
“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”.
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”); }
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”.
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!
