Pular para o conteúdo
Início » Botão Animado em Flash

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!

Veja também: