Crie uma galeria de imagem usando Flash ActionScript 3.0 e XML 0

Hoje você vai aprender noções básicas de como criar uma galeria de imagens usando o Flash ActionScript 3.0 e XML, como expedição de eventos, como carregar imagens através do arquivo XML e muito mais. No próximo tutorial vou estender este tutorial, adicionando mais recursos, como vem - botões, links e texto de XML. Vamos começar?


Exemplo:


Clique aqui e veja o efeito


Etapa 1 - Configurações de todos os arquivos


Crie um novo ActionScript File e salve-o como "MainClass.as" (com.fladev.gallery.MainClass) - esta será a classe principal para o nosso arquivo flash, o pacote de classes estende a classe Sprite (pois não temos um cronograma de animação). Depois vamos construir as outras classes para os thumbs ou imagem grande. Finalmente, crie um novo arquivo Flash AS3 (590 × 500 pixels) e abri-lo, de modo que temos dois arquivos abertos.


MainMovie


Crie um projeto simples para a nossa galeria - ver anexo. Também crie um novo símbolo, converta este em MovieClip e dar-lhe um nome de instância chamada "container", que irá representar o recipiente onde será as thumbs.


XML


Crie uma pasta "imagens" e dentro deste 2 subpastas "grandes" - todas as grandes imagens estarei aqui - e "ouro" com os polegares. Coloquei 15 imagens e polegares nessas pastas, imagens com uma largura máxima de 500px e todos os polegares 100 x 75px. Em seguida, crie um novo arquivo XML chamado "gallery.xml" e adicionar alguns nós que contêm esses polegares e imagens:

O arquivo XML contém apenas os thumbs e imagens.


MainClass.as


Vamos adicionar algumas constantes e variáveis para carregar conteúdo XML:

private var xml:XML;
private var urlLoader:URLLoader;
private static const XML_PATH:String = "gallery.xml"

Em função de construtor crie o urlLoader:

urlLoader = new URLLoader();
urlLoader.load(new URLRequest(XML_PATH));
urlLoader.addEventListener(Event.COMPLETE, loadXML);

Depois que o XML é carregado, usamos o seu conteúdo em função loadXML:

private function loadXML(e:Event):void
{
//display hole content from XML
xml = new XML(e.target.data);
}

Trace variável xml para mostrar o conteúdo. Vamos passar agora segunda parte, criando algumas thumbs.


Thumb


No filme principal desenhe um retângulo com 100px de largura e 75px de altura, depois converter isso em um MovieClip com o nome "Thumb" e classe "com.fladev.gallery.ThumbClass" (nós não criamos essa classe ainda). Dentro desta colocar um MovieClip em branco com o "container" nome de instância em uma nova camada. Sobre esta camada, crie uma nova camada um colocar uma máscara com o mesmo tamanho. Os polegares estão prontos, só tem de criar a classe para isso - "ThumbClass.as";


ThumbClass.as


Crie um novo ActionScript File e salve-o como "ThumbClass.as" (com.fladev.gallery.ThumbClass) - esta será a classe para todos os polegares, as classes do pacote estende a classe MovieClip. Aqui nós vamos adicionar a imagem polegar para dentro e converter isso em botão:

package com.fladev.gallery
{
import flash.display.Loader;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;

public class ThumbClass extends MovieClip
{
 public var image:String;

 //we receive the values from MainClass.as
 public function ThumbClass(thumb:String, image:String) {
  //set this to button mode
  this.buttonMode = true;
  this.mouseChildren = false;

  //store the image path
  this.image = image;

  //create a loader for image
  var loader:Loader = new Loader();
  loader.load(new URLRequest(thumb));
  this.container.addChild(loader);
 }

}

}

Em seguida, vamos adicionar alguns thumbs no palco.


Adicionando thumbs


No filme principal arrastar e soltar o recipiente vazio da biblioteca para o palco, dar-lhe o nome de instância "container", e esse centro no meio do palco - este será o container para os polegares. Em MainClass.as adicionar algumas variáveis:

