Howdy,
I have been working on a site that will display a portfolio for a friend of mine who is a photographer. I want to have thumbnails that can be scrolled on the bottom of the page, and an area where the thumbnail is presented when selected. I have the thumbnails appearing. I have them loading, however, I can’t get them to scroll when the mouse moves to the left or right of the row of images.
The file can be viewed at… http:www.prestigeinteractive.com/anneliephotography
Here is the code I used for the slideshow:
var slideshow_mc:MovieClip = this;
var image_Array:Array = new Array();
var description_Array:Array = new Array();
var thumbnails_Array:Array = new Array();
var currentPicture:Number = 0;
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild; //here "this" refers to the XML object. This should be okay, I think
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image_Array* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description_Array* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
thumbnails_Array* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
thumbnails_fn(i);
}
firstImage();
} else {
content = "file not loaded!";
//added this so that it shows in your thumbnails
desc_txt.text = "file not loaded!";
}
}
xmlData = new XML(); //prepare XML object
xmlData.ignoreWhite = true; //tell XML to ignore empties (unnecessary in this application b/c XML is well-formed
xmlData.onLoad = loadXML; //function to load when XML loads.
//I had to change this line to make sure that it's loading from the correct location, because you're loading the
//file from one level up
xmlData.load("./flash_files/images.xml"); //load XML data; when loaded, run loadXML
/////////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
previous_btn.onRelease = function() {
prevImage();
};
next_btn.onRelease = function() {
nextImage();
};
/////////////////////////////////////
currentPicture = 0;
slideshow_mc.onEnterFrame = function() {
filesize = picture.getBytesTotal();
loaded = picture.getBytesLoaded();
preloader._visible = true;
if (loaded != filesize) {
preloader.preload_bar._xscale = 100*loaded/filesize;
} else {
preloader._visible = false;
if (picture._alpha<100) {
picture._alpha += 10;
}
}
};
function nextImage() {
if (currentPicture<(total-1)) {
currentPicture++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image_Array[currentPicture], 1);
desc_txt.text = description_Array[currentPicture];
picture_num();
}
}
}
function prevImage() {
if (currentPicture>0) {
currentPicture--;
picture._alpha = 0;
picture.loadMovie(image_Array[currentPicture], 1);
desc_txt.text = description_Array[currentPicture];
picture_num();
}
}
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image_Array[0], 1);
desc_txt.text = description_Array[0];
picture_num();
}
}
function picture_num() {
current_pos = currentPicture+1;
pos_txt.text = current_pos+" / "+total;
}
//I think I know what this function is doing, but I'm not sure exactly how it works
function thumbNailScroller() {
// thumbnail code!
slideshow_mc.createEmptyMovieClip("tscroller", 1000);
scroll_speed = 10;
tscroller.onEnterFrame = function() {
if ((_root._ymouse>=thumbnail_mc._y) && (_root._ymouse<=thumbnail_mc._y+thumbnail_mc._height)) {
if ((_root._xmouse>=(hit_right._x-40)) && (thumbnail_mc.hitTest(hit_right))) {
thumbnail_mc._x -= scroll_speed;
} else if ((_root._xmouse<=40) && (thumbnail_mc.hitTest(hit_left))) {
thumbnail_mc._x += scroll_speed;
}
} else {
delete tscroller.onEnterFrame;
}
};
}
function thumbnails_fn(thumbnailNumber) {
thumbnail_mc.createEmptyMovieClip("t"+thumbnailNumber, thumbnail_mc.getNextHighestDepth());
tlistener = new Object();
tlistener.onLoadInit = function(target_mc) {
//target_mc is the thumbnail that was just loaded
target_mc._x = hit_left._x+(eval("thumbnail_mc.t"+thumbnailNumber)._width+5)*thumbnailNumber;
target_mc.pictureValue = thumbnailNumber; //here you're assigning a value to the thumbnail object
target_mc.onRelease = function() {
//target_mc is the thumbnail that was just loaded
//"this" should be okay below, but it COULD be problematic, depending on the scope
//when the click is evaluated; here could be a problem area, but I'm not sure
currentPicture = this.pictureValue-1;
nextImage();
};
target_mc.onRollOver = function() {
//target_mc is the thumbnail that was just loaded
//"this" should be okay below, but it COULD be problematic, depending on the scope
//when the click is evaluated; here could be a problem area, but I'm not sure
this._alpha = 50; //here "this" refers to the target_mc MovieClip; it can stay
thumbNailScroller();
};
target_mc.onRollOut = function() {
//"this" should be okay below, but it COULD be problematic, depending on the scope
//when the click is evaluated; here could be a problem area, but I'm not sure
this._alpha = 100;
};
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener); //listener to see when thumbnail is loaded
image_mcl.loadClip(thumbnails_Array[thumbnailNumber], "thumbnail_mc.t"+thumbnailNumber);
}
Thanks for your help,
Greg
