Pular para o conteúdo
Início » Menu Dinâmico em Flash

Menu Dinâmico em Flash

Este tutorial demonstra como criar um menu dinâmico e como incluir submenus.


Download do Exemplo: Dynamic_Menu

A raíz da timeline contem um movie clip, chamado “menu MC”, que contem os movie clips que são necessários para que o menu cresça. Na frame actions que se encontra na raíz, uma série de variáveis, representando o menu e os submenus de items, são declarados. Estes podem igualmente ser armazenados num ficheiro externo e lidos no filme quando este é lido. A variavel “total” é usado para manter presente o numero de items no menu principal. Neste exemplo, os items do submenu são numerados de uma forma que os primeiros números depois de “stext” representam o número do item do menu que estamos a chamar, enquanto que o último número é o identificador dentro do menu. Por exempl, stext11 é o primeiro item do submenu do item 1 do menu principal, enquanto que o stext42 é o segundo item do submenu, chamado item 4 do menu principal. Poderemos alterar os valores de acordo com as nossa preferências.

Dentro do filme “menu MC” existem mais dois clips representando o menu principal e os botões do submenu. O primeiro passo para gerar um menu, é criar os botões do menu principal usando o duplicateMovieClip num loop limitado pelo comando _root.total.

for (i=1; i<=_root.total; ++i) {
menuMC.duplicateMovieClip("menuMC"+i, i);
this["menuMC"+i]._y = this["menuMC"+(i-1)]._y+this["menuMC"+(i-1)]._height;

this["menuMC"+i].choice = i;

levelTrack = i;
}

O próximo passo é inicializar os botões do submenu, posicionando-os e de seguida escondendo-os de forma não revoltarem a ser vistos, até contrário. Verificando se uma variável de um determinado item de menu, se existe, circunscrevemos de ter que seguir o processo completo para os itens do menu que não contêm submenus. Esses submenus que existem estão numerados usam o esquema descrito anteriormente.

for (i=1; i<=_root.total; ++i) {
if (_root["subText"+i]>=1) {
name = "stext"+i;
for (n=1; n<=_root["subText"+i]; ++n) {
levelTrack += 1;
subMenuMC.duplicateMovieClip(name+n, levelTrack);
this[name+n]._visible = false;
this[name+n].choice = (i*10) + n;
}
this[name+1]._y = this["menuMC"+i]._y+this["menuMC"+i]._height;
for (n=2; n<=_root["subText"+i]; ++n) {
this[name+n]._y = this[name+(n-1)]._y+this[name+(n-1)]._height;
}
}
}

Quando os botões dos menus são clicados, deve existir uma forma de fechar os itens do menu que estão correntemente abertos. Talvez a maneira mais fácil é simplesmente trocar o estado de visibilidade de todos os items dos submenus e move-los para os botões do menu principal, retornando-os à posição original.

function resetMenu() {
for (i=1; i<=_root.total; ++i) {
if (_root["subText"+i]>=1) {
name = "stext"+i;
for (n=1; n<=_root["subText"+i]; ++n) {
this[name+n]._visible = false;
}
}
this["menuMC"+i]._y = this["menuMC"+(i-1)]._y+this["menuMC"+(i-1)]._height;
}
}

Esta função é a primeira chamada noutra função que é chamada quando um dos items do menu é clicado. A chamada para esta função está localizada nos botões dos items dos menus.

function submenuShow() {
resetMenu();
if (_root["subText"+choice]>=1) {
name = "stext"+choice;
for (n=1; n<=_root["subText"+choice]; ++n) {
this[name+n]._visible = true;
}
this["menuMC"+(choice+1)]._y = this[name+(n-1)]._y+this[name+(n-1)]._height;
for (i=choice+2; i<=_root.total; ++i) {
this["menuMC"+i]._y = this["menuMC"+(i-1)]._y+this["menuMC"+(i-1)]._height;
}
}
}

Este ficheiro de flash permitirá uma criação até 99 items no menu, possibilitando a cada um deles até 9 subitems. Se resolvermos ajustar a numeração e a matemática usada para derivar a variável “choice”, poderemos extender o número de subitems. Estes podem ser ainda mais refinados, sendo necessário para isso adicionar um script na função reset, que irá testar somente para os botões que estão visíveis.

Para usar os botões para ler as URLs, simplesmente adicionem as referencias de URL apropriadas na lista de variáveis. Por exemplo, na criar um link para flashwebtraining.com a partir do submenu button stext21:

stext21 = "cachorrinhos";
urls21 = "http://www.hospedandosites.com.br";

De seguida no botão do movie clip do submenu, deveremos adicionar o seguinte código:

on (release) {
myURL = eval("_root.urls"+choice);
if(myURL != null){
getURL(myURL);
}
}

Para assegurar que o URL abre numa nova janela do browser, adicionem “_blank” à função getURL:

getURL(myURL, "_blank");

Igualmente, isto pode ser usado para chamar uma URL para frame já nomeada, ou para chamar um JavaScript. Usando uma abordagem similar, permite que os botões contenham diferentes scenes de acesso na _root, embora seja importante, fazê-lo, para relembrar que os nomes das scenes não serão reconhecidas através dos movie clips do menu, e o link criado terá de ser único nos nomes das frames.