Tutorial de Integração Flash + XML

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.

Pronto, artigo finalizado.

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ê.
Até o próximo artigo.