private var thumbsLength:Number;
private var thumb:ThumbClass;
private var thumbWidth:Number = 100;
private var thumbHeight:Number = 75;

Então, em função loadXML onde carregar o arquivo XML que irá chamar o ThumbClass.as para carregar cada imagem thumb:

private function loadXML(e:Event):void
 {
  //display hole content from XML
  xml = new XML(e.target.data);
  thumbsLength = xml.image.length();
  //attach thumbs on stage
  for (var i:int = 0; i < thumbsLength; i++) {
   thumb = new ThumbClass(xml.image[i].@thumb, xml.image[i].@src);
   container.addChild(thumb);

   //show thumbs with a nice effect
   setTimeout(moveThumbs, 100*(i+1), thumb, Math.round(100 * i), i);

   thumb.x = 230;//play with this value
   thumb.y = 0;
  }
  //create a listener to position the thumb's container in the middle of stage
  this.addEventListener(Event.ENTER_FRAME, positionThumbs);
 }

Nós adicionamos os polegares como crianças de "contentor" MovieClip do palco, então nós colocamos todos os coordonates polegares de X e Y para 230-0 para um efeito agradável, nós criamos um temporizador para a posição de cada dedo à sua coordonates direito, posição e, finalmente, criar um ouvinte que vai posicionar o contêiner no meio do palco. Se você tem uma chance de olhar para a visualização, você verá que os polegares são muito agradáveis organizados por colunas. Para fazer isso, crie uma nova variável para controlar quantas colunas você quer ser:

private var numOfColumns:Number = 5;
private var spacer:Number = 1;

Então o "moveThumbs" função que irá providenciar os polegares por colunas:

private function moveThumbs(pic:MovieClip, xDest:Number, i:Number) {
  var c:Number =  Math.floor((i % numOfColumns) * (thumbWidth + spacer));
  var d:Number =  Math.floor(i / numOfColumns) * (thumbHeight + spacer);
  Tweener.addTween(pic, { x:c, y:d, time:1, transition:"easeOutSine" } );

  //if last thumb was added then we remove the listener that position the thumb's container
  if (i == thumbsLength) {
   this.removeEventListener(Event.ENTER_FRAME, positionThumbs);
  }
 }

E a função "positionThumbs" que irá posicionar o recipiente de thumb:

