José Carlos Web Designer | Freelancer

JOSÉ CARLOS ARAÚJO

Web Designer freelancer com mais de seis anos de experiência no desenvolvimento de web sites, residente na cidade de João Pessoa - PB.

Blog

Siga-me no twitter

Assinar Feed RSS

Tutorial: Galeria Flash + XML

// 24.04.2007
Flash, Tutoriais, XML


Preparei este tutorial para mostrar a integração do Flash com o XML para criação de uma simples galeria.

O resultado final será semelhante a este:
Resultado Final Galeria


Começaremos criando uma pasta com o nome de “fotos” e colocaremos as fotos que serão exibidas, para este exemplo utilizaremos: foto1.jpg, foto2.jpg, foto3.jpg e foto4.jpg. Todas no tamanho 384×322px.

Agora vamos para o arquivo galeria.xml, utilize o seu editor de preferência e adicione o seguinte código:
<?xml version="1.0" encoding="iso-8859-1"?>
    <galeria>
      <foto imagem="fotos/carro1.jpg" titulo="Carro 1" legenda="Descrição carro 1"/>
      <foto imagem="fotos/carro2.jpg" titulo="Carro 2" legenda="Descrição carro 2"/>
      <foto imagem="fotos/carro3.jpg" titulo="Carro 3" legenda="Descrição carro 3"/>
      <foto imagem="fotos/carro4.jpg" titulo="Carro 4" legenda="Descrição carro 4"/>
   </galeria>

Salve no mesmo nível da pasta “fotos”.

Abra um novo documento no flash com o tamanho de 384×322px, crie mais 2 layers e nomeie as três com os seguintes nomes (obedecendo a seqüência):

  • Actions
  • Botões
  • Espaço

Layer Espaço:
Crie um MovieClip em branco e arraste para o palco, no canto superior esquerdo, instanciando com o nome de “espaco”

Layer Botões:
Crie uma barra com preenchimento de 50% na cor que desejar no tamanho 384×54px e coloque-o no canto inferior esquerdo.

Crie os botões que serão para passar para a imagem anterior ou próxima imagem e instancie com os nomes: “anterior” e “proximo“ respectivamente.

Com o TextTool crie 2 Dynamics Texts, instanciados com os seguintes nomes: “titulo” e “legenda”.

A imagem deverá ficar parecida com esta:
Ítens

Layer Actions:
Para finalizar, clique no 1º frame e abra o painel actions (F9) e adicione o seguinte código:

//Utilizado para que o flash interprete os acentos
System.useCodepage = true;

//Declaração das variáveis e tipos
var espaco:MovieClip;
var anterior:Button;
var proximo:Button;
var titulo:TextField;
var legenda:TextField;
var j:Number = 0;

//Declaração do XML
var arquivo:XML = new XML();
//Arquivo que será carregado
arquivo.load(“galeria.xml”);
//Ignorar espaços em branco do XML
arquivo.ignoreWhite = true;
//função responsável pela exibição das imagens
function carregaItens(num:Number) {
//verifica a quantidade de ítens do XML
qteXml = arquivo.childNodes[0].childNodes.length;
//quando for clicando e chegar ao final das imagens, carrega a primeira novamente
if(j>=qteXml){
j=0;
//quando for clicando e chegar ao início das imagens, carrega a última
} else if(j<0){
j=qteXml-1;
}
//carregar a imagem dentro do MovieClip "espaco"
espaco.loadMovie(arquivo.childNodes[0].childNodes[j].attributes.imagem);
//atribuindo o valor ao DynamicText "titulo"
titulo.text = arquivo.childNodes[0].childNodes[j].attributes.titulo;
//atribuindo o valor ao DynamicText "legenda"
legenda.text = arquivo.childNodes[0].childNodes[j].attributes.legenda;
}
//função para carregar o próximo ítem
function exProx(){
j++;
carregaItens(j);
}
//função para carregar o ítem anterior
function exAnt(){
j--;
carregaItens(j);
}

//carregar o primeiro item da galeria
arquivo.onLoad = carregaItens;
//eventos dos botões
proximo.onRelease = exProx;
anterior.onRelease = exAnt;

[ Baixar Galeria ]

Bookmark and Share

Posts Relacionados


