• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

infopc

[ActionScript] Galeria dinâmica

6 mensagens neste tópico

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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>

0

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