Ir para o conteúdo
infopc

[ActionScript] Galeria dinâmica

Mensagens Recomendadas

infopc    0
infopc

Quem não precisou já de uma galeria que carregasse as imagens de uma pasta sem ter que andar sempre a editar o .fla? Pois eu já.

Depois de algumas pesquisas e de combinar algum código, pois sou um leigo no que toca a actionscript consegui fazer uma.

Para que nem toda a gente tenha o mesmo trabalho que eu aqui fica para todos.

Em 1º lugar vamos preparar o stage.

Abrimos o flash 8 (foi o único que testei, não sei se funciona nas versões anteriores) e definimos o palco com 800px x 600px.

Criamos 6 layers com os nomes (de cima para baixo):

actionscript

texto

preloader

galeria

bgimg

contentor

Vamos agora criar os Movieclips.

Desenhamos um rectângulo na layer contentor com 120px X 80px, convertemos em movieclip com o nome thumbnail  e com a opção export to actionscript seleccionada.

Dentro do MC thumbnail renomeamos a layer para thumb e mais uma vez convertemos o rectângulo em movieclip com o nome backg e com o instancename bg.

De volta ao MC thumbnail criamos mais uma layer com o nome timage onde vamos desenhar um rectângulo, ligeiramente mais pequeno que o primeiro, alinhado ao cento. Convertemos este rectângulo em MC com o nome theimg_ e com o instance name timg.

Os rectângulos podem ser da cor desejada mas sem borda.

De volta ao palco podemos apagar o MC thumbnail do mesmo.

Na layer texto criamos uma caixa de texto dinâmica com o instance name theText com a formatação a gosto.

Na layer preloader desenhamos um pequeno rectângulo e convertemos em movieclip com o nome preloader e a instance name preloader a cor também aqui fica ao vosso critério.

Na layer galeria vamos desenhar um rectângulo. Este deve ser do tamanho que as imagens vão ter (eu usei 500 x 375). Convertemos este em MC com o nome img_Holder e com o instance name imgHolder.

Na layer bgimg vamos desenhar um rectângulo este é o background das imagens da galeria deve ser ligeiramente maior que o MC img_Holder e devem estar alinhados ao centro.

Vamos agora criar o ultimo MC. Criamos um MC vazio com o nome container_mc colocamos-lo na layer contentor na posição onde queremos que se inicie o slideshow (eu coloquei-o na posição 10 x 10) damos-lhe o instance name de container.

E pronto temos o nosso palco preparado.

Agora o código.

Vou usar um ficheiro php com o nome xml.php para gerar o xml necessário e assim ter dinamicamente todas as imagens de uma determinada pasta na lista.

O ficheiro php e o swf devem estar na mesma pasta.

<?
$handler = opendir('o_caminho_para_a_pasta_com_as_imagens');
$i = 0;
while($a = readdir($handler))
{
  if ($a!='..' && $a!='.' && $a!='thumbs.db' && $a!='.THUMBS.DB' && $a!='Thumbs.db'){
   $array[$i]=$a;
    $i++;
 }
}
closedir($handler);

echo '<?xml version="1.0" encoding="iso-8859-1"?>
<DescriptionB>
<Produtos>
';

for ($i=0; $i<count($array); $i++)
{
 echo '<Produto nome="'.$array[$i].'"/>
 ';
}

echo '</Produtos>
</DescriptionB>';

?>

E agora na frame 1 da layer actionscript colocamos o seguinte código:

import mx.transitions.Tween;
import mx.transitions.easing.*;

System.useCodepage = true;

var tLoader:MovieClipLoader = new MovieClipLoader();
var iLoader:MovieClipLoader = new MovieClipLoader();
var iListener:Object = new Object();
iLoader.addListener(iListener);

var numOfThumbs:Array = [];
var numOfImages:Array = [];

var whoIsOn:Number = 0;
var counter:Number = 0;

