Oficina da Net

Fórum - Acesse nosso fórum, e faça suas perguntas.

Carregar um arquivo XML no Flash e exibir suas informações

Publicado em: 15/08/2007 | Flash | Visualizações: 6.843 | 3 Comentário(s)

E ai galera meu primeiro artigo sobre ActionScript vou começar mostrando como receber dados de em arquivo XML e carregá-los na sua apresentação.
Nos próximos artigos , mostrarei como receber dados de um servidor e de um banco de dados de uma forma mais dinâmica, mas vamos começar do principio.

Primeiro vamos definir a estrutura do nosso arquivo XML.



<?xml version="1.0" ?>

    <noticias>

    <noticia titulo="titulo noticia 1"><![CDATA[---- Contudo da noticia 1 ----]]></noticia>

    <noticia titulo="titulo noticia 2"><![CDATA[---- Contudo da noticia 2 ----]]></noticia>

    ...

    <noticia titulo="titulo noticia N"><![CDATA[---- Contudo da noticia N ----]]></noticia>

    </noticias>

Vamos construir um nó pai e dentro dele nós colocaremos as notícias com o atributo título e com o conteúdo entre as duas tags.
o parâmetro <![CDATA[]]> fala para o parser do XML que esse conteúdo não deve ser interpretado, isso nos possibilita utilizar caracteres especiais que o parser interpretaria como ( <, >, &, etc. ).

agora no Flash abra um novo documento e no primeiro frame e coloque o seguinte action.



    // configurando o objeto notícias

    // cria o objeto XML que vai carregar o arquivo noticias.xml

    var noticias:XML = new XML();



    // dizemos para o objeto notícias ignorar os espaços em branco entre as tags

    noticias.ignoreWhite = true;



    // definimos o evento que será disparado quando o objeto "noticias" terminar de carregar as notícias

    noticias.onLoad = function(sucesso:Boolean) {

        // se "sucesso" for verdadeiro significa que o arquivo foi carregado e podemos mostrar o conteúdo dele

        if (sucesso) {

            listarNoticias();

        } else {

            // avisa que ocorreu algum erro durante o carregamento

            trace("erro ao carregar o arquivo noticias.xml");

        }

    };



    //

    // criamos os TextFields para exibir as informações

    _root.createTextField("tfLista", _root.getNextHighestDepth(), 5, 5, 120, 390);

    _root.createTextField("tfConteudo", _root.getNextHighestDepth(), 130, 5, 360, 390);

    // formatamos os TextFields

    _root.tfLista.border = true

    _root.tfLista.background = true;

    _root.tfLista.color = 0x000000

    _root.tfLista.html = true

    _root.tfLista.multiline = true

    _root.tfLista.selectable = false

    //

    _root.tfConteudo.border = true

    _root.tfConteudo.background = true;

    _root.tfConteudo.color = 0x000000

    _root.tfConteudo.html = true

    _root.tfConteudo.multiline = true

    _root.tfConteudo.wordWrap = true

    _root.tfConteudo.selectable = true



    //

    // FUNÇÕES

    // função para mostra a lista de notícias carregadas

    function listarNoticias():Void {

        // variáveis temporárias

        var i:Number = 0;

        var titulo:String;

        var totalNoticias:Number = noticias.firstChild.childNodes.length;

        // definimos como "" o "tfLista" para tirar algum texto que não deva estar ali

        _root.tfLista.htmlText = "";

        // aqui nos fazemos um loop para colocar os títulos de cada notícia no "tfLista" e definimos o link

        while (i<totalNoticias) {

            // achamos o titulo na notícia "i"

            titulo = noticias.firstChild.childNodes.attributes.titulo;

            // inserimos no tfNoticias o titulo da notícia "i" com um link para mostrar a notícia

            _root.tfLista.htmlText += '<a href="asfunction:mostraNoticia,'+i+'">'+titulo+'</a>\n';

            // vamos para a próxima notícia

            i++;

        }

    }

    // função para mostrar uma notícia selecionada

    function mostraNoticia(i:Number):Void {

        var titulo:String;

        var conteudo:String;

        titulo = noticias.firstChild.childNodes.attributes.titulo;

        conteudo = noticias.firstChild.childNodes.firstChild.nodeValue;

        // Mostramos a notícia

        tfConteudo.htmlText = '<b>'+titulo+'</b><br><br>'+conteudo;

    }

    //

    // carregamos o arquivo noticias.xml

    noticias.load("noticias.xml");

Agora do começo. ^^
Primeiro nos instanciamos um objeto xml que será utilizado para carregar os dados no arquivo noticias.xml.
    // cria o objeto xml que vai carregar o arquivo noticias.xml     var noticias:XML = new XML();

Agora podemos configurar e definir os eventos que serão utilizados
    // "dizemos" para o objeto noticias que ignore os espaços em branco entre as tags     noticias.ignoreWhite = true;     // definimos o evento que será disparado quando o objeto “noticias” terminar de carregar as notícias     noticias.onLoad = function(sucesso:Boolean) {         // se "sucesso" for verdadeiro significa que o arquivo foi carregado e podemos mostrar o conteúdo dele         if (sucesso) {             listarNoticias();         } else {             // avisa que ocorreu algum erro durante o carregamento             trace("erro ao carregar o arquivo noticias.xml");         }     };

