MXStudio » Flash » Menu MXStudio

Menu MXStudio


Flash – Criando um Menu Pop-Up estilo MXSTUDIO.

Olá Comunidade. Atendendo a várias perguntas em nosso Fórum aprenderemos a criar um Menu Pop-Up estilo o de nosso Portal.

Pré-requisitos para esse tutorial

  • Flash MX 2004 ou Flash 8
  • Conhecimentos de ActionSctip no nível Intermediário

Criando a Classe MenuMX.as

Digo a todos que 80% da classe foi totalmente criada usando-se o Help do Flash, os outros 20% foi uma grande ajuda do grande Hugo (hufersil), um dos Colunistas de Flash. No Help do Flash (F1), vocês encontrarão toda a documentação, dicas, exemplos de como criar classes no Flash. A classe abaixo está comentada para um melhor entendimento. Pegue o código abaixo e salve como MenuMX.as no mesmo diretório que está salvo seu arquivo FLA.

/**
* Classe MenuMX
* Autor: Natan D. Alves
* Contribuição: Hugo Ferreira da Silva
*
* Divulguem o nome dos Autores
*/
/* Importamos a Classe Tween */
import mx.transitions.Tween;
import mx.transitions.easing.*;
/* Criamos a classe MenuMX */
class MenuMX {
/* Criamos uma variável para o Intervalo */
private var intervalo:Number;
/* Criamos uma variável para guardar o Menu Ativo */
private var _menuativo:Number;
/* Criamos um Array para guardar os itens do Menu */
private var itens:Array;
/* Tempo em segundos para fechar o menu */
public var tempo:Number;
/* Variaveis estaticas sobre o status do menu */
public static var ABERTO:Number = 1;
public static var FECHADO:Number = 2;
/* Construtor da classe */
function MenuMX () {
/* Inicializa as variaveis */
intervalo = null;
_menuativo = null;
itens = new Array();
}
/**
* Função que adiciona itens no menu
* Parametro btn Botão/MovieClip que irá abrir o menu
* Parametro mcMenu MovieClip Movie clip que será exibido como menu
* Parametro tamanhoMenu Number altura do Menu
*/
function addItem(btn, mcMenu:MovieClip, tamanhoMenu:Number):Void {
/* Guarda uma referencia desta classe no botão */
btn.ref = this;
/* Quando passar o mouse por cima do botão */
btn.onRollOver = function() {
/* Manda abrir o item */
this.ref.OpenMenu(this);
/* Retira o enterFrame da área de hit do menu
isto acontece quando o cara passa o mouse no menu
e volta para o botão que o abre */
delete mcMenu.menuArea.onEnterFrame;
}
/* Quando tirar o mouse do botão */
btn.onRollOut = function() {
/* Inicia a contagem para fechar o menu */
btn.ref.StartCloseMenu(this);
}
/* Guarda uma referencia desta classe no menu */
mcMenu.ref = this;
/* Guarda uma referencia do botão neste menu */
mcMenu.btn = btn;
/* Tira a maozinha do menu */
mcMenu.menuArea.useHandCursor = false;
/* Quando passar o mouse no menu */
mcMenu.menuArea.onRollOver = function() {
/* Cancela o fechamento do menu */
this._parent.ref.kill();
/* Inicia um EnterFrame */
this.onEnterFrame = function() {
/* Se a pessoa tirar o mouse do menu */
if(!this.hitTest(_xmouse,_ymouse,true)) {
/* Inicia a contagem para fechar este menu */
this._parent.ref.StartCloseMenu(this._parent.btn);
/* Retira o EnterFrame */
delete this.onEnterFrame;
}
}
}
/* Coloca este item no array de itens */
itens.push({btn:btn, mcMenu:mcMenu, tamanhoMenu:tamanhoMenu, situacao:FECHADO});
}
/**
* Recupera o item a ser aberto pelo botão
* Parametro btn Botão/Movieclip a ser recuperado
*/
private function getItemByButton(btn):Object {
for(var i=0; i<itens.length; i++) {
if(itens[i].btn == btn) {
return itens[i];
}
}
return null;
}
/**
* Abre um menu
* Parametro btn Botão/MovieClip que servirá de botão para abrir o menu
*/
public function OpenMenu(btn):Void {
/* Remove o intervalo */
kill();
/* Item referente a este botão */
var item:Object = this.getItemByButton(btn);
/* Se conseguiu recuperar e o menu estiver fechado */
if(item && item.situacao == FECHADO) {
/* Fecha todos os menus */
CloseAllMenus();
/* Pega a posição em Y inicial (posição do menu - altura do subMenu) */
var pi:Number = 0 - item.mcMenu._height;
/* Pega a posição em Y final (altura do menu) */
var pf:Number = item.tamanhoMenu;
/* Criamos o Tween passando os parametros passados, menu, valor inicial e valor final */
var tw:Tween = new Tween(item.mcMenu, "_y", Bounce.easeOut, pi, pf, 8, false);
/* Diz que este item está aberto */
item.situacao = ABERTO;
}
}
/**
* Função que fecha todos os menus
*/
private function CloseAllMenus():Void {
/* Para cada item do menu */
for(var i:Number=0; i<itens.length; i++) {
/* Pega o item atual */
var it:Object = itens[i];
/* Se estiver aberto */
if(it.situacao == ABERTO) {
/* Fecha este item */
CloseMenu(it.btn);
}
}
}
/**
* Função que faz o menu fechar depois de x segundos
* Parametro btn Botão/MovieClip que é o responsável pelo menu aberto
*/
public function StartCloseMenu(btn):Void {
/* Pega o item pelo botão */
var item:Object = getItemByButton(btn);
/* Se encontrou */
if(item) {
intervalo = setInterval(this, 'CloseMenu', tempo * 1000, btn);
}
}
/**
* Função para fechar o Menu ativo
* Parametro btn Botão/MovieClip que é o responsável pelo menu aberto
*/
public function CloseMenu(btn):Void {
/* Pega o objeto pelo botão */
var item:Object = getItemByButton(btn);
/* Se encontrou */
if(item) {
/* Encerra o intervalo */
kill();
/* Pega a posição em Y inicial (posição atual do menu) */
var pi:Number = item.mcMenu._y;
/* Pega a posição em Y final (tamanhoMenu - altura do subMenu) */
var pf:Number = item.tamanhoMenu - item.mcMenu._height;
/* Criamos o Tween passando os parametros passados, menu, valor inicial e valor final */
var tw:Tween = new Tween(item.mcMenu, "_y", Bounce.easeOut, pi, pf, 8, false);
/* Diz que este item está fechado */
item.situacao = FECHADO;
}
}
/**
* Função para encerrar intervalos
* Não sei por que, mas quando se passava o mouse por cima dos menus
* rapidamente, um ou mais intervalos não era encerrado corretamente.
* Isto previne este erro.
*/
private function kill():Void {
/* Se o intervalo é diferente de null */
if(intervalo != null) {
for(var i:Number=0;i<=intervalo; i++) {
/* Encerramos o intervalo */
clearInterval(i);
}
}
}
}

