Passo 1
Com um novo documento Flash aberto, começaremos criando o efeito que aplicaremos quando o mouse passar sobre (over) um item de submenu. Crie um Símbolo de MovieClip e nomeie-o como Efeito Submenu.
Passo 2
Crie uma nova layer e nomeie as duas existentes como AS e Retângulo.
Passo 3
Com o frame 1 da layer Retângulo selecionado, clique na Rectangle Tool (R) e desenhe um retângulo sem contorno (stroke) com 100px de largura e 20px de altura, posicionando-o em X: 0 e Y: 0 através do painel Properties.
Passo 4
Clique no frame 1 da layer Retângulo e altere a altura (H) do retângulo que acabamos de desenhar nela para 1 e posicione-o em Y: 10.
Passo 5
Crie um Tween Shape entre o frame 1 e 6 da layer Retângulo.
Passo 6
Crie um keyframe no frame 6 da layer AS e inclua o seguinte comando nele:
stop();
Pronto, nosso efeito MouseOver está finalizado e utilizaremos mais adiante.
Passo 7
Crie um Símbolo de Botão e denomine-o Subitem 1.
Passo 8
Crie mais uma layer e renomeie as duas agora existentes como Texto e Hit e Efeito Over. Crie novos keyframes no frame Hit da layer Texto e Hit e no frame Over da layer Efeito Over.
Passo 9
Clique no frame Up da layer Texto e Hit, selecione a Text Tool e digite o Static Text: Subitem 1, posicionando-o em X: 0 e Y: 0.
Passo 10
Clique no frame Hit da layer Texto e Hit, selecione a Rectangle Tool e desenhe um retângulo com 100px de largura e 20px de altura posicionando-o em X: 0 e Y: 0 através do painel Properties.
Passo 11
Crie um keyframe no frame Over da layer Efeito Over e arraste uma instância do MC (MovieClip) Efeito Submenu que criamos inicialmente, posicionando-o em X: 0 e Y:0.
Passo 12
Duplique o botão Subitem1 e altere seu nome e texto para Subitem2. Analogamente, crie o botão Subitem3. Agora temos 3 botões que usaremos a seguir.
Passo 13
Crie um novo símbolo MC e nomeie-o como Submenu. Crie 5 novas layers e denomine-as como: Subitem 1, Traço 1, Subitem 2, Traço 2, Subitem 3 e Base.
Passo 14
Clique no frame 1 da layer Subitem 1 e arraste uma instância do botão Subitem1 para o Stage, posicionando-o em X: 0 e Y: 0. Siga procedimento análogo para os botões Subitem2 e Subitem3, modificando apenas suas posições Y, respectivamente para 20 e 40.
Passo 15
Nas layers Traço 1 e Traço 2, com o auxílio da Line Tool (N), desenhe os traços divisórios com espessura (stroke) 1 e comprimento (W) 100. Posicione-os em X:0 e Y: 20 e X:0 e Y:40, respectivamente.
Passo 16
Com o auxílio da Rectangle Tool (R), crie um retângulo, sem contorno (stroke), com 100px de largura (W) e 60px de altura (H) no frame 1 da layer Base, posicionando-o em X: 0 e Y: 0.
Passo 17
Crie um novo símbolo MC e nomeie como Item Notícias. Crie mais uma layer e renomeie-as para Texto e Base.
Passo 18
Na layer Texto, com a Text Tool (T), insira o texto Notícias (é nosso item principal do menu) e posicione-o em X: 24 e Y: 1. Na layer Base, com o Rectangle Tool (R), desenhe um retângulo, sem contorno (stroke), com 100px de largura (W) e 20px de altura (H), posicionando-o em X: 0 e Y: 0.
Passo 19
Crie um novo símbolo MC e nomeie como Menu Notícias. Crie mais duas layers e renomeie-as para: Título, Máscara e Subitens.
Passo 20
No frame 1 da layer Título, arraste uma instância do mc Item Notícias para a posição X: 0 e Y:0. Atribua hit como nome de instância deste objeto.
Passo 21
Clique no frame 1 da layer Máscara e com a Rectangle Tool (R), desenhe um retângulo, sem contorno (stroke), com 100px de largura (W) e 60px de altura (H), posicionando-o em X: 0 e Y: 20.
Passo 22
Clique no frame 1 da layer Subitens e arraste uma instância do MC Submenu para o Stage, posicionando-a em X: 0 e Y: -60. Atribua drop como nome de instância deste objeto.
Passo 23
Transforme a layer Máscara em uma máscara.
Passo 24
Antes de prosseguirmos, vamos alterar um “pequeno detalhe”: no menu File > Publishing Settings… (Ctrl+Shift+F12), na aba Flash, altere Actionscript version para Actionscript 2.0.
Passo 25
Clique no mc Item Notícias, e altere o instance behavior para Button. A seguir, tecle F9 e digite o código a seguir:
on (rollOver) {
if (!drop.roll) {
drop.roll = true;
} else {
drop.roll = false;
}
}
Passo 26
Clique no mc Submenu, tecle F9 e digite o código a seguir:
onClipEvent (load) {
roll = false;
menu = false;
open = false;
this._visible = false;
y_start = this._y;
y_stop = 20;
y_max = y_stop+this._height;
}
onClipEvent (enterFrame) {
mouse_x = _parent._xmouse;
mouse_y = _parent._ymouse;
menu_left = this._x;
menu_right = this._x+this._width;
menu_top = 0;
menu_bottom = this._y+this._height;
if (menu_left
menu = true;
} else {
menu = false;
}// end if
if ((roll || open) && (!open || menu)) {
this._visible = true;
speed = (y_max-menu_bottom)*0.500000;
if (y_stop-1
this._y = y_stop;
open = true;
roll = false;
} else {
_y = _y+speed;
}// end if
}
// end if
if (open && !menu) {
speed = (y_max-menu_bottom)*0.700000+1;
if (this._y
_y = y_start;
open = false;
this._visible = false;
} else {
_y = _y-speed;
}// end if
}
// end if
Nosso item de menu está pronto para usar.
Passo 27
Vá para a Scene 1, arraste o mc Menu Notícias para o Stage, tecle Ctrl+Enter para ver o item de menu funcionando.
Utilize esse mesmo procedimento para criar os outros itens de menu, tomando o cuidado para que as bases (retângulos de fundo dos itens de menu) tenham o mesmo tamanho (aqui usamos largura 100px, lembra-se?), pois caso contrário haverá sobreposição dos itens do submenu.
creditos:Francisco MXstudio