Carregar imagens de um XML, por Rafael Eltz

Oi, hoje vou escrever meu primeira artigo para a PlugMasters, explicando melhor como carregar uma imagem de um xml no flash. Eu usei o Flash 8, mas esse tutorial serve para o Flash MX também. Então, vamos começar com a parte no Flash, e em sequida criaremos o XML...

Abra seu Flash e crie um novo documento ( eu usei 400*150px). Selecione a Rectangle Tool e desenhe um quadrado com borda de 3,5px no centro do palco do flash, no frame 1. Selecione somente o quadrado, sem selecionar a borda, e converta para um MovieClip e coloque o nome de "img". Esse movieclip receberá a imagem carregada do xml.

Após isso, no mesmo frame e layer, desenhe duas setas opostas, uma ao lado direito do MovieClip (com o nome de proxima) e outra na esquerda (com o nome de anterior). Selecione a ferramenta de texto e insira um texto de campo dinâmico em cima do MovieClip, com o nome de "nome". Esse texto receberá o nome do arquivo carregado. Digite "Carregado..." no campo e modifique o alinhamento para Right.

Após desenhar os componentes, sua aplicação deve ficar assim.

Agora, crie uma nova layer com o nome de Actions. No primeiro frame, insira o seguinte código:

//inicio
// habilita o uso de caracteres especiais
System.useCodepage = true;
// cria uma nova variavel xml
var nomeXML:XML = new XML();
// carrega o arquivo xml
nomeXML.load("meuXML.xml");
// ignora espeços em branco
nomeXML.ignoreWhite = true;
// variavel que sera usada como posição atual
a=0;
// ao carregar o xml...
nomeXML.onLoad = function() {
    // total é a variável que recebe o número total de nós do XML
    total = this.childNodes.length;
    // carrega no img0 o link para img que está no nó 0 IMAGEM
    img.loadMovie((this.childNodes[a].attributes.imagem), 0);
};

proxima.onPress = function(){
    // testando para verificar se não é a última posição do XMl
    if (a+1<total){
        // auto-incremento
        a=a+1;
        //campo nome recebe nome do arquivo
        nome.text = (nomeXML.childNodes[a].attributes.imagem);
        // carrega a imagem
        img.loadMovie((nomeXML.childNodes[a].attributes.imagem), 0);
    }
};

anterior.onPress = function(){
    // testando para verificar se não é a última posição do XMl
    if (a-1>=0){
        // auto-incremento
        a=a-1;
        //campo nome recebe nome do arquivo
        nome.text = (nomeXML.childNodes[a].attributes.imagem);
        // carrega a imagem
        img.loadMovie((nomeXML.childNodes[a].attributes.imagem), 0);
    }
};
//by Rafael Eltz - www.rafaeleltz.com.br - eltz_nh@hotmail.com - ;]
//fim

Feito isso, salve sua aplicação. A etapa do tutorial em flash está concluída.
Agora abra seu Dreamweaver ou até mesmo o bloco de notas para criar seu arquivo XML. Eu usarei o Dreamweaver MX2004.

Crie um novo documento XML, e insira esse código:

<?xml version="1.0" encoding="iso-8859-1"?>
    <item imagem="imagem1.jpg"/>
    <item imagem="imagem2.jpg"/>
    <item imagem="imagem3.jpg"/>
    <item imagem="imagem4.jpg"/>
    <item imagem="imagem5.jpg"/>

Salve com o nome de meuXML.xml.

Execute a aplicação no Flash. Seu visualizador de imagens de um xml está pronto!

Espero que tenham gostado...

Até... ;]

Lucas - Core <lukas_jf69@hotmail.com>

Tutorial muito bom, só que eu tenho uma dúvida sobre.
Quando eu termino e vou testar, as imagens sempre estão ficando grandes, maiores do que a área destinada a elas!
Você pode me ajudar Rafael?

Francisco Phereira <franchasing@hotmail.com>

Muito bom o tuto ! Pra melhorar mais ainda ficaria melhor assim:
http://www.jornalvisaoonline.com.br/photo_slide.swf

Júnior Martins <juninho_cpo@hotmail.com>

Muito bom... simples e direto sem muito "blá blá blá..." parabéns! continui assim! abraços

Glauber Rodrigo <glauberodrigo@msn.com>

Ola! era o q eu estava prucurando.
Mas eu queria saber se vcs poderiam me ajudar em mais uma coisa. Como faço para colocar links nas fotos carregadas. Se for possível faça um outro tutorial explicando como colocar links em fotos carredadas em xml. Valeu mesmo!!!

Marcelo Sales <macelinho2003@yahoo.com.br>

po eu to atras de algo assim porem sou leigo em actions, sendo assim nao sei o que deve realmente dever ser digitado em actions. por exemplo tem umas barras // isso é pra colocar ou nao? desculpe a minha ignorancia!

Romer Santos <romer.santos@hotmail.com>

eeaw, cara muito bom mesmo o tutorial, O LUCAS!!! la tem um quadrinho de tamanho 300 x 80

então vc teria que no caso redimensionar suas imagens para este tamanho, ou entao vc vai la no quadro e aumenta ele faça do jeito que achar melhor...

Voltando ao assunto, poderia me dizer como faço para que apareço um nome que eu quizer e nao o nome do arquivo? como no exemplo aparece imagem1.jpg tem como por um codigo no xml para carregar a imagem1.jpg mas aparecer um nome que eu quizer?

Glauber Rodrigo <glauberodrigo@msn.com>

Estou enviando outro comentário para mostrar mais um exemlo de como carregar imagens de um arquivo xml. O do site http://www.cresce.net/site/index.php é um ótimo exemplo. E queria saber se tem alguém q saiba fazer um mais ou menos parecido. Obrigado

Rafael Eltz <eltz_nh@hotmail.com>

oi, brigado pelo comentários. Eu vou tentar até semana que vem mostrar mais um exemplo de galeria, um pouco mais complexo, para mostrar uma evolução no desenvolvimento de vcs. Aguardem...

Claper <dclaper@yahoo.com.br>

Rafael gostei muito desse exemplo, porém quando hospedo na internet a action não funciona e não carrega o xml, ele dá essa mensagem:
A página XML não pode ser exibida
Não é possível exibir a entrada XML usando a folha de estilos XSL. Corrija o erro e clique no botão Atualizar ou tente novamente mais tarde.

--------------------------------------------------------------------------------

Em um documento XML só são permitidos elementos de nível superior. Erro ao processar o recurso 'file:///C:/Yx/Zeroº/imagens...

<item imagem="imagem2.jpg"/>
-

Como resolvo isso!
valeu

Vivilene <vivilisboa@yahoo.com.br>

Muito bom! Parabéns pela simplicidade.
Só uma duvida, tem como deixar incluir algum comando para quando chegar na ultima imagem voltar para a primeira?

Douglas <doasougui@hotmail.com>

Muito legal, agora é só melhorar a parte do layout pra ficar show!!!
Parabéns cara!

Abraço

sanaly <sanaly@yahoo.com>

show de bola!!

William <williamfoose@gmail.com>

Muito bom. Gostei muito do Tuto. Mas quetia saber. Como faço para Usar os Botoes seta para esquerda e direita?

Cleirton <francleirton@ibest.com.br>

Ótimo tutorial, vlw

Gabriel Taig <taig222@hotmail.com>

Muito bom direto e sem complicações. Para iniciantes com eu da uma ótima clareada no assunto