Então criamos dois TextFields "tfLista" ( para listar as notícias e vai servir de menu de navegação ) e "tfConteudo" ( para exibir o conteúdo da notícia selecionada )
    _root.createTextField("tfLista", _root.getNextHighestDepth(), 5, 5, 120, 390);     _root.createTextField("tfConteudo", _root.getNextHighestDepth(), 130, 5, 360, 390);

O próximo passo é formatar os TextFields para receber os conteúdos.
   _root.tfLista.border = true     _root.tfLista.background = true;     _root.tfLista.color = 0x000000     _root.tfLista.html = true     _root.tfLista.multiline = true     _root.tfLista.selectable = false     //     _root.tfConteudo.border = true     _root.tfConteudo.background = true;     _root.tfConteudo.color = 0x000000     _root.tfConteudo.html = true     _root.tfConteudo.multiline = true     _root.tfConteudo.wordWrap = true     _root.tfConteudo.selectable = true

Agora as funções que farão a mágica acontecer.
A primeira função lista todos os títulos no "tfLista" no formato HTML, note o parâmetro href da tag <a>:
'<a href="asfunction:mostraNoticia,' + i + '">' + titulo + '</a>\n';
asfunction é um protocolo interno do flash parecido com o "javascript:" que usamos nos links HTML quando queremos que um link chame uma função JavaScript só que asfunction roda internamente no Flash e só pode chamar uma função apenas.

ex.:
<a href="javascript:void(alert('Mensagem'));" >Alerta!!!</a>

   // função para mostrar as notícias carregadas     function listarNoticias():Void {         // variáveis temporárias         var i:Number = 0;         var titulo:String;         var totalNoticias:Number = noticias.firstChild.childNodes.length;         // definimos como "" o "tfLista" para tirar algum texto que não deva estar ali         _root.tfLista.htmlText = "";         // aqui nos fazemos um loop para colocar os títulos de cada notícia no "tfLista" e definimos o link         while (i<totalNoticias) {             // achamos o titulo na notícia "i"             titulo = noticias.firstChild.childNodes.attributes.titulo;             // inserimos no tfNoticias o titulo da notícia "i" com um link para mostrar a notícia             _root.tfLista.htmlText += '<a href="asfunction:mostraNoticia,'+i+'">'+titulo+'</a>\n';             // vamos para a próxima notícia             i++;         }     }

A segunda é a responsável por mostrar a notícia selecionada, ela recebe a posição da noticia no xml e mostra o conteúdo no "tfConteudo".
    // função para mostrar uma notícia selecionada     function mostraNoticia(i:Number):Void {         var titulo:String;         var conteudo:String;         titulo = noticias.firstChild.childNodes.attributes.titulo;         conteudo = noticias.firstChild.childNodes.firstChild.nodeValue;         // Mostramos a notícia         tfConteudo.htmlText = '<b>'+titulo+'</b><br><br>'+conteudo;     }

E por fim carregamos o arquivo noticias.xml
    noticias.load("noticias.xml");

Bom, é isso.

Espero ter ajudado um pouco, caso tenham dúvidas postem aqui ou mandem no e-mail. responderei o mais rápido possível.

Até a próxima.

link falando sobre CDATA.
http://www.w3schools.com/xml/xml_cdata.asp

Arquivo anexo: Clique aqui para download

compartilhe

Links patrocinados

Últimos artigos do editor

Loop de som em AS3
Fazendo um som ficar em loop.

Como fazer uploads de arq.
Esse é um recurso muito inte.

> clique aqui para comentar
Opinião do leitor:

3 Comentário(s)

Beto Rochaz comentou:

Bruno, usei acentuação mas o arquivo não reconhece ou não lê. Tem jeito? Abs.

Publicado em: 20/05/2008 - 09:21

Bruno Leles comentou:

O link para o arquivo já está no artigo, ele está bem abaixo do "Anúncios Google". Ele está meio escondido mesmo. :]

Publicado em: 30/08/2007 - 09:15

Killerki comentou:

parece legal, poe um link para download completo!

Publicado em: 29/08/2007 - 22:24

Acesso restrito

Destaques

ÍCONES BR
A maior coletânea de ícones do Brasil. Faça suas buscas de ícones, e encontre em forma de filtro.

Cadastre-se
Com o cadastro você recebe as novidades da semana e pode participar das promoções do portal.

Assine nosso RSS
Assine nossos RSS e recebe as novidades do site em seu leitor.

Autor

Bruno Leles
Site do colunista

Artigos Relacionados

Loop de som em AS3
Quebra-Cabeça com Flash e Action.
Efeito Máscara no FLASH
Inserindo Arquivos de Texto no F.

Novos Artigos

Curso de Visual Basic - Aula 3 -.
Instalando e executando o MSN no.
FDIS ISO 9001:2008 já está dispo.
Sistema de Login com Jquery

Notícias Relacionados

Concurso premia melhores sites c.
Arquivos flash serão indexados n.
Impacta oferece curso intensivo .
Últimos dias para participar do .