Olá pessoal! Desde já agradeço todo o retorno positivo de meus últimos artigos sobre Flash. Muito obrigado a todos!
Percebi que no iMasters não havia nenhum tutorial ou nada que falasse tecnicamente sobre o Papervision 3D, então para preencher essa lacuna vamos conhecer essa maravilhosa ferramenta para Flash.
O que é o Papervision 3D?
Basicamente, o Papervision 3D é um pacote de classes que lhe oferece diversas ferramentas profissionais para produção de filmes em Flash com a ilusão de três dimensões. Digo ilusão pois, apesar de o Flash suportar atualmente 3D nativo (que ainda perde feio para o que o Papervision nos oferece), o Papervision 3D já existia muito antes disso, simulando o efeito ótico tridimensional apenas manipulando as propriedades de objetos bidimensionais.
Hoje o Papervision 3D é a ferramenta de produção tridimensional no Flash mais utilizada e mais popular, com diversos plugins e efeitos impressionantes. A grande maioria dos sites 3D mais impressionantes do mundo foram todos produzidos com a ferramenta.
Como usar?
O primeiro passo é fazer o download no repositório de código oficial no Google: http://code.google.com/p/papervision3d/.
Existem duas formas de usar o pacote com seu filme SWF: Baixando o ZIP com os arquivos das classes dentro de uma pasta e sempre a copiando em cada projeto realizado. Baixando o arquivo .SWC que empacota todas as classes do Papervision em um só arquivo.
E qual a diferença?
No caso da primeira opção teremos sempre compatibilidade na hora de compilar nosso SWF, pois como sempre copiamos a pasta com a versão que estamos utilizando em cada projeto, nunca teremos problemas com versões futuras. A desvantagem é ter que sempre duplicar essa pasta em cada projeto e ocupando mais espaço no HD.
Na segunda opção você pode colocar o arquivo .SWC em um lugar comum e apenas configurar para que seu filme sempre o requisite na hora de compilar o SWF. Para configurar essa requisição vá em Edit > Preferences > Actionscript. Agora clique no botão Actionscript 3.0 settings. No box do meio, Library Path, clique no ícone vermelho e vá atrás do arquivo SWC do Papervision em seu computador.
Vamos começar!
Devido ao fato de termos de criar tudo através de Actionscript, sem a visualização em tempo real, muitos não sabem nem por onde começar. Então vamos entender passo a passo a lógica de como trabalha nosso Papervision 3D:
Para que o Papervision 3D funcione, precisaremos de quatro elementos essenciais:
Renderizador Um objeto BasicRendererEngine para processar todo o ambiente 3D na tela.
Cena Um objeto Scene3D que englobe todo o seu conteúdo. É o cenário necessário para exibir qualquer coisa na tela.
Ponto de vista Um objeto Viewport3D. Uma perspectiva a partir do qual seu conteúdo será visualizado.
Câmera Um objeto Camera3D. Precisamos de um "olho" em nosso cenário para que possamos manipular uma visão do ambiente.
Agora que temos a base essencial do Papervision 3D, vamos juntar tudo e construir um ambiente no qual possamos colocar a mão na massa.
O Actionscript para prepararmos esse ambiente de produção é um tanto burocrático:
Porém o Papervision 3D facilita nossa vida e nos oferece um objeto chamado BasicView que simplifica todo o código anterior e já nos dá um objeto pronto com tudo: o renderizador (BasicView.renderer), a cena (BasicView.scene), o ponto de vista (BasicView.viewport) e a câmera (BasicView.camera).
Esse objeto estende um objeto Sprite, logo você deverá inseri-lo no Stage usando addChild(). Vamos usar o BasicView para montar nosso ambiente. Só precisamos passar alguns parâmetros para ele:
viewportWidth:Number A largura da perspectiva em pixels
viewportHeight:Number - A altura da perspectiva em pixels
scaleToStage:Boolean Redimensionar a perspectiva seguindo o Stage caso ele também seja redimensionado
interactive:Boolean Detectar interações do usuário (teclado, mouse, etc.)
cameraType:String Tipo da câmera que será utilizada, usando variáveis estáticas de objetos de câmeras do Papervision. Exemplo: Camera3D.TYPE, FreeCamera3D.TYPE, FrustrumCamera3D.TYPE, etc. De início utilizaremos o padrão Camera3D.TYPE.
view =newBasicView(500,500,true,false);
Pronto! Já temos todo nosso ambiente 3D preparado para colocarmos o que quisermos dentro dele e assim o Papervision 3D realizar seu trabalho de renderização. Vamos colocar agora uma esfera 3D em nossa cena 3D:
No momento não vou explicar em detalhes a criação de um objeto esférico e suas configurações, falaremos isso de outra vez. Mas adianto que nossa esfera foi configurada com um material aramado (wireframe), de raio 100 pixels e 20 segmentos de montagem vertical e horizontal.
Além de colocarmos objetos dentro do ambiente, podemos também mudar suas configurações, como por exemplo, o zoom e o foco do ambiente:
view.camera.zoom =12;
view.camera.focus =100;
Ok, já temos nosso ambiente montado, configurado e com uma esfera 3D nele. Só que tudo estático! Flash é movimento, animação! Nosso milagroso objeto BasicView também nos dá uma função específica de renderização que processará tudo para nós. Então vamos criar um loop, usando o evento ENTER_FRAME:
Como vimos acima, nosso evento ENTER_FRAME está chamando uma função que no exemplo estamos chamando de enterFrameHandler. Dentro dela pediremos que o BasicView renderize tudo para nós a cada frame do filme, e aproveitamos para dizer que a esfera rotacione em seu eixo Y:
Agora que entendemos os princípios básicos do Papervision 3D, como montar um ambiente 3D para trabalharmos e como trabalhar com um loop de renderização, vamos juntar tudo de forma organizada em uma classe que chamaremos de HelloWorld e nos mostrará um globo 3D aramado girando:
Hello! Trabalhar com vídeo no Flash é uma maravilha. Não precisamos de plugins extras, como quick time, real player, media player e etc, e é possível trabalhar com ótimas qualidades e grandes compactações. Trabalhar com vídeo até em swf, ou então em um formato mais amigável, nato do Flash, como o FLV(Flash Video).
Muitos já devem conhecê-lo, pois desde a versão MX 2004 o Flash já vem com componentes para player de vídeo, como o MediaDisplay, dentre outros. E é ai que entra nosso problema. Os componentes normalmente são pesados, ou tem recursos demais para poucas necessidades, ou até mesmo recursos de menos dependendo de nossas necessidades. Então surge o problema: como fazer o nosso próprio player de FLV?
Ahá! Aí que entramos em nosso artigo. O mesmo será dividido em duas partes. A primeira voltada ao motor básico do player, e a segunda a controles extras como progress bar e seek bar. Lembrando que este é um artigo para usuários de nível médio a avançado, e funciona com Flash MX 2004 ou superior.
Caso você ainda não saiba como transformar o seu vídeo para o formato .FLV, e muito fácil. No Flash você pode importar o video como embend video para biblioteca, clicar com o botão direito nele e exportar, utilizar programas terceiros, como o ótimo Sorenson Squeeze, ou o novo Macromedia Flash 8 Video Encoder, que acompanha nosso maravilhoso Flash 8. Depois de nosso vídeo convertido, e o FLV não mão, vamos ao player!
1º Passo - Desenhando o Layout :
Começaremos criando um novo arquivo no Flash, com o palco de largura 240 px e altura 240 px. Logo após, uma camada exclusiva para as ações, com o nome de actions, e outra para o layout, com o nome de player.
Iniciando, criaremos nosso chamado "display", um objeto Video na biblioteca que, logo após, será arrastado ao nosso palco. Em sua biblioteca (Library), localize uma setinha no canto da paleta, e siga como abaixo:
Seguindo...
Arrastamos nosso Display criado na biblioteca para encaixe no palco, e damos a ele o instance name de display:
Agora vamos desenhar o resto dos controles, começando pelo botão de stop, que deve ser instanciado como btStop:
Logo após, o botão de play e pause, quando o vídeo está tocando, fica visível a opção de pause. E quando está pausado, a opção de play. Começaremos então desenhando o botão de play, e transformando-o em um mc, com o instance name de btPlayPause. Mais ou menos assim:
Depois devemos abrir nosso botão btPlayPause para edição e criarmos um segundo frame. Nele, o desenho do nosso botão de pause. Desta forma. no primeiro frame temos o botão de Play e no segundo o de Pause.
Agora vamos a uma parte do layout que exige atenção. Caso vocês não consigam, podem baixar os arquivos do artigo no final, e ver como é.
Para o seek bar do volume, desenharemos uma linha, e acima dela um botão que será arrastável e percorrerá toda a linha. Logo após, transformaremos em uma mc com registration 0, e instanciando como mcVolumeControl:
Abrindo nosso mcVolumeControl para edição, separemos o botão em uma camada, e a linha arrastável em outra, um abaixo da outra. Transformaremos nossa linha em um mc, também com registration 0, com o instance name de mcSeekVolume:
Selecionando nosso botão arrastável, transformaremos ele também em um mc, com registration 0, e acima da linha, como já falado. Instancie-o como btVolume:
Para finalizar a parte do seek bar de Volume, voltaremos para o palco principal(_root) e, clicando com o botão direito na biblioteca(Library), em cima do nosso mcVolueControl, vamos até Linkage, e lá faremos a seguinte configuração:
Como podemos ver, fora definido a classe AS 2.0, VolumeControl, uma classe facilitadora de controle do volume para Video, criada por mim , para nos auxiliar nesta empreitada. A mesma pode ser baixada no final do artigo junto com o pacote completo.
Terminamos o layout desta primeira parte do artigo. Agora vamos às actions.
2º Passo - Action Script:
Utilize do código abaixo no seu primeiro frame de nossa aplicação, na camada criada no início chamada Action:
//configuração do palco...
//não necessário, fica a gosto...
Stage.align = "MC";
Stage.scaleMode = "noScale";
fscommand("allowscale", "false");
fscommand("fullscreen", "false");
_quality = "BEST"; //iniciando projeto...
//declarando variáveis...
var display:Video;
var videoAtual:String = null;
var tempoAtual:Number = 0;
var isPlay:Boolean = false; //botoes e mcs do player...
var mcVolumeControl:MovieClip;
var btPlayPause:MovieClip;
var btStop:MovieClip; //som para o controle do volume do player...
var somVideo:Sound = new Sound(); //criando conexao do stream de video...
var netConVideo:NetConnection = new NetConnection();
netConVideo.connect(null); //criando stream para ser usado na conexao...
var netStmVideo:NetStream = new NetStream(netConVideo); //um pequeno buffer antes do filme começar...
netStmVideo.setBufferTime(3); //objeto monitor de eventos do video...
netStmVideo.onStatus = function(info):Void
{ //este if server para verificar se o filme ja acabou, rebobinando o mesmo...
if(info.code == "NetStream.Buffer.Flush"){
netStmVideo.play(videoAtual);
stopVideo();
}
} //adicionando o stream ao nosso display no palco...
display.attachVideo(netStmVideo); //função responsável por setar o video a ser carregado e tocado...
function setVideo(src:String):Void
{ //caso o comando de tocar seja pra um video já sendo tocado, evita o recarregamento...
if(videoAtual != src){
netStmVideo.play(src); //salva numa var, o video atual para posterior verificação...
videoAtual = src;
} else { //neste caso o video atual e o mesmo do comando, assim só recomeça a tocar...
netStmVideo.seek(0);
} //configurando player para que esteja tocando...
btPlayPause.gotoAndStop(2);
isPlay = true;
} //função responsável pelo Play/Pause do filme...
function PlayPause():Void
{ //verifica se o video esta tocando, caso sim, pausa...
if(isPlay){ //salva o tempo atual para posterior continuação ao apertar em play...
//esse menos 10 e para não haver corte e delay no tempo de apertar o botão...
tempoAtual = netStmVideo.time - 10;
netStmVideo.pause(true);
isPlay = false;
} else { //caso esteja parado continua a tocar da onde parou...
isPlay = true;
netStmVideo.pause(false);
}
} //função responsável pelo stop do filme...
function stopVideo():Void
{ //resetando o tempo atual caso esteja em pause...
tempoAtual = 0;
netStmVideo.seek(0);
netStmVideo.pause(true);
isPlay = false; //joga o botão de play/pause para o frame do play...
btPlayPause.gotoAndStop(1);
} //setando ação dos botões...
btStop.onRelease = stopVideo;
btPlayPause.onRelease = function():Void
{ //verifica a atual situação para dizer se deve aparecer o play ou pause...
if(isPlay && this._currentframe == 2){
this.gotoAndStop(1);
} else {
this.gotoAndStop(2);
} //ativando a função PlayPause()...
PlayPause();
} //passando ao mcVolume oque ele vai controlar...
mcVolumeControl.setVolumeObject(somVideo); //por fim damos load e play em nosso video...
setVideo("video1.flv");
Agora é so publicar nosso player e testar. Vejo vocês semana que vem, na segunda parte do artigo.
Clique aqui para baixar os arquivos de exemplo deste tutorial.
Uso myMovieClip.attachMovie( idName, newName, profundidade [, initObject] )
Parâmetros
idName O nome de vinculação do símbolo do clipe de filme na biblioteca a ser anexada a um
clipe de filme no Palco. É o nome inserido no campo Identificador na caixa de diálogo
Propriedades de Vinculação do Símbolo.
newname Um nome de instância único para o clipe de filme que está sendo anexado ao clipe de
filme.
profundidade Um inteiro que especifica o nível de profundidade no qual o filme é colocado.
MovieClip.onReleaseOutside Chamada quando o mouse é liberado enquanto o ponteiro está fora de
um botão, depois que o botão é pressionado enquanto o ponteiro está
dentro do botão.
MovieClip.onRollOut Chamada quando o ponteiro rola para fora da área de um botão.
MovieClip.onRollOver Chamada quando o ponteiro do mouse rola sobre um botão.
MovieClip.onSetFocus Chamada quando um botão tem o foco de entrada e uma tecla é
liberada.
MovieClip.onUnload Chamada no primeiro quadro depois que o clipe de filme é removido da
Linha de tempo. As ações associadas ao evento do clipe de filme
Unload são processadas antes que as ações sejam anexadas ao quadro
atingido.
Propriedade Descrição
Dicionário ActionScript 306
initObject Um objeto que contém propriedades que devem ser utilizadas para preencher o clipe
de filme recém-anexado. Este parâmetro permite que os clipes de filme criados dinamicamente
recebam parâmetros de clipe. Se initObject não for um objeto, ele será ignorado. Todas as
propriedades de initObject são copiadas na nova instância. As propriedades especificadas com
initObject estão disponíveis para a função construtora. Este parâmetro é opcional.
Descrição
Método; pega um símbolo da biblioteca e o anexa ao filme no Palco especificado por MovieClip.
Use a ação ou método removeMovieClip ou unloadMovie para remover um clipe de filme
anexado com attachMovie.
Exemplo
O exemplo a seguir anexa o símbolo com o identificador de vinculação “círculo” à instância de
clipe de filme localizada no Palco, no filme.
on (release) { thing.attachMovie( "círculo", "círculo1", 2 ); }
Bem aqui vai um tutorial bem facinho e muito pedido por quem está começando , carregar arquivo externo e fazer uma barra de progresso .
No primeiro frame digite o seguinte Scrip.
this.createEmptyMovieClip("novo_mc",1); // Solicitando o arquivo a ser carregado novo_mc.loadMovie("imagem.jpg","post"); // Criando um EnterFrame para fazer a verificaçãoi constante do carregamento this.onEnterFrame = function(){// onEnterFrame // Colocando o valor do carregamento em uma variável pct_str = Number(Math.floor((novo_mc.getBytesLoaded()/novo_mc.getBytesTotal())*100)); // Certificando-se de que o resultado será um valor numérico //trace(pct_str) // crie um um movie clip , pode ser uma barrinha fininha ou algo sofisticado e de o nome de minhabarra ela //será seu preload , vc tem infinitas usabilidades para a variavél pct_str , ela representa de 0 a 100 a //quantidade de bites carregados minhabarra._width = pct_str // Certifgicando-se que ele estará considerando o filme a ser carregado e não o MC vazio if(novo_mc.getBytesTotal() < 10) pct_str = 0
// Se o carregamento já chegou a 100% então não preciso mais desse verificador. if(pct_str >= 100) delete this.onEnterFrame; }
Receber dados externos usando LoadVars é fácil, mas receber em XML é mais organizado e fácil de ser padronizado. A exemplo disso, temos o RSS, que nada mais é do que um formato padrão de organizar informações em XML de forma que qualquer outro sistema que reconheça este padrão possa exibi-lo corretamente. Por essa razão, vamos aprender como receber um XML no Flash, mas vamos usar um formato mais simples para analisar do que o formato RSS.
Para compreender melhor este artigo, é necessário que já se tenha um conhecimento considerável de Array e Object, caso contrário se preferir uma boa opção é usar o LoadVars para receber dados no Flash, que apesar de usar um objeto ainda assim é bem mais simples.
Agora, digamos então que carregamos um XML para um objeto XML no Flash, que o chamaremos de meuXML, no qual para exibir um único valor, temos de usar uma pequena linha como esta:
Dá vontade de desistir antes mesmo de começar, afinal isso não faz lá muito sentido, não é? O fato é que só recebemos os dados assim porque, com o tempo, percebemos que é uma das formas mais práticas de se fazer isso. Por um momento, vamos esquecer o XML e analisar tratamento de string abaixo:
// Definimos o valor para uma variável.
var palavra:String = "Flash;Css;Php;Ajax;Linux";
trace("palavra: " + palavra); // Agora queremos colocar tudo em caixa alta, ou seja, em letras maiúsculas.
var caixaAlta:String = palavra.toUpperCase();
trace("caixaAlta: " + caixaAlta); // Já que estão todos separados por ponto-e-vírgula, vamos usar isso como um separador e organizar tudo em um Array.
var meu_array:Array = caixaAlta.split(';');
trace("meu_array: " + meu_array); // Por fim, queremos exibir apenas o primeiro item do Array.
var item:String = meu_array[0];
trace("item: " + item);
Agora, se já sabemos que vamos colocar todo o texto em caixa alta, separá-lo em um Array e por fim exibir o primeiro elemento do Array, então podemos simplificar um pouco assim:
var meu_array2:Array = String("Flash;Css;Php;Ajax;Linux").toUpperCase().split(";");
trace(meu_array2[0]);
Como podem ver, não precisamos colocar o retorno de um método em uma variável para usar outro método; o Flash compreende que, como nos exemplos acima, o retorno de um dos métodos é uma string, então podemos continuar usando métodos referentes ao tipo de retorno até acharmos necessário. No exemplo do meuXML, cada um daqueles métodos continuavam a nos retornar um outro objeto XML, então fomos usando os métodos que manipulam XML até chegar ao childNodes que acesse o nó que queríamos.
Entendendo o XML
Vamos, então, montar uma estrutura XML para enviar para o Flash, salvando-o como dados.xml:
Recebendo dados no Flash Como receber dados externos no Flash usando LoadVars...
http://www.imasters.com.br/artigo/4351/flash/recebendo_dados_no_flash/
Extensão PHP Debugger para o Dreamweaver Abordarei, neste artigo, a extensão PHP Debugger...
http://www.imasters.com.br/artigo/4131/dreamweaver/extensao_php_de...
Usando MXML Nesse artigo você vai aprender como usar o MXML...
http://www.imasters.com.br/artigo/4131/dreamweaver/extensao_php_deb...
Como localizar apenas o que se quer na consulta Estou com problemas para a consulta retornar apenas o que foi pedido
http://forum.imasters.com.br/index.php?showtopic=195667
Firefox não está lendo posição bottom background-position:bottom - erro
http://forum.imasters.com.br/index.php?showtopic=195687
servidor DNS em rede Wi-Fi Servidor DNS não inicia... será culpa do Wi-Fi??
http://forum.imasters.com.br/index.php?showtopic=194194
Agora vamos interpretar este XML. Na primeira linha, colocamos a versão do XML, a sua codificação e, em seguida, temos o primeiro nó que definimos como meuSite. Os nós tem propriedades, iniciam e terminam exatamente como na maioria das tags HTML: outros nós ou valores .
Em uma estrutura XML, podemos praticamente colocar o que quisermos para definir os nomes dos nós, propriedades e seus valores, é quase como um HTML personalizado. Para interpretar sua hiearrquia de estrutura, podemos dizer que: MeuSite é o nó pai de todos os nós dentro dele, assim como o nó TopicoNoticia também é o nó pai de todos os que estiverem dentro dele, mas é nó filho de MeuSite.
Quando chegarmos ao fim de nossa estrutura, não colocaremos mais nós dentro de nós mas sim textos para que esses nós sejam como varáveis e para que possamos acessar estes textos. Este é o caso dos nós filhos do nó Registro que possuem apenas textos dentro deles:
- Recebendo dados no Flash Como receber dados externos no Flash usando LoadVars...
http://www.imasters.com.br/artigo/4351/flash/recebendo_dados_no_flash/
Pode ser que tenhamos que colocar sinais como "<" ou ">" no texto; neste caso, podemos deixar o texto assim:
O CDATA permite que coloquemos qualquer informação dentro dele sem que seja interpretado pelo XML, como no caso dos sinais de ">" e "<", que para o XML representam o fechamento e a abertura de um nó.
Recebendo o XML no Flash
Tendo o XML pronto, vamos colocar o script que carregará os dados para o Flash:
System.useCodepage = true;
var MeuXML:XML = new XML(); // Ignoramos todas as quebras de linhas e espaços entre os nós para não atrapalhar na interpretação do XML.
MeuXML.ignoreWhite = true; // Este método será executado ao fim do carregamento dos dados ou em caso de erro.
MeuXML.onLoad = function($sucesso){
if($sucesso){ // Em caso de sucesso // Vejamos, então, qual é o primeiro nó deste objeto XML.
trace(MeuXML.childNodes[0].nodeName); // MeuSite // Vejamos os objetos que estão dentro dele.
trace(MeuXML.firstChild.childNodes[0].nodeName); // TopicoNoticias
trace(MeuXML.firstChild.childNodes[1].nodeName); // UltimasForum // Sabemos que o primeiro nó é único, não pode haver outros com ele; então, podemos usar o firstChild, que é exatamente a mesma coisa que usar childNodes[0], entre um e o outro não há diferenças. // Vamos acessar o 3º nó dentro de TopicoNoticias.
trace(MeuXML.firstChild.firstChild.childNodes[2].nodeName); // Registro // Lembram-se de que colocamos uma propriedade id para os nós de Registro? Vamos verificar se estamos mesmo acessando o terceiro registro. // Este é um dos casos de objeto dentro de objeto, pois attributes é um objeto que conterá todas as propriedades do nó correspondente.
trace(MeuXML.firstChild.firstChild.childNodes[2].attributes.id); // 3 // Agora, dentro de registros, colocamos nós apenas com alguns valores; então, vamos exibí-los // Acessamos o nó Titulo e exibimos seu valor.
trace(MeuXML.firstChild.firstChild.childNodes[2].childNodes[0].firstChild.nodeValue); // Acessamos o nó Descricao e exibimos seu valor.
trace(MeuXML.firstChild.firstChild.childNodes[2].childNodes[1].firstChild.nodeValue); // Acessamos o nó Link e exibimos seu valor.
trace(MeuXML.firstChild.firstChild.childNodes[2].childNodes[2].firstChild.nodeValue); // Acessamos o nó Fonte e exibimos seu valor.
trace(MeuXML.firstChild.firstChild.childNodes[2].childNodes[3].firstChild.nodeValue); // Perceba que, apesar de não termos colocado nenhum nó dentro deles temos de acessar seus valores como se os valores estivessem dentro de um último nó.
}else{ // Em caso de erro
trace($sucesso);
trace("Ocorreu algum erro ao carregar os dados.");
}
} // Carregar dados do XML.
MeuXML.load("dados.xml");
Perceberam como acessamos os nós do XML? Uma vez carregado para o objeto XML do Flash, a estrutura não é acessada da forma como a vemos no navegador; se fôssemos exibir a estrutura na tela depois de recebida pelo Flash, ela teria outra aparência. Veja, se visualizarmos uma parte da estrutura XML é vista assim no navegador:
-
-
+
+
+
-
+
+
+
Já para o Flash, esta mesma estrutura seria exibida assim:
MeuXML
- [0] {nodeName:MeuSite,[0]{nodeValue:exibe o texto dentro do nó}}
- [0] {nodeName:TopicoNoticias,[0]{nodeValue:exibe o texto dentro do nó}}
+ [0] {nodeName:Registro,attributes{id},[0]{nodeValue:exibe o texto dentro do nó}}
+ [1] {nodeName:Registro,attributes{id},[0]{nodeValue:exibe o texto dentro do nó}}
+ [2] {nodeName:Registro,attributes{id},[0]{nodeValue:exibe o texto dentro do nó}}
- [1] {nodeName:UltimasForum,[0]{nodeValue:exibe o texto dentro do nó}}
+ [0] {nodeName:Registro,attributes{id},[0]{nodeValue:exibe o texto dentro do nó}}
+ [1] {nodeName:Registro,attributes{id},[0]{nodeValue:exibe o texto dentro do nó}}
+ [2] {nodeName:Registro,attributes{id},[0]{nodeValue:exibe o texto dentro do nó}}
Em outras palavras, para o objeto XML no Flash cada nó é um Array que pode ser acessado pelo método childNodes e dentro destes Array há mais Array que continuam sendo acessadas pelo método childNodes e objetos dentro de objetos que podem ser acessados por propriedades predefinidos como nodeValue e nodName, entre outros.
É importante que, quando fizerem algum tipo listagem de dados em XML, não mudemos a ordem em que os nós estão colocados. Exemplo:
- Recebendo dados no Flash Como receber dados externos no Flash usando LoadVars...
http://www.imasters.com.br/artigo/4351/flash/recebendo_dados_no_flash/
- Como receber dados externos no Flash usando LoadVars... Recebendo dados no Flash
http://www.imasters.com.br/artigo/4351/flash/recebendo_dados_no_flash/
Uma estrutura assim, quando recebida pelo Flash: no primeiro nó, Descricao está no índice 1 (lembrando que os nós são interpretados como Array e começam pelo índice 0) e, no segundo nó, ele está no índice 2, o que tornaria mais trabalhoso manipular os dados, uma vez que não podemos acessá-los diretamente pelos nomes.
Uma consulta pelo nome até poderia ser feita, mas seria necessário um tratamento trabalhoso que, principalmente no caso de quem está começando, seria melhor evitar. Porém, isso pode não ser mais um problema; pelo que já temos na versão alpha do ActionScript 3, será possível acessar os nós diretamente pelos seus nomes.
Finalmente, vamos montar um script para que possamos listar todos os dados, mas aqui vamos listá-los na janela de saída.
System.useCodepage = true;
var MeuXML:XML = new XML(); // Ignoramos todas as quebras de linhas e espaços entre os nós para não atrapalhar na interpretação do XML.
MeuXML.ignoreWhite = true; // Este método será carregado ao fim do carregamento dos dados ou em caso de erro.
MeuXML.onLoad = function($sucesso){ // Declarando as variáveis dentro de uma função, elas só existirão dentro da função, sem influenciar externamente. O uso do $ é uma preferência minha, para identificar variáveis que são feitas só para as funções.
var $i, $x, $y, $nome, $valor;
if($sucesso){ // Já sabemos qual é o primeiro elemento; vamos, então, listar a partir do segundo.
trace("- " + MeuXML.firstChild.nodeName) // Meusite // Enquanto $i for menor que o total de nós dentro do primeiro nó, vamos continuar este loop.
for($i=0; $i // MeuXML.firstChild.childNodes[$i] representa um dos nós de MeuSite.
trace(" - " + MeuXML.firstChild.childNodes[$i].nodeName); // Agora mais um loop for dentro deste nó que foi encontrado, isso é necessário para podermos listar os nós dentro dele.
for($x=0; $x // Vamos, ver então, que nó estamos acessando agora. No caso do nosso XML estaremos acessando um dos nós que definimos como Registro.
trace(" - " + MeuXML.firstChild.childNodes[$i].childNodes[$x].nodeName); // Está ficando cansado de loops? Calma, este será o último. Acessamos agora todos os nós dentro do nó Registro, lembre-se para cada grupo temos três nós de Registro.
for($y=0; $y // Finalmente, vamos exibir o nome destes últimos nós, porém vamos exibir seu valor também.
$nome = MeuXML.firstChild.childNodes[$i].childNodes[$x].childNodes[$y].nodeName; // Para pegar o valor, apesar de não haver um nó dentro deles, apenas textos, temos que acessá-lo como se houvesse um nó, então podemos até usar o firstChild.
$valor = MeuXML.firstChild.childNodes[$i].childNodes[$x].childNodes[$y].firstChild.nodeValue;
trace(" - " + $nome + ": " + $valor); // Terminado aqui, vamos para o próximo valor.
} // Terminado aqui, vamos para o próximo Registro.
} // Terminado aqui, vamos para o próximo nó dentro do nó MeuSite.
}
}else{
trace($sucesso);
trace("Ocorreu algum erro ao carregar os dados.");
}
} // Carregar dados do XML.
MeuXML.load("dados.xml");
Então, aqui temos loop, dentro de loop, dentro de loop, mas infelizmente é necessário para que possamos acessar os dados do XML, que é o ponto comentado no início deste artigo: é preciso acessar nível após nível nos nós do XML para que possamos chegar ao nosso objetivo final, por ter de usar uma longa linha para este acesso.
Lembrem-se, o uso do XML é por uma questão de padronização e organização das informações, pois o uso do LoadVars pode ser simples porém, é mais complicado para ser interpretado por teceiros e depois de um certo tempo, fica complicado até mesmo para aqueles que criaram a estruturas de dados.
