Galeria de imagens em Flash Impulsionada e com XML

Uma galeria com um ótimo efeito de foco, pode ser usado para apresentação de um site, galeria de fotos e outros.

Por | @oficinadanet Softwares

Neste tutorial, vamos ver como criar uma Galeria Horizontal XML impulsionada com um belo efeito de zoom em foco.

RESULTADO:

Galeria de imagens em Flash Impulsionada e com XML

Arquivos para download: src.zip

1. Crie um novo arquivo Flash (ActionScript 3.0) e salve-o como src.fla.

2. Desenhe um retângulo do mesmo tamanho de suas fotos. Convertê-la em um clipe de filme com o ponto de registro no canto superior esquerdo e dar-lhe o nome de instância "foto". Desenhe um outro retângulo um pouco maior que será usado como moldura da foto. Convertê-la em um clipe de filme com o nome de intance "bg". Coloque "bg" por trás "foto" e com as duas selecionadas, converter a seleção em um clipe de filme com o ponto de registro no centro. Exportá-lo para o ActionScript com um nome de classe "Thumb". Confira a biblioteca src.fla para ver o resultado.
Com a ferramenta de texto desenhar uma caixa de texto dinâmico e dê a ele o nome de instância "currentPhoto". Este texto irá exibir o título da foto pairava.

3. Crie um arquivo XML para armazenar fotos 'datas e salvá-lo como gallery.xml.

   
   
   
   
   
   
   
</gallery>


4. Criar uma "ações" da camada. Abra o painel de ações. Nós vamos utilizar o motor TweenLite então primeiro escrever as seguintes declarações, a fim de usá-lo e TintPlugin.
import com.greensock.TweenLite;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);


5. Avançar declarar as seguintes variáveis.
var xml:XML;
var photos:Array;
var totalPhotos:Number;
var folder:String = "photos/";
var gallery:Sprite;
var photosLoaded:int=0;


6. Carregar o arquivo XML, criando um loadXML (função). Quando a carga estiver completa, vai chamar a função parseXML ().
function loadXML(file:String):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}


7. Então precisamos analisar o XML. Montamos nossa variável xml com os dados do xml, obter a quantidade total de fotos e chamar o loadGallery l () função.
function parseXML(e:Event):void{
	xml = new XML(e.target.data);
	totalPhotos = xml.children().length();
	loadGallery();
}


8. Dentro do loadGallery () função, criamos um "para" declaração de percorrer a datas XML para criar um carregador para cada foto. Nós guardamos o carregador dentro de nossas fotos variável de matriz, e adicione o ouvinte Event.COMPLETE.
function loadGallery():void{
	photos = new Array();
	for(var i:int = 0; i


9. O onComplete) função verifica (se todas as fotos são carregadas. Se assim for, ele chama o createThumbs () função.
function onComplete(e:Event):void{
	photosLoaded++;
	if(photosLoaded == totalPhotos){
		createThumbs();
	}
}


10. Dentro do createThumbs () função, crie uma declaração "for" para percorrer a matriz de fotos para criar os polegares galeria. Para cada polegar, escalá-la até a metade do tamanho, defina sua propriedade de título, criar a sua foto bitmap e adicioná-lo para a galeria.
Usamos TweenLite para fazê-los parecer um após o outro.
Posição da galeria no centro do palco.
function createThumbs():void{
	gallery = new Sprite();
	addChild(gallery);

	for(var i:int = 0; i < photos.length; i++){

		var thumb:Thumb = new Thumb();
		thumb.scaleX = thumb.scaleY = .5;

		thumb.x = (thumb.width + 5) * i;
		thumb.title =  xml.photo[i].@title;

		var bm:Bitmap = new Bitmap();
		bm = Bitmap(photos[i].content);
		bm.smoothing = true;
		thumb.photo.addChild(bm);

		gallery.addChild(thumb);
		TweenLite.from(thumb, .5, {scaleX:0,scaleY:0,alpha:0, delay: i*0.2, onComplete:addThumbListeners,onCompleteParams:[thumb]});

	}
	gallery.x = stage.stageWidth/2 - gallery.width/2;
	gallery.y = stage.stageHeight/2 - gallery.height/2;

}


11. Uma vez os polegares são totalmente criado, nós adicionamos a eles "MouseEvent.ROLL_OVER" e "MouseEvent.ROLL_OUT" ouvintes.
function addThumbListeners(thumb:MovieClip):void{
	thumb.addEventListener(MouseEvent.ROLL_OVER, onThumbOver);
	thumb.addEventListener(MouseEvent.ROLL_OUT, onThumbOut);
}


12. OnThumbOver A () função de escalas até o polegar pairava. Nós adicionamos um ouvinte onUpdate que chama o arrangeThumb () quando este evento é disparado. Também matizes frame da foto em preto.
Dentro da arrangeThumb () função que coloque a foto pairava por cima do outro quando sua escala é superior a 0,6
Quando sua escala é igual a 1, vamos definir o texto com o título currentPhoto.
function onThumbOver(evt:MouseEvent):void {
	var thumb:MovieClip = MovieClip(evt.target);
	TweenLite.to(thumb,.5,{scaleX:1,scaleY:1,onUpdate:arrangeThumb, onUpdateParams:[thumb]});
	TweenLite.to (thumb.bg, .5, {tint: 0x000000});
}

function arrangeThumb(thumb:MovieClip):void{
	if (thumb.scaleX>.6)
		gallery.addChild(thumb);
	if(thumb.scaleX==1)
		currentPhoto.text = thumb.title;
}


13. OnThumbOut A () função de escalas para baixo o polegar, as tonalidades de volta à sua cor cinzenta e definir o texto currentPhoto em branco.
function onThumbOut(evt:MouseEvent):void {
	var thumb:MovieClip = MovieClip(evt.target);
	TweenLite.to(thumb,.5,{scaleX:.5, scaleY:.5});
	TweenLite.to (thumb.bg, .5, {tint: 0x999999});
	currentPhoto.text = "";
}


Por último não se esqueça de chamar o loadXML () para fazer o trabalho.
loadXML("gallery.xml");


Aqui está o código final.
import com.greensock.TweenLite;
import com.greensock.plugins.*;
TweenPlugin.activate([TintPlugin]);

var xml:XML;
var photos:Array;
var totalPhotos:Number;
var folder:String = "photos/";
var gallery:Sprite;
var photosLoaded:int=0;

function loadXML(file:String):void{
	var xmlLoader:URLLoader = new URLLoader();
	xmlLoader.load(new URLRequest(file));
	xmlLoader.addEventListener(Event.COMPLETE, parseXML);
}

function parseXML(e:Event):void{
	xml = new XML(e.target.data);
	totalPhotos = xml.children().length();
	loadGallery();
}

function loadGallery():void{
	photos = new Array();
	for(var i:int = 0; i.6)
		gallery.addChild(thumb);
	if(thumb.scaleX==1)
		currentPhoto.text = thumb.title;
}

function onThumbOut(evt:MouseEvent):void {
	var thumb:MovieClip = MovieClip(evt.target);
	TweenLite.to(thumb,.5,{scaleX:.5, scaleY:.5});
	TweenLite.to (thumb.bg, .5, {tint: 0x999999});
	currentPhoto.text = "";
}

loadXML("gallery.xml");


Espero que tenham gostado, até a próxima.

Mais sobre: galeria impulsionada XML
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo