[greenears]

Hi Everybody,

I'm building a portfolio website for a friend an I found a good script for a photo gallery with images loaded from a XML which I adapted to my needs but now I need to resolve one last thing; when you click on a thumbnail the larger image opens ( and the thumbnails are gone) I want to have some buttons to go to the next large image, without going back to the thumbnails window (which is what I have to do now) So to do that I need to get the ID of the image I'm on (the currentImage) and tell actionscript to go to the next image in the XML list. But how do I do this???

here's the code for the thumbnail class;

package {
import flash.display.Sprite;
import fl.containers.UILoader;
import caurina.transitions.*;
import flash.events.MouseEvent;

public class Thumbnail extends Sprite {
private var nume:String;
private var url:String;
private var id:int;
private var loader:UILoader;

function Thumbnail(source:String,itemNr:int,numeThumb:String):void {
url = source;
id = itemNr;
this.nume = numeThumb;
drawLoader();
/*addEventListener(MouseEvent.MOUSE_OVER,onOver);
addEventListener(MouseEvent.MOUSE_OUT,onOut);*/
/*scaleThumb();*/
}
private function drawLoader():void {
loader = new UILoader();
loader.source = url;
loader.mouseEnabled = false;
loader.x = -50;
loader.y = -50;
addChild(loader);

}

And the code for the gallery itself;

import fl.containers.UILoader;
import caurina.transitions.*;

//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("portraits.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
//-------- the photoLoader container-------
var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,900,600);
loaderHolder.graphics.endFill();
loaderHolder.x = 1000;
loaderHolder.y = 120;
sprite.addChild(loaderHolder);
//-------- loads the big photo-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 900;
photoLoader.height = 600;
photoLoader.y = 0;
photoLoader.x = 0;
photoLoader.buttonMode = false;
loaderHolder.addChild(photoLoader);

//-----loads a button???test by MAD-------
var nextButton:Sprite = new Sprite();
nextButton.graphics.beginFill(0x00ffff);
nextButton.graphics.drawCircle(100,100,50);
nextButton.graphics.endFill();
nextButton.alpha = 0;
nextButton.buttonMode = true;
nextButton.addEventListener(MouseEvent.CLICK,onClickBack);
sprite.addChild(nextButton);



/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnails*/
function fileLoaded(event:Event):void {
myXML = XML(event.target.data);
xmlList = myXML.children();
for (var i:int=0; i<xmlList.length(); i++) {
var picURL:String = xmlList[i].url;
var picName:String = xmlList[i].big_url;
arrayURL.push(picURL);
arrayName.push(picName);
holderArray[i] = new Thumbnail(arrayURL[i],i,arrayName[i]);
holderArray[i].addEventListener(MouseEvent.CLICK,onClick);
holderArray[i].name = arrayName[i];
holderArray[i].buttonMode = true;
if (i<nrColumns) {
holderArray[i].y = 200;
holderArray[i].x = i*120+200;
} else {
holderArray[i].y = holderArray[i-nrColumns].y+90;
holderArray[i].x = holderArray[i-nrColumns].x;
}
thumbsHolder.addChild(holderArray[i]);
}
}
//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
photoLoader.source = event.currentTarget.name;
Tweener.addTween(thumbsHolder, {x:0, time:0, transition:"linear"});
Tweener.addTween(loaderHolder, {x:0, y:0, time:0, transition:"linear"});
Tweener.addTween(thumbsHolder, {alpha:0, time:0, transition:"linear"});
Tweener.addTween(loaderHolder, {alpha:1, time:0, transition:"linear"});
Tweener.addTween(nextButton, {x:0, y:0, time:1, transition:"linear"});
Tweener.addTween(nextButton, {alpha:0.3, time:10, transition:"linear"});



}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
Tweener.addTween(thumbsHolder, {x:0, time:0, transition:"linear"});
Tweener.addTween(loaderHolder, {x:1000, time:0, transition:"linear"});
Tweener.addTween(thumbsHolder, {alpha:1, time:0, transition:"linear"});
Tweener.addTween(loaderHolder, {alpha:0, time:0, transition:"linear"});
Tweener.addTween(nextButton, {alpha:0, time:0, transition:"linear"});
Tweener.addTween(nextButton, {x:0, time:0, transition:"linear"});

}

It's a lot of code, and some of it is useless since i turned of a lot of tweeners. I'm sorry but I really need this fixed soon because I have to go on with other projects!!!Thanks for your help!!!

[Roberto]

Hello

I found the page you got the source from, and had a quick play about with it.

To fit the buttons in you will have to increase the width or height of the stage. I think it looks quite snazzy a little bit wider, with the buttons underneath the big picture - but you shouldn't take design advice from a guy that dresses like a pensioner.

You will need to create the right/left movement buttons and the back to the thumbnail button. Create your shape, then Convert to symbol- making sure MovieClip is selected. In the properties panel give the movieClip for the left movement button the instance name left_mc - the right movement movieClip - right_mc and the back to thumbnail movieclip - thumb_mc. The instance names are important, as they are used in the actionscript.

To make sure everything positions ok when you increase the width of the stage, you need to change:

In function fileLoaded

holderArray[i].x = i*120+200;

Just add half of the increased width to the 200 bit;

In function onClick change the second Tweener.addTweeen :

Tweener.addTween(loaderHolder, {x:(stage.stageWidth /2 - loaderHolder.width/2), time:1, transition:"easeInElastic"});

You will need to add a Boolean to keep track of whats currently being shown - var bigPic:Boolean = false;
This is changed in the onClick + onClickBack + the backToThumbs functions.

If you look at the code, you can see that the three movieClips have had their buttonMode set to true - which changes the cursor to a hand on hover. They've also had eventListeners added.

I've used the code from the site, so just c/p the new code across.

import fl.containers.UILoader;
import caurina.transitions.*;

var bigPic:Boolean = false;


//---------loading the external xml file-------
var urlRequest:URLRequest = new URLRequest("pics.xml");
var urlLoader:URLLoader = new URLLoader();
var myXML:XML = new XML();
var xmlList:XMLList;
myXML.ignoreWhitespace = true;
urlLoader.addEventListener(Event.COMPLETE,fileLoaded);
urlLoader.load(urlRequest);
//--------holds the paths to the thumbnails-------
var arrayURL:Array = new Array();
//--------holds the paths to the big photos-------
var arrayName:Array = new Array();
//--------holds the thumbnail objects-------
var holderArray:Array = new Array();
//--------represents the number of collumns-------
var nrColumns:uint = 5;
//-------represents the container of our gallery
var sprite:Sprite = new Sprite();
addChild(sprite);
var thumb:Thumbnail;
//-------- the thumbnails container-------
var thumbsHolder:Sprite = new Sprite();
sprite.addChild(thumbsHolder);
//-------- the photoLoader container-------
var loaderHolder:Sprite = new Sprite();
loaderHolder.graphics.beginFill(0xffffff,1);
loaderHolder.graphics.drawRect(0,0,550,330);
loaderHolder.graphics.endFill();
//put holder off stage
loaderHolder.x = 1000;
loaderHolder.y = 10;
sprite.addChild(loaderHolder);
//-------- loads the big photo-------
var photoLoader:UILoader = new UILoader();
photoLoader.width = 540;
photoLoader.height = 320;
photoLoader.y = 5;
photoLoader.x = 5;
photoLoader.buttonMode = true;
photoLoader.addEventListener(MouseEvent.CLICK,onClickBack);
loaderHolder.addChild(photoLoader);

/* we loop through the xml file
populate the arrayURL, arrayName and position the thumbnalis*/
function fileLoaded(event:Event):void {
	myXML = XML(event.target.data);
	xmlList = myXML.children();
	for (var i:int=0; i<xmlList.length(); i++) {
		var picURL:String = xmlList[i].url;
		var picName:String = xmlList[i].big_url;
		arrayURL.push(picURL);
		arrayName.push(picName);
		holderArray[i] = new Thumbnail(arrayURL[i],i,arrayName[i]);
		holderArray[i].addEventListener(MouseEvent.CLICK,onClick);
		holderArray[i].name = arrayName[i];
		holderArray[i].buttonMode = true;
		if (i<nrColumns) {
			holderArray[i].y = 65;
			holderArray[i].x = i*110+105;
		} else {
			holderArray[i].y = holderArray[i-nrColumns].y+110;
			holderArray[i].x = holderArray[i-nrColumns].x;
		}
		thumbsHolder.addChild(holderArray[i]);
	}
}
thumb_mc.buttonMode = true;
left_mc.buttonMode = true;
right_mc.buttonMode = true;
thumb_mc.addEventListener(MouseEvent.CLICK, backToThumbs);
left_mc.addEventListener(MouseEvent.CLICK, leftChangePic);
right_mc.addEventListener(MouseEvent.CLICK, rightChangePic);

function backToThumbs(e:MouseEvent):void {
	
	//Only do something if big picture is being shown
	if(bigPic){
	bigPic = false;
	Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInElastic"});
	Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeInElastic"});
	Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
	Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
	}
	
}


function rightChangePic(e:MouseEvent):void {
	
	//is a large picture being shown
	if(bigPic){
		
		var index:uint = arrayName.indexOf(photoLoader.source);
		
		if(index == (arrayName.length-1)){
			photoLoader.source = arrayName[0];
		}else {
			photoLoader.source = arrayName[(index+1)];
	    }
	}
	
	
}
function leftChangePic(e:MouseEvent):void {
	
	//is a large picture being shown
	if(bigPic){
		
		var index:uint = arrayName.indexOf(photoLoader.source);
		if(index == 0){
			photoLoader.source = arrayName[arrayName.length - 1];
		}else {
			photoLoader.source = arrayName[index -1];
	    }
	}
	
	
}

//----handles the Click event added to the thumbnails--
function onClick(event:MouseEvent):void {
	photoLoader.source = event.currentTarget.name;
	//trace(photoLoader.source + " photoLoader.source");
	Tweener.addTween(thumbsHolder, {x:-650, time:1, transition:"easeInElastic"});
	Tweener.addTween(loaderHolder, {x:(stage.stageWidth /2 - loaderHolder.width/2),
                                                                    time:1, transition:"easeInElastic"});
	Tweener.addTween(thumbsHolder, {alpha:0, time:1, transition:"linear"});
	Tweener.addTween(loaderHolder, {alpha:1, time:1, transition:"linear"});
    bigPic = true;
}
//----handles the Click event added to the photoLoader----
function onClickBack(event:MouseEvent):void {
	//trace(arrayName.indexOf(photoLoader.source));
	bigPic = false;
	Tweener.addTween(thumbsHolder, {x:0, time:1, transition:"easeInElastic"});
	Tweener.addTween(loaderHolder, {x:1000, time:1, transition:"easeInElastic"});
	Tweener.addTween(thumbsHolder, {alpha:1, time:2, transition:"linear"});
	Tweener.addTween(loaderHolder, {alpha:0, time:2, transition:"linear"});
}

////////////////////////////////////////////////////////////////////////////////////////////////

Let me know if anything needs explaining.

Rob

[greenears]

Hi Rob,

You just saved my day!!!!

I didn't know the solution could be this simple! A boolean! Who would have thought of that! I thought I should get the ID property in the thumbnail class! Great, I played around a bit with the original code and yours and it works fine, just for some positioning details but I will sort that out when I adapt my script since I changed a lot from the original one. I also want the buttons to load when the big picture loads and not before which is what seems to happen with your script and you're right, that's not very nice designwise! Even from a man who dresses like a pensioner that was an excellent observation
Thanks a lot and I'll show you the final result when everything is finished!!

AM

[Roberto]

Hello

If you add this below var bigPic:Boolean = false; + within the function onClickBack(event:MouseEvent):void {
+ within function backToThumbs(e:MouseEvent):void { if(bigPic){

thumb_mc.visible = false;
right_mc.visible = false;
left_mc.visible = false;

This will make the buttons invisible when the thumbnails are being shown.

Add this within function onClick(event:MouseEvent):void


thumb_mc.visible = true;
right_mc.visible = true;
left_mc.visible = true;

This will make the buttons visible when the big pic is in action

Rob