Galeria em AS2

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 600×400 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);

Abraços espero que gostem

Link para download

clique aqui

6 comentários sobre “Galeria em AS2

    • Amigo para colocar legenda você precisa usar na parte que faz o duplicateMovie… assim você consegue colocar uma legenda para cada um… junto com a função de colocar um botão

      Abraços

  1. Fala ae Berseck!

    Eu novamente aqui! hahahah

    Muito bom seu tutorial hein!

    Só tenho algumas dúvidas… para variar né!

    No caso das fotos, elas terão que ser menor que o palco para encaixar perfeitamente né?
    Caso eu queria mostrar 5 fotos em miniatura por vez… tem como fazer isso?

    Eu fiz alguns testes e funcionou perfeitamente… só que queria personalizar um pouquinho! =P

    Pois queria firmar apenas um único tamanho para as miniaturas, mostrar umas 4 ou 5 fotos em miniatura por vez e implemtentar algum tipo de transição!

    que cara chato… fala sério né! hahaha

    Caso puder me dar umas dicas.. eu agradeço bastante!

    caso queira meu contato para conversar…
    e-mail: cristian.furukawa@gmail.com

    Por acaso vc faz freela?

    desde já, muito obrigado!

    abraços.

    • Elas não precisam ser menores do que o palco, pois tem um código de resize… basta você re utilizar ele passando as medidas para que as fotos nunca fiquem maiores que o palco.
      Se vc quiser 5, basta alterar o valor que ta para 10 e mudar o contador de páginas.

      Personalizar fica a seu critério…
      Sim faço freela entrarei em contato via e-mail

      Abraços

  2. kara parabens pelo tuto, mto bom, toh me batendo a algum tempo tentando fazer uma galeria simples com xml e com miniaturas, e essa se encaixou perfeitamente, soh um detalhe… quero ela maior mais qndo mudo o tamanho do palco as miniaturas naum fikam na parte de baixo.
    como eu faço para q elas fikem na parte de baixo?
    desde ja mto obrigado

    d_pallazzini@hotmail.com

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s