I have tihs code to load some thumbs with XML. That works fine. Where I’m stuck right now is how to load the appropriate large image when thumb is clicked?
I need them to load into the imageContainer Loader.
Hope someone have the time to hint on this…
[COLOR="Silver"]// Starting X and Y positions for the thumbs[/COLOR]
thisX = 30;
thisY = 33;
[COLOR="Silver"]// Put imageContainer on stage[/COLOR]
var imageContainer:Loader = new Loader;
imageContainer.x = 0;
imageContainer.y = 33;
addChildAt(imageContainer, 0);
[COLOR="Silver"]// Load XML document[/COLOR]
var myXML:XML;
var loadXML:URLLoader = new URLLoader();
loadXML.addEventListener(Event.COMPLETE, onXmlComplete);
loadXML.load(new URLRequest("peterContent.xml"));
function onXmlComplete(event:Event):void {
try {
myXML = new XML(event.target.data);
var uppdrag:XMLList = myXML.uppdrag;
var thumbs:XMLList = myXML.uppdrag.thumbs;
var large:XMLList = myXML.uppdrag.large;
var thumbs_array:Array = new Array();
var large_array:Array = new Array();
var i:int;
var galleryLength:int = uppdrag.length();
for (i = 0; i < galleryLength; i++) {
thumbs_array.push({src:thumbs*.text()});
large_array.push({src:large*.text()});
}
displayThumbs(thumbs_array); // start load of thumbs
} catch (error:Error) {
trace(error.message);
}
}
[COLOR="Silver"]// create new movie clips on the stage[/COLOR]
function displayThumbs(thumbs_array:Array):void {
var i:int;
var galleryLength:Number = thumbs_array.length;
// loop through each of the images in the thumbs_array.
for (i = 0; i<galleryLength; i++) {
// create a movie clip instance which holds the image. We'll also set a variable,
// thisMC, which is an alias to the movie clip instance.
var thumbLoader:Loader = new Loader();
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoadComplete);
thumbLoader.load(new URLRequest(thumbs_array*.src));
var thisMC:MovieClip = new MovieClip();
thisMC.buttonMode = true;
thisMC.alpha = 0;
thisMC.x = thisX;
thisMC.y = thisY;
thisMC.addChild(thumbLoader);
addChild(thisMC);
[COLOR="Silver"]// 9 columns of thumbs, then new row[/COLOR]
if (((i + 1) % 9) == 0) {
// reset the X and Y positions
thisX = 30;
thisY += 100 + 5;
} else {
thisX += 100 + 5;
}
}
}
function thumbLoadComplete(event:Event):void {
var thumbLoader:Loader = LoaderInfo(event.currentTarget).loader as Loader;
var thisMC:MovieClip = thumbLoader.parent;
[COLOR="Silver"]// apply a drop shadow on thumbs[/COLOR]
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 3;
shadow.angle = 45;
shadow.alpha = .3;
shadow.blurX = 5;
shadow.blurY = 5;
thisMC.filters = [shadow];
[COLOR="Silver"]// fade thumbs to 70%[/COLOR]
Tweener.addTween(thisMC, {alpha:.7, time:2});
thisMC.addEventListener(MouseEvent.CLICK, mouseClickHandler);
thisMC.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
thisMC.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}
[COLOR="Silver"]// Load large image[/COLOR]
function mouseClickHandler(event:MouseEvent):void {
var thisMC:MovieClip = event.currentTarget as MovieClip;
[COLOR="Red"]// this is where I want to load the large image[/COLOR]
}
[COLOR="Silver"]// Fade thumbs to 100% - scale to 99% - change drop shadow[/COLOR]
function mouseOverHandler(event:MouseEvent):void {
var thisMC:MovieClip = event.currentTarget as MovieClip;
Tweener.addTween(thisMC, {alpha:1, time:.5});
thisMC.scaleX = .99;
thisMC.scaleY = .99;
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 2;
shadow.angle = 45;
shadow.alpha = .3;
shadow.blurX = 2;
shadow.blurY = 2;
thisMC.filters = [shadow];
}
[COLOR="Silver"]// Fade thumbs to 70% - scale to 100% - reset drop shadow[/COLOR]
function mouseOutHandler(event:MouseEvent):void {
var thisMC:MovieClip = event.currentTarget as MovieClip;
Tweener.addTween(thisMC, {alpha:.7, time:.5});
thisMC.scaleX = 1;
thisMC.scaleY = 1;
var shadow:DropShadowFilter = new DropShadowFilter();
shadow.distance = 3;
shadow.angle = 45;
shadow.alpha = .3;
shadow.blurX = 5;
shadow.blurY = 5;
thisMC.filters = [shadow];
}