Criando o Menu

Vamos criar nosso menu. Devemos criar três Camadas (Layers). A Camada mais abaixo deve conter os subMenus, a camada do meio os botões de nosso menu e a primeira camada para nosso ActionScript. Como na figura:

Disposição das Camadas

Crie o menu do tamanho que achar melhor, se lembre somente de guardar o valor height dele para usarmos na Classe. Aqui no tutorial eu fiz um menu de 410×40.

Vamos criar nosso botões, eles serão responsáveis por fazer com que nossos subMenus desçam, eles podem ser MovieClip ou Button. Após criar os botões vamos criar nossos subMenus, desenhe o subMenu do tamanho que preferir e transforme-o em um MovieClip. Lembrem-se de que eles devem estar na camada subMenus para que fiquem abaixo de nosso menu. Após tudo isso devemos colocar instancia nos botões de bt+n e nos menus de mc+n, onde o n é o número correspontende a ele. Por exemplo na imagem abaixo:

Botões e subMenus

O botão Conteudo recebeu instancia de bt2 por ser o segundo botão.
O subMenu do Conteúdo recebeu instancia de mc1 por ser o primeiro subMenu.

Agora um pequeno truque, vamos criar um outro MovieClip, esse MovieClip vai ser o fundo de nosso subMenu, portanto estará em todos os subMenus que criaremos. Dê instancia de menuArea.
Agora vamos criar mais alguns botões, dessa vez eles deverão estar dentro de nosso MovieClip subMenu. Crie um campo de texto dinamico, com instancia de texto, transforme-o em um MoviClip e coloque-o dentro de nosso subMenu, isso facilita nosso trabalho e evita criar vários MovieClips para nosso subMenu. De instancia de btn+n onde mais uma vez o n represente o número de nosso mc. Exemplo:

