[TUTORIAL]Galeria + XML em AS2

[Thiago de Oliveira Cruz 21]

Lá vou eu denovo ensinar como se faz mais uma coisa ;)

 

Esse tutorial também está postado em meu blog

http://berseck.wordpress.com

 

Aqui vai um tutorial bem basico para aqueles que gostam de ActionScipt2

 

Aqui vou ensinar agora como criar uma galeria em AS2

 

Para isso vamos montar um palco 600x400 para isso basta precionar ctrl + j ou ir em modificar(modify) palco(document) e lá mudar o tamanho do width para 600 e o heigth para 400

Como mostra a figura:

 

Após modificar o tamanho da imagem vamos criar agora 2 botões

1 para ir e outro para voltar

Cria 2 movie clips e instancie-os 1 como vai outro como volta

 

Se quiser fazer no formato de seta é uma boa ideia :)

 

Agora vamos lá para o código

 

Vá ao palco crie uma layer chamada Action Script

e nela coloque o seguinte código:

//Crio os MovieClips necessários
var foto:MovieClip = duplicar();
var duplicate:MovieClip = new MovieClip();
var mcl:MovieClipLoader = new MovieClipLoader();
var newX:Number;
//Monto minhas Arrays
var fotos:Array = new Array();
//Declaro meus Números
var max:Number = 0;
var total:Number = 0;
var p:Number = new Number();
var inic:Number = 0;
var page:Number = 1;
var newX:Number;
//Crio os clips a serem carregados
var alvo:MovieClip = _root.createEmptyMovieClip("alvo",-16384);
//Pego o tamanho do palco
var StageW:Number = Stage.width;
var StageH:Number = Stage.height;
//Digo a posição inicial das fotos no palco - centralizando-as
alvo._x = StageW/2;
alvo._y = StageH/2;
//Pego os valores de altura, largura, x e y dos clips
var alvoX:Number = alvo._x;
var alvoY:Number = alvo._y;
var alvoWidth:Number = alvo._width;
var alvoHeight:Number = alvo._height;
//carrego o XML
var xml:XML = new XML();
xml.ignoreWhite = true;
xml.onLoad = function(success){
if(success){
var cn = xml.firstChild.childNodes;
total = cn.length;
if(total > 10) max = 0;
for(i = 0; i <>
fotos[i] = cn[i].attributes.foto;
}
inicia();
} else {
trace("XML não existe / erro ao carregar");
}
}
xml.load("fotos.xml");
//Duplico os clips para fazer uma miniatura das imanges
function inicia(){
for(var i:Number = 1; i <= 10; i++){
newX = i * (50);
duplicate = foto.duplicateMovieClip("foto-"+i, i, {_x:newX});
mcl.loadClip(fotos[inic], duplicate);
inic++;
}
}
//Crio o clip que vai ser duplicado
function duplicar():MovieClip {
var mc:MovieClip = _root.createEmptyMovieClip("foto", this.getNextHighestDepth());
mc._x = 0;
mc._y = 350;
return mc;
}
//Função ao iniciar clip centralizo e coloco um botão em cada foto
function onLoadInit(duplicate){
scala(duplicate)
if(duplicate._width <>
duplicate._x = duplicate._x + ((50 - duplicate._width)/2);
}
redimensionar(alvo);
alvo._x = alvoX + (alvoWidth/2) - (alvo._width/2);
alvo._y = alvoY + (alvoHeight/2) - (alvo._height/2);
tamanho(duplicate);
duplicate.onPress = function(){
var string = targetPath(duplicate).split("-");
p = string[1];
p = p - 1;
if(max >= 10){
p = max+p;
}
var pic:String = fotos[p].toString();
mcl.loadClip(pic, alvo);
}
}
//Modifico a scala das fotos fazendo com que elas fiquem pequenas
function scala(duplicar){
while(duplicar._width > 50){
duplicar._xscale = duplicar._yscale -= 1;
}
}
// Redimensiona para fazer a foto ficar grande
function redimensionar(alvo){
alvo._xscale = 100;
alvo._yscale = 100;
if(alvo._width > alvo._height and alvo._width > StageW){
alvo._xscale = ((StageW)*(100))/alvo._width;
alvo._yscale = alvo._xscale;
}
else if(alvo._height > alvo._width and alvo._height > StageH){
alvo._yscale = ((StageH)*(100))/alvo._height;
alvo._xscale = alvo._yscale;
} else {
alvo._xscale = 100;
alvo._yscale = 100;
}
}
//Aplico meus botões de vai e volta
vai.onPress = function(){
if(page == (total/10)) {
inic = (total - 10);
page = total/10;
max = (total-10);
inicia();
}else {
page++;
max += 10;
inicia();
}
}
volta.onPress = function(){
if(page == 1) {
inic = 0;
max = 0;
page = 1;
inicia();
}else {
inic -= 20;
page--;
max -= 10;
inicia();
}
}
 //adiciono o listener
mcl.addListener(this);

XML:

<?xml version="1.0" encoding="utf-8"?>
<fotos>
	<foto foto="foto1.jpg" />
</fotos>

Abraços

Espero que gostem

 

;)

 

Link para download:

Clique Aqui

[brcontainer 16]

Ae berseck põe no blog o tuturial do EMAIL com FLASH tambem ;)

Parabens

 

[editado]Seria interessante por umas legendas em Tooltip ;)

[Matheus Brito 12]

Parabens, mesmo sendo um assunto já bastante difundido, é sempre bom ter referências.

Abs

[dcpeixoto 0]

Muito, muito bom, está de parabéns!

[cyhermanny 0]

Apesar de muito bem comentado, eu não entendi como as miniaturas são criadas... Acho que é porque sou iniciante

em ActionScript. O importante é que alterei o tamanho do stage e a posição das fotos grandes e das miniaturas, e

testei com as minhas fotos. Deu tudo super certo. você me ajudou bastante, obrigada. Agora, vou tentar colocar um texto com o título das fotos.