Vou mostrar, nesta matéria, como criar um sistema de galeria de imagens no Flash acessando dados vindos de um XML.

Primeiro passo: Crie um MovieClip, e colocando o seu registration no canto esquerdo superior, dê o nome a ele de "item_mc" (sem aspas!) e marque a opção export for ActionScript, como mostra a imagem abaixo.

Dentro do MovieClip "item_mc"(sem aspas!), insira um MovieClip vazio e dê um instance name para ele de "foto" (sem aspas!). Você pode também desenhar um quadrado, como mostra a figura abaixo, e mascarar o MovieClip "foto". Fique tranquilo, se por acaso a foto pequena for de tamanho diferente, a máscara não estraga a formatação das posições das fotos.

Coloque um MovieClip vazio, e dê a ele o instance name de "container" (sem aspas!). Esse MovieClip irá receber todos os MovieClips das fotos dentro dele. Observe na imagem abaixo:

Vamos colocar outro MovieClip vazio com o instance name de "fotog"(sem aspas!), que também está mascarado para evitar que a foto prejudique o layout da sua aplicação. Como mostra a imagem abaixo:

Agora, com todos os objetos criados, vamos começar a programar... :D

O arquivo XML, você pode baixar clicando aqui.

Importe a classe tween para animar os movieclips que irão carregar as fotos. Caso você tenha interesse em olhar o código da classe, ela encontra-se no diretório (mx\effects\Tween)

import mx.effects.Tween;

Definindo as variáveis:

i = Use como índice para percorrer o XML: seu valor inicial é 0
len = Irá receber o valor total de nós, daremos um valor inicial de 0 também, pois ainda não sabemos quantos nós temos no XML
coluna = Equivale a cada coluna onde o MovieClip vai se posicionar, valor inicial também 0
linha = Equivale ao valor do numero das linhas, valor inicial também 0

var i:Number = 0, coluna:Number = 0, linha:Number = 0,len:Number = 0;

Vamos usar o Array de dados para acessar o conteúdo existente no XML, de forma mais prática e rápida.

var dados:Array;

Crie um objeto da classe MovieClipLoader para carregar as fotos existentes no XML;

var carregar:MovieClipLoader = new MovieClipLoader();

Defina a variável "fotos", que vai receber um objeto da classe XML.

var fotos:XML = new XML();

A propriedade ignoreWhite ignora os espaços em branco contidos no XML.

fotos.ignoreWhite = true;

O método load recebe como argumento a URL do arquivo XML que será carregada.

fotos.load("fotos.xml");

Evento onLoad da classe XML é executado quando os dados são carregados, ou seja, a partir desse momento podemos usar o conteúdo existente no XML.

fotos.onLoad = function():Void{

Atribuindo o valor inicial de 0 para as variáveis "i", "coluna", "linha"

i = coluna = linha = 0;

Atribua agora a variável len, a quantidade de nós do XML, usando a propriedade length

len = this.firstChild.childNodes.length;

Atribuindo agora um valor à variavel "dados" do XML;

dados = this.firstChild.childNodes;

Execute a função preencher, passando como argumento as variáveis "coluna" e "linha";

preencher(coluna,linha);}

function preencher(coluna:Number,linha:Number):Void{

Defina uma variável chamada "mc", e vamos usar o método attachMovie, do MovieClip "container", que vai receber três argumentos.

01. "item_mc", que foi definido no linkage do movieclip item_mc;
02. depois informamos qual será o novo nome do movieclip;
03. e, por fim, o nível em que ele irá ficar.

Para isso, usaremos o método getNextHighestDepth, que vai retornar o nível imediatamente mais alto.

var mc:MovieClip = container.attachMovie("item_mc","i["+coluna+"]["+linha+"]",container.getNextHighestDepth());

Atribua à propriedade _x o cálculo para posicionar o MovieClip na posição x - correta de acordo com a coluna em que se encontra, e usando o método estático round da classe Math, para arredondar esse valor:

mc._x = Math.round(coluna * mc._width + coluna);

Atribua à propriedade _y o cálculo para posicionar o MovieClip na posição _y - correta de acordo com a linha em que se encontra, e usando o método estatico round da classe Math, para arredondar esse valor:

mc._y = Math.round(linha * mc._height + linha);

Atribua o valor 0 para as propriedades _xscale e _yscale;

mc._xscale = mc._yscale = 0;

Crie a variável "url_fotop", que vai receber do XML o endereço da foto que deve ser carregada. Usando a variável "dados" que é do tipo array, e acessando o nó do XML correto a partir da variável "i", use a propriedade attributes da classe XML, e o nome do atributo definido no XML - que no caso é "fp" (sem aspas):

mc.url_fotop = dados[i].attributes.fp;

A variável "url_fotog" é semelhante à "url_fotop", só que irá receber o atributo "fg" (sem aspas), que é a url da foto grande:

mc.url_fotog = dados[i].attributes.fg;

Defina o evento onRelease, para que quando o MovieClip seja clicado, ele execute a função carregarFoto, e passe os argumentos da função

mc.onRelease = function():Void{

Executar a função carregar e passar os argumentos url e target.

carregarFoto(this.url_fotog,fotog);
}

Defina o evento onTweenUpdate da classe Tween no "mc" (sem aspas). Esse evento receberá como argumento um valor a cada interpolação da tweenclass, que será atribuído às propriedades _xscale e _yscale.

mc.onTweenUpdate = function(p):Void{
this._xscale = this._yscale = p
}

Executando a função animate e passando como argumento o movieclip que foi attachado.

animate(mc);
}

Agora crie a função carregarFoto, passando como argumento a URL da foto e o TARGET, que é o movieclip onde será carregada a foto.

function carregarFoto(url:String,target:MovieClip):Void{

Use o método loadClip da classe MovieClipLoader, que irá receber os argumentos passados na função:

url (que é o tipo String) e target (que é do tipo MovieClip)

carregar.loadClip(url,target);
};

Defina a função animate, que vai receber como argumento o MovieClip que será animado, usando a TweenClass.

function animate(mc:MovieClip):Void{

Crie um objeto da classe Tween para cada MovieClip, passando os seguintes argumentos:

mc -> nome do objeto usado pela tween (o próprio MovieClip que foi attachado anteriormente)
0 -> valor inicial
100 -> valor final
400 -> tempo em milisegundos

mc.tween = new Tween(mc,0,100,400);

Evento onTweenEnd é executado quando ocorrem todas as interpolações na animação.

mc.onTweenEnd = function():Void{

Execute a função carregarFoto, passando o valor da variável "url_fotop" e MovieClip "foto". Sendo eles os argumentos, necessários para a função.

carregarFoto(this.url_fotop,this.foto);

Incremente as variáveis "i" e "coluna".

i++,coluna++;

Use a condicional if para verificar se a variável "coluna" é maior que 2. Caso seja, zere a mesma e incremente a variável "linha", para ir para a linha seguinte;

if(coluna > 2){
coluna=0;
linha++;
};

E outra condicional para verificar se a variável "i" é maior que a variável "len", e executar a função preencher, passando os valores das variáveis "coluna" e "linha".

if(i < len){
preencher(coluna,linha);
};
};
};

Espero que tenham gostado. Abraço a todos!