Menu

Cara este menu que vc quer é molim molim fazer hehehe

Vamos ao que interessa:

Obs.: Estas funções devem ser feitas no Flash MX.

Vamos aos passos:

Crie um arquivo novo no Flash e modifique o tamanho do mesmo para 400 de "width" por "60" de height, e coloque a cor de fundo que você preferir.
Modify > Movie.

Crie um quadrado com o tamanho de 40x40 (Procure fazer este quadrado sem linhas de borda). Este será o quadrado que, inicialmente, aparenta ser uma simples borda branca para o botão.

Transforme este quadrado em MOVIE CLIP. Selecione o quadrado, pressione a Tecla F8, na janela Convert to Symbol, digite no campo NAME: Movie_Borda, pressione OK. Na sua instância coloque Graph (se você quiser colocar outro nome, tudo bem, é só lembrá-lo mais pra frente, uando formos usar esta instância na Programação).

Entre na edição deste MOVIE CLIP e alinhe o objeto (o quadrado) à Left Edge e Vertical Center. Clique duas vezes sobre ele. Selecione o objeto interno e na Paleta Align, escolha os seguintes botões: (se a Paleta Align não estiver sendo exibida, pressione CTRL + K).

Saia da edição do MOVIE CLIP, clicando duas vezes numa área fora do objeto.

Selecione o MOVIE CLIP (Movie_Borda) e pressione a Tecla F8. A janela Convert to Symbol aparece. Na janela Convert to Symbol, escolha Movie Clip, no campo NAME digite: Movie_Bot01. Pressione OK. Na sua instância coloque Bot01 (se você quiser colocar outro nome, tudo bem, é só lembrar mais pra frente, quando formos usar esta instância na Programação).

Entre na edição do MOVIE CLIP Movie_Bot01. A partir de agora, vamos editar o próprio botão, nossa linha de tempo deve parecer-se com a da figura abaixo:

Posted Image

Renomeie o "Layer1" para Graph. Eu procuro estar associando sempre o nome do Objeto com o nome do Layer, fica mais fácil de se encontrar depois!

Crie mais dois Layers e deixe sua Time Line, igual a imagem abaixo:

Posted Image

No Layer TextoBot, coloque o Texto que vai ficar no botão. Crie um quadrado de 30x30 (menor que o Movie_Borda). Neste se você quiser deixar uma borda, fica até legal. Agrupe este quadrado (CTRL + G) e alinhe ele no centro do MOVIE.

Você pode usar tanto texto quanto uma imagem, como aparência do botão. A aplicação deste MENU vai conforme a criatividade de cada um, como no exemplo estamos trabalhando com texto, crie um TEXTO e alinhe este texto no centro do MOVIE.

No Layer Botao, coloque um botão invisível. Ele só vai servir pra "startar" a animação e como link. Crie um quadrado de 30x30, selecione ele e pressione a Tecla F8.

Aparece a janela Convert to Symbol. Na janela Convert to Symbol, escolha Button, no campo NAME coloque: Bot01, pressione OK.

Entre na edição do botão, dentro dele arraste o Frame UP até o HIT.

Selecione o botão, pressione a Tecla F8. A janela Convert to Symbol aparece. Na janela Convert to Symbol, escolha Movie Clip e no campo NAME digite: MC_Bot01. pressione Ok. Entre na edição do "MC_Bot01", selecione o objeto interno (Bot01), alinhe o objeto (Bot01) à Left Edge e Vertical Center, na Paleta Align. Escolha os seguintes botões: (se a Paleta Align não estiver sendo exibida, pressione CTRL + K).

Saia da edição do "MC_Bot01". Na sua instância coloque: Bot (se você quiser colocar outro nome, tudo bem, é só lembrar mais pra frente, quando formos usar esta instância na Programação).

Agora só falta criarmos a descrição do botão, que só irá aparecer a partir do momento que a pessoa colocar o mouse sobre o botão, por isto teremos de trabalhar com Layer do tipo Mask. Para confirmar, mova seu mouse sobre qualquer botão do exemplo do MENU acima.

Crie mais dois Layers. O Layer superior você deverá configurá-lo como MASK e o 2º Layer como MASKED.

No Layer MASK, crie um quadrado de 30x30 (não importa a cor, ele não vai aparecer. Estou usando a cor PRETA, tanto no preenchimento, quanto na borda).

Transforme este quadrado em um MOVIE CLIP. Nomeio-o como Movie_Mask, e coloque como instância dele: Mask (se você quiser colocar outro nome, tudo bem, é só lembrar mais pra frente, quando formos usar esta instância na Programação).

Entre na edição deste MOVIE CLIP (Movie_Mask) e alinhe o objeto interno à Left Edge e Vertical Center, na Paleta Align, escolha os seguintes botões: (se a Paleta Align não estiver sendo exibida, pressione CTRL + K).

Saia da edição do MOVIE CLIP (Movie_Mask).

No Layer DESCRICAO, crie um texto como descrição do que teria no Item 1.

Como o texto está no Layer DESCRICAO que é MASKED, ele não aparecerá. Para confirmar, pressione CTRL + ENTER.

Pronto, os objetos necessários para o funcionamento, já foram criados. Agora precisamos inserir a devida programação! Antes de continuarmos, vamos verificar se está tudo em ordem?

Abra a janela MOVIE EXPLORER (Window > Movie Explorer ou F4).

Verifique se está tudo certo, lembrando que o que está dentro do quadrado VERMELHO, são as instâncias, e devem estar corretas, pois se não, a programação não irá funcionar corretamente.

Estando tudo em ordem, vamos em frente!

