[ActionScript] Menu dinâmico a partir de um XML

[filip_e]

Como fazer um menu dinâmico a partir de um xml (attachMovie/xml)?

Vamos fazer as duas partes.

Parte 1: flash

Parte 2: xml

PARTE 1

/*
Crie um clip com uma caixa de texto instaciado por label, abra a Library clique com o botão direito no clip e em Properties>Advanced, marque a opção Export for ActionScript e em Identifier ponha ibase.
*/
//previnir possivel erro de leitura de acentos
System.useCodepage = true;
// declara novo objeto menu
var menuXML = new XML();
//ignora espaços em branco no xml
menuXML.ignoreWhite = true;
//carrega o xml
menuXML.load("menu.xml");
//função será executada após o termino do carregamento do xml
menuXML.onload = function(ok) {
if (ok) {
 //caso a carga do xml tenha tido sucesso inicia a criação do menu
 montaMenu();
} else {
 /* caso a carga do xml tenha falhado vamos sair do flash iniciar uma outra ação. aqui estou chamando uma pagina e saindo flash mas pode ser carregado um swf, que não é o que vamos ver */
 getURL("menuErro.html");
}
};

//aqui começamos a montar o menu
function montaMenu() {
 /* a posição y é iniciada com numero negativo porque logo abaixo vou incrementa-lo com mesmo valor posito acrescido de um, então o 1º item do menu terá a propriedade _y = 1 aqui está com 24 pois é a altura do mc que vamos atachar */
var posY:Number = -24;
 /* chidNodes se refere ao 1º nó do nó atual como o nó atual é o XML a variavel node vai receber as tags pai, que é o corpo prinicipal do menu */
 var node = menuXML.childNodes;
 for (var i = 0; i<node.length; i++) { // node.length é a quantidade de tags pai
   posY += 24+1; // incremento a posição y do menu
   v=(node[i].hasChildNodes())?1:2;
   /* agora chamaremos uma função para criar um item do menu pai. passamos os dados necessários para criação de cada item por parâmentro. esse paramentro é uma variavel do tipo Object possuindo 4 objetos:
      1º objeto - _x do item de menu que será criado
      2º objeto - _y do item de menu que será criado
      3º objeto - apenas para identificar que tipo de item estamos criando, submenu(0), menu(1) ou menu sem submenus(2)
      4º objeto - atributos - vamos entender esse objeto.
      node[i] possui como valor uma tag pai, então veja uma de nossas tags pai
      <node id="M1itemMenu" titulo="Fale Conosco" link="3" />
      para acessarmos os valores de id, titulo e link usamos a propriedade xml attributes 5º objeto - aqui é o segredo do menu, este objecto lembrará o item de menu e os itens submenu
      * eu poderia fazer chamar essa função assim:
      dados=new Object();
      dados.X=1;
      dados.Y=posY;
      dados.atributos=node[i].attributes;
      dados.node=node[i];
      setAction(dados);
      porém o flash permiti outra opção na criação de objetos da seguinte forma
      variavel={objeto1:valor1,objeto2:valor2};
    */
   setAction({X:1, Y:posY, v:v, atributos:node[i].attributes, node:node[i]});
 }
}

