Tutorial de Integração Flash + XML - Parte 2

Daremos continuidade ao nosso sistema de fotos com Flash e XML. Nesta segunda parte você aprenderá como incluir botões, efeitos alfa e um preloader.

por Rafael Costa

Vamos começar agora a segunda parte do tutorial.

Nesta parte, você vai aprender a incluir botões de avançar e voltar, efeito alfa nas fotos e um preloader.

O resultado final pode ser visto aqui: http://www.rafaelcosta.com/xml/xml.html

Mãos à obra.

No primeiro artigo eu já tinha criado o clipe de filme e o texto dinâmico pra receberem os valores do arquivo XML. O que vamos criar agora? Mais dois clipes de filme, que serão as setas de avançar e voltar; e um clipe de filme com a animação do seu preloader.

Para criar os mc’s, vá em “Insert >> New Symbol ( Ctrl + F8 ) >> Type: Movie Clip”.

O desenho das setas e a animação do preloader ficam a seu critério.

Instancie as setas como “voltar” e “avancar” (sem aspas); e a animação como “carregando” (sem aspas).

Posicione as setas em qualquer lugar do palco. Feito isso, vamos ao código.

Neste tutorial, usaremos a Classe Tween da Laco. Caso não tenha instalada, faça o download aqui: http://laco.wz.cz/tween/?page=download

Vamos seguir o mesmo código do tutorial anterior, que a versão final ficou assim:

System.useCodepage = true;

var arquivo:XML = new XML();

arquivo.load("arquivo.xml");

arquivo.ignoreWhite = true;

arquivo.onLoad = function() {

clipe.loadMovie(this.childNodes[0].childNodes[0].attributes.imagem);

legenda.text = this.childNodes[0].childNodes[0].attributes.legenda;

}

Agora precisamos importar a classe do Laco e criar uma variável para nos auxiliar na “contagem” das fotos.

Coloque este código nas duas primeiras linhas:

#include "lmc_tween.as"

i=0;

Na primeira linha importamos a classe e na segunda declaramos uma variável.

Agora precisamos criar 3 funções. Uma para carregar a foto, uma para alinhar os objetos ao centro do palco (opcional) e outra para ativar o preloader.

Cada linha de código terá uma explicação ao lado para facilitar o entendimento.

Coloque agora sua animação do preloader no palco, para que ela possa ser alinhada.

O código das funções é:

function alinhar() {

clipe.tween("_x",Stage.width/2 - largura/2, 2, "easeElastic"); // alinhar a foto ao meio do palco horizontalmente

clipe.tween("_y",Stage.height/2 - altura/2, 2, "easeElastic"); // alinhar a foto ao meio do palco verticalmente

carregando.tween("_x",Stage.width/2, 2, "easeElastic"); // alinhar o preloader ao meio do palco horizontalmente

carregando.tween("_y",Stage.height/2, 2, "easeElastic"); // alinhar o preloader ao meio do palco verticalmente

}

function carrega() { // cria a função para carregar

clipe.loadMovie(arquivo.childNodes[0].childNodes[i].attributes.imagem); // carrega a imagem

legenda.text = arquivo.childNodes[0].childNodes[i].attributes.legenda; // carrega a legenda

}

function preloader() { // cria a função para o preloader aparecer

carregando.tween("_alpha", 100, 2, "easeElastic");

}

Como nós criamos uma variável e estas 3 funções, é lógico que o código inicial, vindo do outro artigo, também vai mudar.

Substitua o antigo por:

var arquivo:XML = new XML(); // declara a variavel para ler o XML

arquivo.load("arquivo.xml"); // lê o arquivo.xml

arquivo.ignoreWhite = true; // ignora espaços em brancos no xml

arquivo.onLoad = function() {

largura = arquivo.childNodes[0].childNodes[i].attributes.largura; // largura do arquivo

altura = arquivo.childNodes[0].childNodes[i].attributes.altura; // altura do arquivo

total = arquivo.childNodes[i].childNodes.length; // pegar quantas fotos tem

alinhar();

carrega();

preloader();

}

Repare, na 5ª, 6ª e 7ª linha, que tiramos os valores numéricos e substituimos pela variável.

