menu dinâmico a partir de um xml (attachMovie/xml)
Parte 1 = Flash
—————————————————————
/*
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 obejto 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
// chamos 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 = XML
<?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″ />
OBS: Atributos id e depths são únicos não podendo existir duplicidade.
Colaboração: Pedro Claudio
Alexandre Rudalov 