function setAction(dados) {
 // criamos o item de menu e setamos algumas variaveis e propriedades para ele
 _root.attachMovie("ibase", dados.atributos.id, dados.atributos.depths+50);
 _root[dados.atributos.id].v = dados.v;
 _root[dados.atributos.id].Id = dados.atributos.id;
 _root[dados.atributos.id].link = dados.atributos.link;
 _root[dados.atributos.id]._x = dados.X;
 _root[dados.atributos.id]._y = dados.Y;
 _root[dados.atributos.id].label = dados.atributos.titulo;
 _root[dados.atributos.id].node = dados.node;
 // nosso segredo novamente agora o item de menu se lembrerá de seu pai ou seus filhos
 switch(dados.v){
   case 2: //menu sem filhos
     myRelease(_root[dados.atributos.id]);
     // associamos uma ação ao evento onRollOver, mouse sobre o item do menu
     _root[dados.atributos.id].onRollOver = function() {
       this.myClear();
       // será executado um metodo MovieClip - nós vamos cria-lo mais a frente
     };
     break;
   case 1:
     // menu com submenus
     //associamos uma ação ao evento onRollOver, mouse sobre o item do menu
     _root[dados.atributos.id].onRollOver = function() {
       this.myClear();
       // será executado um metodo MovieClip - nós vamos cria-lo mais a frente
       // chama mos a função que vai criar os submenus
       montaSubmenu({node:this.node, y:this._y, h:this._height, w:this._width});
     };
     break;
   default: //submenu
     myRelease(_root[dados.atributos.id]);
     break;
 }
}

function myRelease(x){
 //associamos uma ação ao evento onRelease
 x.onRelease = function() {
   this._parent.gotoAndStop(this.link);
   this.myhide();
   // ao solta o botão do mouse será executado um metodo MovieClip - nós vamos cria-lo mais a frente
 };
}

function montaSubmenu(item) {
 var posY:Number = item.y-(item.h+1);
 if (item.node.hasChildNodes()) {
   for (var i = 0; i<item.node.childNodes.length; i++) {
     posY += item.h+1;
     // veja que o submenu que será criado recebe node completo do pai
     setAction({node:item.node, atributos:item.node.childNodes[i].attributes, X:(item.w+1), Y:posY, v:0});
   }
 }
}

MovieClip.prototype.myhide = function() {
 //metodo myhide que irá fechar um submenu
 if (this.node.hasChildNodes()) {
   // perguntamos ao MovieClip se ele tem irmãos
   xmlNode = this.node.childNodes;
   for (var i = 0; i<xmlNode.length; i++) {
     /*para o MovieClip que está em execução não seja excluido antes de excluir seus irmãos vamos testa-lo*/
     if (xmlNode[i].attributes.id != this.Id) {
       this._parent[xmlNode[i].attributes.id].kill();
       // executamos um outro metodo que criaremos
     }
   }
   this.kill();
 }
};

MovieClip.prototype.kill = function() {
 //metodo kill que apenas vai remover o movie clip
 this.swapDepths(1048000);
 this.removeMovieClip(); //destrói o MovieClip do palco
};

MovieClip.prototype.myClear = function() {
 //metodo que remove todos os submenu exceto os que são filhos do menu atual
 xmlNode = this._parent.menuXML.childNodes;
 for (var i = 0; i<xmlNode.length; i++) {
   if (xmlNode[i].attributes.id != this.node.attributes.id &&
   xmlNode[i].hasChildNodes) {
     nodeitem = xmlNode[i].childNodes;
     for (var j = 0; j<nodeitem.length; j++) {
       this._parent[nodeitem[j].attributes.id].kill();
     }
   }
 }
};

PARTE 2

Atributos id e depths são únicos não podendo existir duplicidade.

<?xml version="1.0" encoding="utf-8"?>
<node id="M0itemMenu" titulo="Produtos" depths="0" link="">
<node id="S0M0itemMenu" titulo="Clips" depths="1" link="2"/>
<node id="S1M0itemMenu" titulo="Site" depths="2" link="2"/>
</node>
<node id="M1itemMenu" titulo="Fale Conosco" depths="3" link="2" />
<node id="M2itemMenu" titulo="Parceiros" depths="4" link="">
<node id="S0M2itemMenu" titulo="Ponto Flash" depths="5" link="3"/>
</node>
<node id="M3itemMenu" titulo="Início" depths="6" link="1" />

[deathseeker25]

Andas a trabalhar muitas horas extra pa...

Cumps

[joninho]

opa, a ideia ta fixe, mas nao consigo fazer isso :S