private function positionThumbs(e:Event):void
 {
  container.x = Math.floor((stage.stageWidth * 0.5) - (container.width * 0.5));
  container.y = Math.floor((stage.stageHeight * 0.5) - (container.height * 0.5));

Ufa, um monte de código aqui. Teste seu filme e veja todos os polegares dispostas no meio do palco. Ok, agora nós precisamos adicionar uma forma que quando se clica polegares para abrir a imagem grande. Para isso, precisamos criar um novo movieclip que irá armazenar a imagem grande, uma nova classe para isso e um ouvinte sobre os polegares que irá disparar essa função para abrir essas imagens grandes.


Big image


No filme principal, você criou o thumb MovieClip repetir, que as medidas só que isso terá um novo tamanho - 500 × 500px. Converta o fundo para um novo movieclip com nome de instância "bg", com o nome "BigImage" e do caminho de classe para "com.fladev.gallery.ImageClass" defina o coordonates X e Y para recipiente para 6-6 e, finalmente. Quando essa imagem será aberta, precisamos de uma maneira de fechar ela e para retornar ao thumb - você está certo, devemos criar um botão que vai fazer isso. Desenhe um retângulo, converter este MovieClip e dar-lhe um nome de instância "close_btn". Este botão estará dentro do "bigImage", símbolo do seu lado inferior. O recipiente grande imagem deverá ficar como na imagem acima.


ImageClass.as

package com.fladev.gallery
{
import caurina.transitions.Tweener;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;

public class ImageClass extends MovieClip
{
 private var loader:Loader;

 public function ImageClass() {
  //make the close_btn button
  close_btn.buttonMode = true;
  close_btn.mouseChildren = false;
                       //on press this will hide the image
  close_btn.addEventListener(MouseEvent.CLICK, hideImage);
 }

 public function loadImage(img:String)
 {       //this function will be called from MainClass.as, when thumbs are clicked.
  var img:String = img;
  loader = new Loader();
  loader.load(new URLRequest(img));
  loader.contentLoaderInfo.addEventListener(Event.COMPLETE, showImage);
 }

 private function showImage(e:Event):void
 {
  //add image loaded as child to container
  if (container.numChildren >= 1) {
   container.removeChildAt(0);
  }
  container.addChild(loader);

  //resize the background of image
  bg.height = e.target.content.height + 12;
  bg.width = e.target.content.width + 12;
  //position the button to the bottom side of image
  close_btn.y = bg.y + bg.height + 10;
  close_btn.x = bg.x + bg.width - close_btn.width;

  Tweener.addTween(this, { time:1, transition:"easeInOutQuint", x:Math.floor((stage.stageWidth * 0.5) - (this.width * 0.5)) } );
  Tweener.addTween(this, { time:1, transition:"easeInOutQuint", y:Math.floor((stage.stageHeight * 0.5) - (this.height * 0.5)) } );

 }
 //when button is pressed will trigger a listener from MainClass.as that will hide this.
 private function hideImage(e:MouseEvent):void
 {
  dispatchEvent(new Event(MainClass.HIDE_IMAGE, true));
 }
}

}

Agora que criamos a classe de imagens, em ThumbsClass.as vamos colocar um ouvinte para ativar a função que fará a grande imagem visível:

this.addEventListener(MouseEvent.CLICK, showImage);

E o "showImage" a função:

private function showImage(e:MouseEvent):void
{
//trigger the listener from MainClass.as to show the big image
dispatchEvent(new Event(MainClass.SHOW_IMAGE, true));
}

Ok, estamos quase acabando. Vamos criar os ouvintes em MainClass.as que irá mostrar / ocultar as imagens. Concentre-se no MainClass.as minutos seguinte.


Hocus Pocus


Crie 2 contants em MainClass.as:

public static const SHOW_IMAGE:String = "show_big_image";
public static const HIDE_IMAGE:String = "hide_big_image";

Então, em função de construtor, adicionar 2 ouvintes:

this.addEventListener(SHOW_IMAGE, loadImage);
this.addEventListener(HIDE_IMAGE, hideImage);

... as imagens mostram:

private function loadImage(e:Event):void
{
//we make invisible the container with thumbs and then we show the image
Tweener.addTween(container, { alpha:0, transition:"easeOutSine", time:0.5, onComplete: function doHide() {
 container.visible = false;
 showImage(e.target.image);
}});
}

private function showImage(value:String) {
//position the big image container
bigImage.x = Math.floor((stage.stageWidth * 0.5) - (bigImage.width * 0.5));
bigImage.y = 0 - bigImage.height;

bigImage.visible = true;
bigImage.loadImage(value);

... Ocultar as imagens:

private function hideImage(e:Event):void {
  //hide the big image container and show thumbs container visible back
  Tweener.addTween(bigImage, { time:1, transition:"easeInOutQuint", y:Math.floor((stage.stageHeight + 30)), onComplete: function doShow() {
   container.visible = true;
  Tweener.addTween(container, { alpha:1, transition:"easeOutSine", time:0.5}) }} );

Salve tudo, e vamos recapitular. Nós:

* Imagens e colocar os polegares em pastas

* Adicionar nós com estes no arquivo XML,

* Criar um recipiente no meio da etapa para segurar os thumbs,

* Criar recipiente o polegar e as imagens

* Adicionar a função para mostrar / ocultar as imagens.

Espero que você aprender alguma coisa com isto e eu não esqueço nada (você tem fontes de inscritos também). Obrigado pelo seu tempo, fique atento até próximo tutorial.