20 comentários para “Tutorial: Galeria Flash + XML”

  1. Rodrigo Medeiros disse:
    25 de abril de 2007 às 8:41 am

    Muito bom, uma outra maneira de fazer, e dessa vez independente dos painéis do Flash. Vlw :D

  2. Pedro Paulo disse:
    6 de maio de 2007 às 5:07 pm

    muito bom… mas depois se puder corrige ai o espaço com “ç” na hora que manda instanciar…
    quem seguir vai se confundir…
    falou…

  3. Lust mouse disse:
    14 de outubro de 2007 às 5:09 pm

    muito bom e facil de modificar ^^
    tava procurando assim faz muito tempo e achei por engano seu blog e essa galeria maravilhosa

    ah poe ae no tuto q vc pode por .swf alem d imagem pra exibir

  4. ruy disse:
    18 de novembro de 2007 às 4:50 pm

    muito boa essa galeria, como estou iniciando o aprendizado de criação em flash consegui com exito fazer esta galeria.

  5. Rogerio Leal disse:
    30 de dezembro de 2007 às 7:34 pm

    Você é o cara! Gasta seu tempo para ajudar as pessoas. Vou pedir uma coisa, tem como as fotos dos carros ficarem alternando de 10 em 10 segundos? Se puder me mandar instruções de como fazer, ficarei muito grato.
    Sucesso e Feliz Ano Novo!

  6. João Gabriel TAIG disse:
    11 de março de 2008 às 7:31 pm

    vlw kra me ajudo mt

  7. Regis Rodrigo Dobre disse:
    28 de março de 2008 às 10:14 am

    Obrigado José, esse tipo de programação sim, é coisa de programador que entende, parabéns, seu script é de fácil entendimento, eficiente e com poucas linhas de código, resumindo é perfeito. Obrigado mesmo.

  8. Livia disse:
    7 de maio de 2008 às 9:33 am

    Nossa!!! Mtoo obrigada!!!
    Funcionou legal aki!! xDD o//

  9. Santiago disse:
    15 de maio de 2008 às 3:15 pm

    muito bom,
    realmente o Ç
    ferra com agnte
    xD
    mas com atenção agnte resolve…
    vlw, tão simples e a galera complica tanto…

  10. mossoro disse:
    29 de maio de 2008 às 8:47 am

    Cara achei muito legal, como poderia fazer pra que alternasse a cada 5 segundos?

  11. ruy disse:
    4 de junho de 2008 às 2:17 pm

    Boa tarde!
    Eu tinha o Sr. no meu msn, se mudou peço se possível me adicionar em seu novo ruy@emultiserver.net ou ruyur@hotmail.com, o ano passado o Sr. me auxiliou muito no desenvolvimento de uma galeria de fotos. mas agora necessito de uma grande ajuda e disposto a pagar pela mesma.

  12. Cleiton disse:
    23 de julho de 2008 às 3:47 pm

    Excelente galeria simples mas muito funcional..parabens….

  13. maykon disse:
    11 de agosto de 2008 às 5:02 pm

    cara mto bom mesmo so gostaria de saber se ha um maneira simples de colocar um preloader antes das fotos serem abertas !! obrigado

  14. Noedir C. Filho disse:
    29 de janeiro de 2009 às 10:35 pm

    CARA, VOCÊ SALVOU MINHA VIDA!!!!

    E de quebra, me fez ir dormir mais cedo.

    Parabéns e muito obrigado.

  15. Noedir C. Filho disse:
    29 de janeiro de 2009 às 11:32 pm

    A única coisa que acrescentei foi para trocar as imagens com tempo regular de 7 segundos.

    Segue o código que acrescentei no final do código:

    setInterval(function(){
    espaco.onEnterFrame = exProx;
    }, 7000);

    Para aumentar ou diminuir o tempo, altere o valor 7000 (onde 1000 = 1 segundo).

    Vlw

  16. José Carlos Araújo disse:
    30 de janeiro de 2009 às 2:16 pm

    @Noedir
    Obrigado pela colaboração!

    Abraço

  17. Diego lopes disse:
    14 de junho de 2009 às 2:19 pm

    Muito boa essa galeria mesmo, faz bem o ke tem ke fazer, coloquei o codigo para slidshow funcionol blz, alguem sabe como posso colocar um efeito de tranzição mais elaborado emtre as fotos, ia fica animal, se conseguir algo eu posto, abração toda a raça ai…

  18. Anderson disse:
    27 de junho de 2009 às 3:31 pm

    Como devo fazer para adicionar links na descrição ou na imagem?

  19. José Carlos Araújo disse:
    27 de junho de 2009 às 3:48 pm

    Você precisará criar mais um atributo no nó do xml, com o endereço do link. Após isso você precisará criar um link transparente em cima da legenda e instanciá-la. Após isso, na parte da action que ele “insere” a legenda só precisa fazer com que leia o atributo do link, do mesmo estilo dos outros.

  20. Georgia Nunes disse:
    5 de janeiro de 2010 às 10:54 am

    Foi o primeiro que realmente deu certo!!!!!!!!
    Cara, muito bom!!
    Valew!

    ^^

Deixe um comentário


(*) Campos obrigatórios



W3C valid XHTML 1.1 and CSS 2.1

José Carlos Araújo | Web Designer