Efeito em menu com ActionScript 3

Neste tutorial sobre o Flash vamos mostrar como criar um efeito de menu com o ActionScript 3.0.

O efeito vai esticar horizontalmente quando o mouse estiver sobre os itens do menu, e vai diminuir quando o mouse é retirado. Este efeito de alongamento é feito usando as interpolações de movimento na linha do tempo.

Passo 1

Abra o Flash CS3 ou CS4 e crie um novo documento com o tamanho que você preferir. Selecione a ferramenta Rectangle tool (R) e desenhe um pequeno retângulo no palco. Colocamos esse mesmo retângulo na borda mais á esquerda do palco.

As dimensões que usamos para o retângulo foi 35×35 px.

Passo 2

Converta o retângulo para um Movie clip, pressionando a tecla F8. Em seguida, clique 2x no Movie clip (Retângulo) para entrar no cronograma e criar algumas camadas.

A primeira camada vai realizar as ações (actions) e vai ter o código stop(); no frame 1 e 20. A segunda camada vai conter o texto e a terceira vai fazer os itens do menu.

Efeito em menu com ActionScript 3

Passo 3

Com a camada dos itens do menu selecionada, clique com o botão direito sobre o pequeno retângulo e selecione “Create Tween Motion”. Se uma mensagem de aviso aparecer, clique em Ok. Isto vai converter o retângulo em um clipe de filme.

Na linha de tempo selecione o frame 13. Depois, pegue a ferramenta Free Transform e altere a largura do retângulo para 130px no painel de propriedades. Veja a imagem abaixo:

Efeito em menu com ActionScript 3

Passo 4

Na linha do tempo, bloqueie a camada “Menu Item” e selecione a camada “Text” e coloque um quadro chave (F6) no frame 12.

Escreva algum texto qualquer para o menu como mostra abaixo. Usamos a fonte Arial com tamanho 15pt.

Novamente com o botão direito, só que agora no texto, selecione a opção “Create Tween Motion”. Agora na linha do tempo, selecione o frame 18 e depois mova o texto para a direita. Isto cria um efeito de deslocamento, assim, quando o retângulo alongar o texto vai acompanhar o evento.

Selecione o frame 11, e clique no texto criado no palco e mude a propriedade “alpha” para 0% no painel de efeito de cores.

O cronograma da linha do tempo deve estar assim agora:

Efeito em menu com ActionScript 3

Passo 5

Volte para a sena principal “Scene 1”. No painel de bibliteca (Library) duplique os itens do menu que quiser, para isso, clique com o botão direito e selecione “Duplicate”. Lembre-se de alterar o texto do botão para cada item do menu. Depois de ter terminado a duplicação dos itens, arraste os objetos para o palco.

Passo 6

Coloque para cada um dos itens os nomes de instâncias seguintes: menu1, menu2, menu3 e menu4.

Passo 7

Na linha do tempo, crie uma nova camada e coloque o nome de “Actions”. Depois, abra o painel de ações (F9) e digite o seguinte código:

//Array para armazenar as instancias dos botões
var menuArr:Array=new Array(menu1,menu2,menu3,menu4);

//Faz o loop nos botões e adiciona os eventos do mouse
for (var i = 0; i < menuArr.length; i++) {
menuArr[i].addEventListener(MouseEvent.MOUSE_OVER, stretchOut);
menuArr[i].addEventListener(MouseEvent.MOUSE_OUT, stretchIn);
menuArr[i].buttonMode = true; }

//Esta funcão faz o eveito de estiramento
function stretchOut (event:MouseEvent):void {
event.currentTarget.gotoAndPlay(“2″);
}

//Está função retorna o menu em sua posição inicial.
function stretchIn(event:MouseEvent):void {
event.currentTarget.gotoAndStop(“1″);
}