Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.



 
InícioPortalMenu DropDown Animado BlogRegistarÚltimas imagensMenu DropDown Animado Orkut10RegrasEntrar

 

 Menu DropDown Animado

Ir para baixo 
AutorMensagem
leandro
Novato
Novato
leandro


Masculino Número de Mensagens : 11
Warning : 0%
Premios :
Menu DropDown Animado Trophy10: 0
Menu DropDown Animado Trophy11: 0
Menu DropDown Animado Trophy12: 0

Menu DropDown Animado Empty
MensagemAssunto: Menu DropDown Animado   Menu DropDown Animado Icon_minitimeQua Set 17, 2008 5:47 pm

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.

Menu DropDown Animado Fig071-300x153

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.

Menu DropDown Animado Fig081-227x300

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.
Menu DropDown Animado Fig091-300x298
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.
Menu DropDown Animado Fig101-300x183
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.
Menu DropDown Animado Fig111-300x208
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.
Menu DropDown Animado Fig122-283x300
Passo 23

Transforme a layer Máscara em uma máscara.
Menu DropDown Animado Fig13-300x84
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:
Menu DropDown Animado Fig14-300x246
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_leftmenu = true;
} else {
menu = false;
}// end if
if ((roll || open) && (!open || menu)) {
this._visible = true;
speed = (y_max-menu_bottom)*0.500000;
if (y_stop-1this._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
Ir para o topo Ir para baixo
 
Menu DropDown Animado
Ir para o topo 
Página 1 de 1
 Tópicos semelhantes
-
» Menu
» [RGSS2]GL Menu
» Menu Personalizado
» Engine de um menu 3d (nota 10)
» Criando Menu Drag and Drop

Permissões neste sub-fórumNão podes responder a tópicos
 :: Desing e Web Design :: Flash :: Tutoriais-
Ir para: