Este artigo irá te ensinarcomo criar um menu vertical com a ajuda do XML e do ActionScript 3. Esperoque você goste!

Pegue o
TweenMax

Iremos usar o TweenMax para o movimento e a animação de todo o menu.Portanto, faça o download do TweenMax paraAS3. O TweenMax irá nos poupar bastante tempo na codificação da animação. Salve
a pasta “gs” no mesmo local onde seu arquivo .fla ficará.

Novo documento

Primeiramente, crie um novo documento Flash ActionScript 3.

Propriedades do documento

Configure as seguintes propriedades para odocumento:

Tamanho: 350×300

Background: branco

Taxa de quadros: 30

Máscara para o menu

Iremos utilizar uma máscara pra todo o menu, entãovamos fazer isso primeiro. Com a ferramenta retângulo, crie um retângulo pretode tamanho 200×250 sem nenhuma borda. Alinhe-o com o centro do palco.

Máscara para o Movie Clip

Converta o retângulo em um movie clip. Chame-o de “MyMask” e configure o ponto de registro para o canto superior esquerdo.

Nome da instância da máscara

Dê o nome de “myMask” para a máscara do movieclip.

Nova camada para menu item

Crie uma nova camada chamada “menu item”.

Item “Forma” do menu 

Na camada “menuitem”, desenhe um retângulo de tamanho 200×20 com uma cor de preenchimento#330000 (sem borda).

Item”Movie Clip”

Converta o retângulo para um movie clip chamado “Menu Item”. Configureo ponto de registro para o canto superior esquerdo. Como você deve ter
adivinhado, esse movie clip será usado como um único item no menu.

Menu Fill

Clique duas vezes no“Menu Item” movie clip no palco. Agora você deve estar “dentro” domovie clip. Converta o retângulo em um movie clip chamado “Menu Fill”.
Configure o ponto de registro no centro. Fazemos isso porque queremos animar a
cor de preenchimento separadamente do texto do menu, que iremos adicionar
mais tarde neste artigo.

Menu FillAlpha

Configure o alpha em 30% para o movie clip “Menu Fill”.

Nome da instância para o Menu Fill

Dê ao movie clip “Menu Fill” o nome “menuFill”.

Campo “menu text”

Enquanto ainda estiver dentro do movie clip “Menu Item”, crie uma novacamada chamada “menu text”.

Campo de texto do menu

Na camada “menu text”, crie um campo dinâmico de texto de modo que elefique posicionado no topo do movie clip “menuFill”. Digite algum texto dentrodele e configure as seguintes propriedades:

largura: 180

altura: 18

família: ArialRounded MT Bold

tamanho: 12.0pt

cor: branca

alinhamento: alinhe à esquerda

Anexar fontes

Como ainda temos textos dinâmicos nos campos de texto (do XML), devemosanexarr algumas fontes para deixar o texto mais suave. Portanto, clique nobotão “Character Embedding” e
selecione uppercase, lowercase e numerals (letras maiúsculas, minúsculas e
numerais).

Nome da instância campo de texto

Dê ao campo de texto o nome de “menuText”, para que possamos acessá-lo através do ActionScript.

Propriedadesdo Menu Item

Volte para a linha do tempo principal.Clique com o botão direito no movie clip “Menu Item” na biblioteca e selecione “Properties”
(pode ser “Linkage” no Flash CS3).

Linkagem

Linke o movie clip a umaclasse chamada “MenuItem” (não se preocupe com o aviso que aparece quando vocêclica em ok). Linkamos o movie clip para uma classe, porque iremos criar todos os
itens do menu a partir do ActionScript e, portanto, precisamos de uma classe
que represente um movie clip para itens do menu.

Agora remova o movie clip “MenuItem” do palco, uma vez que iremos criá-lo a partir do ActionScript.

Preparandoo XML

