Linha de Cdigo - Tutorial de Integrao Flash + XML

1 de 2

tera-feira, 20 de outubro de 2009

http://www.linhadecodigo.com.br/ArtigoImpressao.aspx?id=1279

Busca

Artigo
Tutorial de Integrao Flash + XML
Por: Rafael Costa
[Entre em contato com o autor ]
Programador Actionscript h 2 anos. Participante do frum FlashMasters, maior comunidade Flash
do Brasil.
Alm de Actionscript, possui conhecimentos em outras linguagens como: JavaScript, CSS, XHTML,
PHP e MySQL.
Para saber mais sobre o autor, visite seu site: http://www.rafaelcosta.com.

Feed de artigos.
Feed de artigos deste autor.
Gere seu feed personalizado

Tutorial de Integrao Flash + XML

Publicado em: 04/04/2007

Antes de comearmos 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 prs e contras. XML serve como uma
base de dados, mas com pouca segurana. Guardar dados com senha? Nem pensar. Mas ento
por que usar o XML se o que os profissionais mais buscam hoje em dia a segurana para seus
arquivos? A grande vantagem est no fato de no necessitar de uma outra linguagem ou banco
de dados para enviar dados para o Flash. O Flash consegue ler facilmente um XML. Lembrando
que impossvel editar ou remover tag's do XML pelo Flash.
Feita a parte terica, vamos prtica.
Para melhor compreender o XML, vamos analisar este cdigo:
<?xml version="1.0" encoding="iso-8859-1"?>
<galeria>
<foto imagem="casinha.jpg" legenda="Minha casa"/>
<foto imagem="familia.jpg" legenda="Famlia reunida"/>
<foto imagem="reuniao.jpg" legenda="Reunio de negcios"/>
<foto imagem="cachorro.jpg" legenda="Meu cachorro"/>
<foto imagem="galera.jpg" legenda="Festa da galera"/>
</galeria>

Veja que na primeira linha declaramos a verso 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 comea a galeria de fotos.
Da 3 7 linha esto as fotos e as legendas. Para cada foto voc tem que declarar dessa
maneira.
<foto - para indicar o incio de uma nova foto;
imagem="casinha.jpg" - para declarar o local do arquivo;
legenda="Minha casa" - para informar o texto correspondente imagem;
/> - declara o trmino da foto.
Salve seu xml como "arquivo.xml" (sem aspas) e vamos ao Flash.
Para testarmos o cdigo, usaremos o trace, para exibir os resultados na janela de sada.
Abra o Flash e no 1 frame coloque este cdigo:
(As duas barras aps cada linha servem para comentrios no flash. )
System.useCodepage = true; // habilita acentos;
var arquivo:XML = new XML(); // cria a varivel para ler o xml;
arquivo.load("arquivo.xml"); // manda a varivel ler o arquivo.xml salvo anteriormente;
arquivo.ignoreWhite = true; // ignora espaos em branco no XML
arquivo.onLoad = function() { // aps a leitura do XML, executa a ao:
trace(this); // mostra o contedo na janela de sada.
}

Pressione Ctrl + Enter e veja que aparecer todo o nosso XML na janela de sada.
At a muito fcil, no?
Vamos ento "entrar" nas linhas do XML.
Para melhor explicar, entenda que no XML a contagem comea do 0, ou seja, a linha 1 na
verdade a linha 0.
Troque o cdigo pelo seguinte:

20/10/2009 06:19

Linha de Cdigo - Tutorial de Integrao Flash + XML

2 de 2

http://www.linhadecodigo.com.br/ArtigoImpressao.aspx?id=1279

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 ns queramos tudo o que estiver no
primeiro n do XML. Cada childNodes representa um n no XML.
Voc poderia ter usado tambm "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 comea do 0.
Sua caixa de sada deve ter aparecido o seguinte:
<foto imagem="casinha.jpg" legenda="Minha casa" />

Ok, tudo certo.

Quando ns vamos usar o XML para ler imagens e textos externos, no podemos deixar assim
n? Temos que falar qual atributo queremos que ele pegue para mais tarde usarmos em um
loadMovie.
Ento vamos fazer isso agora. Pegar apenas o texto e o nome do arquivo no XML.
Como ns 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 sada dever ter ficado assim:
casinha.jpg
Minha casa

Agora para exibir as informaes no palco, faa 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 dinmico 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 cdigo:
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 no se esqueam de sempre inventar, criar e experimentar
cdigos, isso far voc ter prtica e logo mais isso vai ser moleza para voc.
Baixe aqui o cdigo fonte.
At o prximo artigo.

Copyright 2001-2009 Codeline Editora, Comrcio e Tecnologia Ltda. | Poltica de privacidade e de uso | Anuncie | Fale conosco
Site hospedado na Porta 80 Web Hosting

20/10/2009 06:19