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 Thauan Almeida em 24/02/2011 00:00 em Softwares Pular para comentários
Neste tutorial, vamos ver como criar uma Galeria Horizontal XML impulsionada com um belo efeito de zoom em foco.
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.
5. Avançar declarar as seguintes variáveis.
var photos:Array;
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{
xmlLoader.load(new URLRequest(file));
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{
totalPhotos = xml.children().length();
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();
9. O onComplete) função verifica (se todas as fotos são carregadas. Se assim for, ele chama o createThumbs () função.
photosLoaded++;
if(photosLoaded == totalPhotos){
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.
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;
bm = Bitmap(photos[i].content);
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{
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.
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)
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.