Certifique-se que você está na edição do MOVIE CLIP (Movie_Bot01).

No PRIMEIRO FRAME do Layer ACTIONS, digite ou escolha na coluna de Actions da janela ACTIONS, esta instrução:

stop();

Entre na edição do MOVIE CLIP (MC_Bot01), vamos colocar as instruções no botão. Se você não estiver vendo o MOVIE CLIP, oculte o Layer MASK!

Selecione o botão, e na janela ACTIONS, digite ou escolha na coluna de Actions da janela ACTIONS, estas instruções:

on (rollOver) {
    _parent.gotoAndPlay(2);
}

Nesta instrução você está fazendo com que o MOVIE CLIP (MC_Bot01), vá até o FRAME 2. Repare bem que estamos dentro do MC_Bot01, por isto estamos colocando _parent.

on (rollOut) {
    _parent.gotoAndPlay(4);
}

Nesta instrução você está fazendo com que o MOVIE CLIP (MC_Bot01), vá até o FRAME 4.

Saia da edição do MOVIE CLIP (MC_Bot01). Crie mais 4 KEY FRAMES na Time Line do Layer ACTIONS do MOVIE CLIP (MC_Bot01).

No FRAME 2, digite ou escolha na coluna de Actions da janela ACTIONS, estas instruções:

if (Graph._xscale == "310") {
    stop();
} else {
    Graph._xscale = Graph._xscale + 30;
    Mask._xscale = Mask._xscale + 30;
    Bot._xscale = Bot._xscale + 30;
}

Nestas instruções, você está verificando se o TAMANHO em % do MOVIE CLIP GRAPH é igual à 310, se for ele para, se não, ele vai aumentando o _xscale de 30 em 30, tanto do GRAPH quanto do MASK e do BOT. O MASK para que apareça a descrição, ele aumenta o TAMANHO do MOVIE (Mask) e assim a área de exibição do LAYER MASK aumenta! E o BOT para que aumente a área de HIT do Botão.

Mas ainda falta um detalhe para que esta etapa funcione! No FRAME 3, digite ou escolha na coluna de Actions da janela ACTIONS, esta instrução:

gotoAndPlay (_currentframe -1);

Pronto! A primeira etapa está concluída. Pressione CTRL + ENTER, ao passar o mouse sobre o botão, você verá que ele vai aumentar conforme o esperado, mas ainda não volta por que não montamos a programação de volta!

Então vamos a ela!

No FRAME 4, digite ou escolha na coluna de Actions da janela ACTIONS, estas instruções:

if (Graph._xscale == "100") {
    stop();
} else {
    Graph._xscale = Graph._xscale - 30;
    Mask._xscale = Mask._xscale - 30;
    Bot._xscale = Bot._xscale - 30;
}

Nestas instruções, você está verificando se o TAMANHO em % do MOVIE CLIP GRAPH é igual à 100, se for ele para, se não, ele vai diminuindo o _xscale de 30 em 30, tanto do GRAPH quanto do MASK e do BOT.

No FRAME 5, digite ou escolha na coluna de Actions da janela ACTIONS, esta instrução:

gotoAndPlay (_currentframe -1);

Terminamos o primeiro botão. Se você precisar aumentar o tamanho do botão, é só aumentar o valor no IF do FRAME 2, faça o teste! Agora só criar outros botões baseado no primeiro e ir alterando o tamanho dele conforme o necessário.

A única coisa que mudará quando tivermos mais de um botão no MENU, é que precisamos fazer o SEGUNDO, TERCEIRO... quantos botões você tiver criado, andarem conforme o movimento do botão ativo, mas é bem simples também, é só acrescentarmos estas instruções no FRAME 2 do Layer ACTIONS de cada MOVIE CLIP:

_root.Bot02._x = _root.Bot02._x + 12;
_root.Bot03._x = _root.Bot03._x + 12;

Para não haver confusão! Nosso código no FRAME 2, ficará assim:

if (Graph._xscale == "310") {
    stop();
} else {
    Graph._xscale = Graph._xscale + 30;
    Mask._xscale = Mask._xscale + 30;
    Bot._xscale = Bot._xscale + 30;
    _root.Bot02._x = _root.Bot02._x + 12;
    _root.Bot03._x = _root.Bot03._x + 12;
}

Obs.: Isto supondo que você está trabalhando com 3 BOTÕES, assim como no exemplo, caso contrário, você deve acrescentar este código conforme o número de botões você criou. E lógico, os outros Botões devem seguir a mesma nomenclatura, se o nosso primeiro botão chama Bot01, o segundo irá chamar Bot02, e assim por diante!

No FRAME 4, você deve acrescentar o mesmo código, mas alterando o sinal + para -! Ficaria assim:

if (Graph._xscale == "100") {
    stop();
} else {
    Graph._xscale = Graph._xscale - 30;
    Mask._xscale = Mask._xscale - 30;
    Bot._xscale = Bot._xscale - 30;
    _root.Bot02._x = _root.Bot02._x - 12;
    _root.Bot03._x = _root.Bot03._x - 12;
}

Valeu cara tente ai se não conseguir post ae (y)

Edição feita por: Patrique, 22/06/2005, 11:13.

#1 Edu.dreyer

#2 fkbssa

#3 Edu.dreyer

#4 Patrique

#5 Edu.dreyer

#6 Patrique

Attached Files

#7 Edu.dreyer

#8 Patrique

#9 projeto_nerd

#10 Patrique

#11 Edu.dreyer

#12 Patrique

1 user(s) are reading this topic

Menu

Attached Files

1 user(s) are reading this topic

Entrar