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
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
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".
