Assine:
Actionscript + Xml -> Menu Em árvore
Actionscript + xml -> menu em árvore
Escrito por MattheusRoriz em Flash. Data: 17/10/2007
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Olá pessoal,
bem, estou escrevendo esse tutorial visando ensinar a vocês como criar um menu em árvore, que é um componente do Flash MX professional 2004, utilizando um arquivo em XML para passar os nós do menu. Esse menu terá um folder, dentro desse folder terá dois links para páginas externas; e também um link fora do folde para a página do Google. Sem mais conversa, vamos ao trabalho.
Primeiro abra um novo documento do Flash: File -> New e selecione Flash Document. Agora, abra o painel a direita, em seguida clique em Components. Procure por componente chamado Tree, ele é o penúltimo do menu, arraste-o e solte-o em cima do stage.
Após te-lo colocado no stage, selecione-o, clicando em cima dele. Abra o painel das propriedades e mude o nome da instância do componente para menuTree. Feito isso trasforme-o para um Movie Clip, para isso selecione ele novamente, em seguida aperte F8. Mude o nome para TreeNavMenu, em Linkage, logo abaixo na mesma janela onde você colocou o nome, selecione a opção "Export for ActionScript". Dois novos campos serão abertos, no primeiro "Identifier" deixe como está, no segundo "AS 2.0 Class" coloque, TreeNavMenu; em seguida clique em OK. Salve este arquivo como treeMenu.fla.
Agora vamos criar um arquivo de ActionScript. Para isso vá em File -> New - ActionScript File. Na janela de script coloque esse código:
Agora salve esse arquivo como TreeNavMenu, lembrando que todos os arquivos criados devem ficar no mesmo lugar, caso contrário não irá funcionar.
Este é um código bem simples, onde nele chamamos o MovieClip que criamos anteriormente, em seguida passamos o estilo das fontes que irão compor o menu "menuTree.setStyle("fontFamily", "_sans");" e o tamanho da fonte "menuTree.setStyle("fontSize", 12);". Logo após, carregamos o arquivo em XML "menuXML.load("TreeNavMenu.xml");", que posteriormente iremos criar. Uma parte também muito interessante deste código é a que trata dos links. Eu utilizei a propriedade "_top", "getURL(url, "_top");", que abre uma nova janela, mas se você estiver criando esse menu para navegação em sua página basta alterar esse parte para "getURL(url, "_self");", fazendo com que o link seja aberto na mesma página.
Agora vamos criar o arquivo em XML. Para isso abra seu maravilhoso bloquinho de notas e insira esse código dentro dele:
Esse código é alto explicativo, criamos um nó, que será o folder, chamado Meus Favoritos, dentro desse nó temos mais dois, um chamado YouTube e o outro Orkut, fechamos esse nó e criamos outro chamado Google, que ficará de fora do folder. Será usado esse arquivo para navegar no meu, ele é nossa peça chave. Feito isso salve o arquivo como TreeNavMenu.xml.
Relembrando:Não se esqueça de colocar esses três arquivos no mesmo lugar!!!
Para ver o resultado final é só exportar o arquivo treeMenu.fla, como um Movie Clip, atalho CRTL + ALT + SHIFT + S, para o mesmo local onde estão os outros arquivos.
Bem, esse é um tutorial bem simples, mas que pode ser desenvolvido e ganhar ótimas funcionalidades em qualquer site ou aplicação que desejam construir. Qualquer dúvida ou se desejam todos esse arquivos é só me mandar um e-mail ou postar aqui no fórum.
Até uma próxima vez,
Mattheus Pirovani Roriz Gonçalves
mattheusroriz@yahoo.com.br
bem, estou escrevendo esse tutorial visando ensinar a vocês como criar um menu em árvore, que é um componente do Flash MX professional 2004, utilizando um arquivo em XML para passar os nós do menu. Esse menu terá um folder, dentro desse folder terá dois links para páginas externas; e também um link fora do folde para a página do Google. Sem mais conversa, vamos ao trabalho.
Primeiro abra um novo documento do Flash: File -> New e selecione Flash Document. Agora, abra o painel a direita, em seguida clique em Components. Procure por componente chamado Tree, ele é o penúltimo do menu, arraste-o e solte-o em cima do stage.
Após te-lo colocado no stage, selecione-o, clicando em cima dele. Abra o painel das propriedades e mude o nome da instância do componente para menuTree. Feito isso trasforme-o para um Movie Clip, para isso selecione ele novamente, em seguida aperte F8. Mude o nome para TreeNavMenu, em Linkage, logo abaixo na mesma janela onde você colocou o nome, selecione a opção "Export for ActionScript". Dois novos campos serão abertos, no primeiro "Identifier" deixe como está, no segundo "AS 2.0 Class" coloque, TreeNavMenu; em seguida clique em OK. Salve este arquivo como treeMenu.fla.
Agora vamos criar um arquivo de ActionScript. Para isso vá em File -> New - ActionScript File. Na janela de script coloque esse código:
CODE
<BR>import mx.controls.Tree;<BR><BR>class TreeNavMenu extends MovieClip {<BR>var menuXML:XML;<BR>var menuTree:Tree;<BR>function TreeNavMenu() {<BR> <BR> menuTree.setStyle("fontFamily", "_sans");<BR> menuTree.setStyle("fontSize", 12);<BR> <BR> var treeNavMenu = this;<BR> menuXML = new XML();<BR> menuXML.ignoreWhite = true;<BR> menuXML.load("TreeNavMenu.xml");<BR> menuXML.onLoad = function() {<BR> treeNavMenu.onMenuLoaded();<BR> };<BR>}<BR>function change(event:Object) {<BR> if (menuTree == event.target) {<BR> var node = menuTree.selectedItem;<BR> if (menuTree.getIsBranch(node)) {<BR> menuTree.setIsOpen(node, !menuTree.getIsOpen(node), true);<BR> }<BR> var url = node.attributes.url;<BR> if (url) {<BR> getURL(url, "_top");<BR> }<BR> menuTree.selectedNode = null;<BR> }<BR>}<BR>function onMenuLoaded() {<BR> menuTree.dataProvider = menuXML.firstChild;<BR> menuTree.addEventListener("change", this);<BR>}<BR>}<BR>
Agora salve esse arquivo como TreeNavMenu, lembrando que todos os arquivos criados devem ficar no mesmo lugar, caso contrário não irá funcionar.
Este é um código bem simples, onde nele chamamos o MovieClip que criamos anteriormente, em seguida passamos o estilo das fontes que irão compor o menu "menuTree.setStyle("fontFamily", "_sans");" e o tamanho da fonte "menuTree.setStyle("fontSize", 12);". Logo após, carregamos o arquivo em XML "menuXML.load("TreeNavMenu.xml");", que posteriormente iremos criar. Uma parte também muito interessante deste código é a que trata dos links. Eu utilizei a propriedade "_top", "getURL(url, "_top");", que abre uma nova janela, mas se você estiver criando esse menu para navegação em sua página basta alterar esse parte para "getURL(url, "_self");", fazendo com que o link seja aberto na mesma página.
Agora vamos criar o arquivo em XML. Para isso abra seu maravilhoso bloquinho de notas e insira esse código dentro dele:
CODE
<BR><node><BR><node label="Meus Favoritos"><BR> <node label="YouTube.com" url="http://www.youtube.com" /><BR> <node label="Orkut.com" url="http://www.orkut.com" /><BR></node><BR><node label="Google" url="http://www.google.com" /><BR></node><BR>
Esse código é alto explicativo, criamos um nó, que será o folder, chamado Meus Favoritos, dentro desse nó temos mais dois, um chamado YouTube e o outro Orkut, fechamos esse nó e criamos outro chamado Google, que ficará de fora do folder. Será usado esse arquivo para navegar no meu, ele é nossa peça chave. Feito isso salve o arquivo como TreeNavMenu.xml.
Relembrando:Não se esqueça de colocar esses três arquivos no mesmo lugar!!!
Para ver o resultado final é só exportar o arquivo treeMenu.fla, como um Movie Clip, atalho CRTL + ALT + SHIFT + S, para o mesmo local onde estão os outros arquivos.
Bem, esse é um tutorial bem simples, mas que pode ser desenvolvido e ganhar ótimas funcionalidades em qualquer site ou aplicação que desejam construir. Qualquer dúvida ou se desejam todos esse arquivos é só me mandar um e-mail ou postar aqui no fórum.
Até uma próxima vez,
Mattheus Pirovani Roriz Gonçalves
mattheusroriz@yahoo.com.br
Mais recentes em Flash
- Chamando javascript em actionscript 3.0
- Por PXzin - Artigo sobre alguns problemas que podem acontecer...
- Formulario em flash
- Por sergiojr - Formulario em flash...
- Sistema de login utilizando flash e xml
- Por MahDesign - . vamos aprender como criarmos um sistema de login...
- Igraf 1.0 - gerando gráficos em flash via actionscript
- Por weaver - Eu que fiz hospedei em outro canto mas ajuda muito...
- Remova os pontilhados de um swf no ie
- Por Manito - Galera, me incomoda muito quando um site que tenha...
Ver mais Artigos de Flash.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com