I maked a gallery for a tutorial on the web. Here’s the result. http://www.pingouincreation.com/plabelle/flash/pcarousel.swf
What I want to do is simple. When you click on a thumbnail the big picture apperar but i need to have detail thumbnail to be at the bottom and to have the same behavior with these thumbnails… ( load a bigger picture and fade all background)
So I prepared a new xml
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<gallery columns="10" xposition="30" yposition="30" width="45" height="45">
<images full="full_images/Pauto.jpg" thumbs="thumbs/pauto1.gif">
<detail full="full_images/Pautod1.jpg" thumbs="thumbs/pautod1.gif" />
</images>
[...]
</gallery>
here’s the code of the gallery itself ( i just put the first part working and the important of the seoncd part with anotation, if you want more just tell me):
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.MovieClip;
import flash.display.Loader;
import flash.events.MouseEvent;
import fl.controls.ProgressBar;
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var columns:Number;
var my_x:Number;
var my_y:Number;
var my_thumb_width:Number;
var my_thumb_height:Number;
var my_images:XMLList;
var my_total:Number;
var container_mc:MovieClip;
var preloaders_mc:MovieClip;
var x_counter:Number = 0;
var y_counter:Number = 0;
var my_tweens:Array = [];
var full_mc:MovieClip;
var container_mc_tween:Tween;
var full_tween:Tween;
var current:Number;
var myXMLLoader:URLLoader = new URLLoader();
myXMLLoader.load(new URLRequest("gallery.xml"));
myXMLLoader.addEventListener(Event.COMPLETE, processXML);
// loadXMl
function processXML (e:Event) : void
{
var myXML:XML = new XML(e.target.data);
columns = myXML.@columns;
my_x = myXML.@xposition;
my_y = myXML.@yposition;
my_thumb_width = myXML.@width
my_thumb_height = myXML.@height
my_images = myXML.images;
my_total = my_images.length();
createContainer();
callThumbs();
myXMLLoader.removeEventListener(Event.COMPLETE, processXML)
myXMLLoader = null;
}
//Create Container
function createContainer():void
{
container_mc = new MovieClip();
container_mc.x = my_x;
container_mc.y = my_y;
addChild(container_mc);
container_mc.addEventListener(MouseEvent.CLICK, callFull);
container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
container_mc.buttonMode = true;
preloaders_mc = new MovieClip();
preloaders_mc.x = container_mc.x;
preloaders_mc.y = container_mc.y;
addChild(preloaders_mc);
}
// load thumbs
function callThumbs():void
{
for ( var i:Number = 0; i < my_total; i++)
{
var thumb_url = my_images*.@thumbs;
var thumb_loader = new Loader();
thumb_loader.load(new URLRequest(thumb_url));
thumb_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
thumb_loader.name = i;
//padding
thumb_loader.x = (my_thumb_width+0)*x_counter;
thumb_loader.y = (my_thumb_height+0)*y_counter;
if (x_counter+1 < columns){
x_counter++
} else{
x_counter=0
y_counter++;
}
var preloader_pb:ProgressBar = new ProgressBar();
preloader_pb.source = thumb_loader.contentLoaderInfo;
preloader_pb.x = thumb_loader.x;
preloader_pb.y = thumb_loader.y;
preloader_pb.width = my_thumb_width;
preloader_pb.height = my_thumb_height;
preloaders_mc.addChild(preloader_pb);
preloader_pb.addEventListener(Event.COMPLETE, donePb);
}
}
//--- add thumbnail visually
function thumbLoaded(e:Event):void
{
var my_thumb:Loader = Loader(e.target.loader);
container_mc.addChild(my_thumb);
my_tweens[Number(my_thumb.name)]= new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
my_thumb.contentLoaderInfo.removeEventListener(Event.COMPLETE, thumbLoaded);
}
///---full picture
function callFull(e:MouseEvent):void{
var full_loader:Loader = new Loader();
var full_url = my_images[e.target.name].@full;
full_loader.load(new URLRequest(full_url));
full_loader.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
var full_pb:ProgressBar = new ProgressBar();
full_pb.source = full_loader.contentLoaderInfo;
full_pb.x = (stage.stageWidth - full_pb.width)/2;
full_pb.y = (stage.stageHeight - full_pb.height)/2;
preloaders_mc.addChild(full_pb);
container_mc.removeEventListener(MouseEvent.CLICK, callFull);
container_mc.buttonMode = false;
container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
full_pb.addEventListener(Event.COMPLETE, donePb);
container_mc_tween = new Tween(container_mc, "alpha", Strong.easeIn, 1,0.5,0.5, true);
// --- add picture on scene
}
function fullLoaded(e:Event):void{
full_mc = new MovieClip();
full_mc.buttonMode = true;
addChild(full_mc);
var my_loader:Loader = Loader(e.target.loader);
full_mc.addChild(my_loader);
full_tween = new Tween(my_loader, "alpha", Strong.easeIn, 0,1,0.5, true);
my_loader.x = 0;
my_loader.y = 0;
my_loader.addEventListener(MouseEvent.CLICK, removeFull);
my_loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded)
}
/// on click on picture remove the picture---
function removeFull(e:MouseEvent):void{
var my_loader:Loader = Loader (e.currentTarget);
full_tween = new Tween(my_loader, "alpha", Strong.easeOut, 1,0,0.5, true);
full_tween.addEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
container_mc_tween = new Tween(container_mc, "alpha", Strong.easeOut, 0.5,1,0.5, true)
}
//--- preloader
function donePb (e:Event):void
{
var my_pb:ProgressBar = ProgressBar(e.target);
preloaders_mc.removeChild(my_pb)
my_pb.removeEventListener(Event.COMPLETE, donePb);
}
function tweenFinished(e:TweenEvent):void
{
var my_loader:Loader = Loader (e.target.obj);
my_loader.unload();
full_mc.removeChild(my_loader);
removeChild(full_mc);
full_mc = null;
container_mc.addEventListener(MouseEvent.CLICK, callFull);
container_mc.buttonMode = true;
container_mc.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc.addEventListener(MouseEvent.MOUSE_OUT, onOut);
var my_tween:Tween = Tween(e.target);
my_tween.removeEventListener(TweenEvent.MOTION_FINISH, tweenFinished);
}
function onOver(e:MouseEvent): void
{
var my_thumb:Loader = Loader(e.target);
my_thumb.alpha = 0.5;
}
function onOut(e:MouseEvent):void
{
var my_thumb:Loader = Loader (e.target);
my_thumb.alpha = 1;
}
//--- New part
function createContainer2():void
{
container_mc2 = new MovieClip();
container_mc2.x = my_x;
container_mc2.y = my_y;
addChild(container_mc2);
container_mc2.addEventListener(MouseEvent.CLICK, callFull2);
container_mc2.buttonMode = true;
}
// load thumbs
function callThumbs2():void
{
for ( var i:Number = 0; i < my_total; i++)
{
// I don't know what to put at thumb_url2 to get only the thumnail off detail..
var thumb_url2 = my_images*.@thumbs;
var thumb_loader2 = new Loader();
thumb_loader2.load(new URLRequest(thumb_url));
thumb_loader2.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded2);
thumb_loader.name = i;
//padding
thumb_loader2.x = (my_thumb2_width+0)*x_counter;
thumb_loader2.y = (my_thumb2_height+0)*y_counter;
if (x_counter+1 < columns){
x_counter++
} else{
x_counter=0
y_counter++;
}
}
}
function thumbLoaded(e:Event):void
{
var my_thumb2:Loader = Loader(e.target.loader);
container_mc2.addChild(my_thumb2);
}
function callFull2(e:MouseEvent):void{
var full_loader2:Loader = new Loader();
// Same problem here but with the big picture
var full_url2 = my_images[e.target.name].@full;
full_loader2.load(new URLRequest(full_url2));
full_loader2.contentLoaderInfo.addEventListener(Event.INIT, fullLoaded);
container_mc2.removeEventListener(MouseEvent.CLICK, callFull);
container_mc2.buttonMode = false;
container_mc2.addEventListener(MouseEvent.MOUSE_OVER, onOver);
container_mc2.addEventListener(MouseEvent.MOUSE_OUT, onOut);
}
function fullLoaded(e:Event):void{
full_mc2 = new MovieClip();
full_mc2.buttonMode = true;
addChild(full_mc2);
var my_loader2:Loader = Loader(e.target.loader);
full_mc2.addChild(my_loader2);
my_loader2.x = 0;
my_loader2.y = 0;
my_loader2.addEventListener(MouseEvent.CLICK, removeFull);
my_loader2.contentLoaderInfo.removeEventListener(Event.COMPLETE, fullLoaded)
}
---// continue //---