Antes de entrarmos noActionScript, vamos primeiramente configurar o arquivo XML que irá definir os
rótulos do menu e para onde os itens do menu devem levar. Então use seu editor
de texto preferido e digite o seguinte:

<menu>

    <buttons>

        <button>
            <label>Home</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Tutorials</label>
            <linkTo>http://tutorials.flashmymind.com/complete-list-of-flash-and-actionscript-3-tutorials/</linkTo>
        </button>
        <button>
            <label>Forum</label>
            <linkTo>http://tutorials.flashmymind.com/forum/</linkTo>
        </button>
        <button>
            <label>About</label>
            <linkTo>http://tutorials.flashmymind.com/about/</linkTo>
        </button>
        <button>
            <label>Label 5</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 6</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 7</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 8</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 9</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 10</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 11</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 12</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 13</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 14</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 15</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 16</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 17</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 18</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 19</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 20</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 21</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 22</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 23</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>
        <button>
            <label>Label 24</label>
            <linkTo>http://tutorials.flashmymind.com</linkTo>
        </button>

    </buttons>

</menu>

Salve o arquivo como“menu.xml” no mesmo local onde está seu arquivo.fla.

Camada paraActionScript

Na linha do tempo principal,crie uma nova camada chamada “actions” e abra o painel de ações.

ActionScript3 – Load XML

Primeiramente, vamos importaro TweenMax e carregar os dados do XML.

//Import TweenMax
import gs.*;

//The path for the XML file (use your own here)
var xmlPath:String = "http://flashmymind.com/SWF/menu.xml";

//We will store the loaded XML to this variable
var xml:XML;

//Create a loader and load the XML. Call the function "xmlLoaded" when done.
var loader = new URLLoader();
loader.load(new URLRequest(xmlPath));
loader.addEventListener(Event.COMPLETE, xmlLoaded);

//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {

	//Make sure that we are not working with a null variable
	if ((e.target as URLLoader) != null ) {

		//Create a new XML object with the loaded XML data
		xml = new XML(loader.data);

		//Call the function that creates the menu
		createMenu();
	}
}

O código é bastante direto.Especificamos qual arquivo XML queremos carregar, e então o carregamos echamamos a função xmlLoaded()
quando tivermos terminado de carregar. Na função xmlLoaded(), criamos um
objeto XML com os dados que acabamos de carregar. Então, chamamos a função createMenu(), que é
responsável por criar e posicionar todo o menu.

ActionScript
3 – createMenu()

O código a seguir configura omenu:

//Create a menu holder that will contain all the menu items
var menuHolder:MovieClip = new MovieClip();

//Give it the same position as the mask
menuHolder.x = myMask.x;
menuHolder.y = myMask.y;

//Assign a mask for the menu
menuHolder.mask = myMask;

//Add the holder to the stage
addChild(menuHolder);

//We want to keep count how many menu items have been created
var count:Number = 0;

function createMenu():void {

	//Loop through all the <button></button> nodes in the XML
	for each (var button:XML in xml.buttons.button) {

		//Create a new menu item
		var menuItem:MenuItem = new MenuItem();

		//Position the menu item with some padding (space between the items)
		menuItem.x = 0;
		menuItem.y = count * menuItem.height * 1.05;

		//Add a menu text
		menuItem.menuText.text = button.label.toString();

		//Assign a "linkTo" variable. This contains the URL where the menu will link to when clicked.
		menuItem.linkTo = button.linkTo.toString();

		//We don't want the item text field to catch mouse events
		menuItem.mouseChildren = false;

		//Add listeners for the mouse over, mouse out and click.
		menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
		menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
		menuItem.addEventListener(MouseEvent.CLICK, itemClicked);

		//Add the item to the menu holder
		menuHolder.addChild(menuItem);

		//Update the count (how many items have been created)
		count++;
	}

	//Call the function that adds listeners for the whole menu
	addMenuListeners();
}

