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.
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:
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:
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:
var menuArr:Array=new Array(menu1,menu2,menu3,menu4);
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″);
}
Passo 8
Teste o efeito do menu Ctrl + Enter.