Isso é para que os botões de avançar e voltar, saibam em qual foto o código está.

Selecione o clipe de filme que está recebendo as fotos, instanciado como “clipe”.

Vá nas ações dele e coloque:

onClipEvent(load) { // ao carregar a foto…

this._alpha = 0; // fica transparente

this.tween("_alpha", 100, 2, "easeElastic"); // e vai ficando visível

_root.carregando.tween("_alpha", 0, 1, "easeElastic"); // o preloader some.

}

Agora precisamos colocar somente os códigos dos botões.

Esse código verificará em qual foto se encontra; caso esteja na última e tente avançar uma foto, ele volta para a primeira; caso esteja na primeira e tente voltar, ele irá para a última.

Coloque isso no final do código:

avancar.onRelease = function() { // ao clicar no avançar...

if(i == total-1) { // ...se já estiver na última foto...

i=0; // volta pra primeira

}

else { // senão...

i++; // vai para a próxima

}

preloader(); // ativa o preloader

carrega(); // carrega a foto

alinhar(); // alinha a foto no meio

}

voltar.onRelease = function() { // ao clicar no botão voltar...

if(i == 0) { // se estiver na primeira foto...

i=total-1;//... quando clicar pra voltar, vai pra última

}

else { // senão...

i--; // ... volta uma foto

}

preloader(); // ativa o preloader

carrega(); // carrega a foto

alinhar(); // alinha a foto no meio

}

Agora o código já esta estruturado. Se por algum motivo você tenha se perdido, aqui está o código completo:

// Vamos agora incluir a classe tween para aplicarmos o efeito alfa no MC

#include "lmc_tween.as"

i=0; // declara valor inicial da variavel igual a 0

System.useCodepage = true; // habilita acentos

function alinhar() {

clipe.tween("_x",Stage.width/2 - largura/2, 2, "easeElastic"); // alinhar a foto ao meio do palco horizontalmente

clipe.tween("_y",Stage.height/2 - altura/2, 2, "easeElastic"); // alinhar a foto ao meio do palco verticalmente

carregando.tween("_x",Stage.width/2, 2, "easeElastic"); // alinhar o preloader ao meio do palco horizontalmente

carregando.tween("_y",Stage.height/2, 2, "easeElastic"); // alinhar o preloader ao meio do palco verticalmente

}

function carrega() { // cria a função para carregar

clipe.loadMovie(arquivo.childNodes[0].childNodes[i].attributes.imagem); // carrega a imagem

legenda.text = arquivo.childNodes[0].childNodes[i].attributes.legenda; // carrega a legenda

}

function preloader() { // cria a função para o preloader aparecer

carregando.tween("_alpha", 100, 2, "easeElastic");

}

var arquivo:XML = new XML(); // declara a variavel para ler o XML

arquivo.load("arquivo.xml"); // lê o arquivo.xml

arquivo.ignoreWhite = true; // ignora espaços em brancos no xml

arquivo.onLoad = function() {

largura = arquivo.childNodes[0].childNodes[i].attributes.largura; // largura do arquivo

altura = arquivo.childNodes[0].childNodes[i].attributes.altura; // altura do arquivo

total = arquivo.childNodes[i].childNodes.length; // pegar quantas fotos tem

alinhar();

carrega();

preloader();

}

avancar.onRelease = function() { // ao clicar no avançar...

if(i == total-1) { // ...se já estiver na última foto...

i=0; // volta pra primeira

}

else { // senão...

i++; // vai para a próxima

}

preloader(); // ativa o preloader

carrega(); // carrega a foto

alinhar(); // alinha a foto no meio

}

voltar.onRelease = function() { // ao clicar no botão voltar...

if(i == 0) { // se estiver na primeira foto...

i=total-1;//... quando clicar pra voltar, vai pra última

}

else { // senão...

i--; // ... volta uma foto

}

preloader(); // ativa o preloader

carrega(); // carrega a foto

alinhar(); // alinha a foto no meio

}

Baixe aqui o código fonte.

Espero que tenha gostado, contiuem sempre estudando.

Qualquer dúvida é só postar aqui.

Grande abraço a todos.