Tutorial de Integração Flash + XML

Neste artigo você aprenderá a enviar dados de um arquivo XML para o Flash e verá como agilizar seus projetos em Flash usando essa tecnologia.

por Rafael Costa

Antes de começarmos a explicar como integrar o Flash com XML, você precisa entender melhor como funciona o XML (eXtensible Markup Language).

Assim como qualquer outra linguagem, o XML tem seus prós e contras. XML serve como uma base de dados, mas com pouca segurança. Guardar dados com senha? Nem pensar. Mas então por que usar o XML se o que os profissionais mais buscam hoje em dia é a segurança para seus arquivos? A grande vantagem está no fato de não necessitar de uma outra linguagem ou banco de dados para enviar dados para o Flash. O Flash consegue ler facilmente um XML. Lembrando que é impossível editar ou remover tag"s do XML pelo Flash.

Feita a parte teórica, vamos à prática.

Para melhor compreender o XML, vamos analisar este código:

<?xml version="1.0" encoding="iso-8859-1"?>
<galeria>
<foto imagem="casinha.jpg" legenda="Minha casa"/>
<foto imagem="familia.jpg" legenda="Família reunida"/>
<foto imagem="reuniao.jpg" legenda="Reunião de negócios"/>
<foto imagem="cachorro.jpg" legenda="Meu cachorro"/>
<foto imagem="galera.jpg" legenda="Festa da galera"/>
</galeria>

Veja que na primeira linha declaramos a versão do XML e o encoding que dá suporte à acentos, assim podemos colocar acentos em nossas tags.

Na segunda linha abrimos a tag "galeria", informando que ali começa a galeria de fotos.

Da 3ª à 7ª linha estão as fotos e as legendas. Para cada foto você tem que declarar dessa maneira.

<foto - para indicar o início de uma nova foto;
imagem="casinha.jpg" - para declarar o local do arquivo;
legenda="Minha casa" - para informar o texto correspondente à imagem;
/> - declara o término da foto.

Salve seu xml como "arquivo.xml" (sem aspas) e vamos ao Flash.
Para testarmos o código, usaremos o trace, para exibir os resultados na janela de saída.

Abra o Flash e no 1º frame coloque este código:
(As duas barras após cada linha servem para comentários no flash. )

System.useCodepage = true; // habilita acentos;
var arquivo:XML = new XML(); // cria a variável para ler o xml;
arquivo.load("arquivo.xml"); // manda a variável ler o arquivo.xml salvo anteriormente;
arquivo.ignoreWhite = true; // ignora espaços em branco no XML
arquivo.onLoad = function() { // após a leitura do XML, executa a ação:
	trace(this); // mostra o conteúdo na janela de saída.
}

Pressione Ctrl + Enter e veja que aparecerá todo o nosso XML na janela de saída.
Até aí muito fácil, não?

Vamos então "entrar" nas linhas do XML.
Para melhor explicar, entenda que no XML a contagem começa do 0, ou seja, a linha 1 na verdade é a linha 0.

Troque o código pelo seguinte:

System.useCodepage = true;
var arquivo:XML = new XML();
arquivo.load("arquivo.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
	trace(this.childNodes[0]);
}

Repare que agora ele mostrou somente o que esta entre <galeria> ... </galeria>.
Mas por que isso? Simples, porque informamos que nós queríamos tudo o que estiver no primeiro nó do XML. Cada childNodes representa um nó no XML.
Você poderia ter usado também "firstChild"(sem aspas).

Vamos entrar mais no XML.

System.useCodepage = true;
var arquivo:XML = new XML();
arquivo.load("arquivo.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
	trace(this.childNodes[0].childNodes[0]);
}

Com isso ele acessa a primeira linha das fotos. Lembre que no XML, a contagem começa do 0.

Sua caixa de saída deve ter aparecido o seguinte:

<foto imagem="casinha.jpg" legenda="Minha casa" />

Ok, tudo certo.
Quando nós vamos usar o XML para ler imagens e textos externos, não podemos deixar assim né? Temos que falar qual atributo queremos que ele pegue para mais tarde usarmos em um loadMovie.
Então vamos fazer isso agora. Pegar apenas o texto e o nome do arquivo no XML.
Como nós já estamos na linha que vai ler os atributos da foto, podemos declarar um "attributes" para ele e pronto.

System.useCodepage = true;
var arquivo:XML = new XML();
arquivo.load("arquivo.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
	trace(this.childNodes[0].childNodes[0].attributes.imagem);
	trace(this.childNodes[0].childNodes[0].attributes.legenda);
}

Perceba que agora temos 2 trace. Um pra a foto e outro para a legenda.
No primeiro, o "attributes.imagem" pega o valor que está declarado no xml como imagem="casinha.jpg". E no segundo, o "attributes.legenda" pega a respectiva legenda no XML.

Sua janela de saída deverá ter ficado assim:

casinha.jpg
Minha casa

Agora para exibir as informações no palco, faça o seguinte:

1. Crie um clipe de filme, arraste-o para o palco e instancie-o de "clipe" (sem aspas);
2. Crie um campo de texto dinâmico e instancie-o de "legenda" (sem aspas);

Agora é só informar ao flash para ler a imagem e o texto dentro dos alvos correspondentes. Para isso, cole o seguinte código:

System.useCodepage = true;
var arquivo:XML = new XML();
arquivo.load("arquivo.xml");
arquivo.ignoreWhite = true;
arquivo.onLoad = function() {
	clipe.loadMovie(this.childNodes[0].childNodes[0].attributes.imagem);
	legenda.text = this.childNodes[0].childNodes[0].attributes.legenda;
}

Pronto. O seu clipe de filme instanciado como "clipe" vai ler a imagem correspondente à primeira linha do XML, que nesse caso é a "casinha.jpg" e a sua caixa de texto vai ler a legenda correspondente.

Espero que tenham gostado e não se esqueçam de sempre inventar, criar e experimentar códigos, isso fará você ter prática e logo mais isso vai ser moleza para você.

Baixe aqui o código fonte.

Até o próximo artigo.