Versão: Macromedia Professional Flash 8

Descrição: Esse é um tutorial em flash de nível mais avançado, que tem o intuito de ajudar muitas pessoas a melhorarem a qualidade de seus menus animados.


1. Crie um novo documento em flash. Nomeie a camada principal para “Botão”

2. Na área do filme escreva o seu nome ou o que desejar.

3. Converta o texto para um movie clip (clipe de filme) Modify > Convert to Symbol, ou simplismente selecione a escrita e aperte F8. Coloque o nome de “botaoanimado” e de “ok”.

4. Após fazer isso, de dois clicks sobre a escrita para entrar no movie clip criado (botaoanimado). Crie 4 camadas e coloque o nome e a ordem conforme segue o exemplo abaixo:
- acoes
- área botao
- texto
- animação

5. Adicione quadros até o número 16 nas 4 camadas, apertando F5

6. Na camada “ações” crie mais um quadro-chave na posição de número 9 apertando a tecla F6 ou Insert > Timeline > Keyframes.

7. Selecione o primeiro quadro-chave da camada “acoes” abra a janela de Ações do flash apertando  F9 ou Window > Actions. Adicione a ação STOP como mostra o exemplo abaixo.
Repita os passos no quadro-chave de número 9.

8. Após feita a parte de ações, trave com o cadeado 3 camadas, deixando aberto apenas a camada “area botão”. Nessa camada crie um retângulo um pouco maior do que o texto. (a cor não importa pois não irá aparecer no filme). Selecione esse retângulo, agrupe apertando Ctrl+G ou Modify > Group.

Converta esse quadro para um “Botão” apertando F8. Coloque o nome de “area” , selecione o item com nome de “Botão ou Button” como mostra o exemplo abaixo e de ok.

9. Agora de dois cliks no quadro para entra na cena do botão. Repare que como na figura abaixo você terá que primeiro criar um quadro-chave (F6) na parte chamada “Hit ou Área” , após fazer isso click na parte chamada “UP” e aperte delete para que o conteúdo seja apagado. Apenas a parte “Hit” terá o conteúdo do quadro.
Volte para a cena do “botaoanimado” (não se assuste se o quadro ficar como um retângulo azul transparente, pois essa é a intenção.)

10. Acredito que essa seja a parte mais complicada. Na cena do “botaoanimado” de um click sobre o quadro que você transformou em um botão. Entre na parte de ações desse botão apertando a tecla F9.
Vou fazer uma breve explicação do que mostra o exemplo abaixo.

Primeiro: a ação RollOver com um gotoAndPlay(2), faz com que quando o usuário passar o mouse sobre o botão sua animação vai se iniciar a partir do quadro de numero 2 e parar no STOP no quadro de número 9 que criamos no inicio desse tutorial.

Segundo: a ação RollOutside com um gotoAndPlay(10), faz com que quando o usuário tirar o mouse de cima do botão sua animação vai continuar a partir do quadro de numero 10 e parar no STOP do quadro de número 1 que criamos no inicio desse tutorial.

Terceiro: a ação getURL serve para definir para qual endereço sua página será redirecionada após clicar no botão.

11. Volte para a cena do “botaoanimado” agora deixe apenas a camada “animação” sem o cadeado. Coloque também o “X” no “Olho” da camada “área botão” para que o quadro azul não atrapalhe nossas próximas alterações.
Agora na camada “animação” crie mais um quadro-chave na posição de número 2 da camada “animação” apertando F6.

12. Agora faça um retângulo um pouco maior do que o texto da cor desejada, selecione o retângulo e o agrupe Ctrl+G.

13. Agora adicione um quadro-chave na posição de número 9 apertando F6. Crie uma Interpolação de movimento entre esses 2 quadros, para fazer isso basta clicar em qualquer posição entre os 2 quadros com o botão direito do mouse e selecionar a opção “Create Motion Tween ou Criar Interpolação de Movimento”

14. Selecione o quadro-chave de número 2 da camada animações clique sobre o retângulo, e repare que na palheta de “propriedades” aparece o campo “Color” que vai estar como “none” altere essa opção para “Alpha” e coloque 0%.

15. Agora crie mais 2 quadros-chave, um na posição de número 11 e outro na posição de número 16. Crie uma interpolação de movimento entre esses quadros como no item anterior, selecione o quadro 16 click sobre o retângulo e faça a mesma coisa na palheta de “propriedades” como no item anterior deixando o “Alpha” em 0%

16. Está pronto, agora teste sua animação apertando Ctrl+Enter, passe o mouse sobre o texto e depois tire, você vai notar que ao tirar o mouse do texto seu retângulo vai sumir aos poucos ao invés de apenas desaparecer sem fazer nada.



Agora é só colocar sua criatividade em prática e bom divertimento!

Ricardo Jucosky - blog.ricardojucosky.com - Desenvolvedor de interfaces web, atualmente trabalha como coordenador geral de desenvolvimento web de uma agência de publicidade.