I have done a monster-mashing of the XML Slide Show, XML Photogallery with Thumbnails and ikiM’s thumbnail Grid photo viewer and have three specific things I would like to do to further the functionality of it.
Please note: there are a lot of posts in regards to the slide show and I have read just about every one of them. If I missed the answer somewhere in there please post the link to the thread!
I’m new to Action Script and feel that maybe the nesting of the code is messing with some of the functionality.
Here’s what I want to do:
-
When you “onRelease” the thumbnail I want the slide show to PAUSE and the corresponding moused over image to appear in the MC for 15 seconds, then, I want the slide show to resume wherever it left off when you move the mouse off the thumbnail.
-It currently resumes play from the clicked on thumbnail which is OK but I’d rather it resume play from the last image it was playing before that thumbnail was clicked on. -
I want each active image’s thumbnail to automatically fade down to 50%. In other words, when a picture appears in the mc the corresponding thumbnail has a visual clue to that activity.
-
And, with all the code I’ve stacked up I’ve lost the cool “cascading fade in thumbnails” look. I either turned it off because it was messing with the slide show’s functionality or it’s being overriden by the code.
-as an added bit of strangeness, my test reveals all the thumbnails loading stacked in the top left corner before they dispearse into proper order. ikiM, what did I do wrong?
Here’s an example of what’s happening so far:
http://www.egordesign.com/slideshowtest/photoSlideGridSlideshow.html
Here’s the code I’ve basterdized:
I’ve commented it up to keep myself on track. You’ll notice I’ve turned off some of ikiM’s script and took out the “vars” in the main thumbnail loader (I’m not sure what their function is but it “works” without them?), but I did add the “_global” script in the beginning. I’ve also turned the script names back to the original slide show’s “thumnails_fn” instead of “thumbnailer”.
I also left a lot of the original code in and just “commented” it out of commission until I’m sure I don’t need it.
Big thanks ahead of time!
//set delay time//
delay = 3000;
//not sure what this next part is///
/*
main_menu.boton1._visible=false;
main_menu.boton2._visible=false;
main_menu.boton_reset._visible=false;
*/
//-----------------------
function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
thumbnails = [];
description = [];
//uses _global.total = xmlNode.childNodes.lenght;
_global.total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
thumbnails* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
thumbnails_fn(i);
description* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
}
firstImage();
} else {
content = "file not loaded!";
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");
//adds right left key functionality
/*
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);
*/
/////Image preloader function based on Main Image alpha///
p = 0;
this.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;
}
}
};
////load clickable thumbnail image function- this affects the thumbnail image load////
///maybe this is where I override the slideshow function?///
function callImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
}
}
///
function nextImage() {
if (p<(total-1)) {
p++;
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
slideshow();
}
}
}
function prevImage() {
if (p>0) {
p--;
picture._alpha = 0;
picture.loadMovie(image[p], 1);
desc_txt.text = description[p];
picture_num();
}
}
///load first image function///
function firstImage() {
if (loaded == filesize) {
picture._alpha = 0;
picture.loadMovie(image[0], 1);
desc_txt.text = description[0];
picture_num();
slideshow();
}
}
function picture_num() {
current_pos = p+1;
pos_txt.text = current_pos+" / "+total;
}
// thumbnail code creates scroller and hit state
/*
function thumbNailScroller() {
this.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;
}
};
}
*/
////loads thumbnails into movie clip. note: i took out the var container and var image from other file//////
function thumbnails_fn(k) {
loaded_counter=0;
total_thumbs = _global.total;
thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
container._visible=false;
container._alpha=0;
container.createEmptyMovieClip("img", container.getNextHighestDepth());
tlistener = new Object();
//this specifies "this" thumbnail funciont to call image?///
tlistener.onLoadInit = function(target_mc) {
target_mc.pictureValue = k;
target_mc.onRelease = function() {
p = this.pictureValue;
callImage();
};
////this sets the thumbnail rollover action///////
/*to make the Call Image function work on RollOver you have to disable this one
(there can't be two?)*/
target_mc.onRollOver = function() {
this._alpha = 50;
};
target_mc.onRollOut = function() {
this._alpha = 100;
};
loaded_counter++;
counting_txt = loader_counter;
if(loaded_counter==total_thumbs){
main_menu.boton1._visible=false;
main_menu.boton2._visiible=false;
grid_maker_01();
}
};
image_mcl = new MovieClipLoader();
image_mcl.addListener(tlistener);
image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
////thumbnail grid layout////
MovieClip.prototype.grid_maker_01=function(f){
num=0;
col=4;
row=2;
scale=98;
space=2;
for (l=0;l<col;l++){
for (j=0;j<row;j++){
if(num<_global.total){
with(eval("this.thumbnail_mc.t"+num)){
_x=((_width+space)*scale/100)*l;
_y=((_height+space)*scale/100)*j;
_xscale=_yscale=scale;
_visible=true;
}
num++;
}
}
}
this.cascader();
}
////end grid test///
/////////necessary for basic function. controls the load of images on screen////////
/* this fader function is messing with the play slide show function
MovieClip.prototype.cascader=function(){
inter=300;
c=0;
delayed_fade=function(){
if (c<_global.total){
with(eval("this.thumbnail_mc.t"+c)){
fadein();
}
c++;
}else{
main_menu.boton_reset._visible=true;
clearInterval(delay);
}
}
delay=setInterval(delayed_fade,inter);
}
*/
//////this creates the fade in loader effect for grid 01////////////////
MovieClip.prototype.fadein=function(){
this.onEnterFrame=function(){
if (this._alpha<100){
this._alpha=this._alpha+5;
}else{
this._alpha=100;
delete this.onEnterFrame;
}
}
}
//////this sets up the reset button. without it the images don't reset properly/////////
/*
function reset(){
for(d=0;d<_global.total;d++){
with(eval("this.thumbnail_mc.t"+d)){
_x=0;
_y=0;
_alpha=0;
_xscale=100;
_yscale=100;
_rotation=0;
visible=false;
}
}
}
*/
////slide show functionality////
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}
