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 Softwares Pular para comentários
Galeria de imagens em Flash Impulsionada e com XML

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

RESULTADO:

http://www.oficinadanet.com.br//imagens/coluna/2873/flash.jpg

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.

   
   
   
   
   
   
   


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.

Compartilhe com seus amigos:
Thauan Almeida
Thauan Almeida É desenvolvedor Flash, Joomla e Programação. E aqui na Oficina da Net mostrará tutoriais sobre a ferramenta da Adobe e os outros citados acima.
FACEBOOK //
Quer conversar com o(a) Thauan, comente:
Carregar comentários
Últimas notícias