Jump to content
Sign in to follow this  
filip_e

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

Recommended Posts

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" />

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.