galeriaxml

/ Tutoriais

Criando galeria de imagens com XML e ActionScript

Tutorial

A utilização de arquivos XML para armazenar informações e permitir seu uso futuro é algo que se tornou bastante comum na web. Esse tipo de arquivo permite que sejam criados sites com conteúdos facilmente editáveis, evitando que seja necessário modificar o código-fonte dos sites cada vez que se queira atualizar algum conteúdo.

Neste tutorial irei explicar como carregar um arquivo XML e utilizar as informações armazenadas nele para gerar uma galeria de imagens.

A seguir está descrita a estrutura do arquivo XML:

Cada tag de imagem define o caminho para o arquivo onde a imagem está armazenada e o título da imagem correspondente.

O arquivo .fla da galeria possui a seguinte estrutura:

Estrutura do arquivo .fla

Estrutura do arquivo .fla

Na timeline principal existem 4 layers:

  1. A primeira reunindo todos os códigos ActionScript;
  2. A segunda contendo o container da imagem ampliada (quando uma miniatura de imagem é clicada). Esse container é composto por um MovieClip que funciona como um botão de fechar, um texto dinâmico para mostrar o título da imagem e o MovieClip vazio usado para guardar a imagem em si;
  3. A terceira contém apenas o título da galeria; e
  4. A quarta contém um MovieClip vazio que será o container das miniaturas.

Vamos agora começar a analisar o código ActionScript. Eu criei uma função chamada “Iniciar”, que estabelece o comportamento inicial da galeria. Costumo fazer isso em todas as aplicações Flash que construo, pois tudo o que acontece no momento inicial fica reunido em um único trecho de código:

As primeiras linhas estabelecem que o stage não deve sofrer mudanças se a janela for redimensionada e que o alinhamento de tudo que está no stage deve ser pela esquerda e topo. Logo após, é adicionado um listener para tratar o que deve acontecer quando a janela for redimensionada. O importante a saber até aqui é que eu disse à aplicação que vou tratar manualmente o redimensionamento da janela.

As próximas 3 linhas apenas inicializam os MovieClips da imagem ampliada, além de fazer com que o botão de fechar dela escute um evento de clique de mouse. A função que é chamada com esse clique fecha a janela da imagem ampliada.

Agora vêm as linhas de código mais relevantes para o nosso objetivo: o trecho que irá carregar o arquivo XML. O URLRequest captura as informações da URL passada como parâmetro para seu construtor e essas informações são utilizadas pelo URLLoader para efetuar o download do arquivo. Adicionei dois listeners: um para monitorar o progresso do download e um que receberá o evento de conclusão.

Vamos agora à função que é chamada quando o download do arquivo XML é concluído:

O que essa função faz é instanciar um objeto da classe XML, sinalizar que nenhuma imagem foi carregada ainda e chamar a função que se responsabilizará por carregar as imagens.

O próximo trecho a ser analisado é a função que carrega as imagens:

A função começa verificando se o contador de imagens carregadas ultrapassou a quantidade de imagens no arquivo XML. Ao usar xml.imagem obtemos uma estrutura com todas as estruturas de imagens do arquivo e podemos iterar nessas imagens, além de saber a quantidade total delas. A função só continua executando se a quantidade de imagens carregadas não ultrapassou a quantidade total.

Na biblioteca do .fla eu criei um MovieClip para representar a miniatura da imagem e permiti que ele pudesse ser instanciado dinamicamente no código. Dessa forma fui capaz de executar new Imagem(). Guardei nesse MovieClip o título da imagem como um novo atributo e o posicionei corretamente no container de miniaturas.

Finalmente, iniciei o carregamento da imagem de fato, utilizando a classe Loader. Mais informações sobre ela podem ser encontradas nos nossos tutoriais e na referência da API do ActionScript.

Agora iremos analisar mais 3 funções:

A função CarregouImagem é disparada quando o carregamento de uma imagem é concluído. Ela resgata a última miniatura do container usando getChildAt(0). Isso porque quando eu criei uma nova miniatura, adicionei exatamente no índice 0 usando addChildAt. Nessa miniatura eu removo o MovieClip que mostrava um loading e adiciono a imagem carregada. Após isso, inicializo alguns atributos e torno essa miniatura um botão que permitirá a ampliação da imagem. Por fim, incrementa-se o contador de imagens carregadas e dispara-se o carregamento da próxima.

A função que amplia a imagem faz o seguinte: cria um clone da imagem, torna visível o container de imagem ampliada, atribui o título da imagem e adiciona no container o clone criado anteriormente. No final, redimensiona a imagem para ocupar toda a tela. Este redimensionamento foi explicado em um outro tutorial, portanto não irei explicar novamente.

A última função (FecharImagemAmpliada) simplesmente remove do container a imagem que foi ampliada e torna esse container invisível, para que o usuário possa escolher uma nova imagem.

Não irei entrar no mérito das funções que são chamadas quando a janela é redimensionada, pois elas não fazem parte do escopo deste tutorial. Mas se tiverem curiosidade sobre elas, podem perguntar que responderei nos comentários.

É isso, pessoal. Espero ter sido o mais claro possível e que este tutorial seja útil para vocês. Como foi meu primeiro tutorial, posso não ter sido muito didático, portanto estarei atento às críticas e questionamentos de vocês.

Vocês podem fazer o download do código em Tutorial galeria XML



Virtualize Soluções Digitais

Empresa especializada na criação de sites, desenvolvimento de jogos, de aplicativos para celular e para redes sociais como o Facebook. Localizada em Salvador - BA.