Baixe os arquivos para acompanhar (utilizei o Flash CS3 mas salvei em versão 8)
Este é meu primeiro tutorial Flash, espero que goste. Vou ensinar a fazer botões (e o que mais a imaginação quiser – utilizei os mesmos princÃpios tanto em www.upper-agency.com e www.ravimidia.com) que retornam na timeline do Flash, como no bannerzinho acima.
A primeira coisa é definir o seu layout. No meu caso eu escolhi um bem simples: “Cabana†em um fundo preto. Já pensando, é claro, em como será a animação.
Crie um novo arquivo flash. Eu ainda estou usando Action Script 2. Por isso, se quiser seguir este tutorial, escolha esta opção. Vá em “Insert†– “New Symbol†– “Movie Clipâ€. O nome que dei foi Cabana é bacana. Esta será a sua animação. No meu caso, a animação é “Passe o mouse†indo pra baixo e o “Cabana é bacana†aparecendo. Use a criatividade e faça a sua própria.
Olhe abaixo as minhas camadas. A animação está nas três camadas da máscara, uma mascarando outras duas. As outras três camadas você vai criar junto comigo.
Crie a camada “actionâ€, abra o painel de Action Script (F9) e coloque o código “stop();†(sem aspas) na primeiro e no último frame de sua animação. Isto impede que a animação comece sozinha e também faz com que ela pare quando chegar ao fim.
Crie a camada “botão ação†e nela desenhe um quadrado do tamanho do seu botão. Este quadrado será a área de ação do seu botão. No meu caso eu coloquei um do tamanho do swf para que a animação funcione em qualquer lugar onde o mouse estiver.
Crie a camada “retornadorâ€. Aqui está o pulo do gato. Vamos criar nesta camada um movie clip que fará com que a animação retorne. Mais uma vez, vá em “Insert†– “New Symbol†– “Movie Clipâ€. Dê o nome de retornador.
Você deve colocar o nome de instância deste movie clip retornador como “retornador_mc†(sem aspas)
Crie três keyframes e coloque em cada um as seguintes ações (respectivamente):
Frame 1: stop(); //isto impede que este movie clip comece a rodar sozinho e o mantém parado quando não precisarmos dele
Frame 2: _parent.prevFrame(); // _parente indica “o movie clip pai deste onde está o código†e prevFrame() faz este movie clip pai ir para o frame anterior
Frame3: gotoAndPlay(2); // isto faz com que este movie clip volte para o frame 2 e novamente jogue o movie clip pai para o frame anterior. Ou seja, a animação que você criou vai retornando até encontrar o começo novamente.
Para finalizar, volte para a cena principal e coloque este código no movie clip principal:
on(rollOver){
this.retornador_mc.gotoAndStop(1);
this.play(1);
}
// ao passar o mouse em cima, mandamos o retornador ficar parado sem fazer efeito e mandamos a animação rodar
on(rollOut){
this.retornador_mc.gotoAndPlay(2);
}
//ao tirar o mouse, mandamos o retornador começar a fazer sua “mágicaâ€. Ele vai para o frame 2 e começa a fazer com que a animação retorne.
Prontinho. Baixe os arquivos fonte e divirta-se.
Qualquer dúvida ou sugestão, deixe um comentário bacana.
Pablo Cabana
