Coluna Flash – Menu Pop Up

Olá amigos do MXStudio,

Depois de muito tempo estou de volta, graças a Deus!
As coisas andaram bem corridas por aqui.
Empresa, faculdade, freelances e outros projetos têm tomado todo meu tempo.
Mas como estava há muito tempo sem escrever nenhum artigo, consegui arrumar um tempo.
Hoje iremos aprender como desenvolver um menu pop-up.
Um recurso muito utilizado atualmente e que é simples de ser desenvolvido.
Como tenho recebido dezenas de e-mails perguntando como fazer um menu assim, decidi responder a todos de uma vez por meio desse artigo. Espero que gostem!
O resultado final você confere abaixo.
Passe o mouse sobre a opção ?A Empresa? para ver as opções do submenu:

Lembrando que meus artigos são desenvolvidos em Flash 8, utilizando Actionscript 2.0, implementada a partir da versão MX 2004. Portanto, se você utiliza o Flash da versão 6 (MX) pra baixo, seu arquivo tem grandes chances de não funcionar corretamente.
Mãos à obra!
Crie um novo filme no Flash e pressione ?Ctrl + J? para abrirmos a paleta de configuração do filme (Document Properties).
Defina o tamanho do mesmo em 480×100 pixels, conforme a figura abaixo:

Agora crie cinco layers (camadas) com os mesmos nomes e na mesma ordem da figura abaixo:

Na layer (camada) ?Background? crie um retângulo qualquer.
Em seguida pressione ?F8? e abra a janela para criar um novo símbolo.
No campo ?Name? digite ?background_gfc? e em ?Type? escolha a opção ?Graphic?, conforme a figura:

Agora, na layer (camada) ?Menu? crie as quatro palavras que serão as opções do nosso menu:
Home, A Empresa, Nossos Serviços e Fale Conosco.
Tranque a layer clicando no ícone do cadeado correspondente.
Seu menu deverá ficar mais ou menos dessa forma:

Vamos agora à layer (camada) ?Buttons?.
Novamente crie um quadrado com um tamanho qualquer (20×20 por exemplo) e pressione ?F8? para convertê-lo em símbolo.
No campo ?Name? digite ?botao_btn? e em ?Type? escolha a opção ?Button?.
Pronto, agora já temos meio caminho andado.
Em seguida, pressione ?F11? para abrir a ?Library?.
Arraste quatro cópias (instâncias) do botão que acabamos de criar.
Ajuste o tamanho de cada um de acordo com o tamanho das palavras correspondentes.
Observe a figura:

Agora selecione o botão que corresponde à opção ?Home? e na barra ?Properties? (Propriedades) digite ?home_btn? ? sem aspas ? no campo do nome de instância.

Repita esse procedimento com os demais botões, colocando os seguintes nomes:
A Empresa: ?empresa_btn?
Nossos Serviços: ?servicos_btn?
Fale Conosco: ?contato_btn?
Feito isso, vamos agora à layer (camada) ?Submenu?.
Pressione ?Ctrl + F8? para criarmos um novo símbolo.
No campo ?Name? digite ?subEmpresa_mc? e em ?Type? escolha a opção ?Movie clip?.
Pressione ?Ctrl + E? para voltarmos à raiz do filme.
Abra a Library (Livraria) ? pressionando ?F11? ou ?Ctrl + L? ? e arraste para o palco o Movie clip que acabamos de criar, selecione-o e defina, na barra ?Properties? x = 0 e y = 0.
Também dê a ele o nome de instância ?subEmpresa_mc? ? sem aspas.
Veja a figura:

Clique duas vezes sobre o Movie clip para editá-lo.
Dentro do nosso Movie clip ?subEmpresa_mc?, crie uma layer (camada) chamada ?Menu? e nela iremos criar as três opções que fazem parte do submenu de ?A Empresa?.
As opções são: Equipe, Clientes e Parceiros.
Após criar as três opções do submenu, uma logo abaixo da outra, arraste três instâncias do ?botao_btn? (que está na Library), posicionando-as de acordo com as palavras criadas.
Observe a figura:

Volte à raiz do filme (pressionando ?Ctrl + E?) e vamos à layer (camada) ?Actions?.
Clique no primeiro e único frame da layer (camada) e pressione ?F9? para abrir a paleta ?Actions?.
Copie e cole as linhas de código abaixo.

Cada linha está explicada com comentários:

subEmpresa_mc._visible = false; /* faz com que o submenu fique invisível quando o filme iniciar*/
empresa_btn.onRollOver = function() { /* quando o mouse passar sobre o botão ?empresa_btn?*/
subEmpresa_mc._visible = true; /* o submenu aparecerá*/
}

Pronto, agora pressione ?Ctrl + Enter? para testar seu menu.
Ele já está praticamente pronto, porém você irá notar que quando tiramos o mouse da área do submenu, as opções continuam lá.
Agora vamos para a grande sacada dos menus pop up.
Feche a paleta ?Actions? e clique duas vezes no Movie clip ?subEmpresa_mc?.
Crie uma camada com o nome ?Hit? ? sem aspas ? e vamos criar um retângulo com o mesmo tamanho da área do menu, ou seja, 480×100 pixels.
Criado esse retângulo, certifique-se de que ele tem 480×100 pixels e defina x = 0 e y = 0, conforme a figura:

Agora selecione esse retângulo e pressione ?F8? para transformá-lo em botão.
Na janela que se abrir, digite ?hit_btn? no campo ?Name? e em ?Type? escolha ?Button?.
Selecione o botão que acabamos de criar e dê a ele o seguinte nome de instância: ?hitEmpresa_btn? ? sem aspas.
Agora iremos editar os estados do botão.
Clique duas vezes sobre ele e arraste o frame ?Up? para o frame ?Hit?.

Selecione o frame ?Hit? e clique no ícone do quadrado que fica logo ao lado do cadeado.
Isso fará com que seja exibido apenas as bordas dos objetos que fazem parte da camada.
Agora delete a área correspondente ao menu e submenu de ?A Empresa?.
Depois disso clique no quadrado novamente para exibir seu botão normalmente.
Veja como seu botão deve ter ficar:

Agora pressione ?Ctrl + E? para voltarmos à raiz do filme.
Você verá o seguinte:

Agora basta mais um detalhe e nosso menu estará funcionando corretamente.
Abra a paleta ?Actions? pressionando ?F9? e acrescente as seguintes linhas de código abaixo das linhas que já haviamos colado anteriormente:

subEmpresa_mc.hitEmpresa_btn.onRollOver = function() {
subEmpresa_mc._visible = false;
}
Pronto pessoal, agora teste seu filme e confira o resultado.
Depois, basta colocar os links que desejar nos botões.
Qualquer dúvida, por favor, envie para meu e-mail: contato@felipegomes.com.br
Não responderei a dúvidas postadas nos comentários do artigo.
Para mim é melhor e mais interessante responder às dúvidas por e-mail, assim poderemos ter um contato mais próximo e vocês poderão sanar dúvidas sobre outros assuntos que desejarem.
É isso!
Espero que tenham gostado e que esse artigo seja útil a vocês.
Deus abençoe!
Um abraço a todos e até a próxima,
Autor: Felipe Gomes – Articulista de Flash do Portal MXSTUDIO
Qualquer dúvida envie um email para contato@felipegomes.com.br ou acesse o nosso fórum.