Botão Animado em Flash

Vamos criar um simples botão e depois anima-lo, de maneira a que consigamos dar a entender que não só os gráficos se pode animar no Flash.

Modelo:

Baixar modelo:

source

Primeiro Passo: Criar o botão

1. Criem um gráfico ou escrevam algum texto que gostariam que aparece-se no botão;
2. Seleccionem a vossa criação e carreguem em F8. Após terem feito isto, voltem a seleccionar a opção de button, e cliquem em OK (Figura 1).

Segundo Passo: Aplicar as acções ao botão

1. Seleccionem o botão;
2. Abram o painel de Actions;
3. Apliquem o seguinte código ao botão em Expert Mode:

on (rollover) {
stop ( );
}
on (rollout) {
play ( );
}
on (release) {
getURL {“http://www.hospedandosites.com.br”, “_blank”);
}

O que estamos a definir neste código, é para parar, quando o rato está por cima do botão. Quando o rato, sai de cima do botão, definimos que o botão deve continuar em andamento (neste caso). E como prometemos ao utilizador que daremos um prémio, caso ele consiga apanhar o rato, nós incluímos um prémio especial: Um link de primeira classe para o nosso Site!

Terceiro Passo: Criar a animação do botão

1. Colocar o rato, na frame 1, e criar uma keyframe (caso esta ainda não exista);
2. Vamos criar 41 frames, clicando na frame 41 da layer do rato e de seguida arrastando-a para layer debaixo. Para a layer BG. Desta forma seleccionamos o mesmo número de frames para ambas as layers;
3. Vamos criar as frames, pressionando a tecla F5;
4. Na layer do rato, posicionem o rato na frame 20. Pressionem a tecla F6, para criar uma Keyframe;
5. Clicando na frame 20 da layer do rato, arrastem-na 1 frame para direita;
6. Criem uma nova KeyFrame na frame 21;
7. Vamos mudar neste caso a orientação do rato. Para tal vamos fazer um Flip Horizontal. Assim sendo, clicamos no menu Modify > Transform > Flip Horizontal;
8. Na frame 41 vamos criar mais uma KeyFrame;
9. Com o rato a clicar na frame 41, arrastem-no para o vosso lado esquerdo totalmente;
10. Com este projecto já quase todo pronto, falta-nos criar o primeiro Motion Tween. Entre a frame 1 e 20, cliquem com o botão direito do rato, e escolham a opção de Create Motion Tween.

De igual modo, criem outro Create Motion Tween, mas desta vez entre as frames 21 e 41 (Figura 2).Quarto Passo: Testar o Filme

Agora só nos resta testar o filme que criamos. Boa Sorte!