var dados:Array = [];
var loadXML:XML = new XML();
loadXML.ignoreWhite = true;
loadXML.load("http://www.oteudominio.qqc/xml.php");
loadXML.onload = function(sucess) {
   if (sucess) {
       lenProd = this.firstChild.childNodes[0].childNodes;
       for (i=0; i<lenProd.length; i++) {
           dados.push(this.firstChild.childNodes[0].childNodes[i].attributes.nome);
       }
   } else {
       trace("XML nao foi Encontrado!");
   }
   numOfThumbs = dados;
   numOfImages = dados;
   for (var i = 0; i<numOfThumbs.length; i++) {
       var loadListener:Object = new Object();
       var mc:MovieClip = container.attachMovie("thumbnail", "thumb"+i, container.getNextHighestDepth(), {_x:(i*130)});
       img_mc._alpha = 0;
       mc.id = i;
       loadListener.onloadInit = function(mc:MovieClip) {
           mc._width = 104;
           //Aqui a largura para as imagens do slideshow
           mc._height = 68;
           //Aqui a altura  para as imagens do slideshow
       };
       tLoader.addListener(loadListener);
       tLoader.loadClip("caminho relativo para a pasta das imagens"+numOfThumbs[i],mc.timg);
       mc.onRollOver = function(){
            var tover:Tween = new Tween(this.bg,"_alpha",Back.easeOut,this.bg._alpha,70,1,true);//efeito fade out do slideshow

       }

       mc.onRollOut = function(){
            var tout:Tween = new Tween(this.bg,"_alpha",Back.easeOut,this.bg._alpha,100,2,true); //efeito fade out do slideshow

       }

       var loadListener:Object = new Object();
       var img_mc:MovieClip = imgHolder.createEmptyMovieClip("img"+counter,counter);
       img_mc._alpha = 0;
       loadListener.onloadInit = function(mc:MovieClip) {
           mc._width = 500;
           //Aqui largura das iamgens para galeria
           mc._height = 375;
           //Aqui altura para as imagens da galeria
       };
       iLoader.addListener(loadListener);
       iLoader.loadClip("caminho relativo para a pasta das imagens"+numOfImages[whoIsOn],img_mc);

       mc.onRelease = function (){
           if (this.id != whoIsOn){
               whoIsOn = this.id;
               counter++;
               var loadListener:Object = new Object();
               var img_mc:MovieClip = imgHolder.createEmptyMovieClip("img"+counter,counter);
               img_mc._alpha = 0;
               loadListener.onloadInit = function(mc:MovieClip) {
                   mc._width = 500;
                   //Aqui largura das iamgens para galeria
                   mc._height = 375;
                   //Aqui altura para as imagens da galeria
               };
               iLoader.addListener(loadListener);
               iLoader.loadClip("../img_codap/"+numOfImages[whoIsOn],img_mc);
           }
       }
   }
}

iListener.onloadStart = function(){
   preloader._width = 0;
   preloader._visible = true;
   theText._visible = true;
}

iListener.onloadProgress = function(target,loaded,total){
   if (loaded==total){
       theText._visible = false;
       preloader._visible = false;
   } else {
       preloader._width = 500*(loaded/total)
       theText.text = Math.round((loaded/total)*100);
   }
}

iListener.onloadInit = function(){
   var tw:Tween = new Tween(imgHolder["img"+counter],"_alpha",Strong.easeOut,imgHolder["img"+counter]._alpha,100,4,true);
}

E pronto, assim temos uma galeria completamente dinâmica que carrega todas as imagens de uma determinada pasta.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
imacg5    0
imacg5

Bem grande ajudas mas explicame uma coisa. Aqui nisto a vermelhor e par ametermos o caminho do nossa pasta?

tLoader.loadClip("caminho relativo para a pasta das imagens"+numOfThumbs,mc.timg);

iLoader.addListener(loadListener);

iLoader.loadClip("caminho relativo para a pasta das imagens"+numOfImages[whoIsOn],img_mc)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
imacg5    0
imacg5

Outra coisa. no meio da tua explicação dizesparacriarmos asi dois retangulos mas nao dizes se é para a apgar ou não o que e facto é que ficam lá. E já upei para o servidor e as fotos não dão. Será por ser o servidor da sapo gratuito que estou a experimentar ou será alguma coisa?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Sir Pereira    3
Sir Pereira

Outra coisa. no meio da tua explicação dizesparacriarmos asi dois retangulos mas nao dizes se é para a apgar ou não o que e facto é que ficam lá. E já upei para o servidor e as fotos não dão. Será por ser o servidor da sapo gratuito que estou a experimentar ou será alguma coisa?

Não sou expert em ActionScript, mas aposto contigo que não dá exactamente por serem os servidores da Sapo, não suportam PHP.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
yarcub    0
yarcub

Será por ser o servidor da sapo gratuito que estou a experimentar ou será alguma coisa?

O Sir Pereira já explicou, mas podes usar um "workaround".

Crias o teu XML com as entradas das tuas imagens, nao fica propriamente dinâmico... mas é o melhor que consegues sem scripts server-side.

(...)
loadXML.load("http://www.oteudominio.qqc/ficheiro.xml");
(:..)

A estrutura do XML há-de ser qq coisa do género:

<?xml version="1.0" encoding="iso-8859-1"?>
<Produtos>
  <Produto nome="image.jpg"/>
  <Produto nome="image2.jpg"/>
  <Produto nome="image3.jpg"/>
</Produtos>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade