Menu avançado em flash

[AiroN]

Hoje vou mostrar como criar um menu avançado em Flash. Ele pode ser usado em qualquer site web. Com ele você também irá aprender:

 

 

1. Fazer o design do menu;

2. Importar qualquer imagem em um estágio (palco) flash;

3. Converter qualquer ícone ou imagem em um Movie Clip;

4. Criar nome de instância;

5. Como animar ícone e texto;

6. Como criar botão invisível.

7. Como aplicar blur em qualquer ícone.

 

 

Para esta lição, você usará código action script. Vamos começar!

 

Exemplo:

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

Etapa 1:

 

 

Primeiro, baixe os ícones que usaremos para esta lição.

 

 

Etapa 2:

 

 

Crie um novo documento Flash. Pressione Ctrl + J tecla no teclado (Document Properties) e defina a largura do documento para 420 pixels e a altura para 160 pixels. Selecione # FDFDFC como cor de fundo. Defina taxa de seu filme flash frame para 48 e clique em OK.

 

 

 

 

Etapa 3:

 

 

Mude o nome da camada 1 ou (Layer 1) para ícone menu. Para isso basta que você dê um clique duplo emcima de "Layer 1", digite o nome ícone menu e aperte Enter.

 

 

Etapa 4:

 

 

Escolha Arquivo (File)> Importar (Import)> Importar para biblioteca (Import to Library). na janela de explorador de arquivo de aparece, Procure os três ícones, segure o botão "Shift" e clique para selecionar todos eles. Em seguida, clique em Abrir. Agora, se você abrir sua biblioteca flash (Ctrl + L), você verá três ícones que você acabou de importado. Veja a imagem abaixo!

 

 

 

 

Etapa 5:

 

 

Selecione a ferramenta Line (Linha)(N) e vá para o Painel de Propriedades (Ctrl + F3) abaixo do palco. Em seguida, faça os ajustes como segue:

 

 

 

 

Etapa 6:

 

 

Desenhe duas linhas verticais, como é mostrado na imagem abaixo!

 

 

 

 

Etapa 7:

 

 

Usando a ferramenta Selection (V), mova os ícones da biblioteca do flash para o palco (estágio) e coloque na posição, como é mostrado na imagem abaixo!

 

 

 

 

Etapa 8:

 

 

Selecione a ferramenta Texto (A) e vá para o Painel de Propriedades (Ctrl + F3) abaixo do palco. Em seguida, escolha as seguintes opções:

 

1. Selecione um campo de texto estático,

2. Selecione Zurique BdEx BT como fonte.

3. Escolha 12 como o tamanho da fonte

4. Selecione preto como a cor,

5. Como a opção de renderização(rendering option), selecione Usar Anti-alias para facilitar a leitura.

 

 

 

 

Digite os textos abaixo dos links, como é mostrado na imagem abaixo!

 

 

 

 

Etapa 9:

 

 

é hora de animação. Selecione a ferramenta Selection (V) e selecione o primeiro botão no menu. Veja a imagem abaixo!

 

 

 

 

Em seguida, aperte a tecla F8 (Converter em símbolo) para converter este ícone e o texto em um Movie Clip.

 

 

 

 

Etapa 10:

 

 

Com o novo Movie Clip ainda selecionado, vá ao painel das propriedades abaixo do palco. No lado esquerdo, você encontrará o campo de entrada de nome de Instância. Chame esse Movie Clip de "About_Us". Veja a imagem abaixo!

 

 

 

 

Etapa 11:

 

 

Dê um duplo clique no movieclip no palco com a ferramenta Selection (V). Agora você deve estar dentro do Movie Clip.

 

 

 

 

Etapa 12:

 

 

Agora que você está dentro do Movie Clip. Mude o nome da camada 1 (Layer 1) para texto. Para isso, dê um clique duplo sobre ela e coloque o novo nome.

 

 

Etapa 13:

 

 

Selecione a ferramenta Selection (V) e selecione apenas o ícone. Após isso, pressione Ctrl + X (Cortar). Crie uma nova camada acima da camada "texto" e nomeie para "ícone". Selecione a camada ícone e pressione Ctrl + Shift + V (Paste in Place).

 

 

Etapa 14:

 

 

Com o ícone ainda selecionado, pressione a tecla F8 (Converter em símbolo) para convertê-la em um Movie Clip Symbol.

 

 

 

 

Etapa 15:

 

Clique agora no frame 15 e tecle F6. Depois disso, mova o ícone pouco para baixo. Em seguida, selecione novamente a ferramenta de seleção (V) e clique uma vez sobre o ícone. Vá para o Painel de Propriedades (Ctrl + F3) abaixo do palco. À direita, você verá o menu de cores. Selecione Avançado (Advanced), clique no botão Configurações e faça os ajustes como segue:

 

 

 

Etapa 16:

 

 

Clique com o botão direito do mouse em qualquer lugar na área cinzenta entre a frame 1 e 10 e depois entre os frames 10 e 15 na linha do tempo (timeline) e escolha Create Motion Tween no menu que aparece.

 

 

 

 

Etapa 17:

 

 

Volte na camada "texto" e aperte a tecla F8 (Converter em símbolo) para converter o texto em um Movie Clip.

 

 

 

 

Etapa 18:

 

 

Clique agora no frame 10 e 15 e pressione F6. Com frame 15, selecione a ferramenta Selection (V) e clique uma vez sobre o texto para selecioná-lo. Então, vá para o Painel de Propriedades (Ctrl + F3) abaixo do palco. À direita, você verá o menu de cores. Selecione a opção "Tint" faça os ajustes a seguir:

 

 

 

 

Etapa 19:

 

 

Volte no frame 10 e mova o texto um pouco para baixo.

 

 

 

 

Etapa 20:

 

 

Ainda no frame 10, selecione a ferramenta Selection (V) e clique uma vez sobre o texto para selecioná-lo. Então, vá para o Painel de Propriedades (Ctrl + F3) abaixo do palco. À esquerda, você verá o botão Filtros (Filters). Clique uma vez sobre esse botão. Depois disso, clique no ícone do plus, selecione Blur nele e faça os ajustes como segue:

 

 

 

 

Etapa 21:

 

 

Clique com o botão direito do mouse em qualquer lugar na área cinzenta entre a frame 1 e 10 e depois entre os frames 10 e 15 na linha do tempo (timeline) e escolha Create Motion Tween no menu que aparece.

 

 

Etapa 22:

 

 

Volte À cena principal (Scene 1).

 

 

Etapa 23:

 

 

Crie uma nova camada acima da camada ícone menu e nomeie como botão invisível.

 

 

Etapa 24:

 

 

Selecione agora o a camada "botão invisível" e logo após a Rectangle Tool ®. Na parte Cores do painel Ferramentas, bloqueie a borda, clicando no ícone do lápis e depois na parte que tem a linha vermelha na diagonal. Para a cor de preenchimento você poderá escolher qualquer cor. Para finalizar, desenhe um retângulo sobre o primeiro botão. Veja a imagem abaixo!

 

 

 

 

Etapa 25:

 

 

Com a forma de retângulo ainda selecionado, pressione a tecla F8 (Converter em símbolo) para converter este retângulo em botão.

 

 

 

 

Etapa 26:

 

 

Dê um duplo clique sobre o botão invisível para ir em seu interior. Então, usando o arrastar. Clique no botão Up do botão e arraste até o quadro Hit.

 

 

 

 

Etapa 27:

 

 

Volte À cena principal (Scene 1).

 

 

Etapa 28:

 

 

Selecione agora a ferramenta de seleção (V) e clique uma vez sobre o botão invisível para selecioná-lo. Após isso, abra o Painel de Action Script (F9) e digite o seguinte Action Script código, dentro do painel Ações:

 

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

Etapa 29:

 

 

Crie uma nova camada acima da camada de botão invisível e de nome de action script. Em seguida, clique no primeiro frame da e digite o seguinte código Action Script no interior do painel Ações:

 

 

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

 

Terminamos o primeiro botão. Repita esse processo também para todos os outros botões no menu!

Divirta-se!

 

 

Fontes:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

 

Download:

O conteúdo está oculto, favor efetuar login ou se cadastrar!

• Entre
• ou
• Cadastre-se

[-Zero3Um-]

Que isso muito bom, me ajudou muito Airon Só força cara .