Aqui vemos o nosso fundo do subMenu com instancia de menuArea
Aqui vemos que o mc tem instancia de btn11 porque é o 11º item de nosso subMenu.

Ok, agora está guase tudo pronto. Devemos agora colocar os nomes para nossos itens e o que eles devem fazer. Dentro do MovieClip subMenu, colocaremos isso no Frame:

btn1.texto.text = "ColdFusion";
btn2.texto.text = "Director";
btn3.texto.text = "Dreamweaver";
btn3.texto.text = "Fireworks";
btn4.texto.text = "Flash";
/* E assim vai */
btn1.onPress = function() {
/* Suas ações aqui */
}
btn2.onPress = function() {
/* Suas ações aqui */
}
/* E assim vai */

Agora temos os nosso subItens com seus nomes e ações, temos que importar a classe criada anteriormente. Volte para a raiz do documento e coloque isso na Camada as:

/* Importamos nossa classe criada */
import MenuMX;
/* Criamos um novo Menu */
var mainMenu:MenuMX = new MenuMX();
/* Tempo em segundos para fechar o Menu tirar o Mouse */
mainMenu.tempo = 1;
mainMenu.addItem(bt2, mc1, 40);
mainMenu.addItem(bt3, mc2, 40);
mainMenu.addItem(bt5, mc3, 40);
/* Caso tenha algum menu que não contém um subMenu */
bt1.onPress = function() {
/* Suas ações aqui */
}

Com esse código importamos nossa classe criada, dizemos a ela que o MovieClip bt2 é o mainMenu e quando eu passar o mouse por cima dele ele vai mecher o subMenu, o mc1, o valor 40 é o valor height do menu, isso foi feito para mandar para a Classe para onde o Menu deve ir. Caso seu Menu não tenha um subMenu não é preciso criar uma variável, basta colocar as ações deles normalmente como mostrado.


Usando o Menu

Aos que forem usar o menu em uma página em Html, devemos colocar o menu em uma Div por exemplo e colocar a propriedade z-index o mais elevado possível, isso faz com que o menu fique sempre em cima dos seus conteúdos. Outa coisa importante. Aos que forem usar transparência (para que o menu não fique por cima do conteúdo do site) devemos criar um fundo falso para enganarmos o Flash, porque se não colocarmos esse fundo nosso menu não estará funcionando adequadamente. Para fazer isso, desenhe um fundo do tamanho do seu palco (utilizando a ferramenta retangulo, R), e selecione 0% de alpha, como na imagem:

Se você segiu o tutorial corretamente, seu menu estará mais ou menos igual a esse:

Considerações Finais

Aprendemos hoje como criar um menu como o de nosso portal. E o melhor que ele é dinâmico, o que facilita nosso trabalho. É claro que podemos utilizar outros menus, outras opções, usar XML, etc. Vocês escolhem o que fazer.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá você poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com/

Espero que tenham gostado.

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum


4 Comments to “Menu MXStudio”

You can follow all the replies to this entry through the comments feed.

  1. rotavio's Gravatar rotavio
    Abril 9, 2008 at 2:50 pm | Permalink

    Oi Natan,

    Apliquei este tutorial em um de meus sites e não está rodando. Estou pecando em algum ponto que não estou achando.

    O menu não está descendo (roll over)

  2. leonardo's Gravatar leonardo
    Março 23, 2009 at 4:47 pm | Permalink

    nao ajudo muito…..pois estou usando cs4 é incompativel eu acho por isso deu erro.

  3. Dhuankles Castro's Gravatar Dhuankles Castro
    Junho 22, 2009 at 3:01 pm | Permalink

    Nossa mano muito bom esse tutorial.. parabens…

  4. Carlos's Gravatar Carlos
    Janeiro 30, 2010 at 3:45 pm | Permalink

    Natan, vc nao sitou qual a ação que vai na camada as do primeiro frame. Criei o MenuMX.as e agora?

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Natan D. Alves

Fã e divulgador da plataforma Flash e do ActionScript, músico nas horas vagas e estudante do curso de Ciência da Computação.

Últimos Artigos do Autor