Os comentários (em inglês) devem explicaro que estamos fazendo em cada passo. Em resumo, criamos um menu holder que iráconter todos os itens do menu. Posicionamos o holder nas mesmas coordenadas
em que “myMask” está, e então designamos “myMask” para ser sua máscara.

Na função createMenu(), percorremostodos os nós de botões presentes no arquivo XML. Posicionamos os itens domenu verticalmente, mantendo certo espaço entre eles e então designamos rótulos
de menus e links de acordo com os dados do XML. Finalmente, adicionamos event
listeners para os itens do menu, o que veremos em seguida.

Eventos com mouse para itens de menu com ActionScript 3

Essas funções controlam osmouse events que vêm de itens individuais do menu.

//This function is called when the mouse is over an item
function mouseOverItem(e:Event):void {

	//Get the item that dispatched the event
	var item:MenuItem = e.target as MenuItem;

	//Tween the alpha
	TweenMax.to(item.menuFill, 0.5, {alpha: 1});
}

//This function is called when the mouse moves out from an item
function mouseOutItem(e:Event):void {

	//Get the item that dispatched the event
	var item:MenuItem = e.target as MenuItem;

	//Tween the alpha
	TweenMax.to(item.menuFill, 1, {alpha: 0.3});
}

//This function is called when an item is clicked
function itemClicked(e:Event):void {

	//Get the item that dispatched the event
	var item:MenuItem = e.target as MenuItem;

	//Navigate to the URL that's assigned to the menu item
	var urlRequest:URLRequest = new URLRequest(item.linkTo);
	navigateToURL(urlRequest);

ActionScript3 – Eventos com mouse para o Menu

Como você já deve ter notado,chamamos a função addMenuListeners()
na função createMenu(). Então
vamos criar essa função e manipuladores de evento que precisamos para os event
listeners criados.

//This function adds mouse event listeners for the whole menu
function addMenuListeners():void {

	//Add mouse over and out listeners
	menuHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMenuF);
	menuHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMenuF);

	//Add an ENTER_FRAME listener for the animation
	addEventListener(Event.ENTER_FRAME, enterFrameHandler);

}

//We want to know when the mouse is over the menu
var mouseOverMenu:Boolean = false;

//This function is called when the mouse is over the menu
function mouseOverMenuF(e:Event):void {

	//Set mouseOverMenu to true
	mouseOverMenu = true;
}

//This function is called when the mouse moves out from the menu
function mouseOutMenuF(e:Event):void {

	//Set mouseOverMenu to false
	mouseOverMenu = false;
}

ActionScript
3 – enterFrameHandler()

O enterFrameHandler() échamado em cada quadro. Nessa função, nós movimentamos o menu para cima e parabaixo de acordo com a posição do mouse. Então, quando o mouse está na parte de
baixo do menu, movemos o holder do menu para cima e vice-versa.

//This function is called in each frame
function enterFrameHandler(e:Event):void {

	//Check if the mouse is over the menu
	if (mouseOverMenu) {

		//Calculate the vertical distance from the mouse to the mask's top left corner (=registration point)
		var distance:Number = mouseY - myMask.y;

		//Calculate the percentage
		var percentage:Number = distance / myMask.height;

		//Calculate the new target y coordinate (remember that y reduces as we go up)
		var targetY:Number = -((menuHolder.height - myMask.height) * percentage) + myMask.y;

		//Tween to the new coordinate
		TweenMax.to(menuHolder, 0.2, {y: Math.round(targetY)});
	}
}

Palavras
finais

Esta técnica é incrivelmenteútil para criar menus. É realmente fácil e rápido mudar os links e os rótulos domenu através da modificação do arquivo XML. A aparência do menu também é
facilmente customizável para atender às suas necessidades! Confira o arquivo
.fla se você quiser dar uma olhada mais de perto no filme. 

?

Texto original disponível em http://tutorials.flashmymind.com/2009/04/vertical-menu-with-actionscript-3-and-xml/