Slideshow Using XML and Flash (icnluding next and previous buttons)

first off, i’m pretty new with actionscript so the answer to this question may be obvious. however, i cannot for the life of me figure out what i’m doing wrong or how to fix it.

so, i went through the tutorial for the auto slideshow with xml
http://www.kirupa.com/developer/mx2004/xml_slideshow.htm

everything is working great for the auto slideshow; however, my issue is with the “previous” and “next” buttons. the “previous” seems to work in that it will back up to the previous slide, no problem, but if my slides are times for 3 seconds each and i hit previous at 2.5 seconds into the current slide, i only have .5 seconds to view the previous slide and not the full 3 seconds.

OK next issue is with the “next” button – i have 4 slides/photos it works fine from slide 1 to slide 2, but if i hit next to go from 2 to 3 the slideshow starts an endless loop from 1 to 3 to 1 to 3 to 1 and it never jumps out of that loop. the same thing happens from 3 to 4 – the loop is 2 to 4 to 2 to 4 to 2. again, it doesn’t break the loop and go back into the regular sequence. can someone please help me out with this?

thanks,
traffic

here’s the actionscript as it appears in my flash file:

delay = 3000;
//-----------------------

function loadXML(loaded) {
if (loaded) {
xmlNode = this.firstChild;
image = [];
description = [];
total = xmlNode.childNodes.length;
for (i=0; i<total; i++) {
image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
}
firstImage();
} else {
content = “file not loaded!”;
}
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load(“images.xml”);

// ///////////////////////////////////
listen = new Object();
listen.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
prevImage();
} else if (Key.getCode() == Key.RIGHT) {
nextImage();
}
};
Key.addListener(listen);

btn_previous.onRelease = function() {
prevImage();
};
btn_next.onRelease = function() {
nextImage();
};

// ///////////////////////////////////
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;
}
}
};
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();
}
}
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;
}
function slideshow() {
myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {
clearInterval(myInterval);
if (p == (total-1)) {
p = 0;
firstImage();
} else {
nextImage();
}
}
}

OK two more quickie bonus problems:

  1. the next button won’t advance from the last slide to the first and the previous won’t go from first to last slide – is there a way to enable this functionality?
  2. is there a way to add a “pause”/“play” toggle button? can someone show me the light?

thanks again,
traffic

Hey,

One question, would it be possible to add videos as a part of the slideshow.
Could someone help me with that?

Hello guys,
Thanks for your pause/play button… i’ve been trying to do it for days till i saw this posts.

It almost works, but i still have a problem.

My gallery has thumbnails and if i pic one it changes the picture correctly but it stops working the pause/play button.
Maybe you can hlp me with this, what i’m doing wrong??

Thanks in advance
ps: sorry if this is already answered; i’ve checked the forums but couldn’t find it

 
delay  = 3000;
//----------------------- 
function loadXML(loaded) {
    if (loaded) {
        xmlNode = this.firstChild;
        image = [];
        description = [];
        thumbnails = [];
        links = [];
        total = xmlNode.childNodes.length;
        for (i=0; i<total; i++) {
            image* = xmlNode.childNodes*.childNodes[0].firstChild.nodeValue;
            description* = xmlNode.childNodes*.childNodes[1].firstChild.nodeValue;
            thumbnails* = xmlNode.childNodes*.childNodes[2].firstChild.nodeValue;
            links* = xmlNode.childNodes*.childNodes[3].firstChild.nodeValue;
            thumbnails_fn(i);
        }
        firstImage();
    } else {
        content = "file not loaded!";
    }
}
xmlData = new XML();
xmlData.ignoreWhite = true;
xmlData.onLoad = loadXML;
xmlData.load("images.xml");

//////////////////////////
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();
};

///////////////////////////////////// 
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;
        picture.onRelease = function() {
            getURL(links[p], "_blank");
        };
        if (picture._alpha<100) {
            picture._alpha += 10;
        }
    }
};
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();
    }
}
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;
}
function thumbNailScroller() {
    // thumbnail code! 
    this.createEmptyMovieClip("tscroller", 1000);
    scroll_speed = 30;
    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<=(hit_left._x+40)) && (thumbnail_mc.hitTest(hit_left))) {
                thumbnail_mc._x += scroll_speed;
            }
        } else {
            delete tscroller.onEnterFrame;
        }
    };
}
function thumbnails_fn(k) {
    thumbnail_mc.createEmptyMovieClip("t"+k, thumbnail_mc.getNextHighestDepth());
    tlistener = new Object();
    tlistener.onLoadInit = function(target_mc) {
        target_mc._x = hit_left._x+(target_mc._width+5)*k;
        target_mc.pictureValue = k;
        target_mc.onRelease = function() {
            p = this.pictureValue-1;
            nextImage();
        };
        target_mc.onRollOver = function() {
            this._alpha = 50;
            thumbNailScroller();
        };
        target_mc.onRollOut = function() {
            this._alpha = 100;
        };
    };
    image_mcl = new MovieClipLoader();
    image_mcl.addListener(tlistener);
    image_mcl.loadClip(thumbnails[k], "thumbnail_mc.t"+k);
}
function  slideshow()  {

myInterval = setInterval(pause_slideshow, delay);
function pause_slideshow() {

clearInterval(myInterval);
if (p == (total-1)) {

p = 0;
firstImage();

} else {

nextImage();

}
}
} 
playing = true;
btn_play.onPress = function() {
    playing = true;
    nextImage();
};
btn_play._visible = false;
btn_play.onRelease = btn_play.onReleaseOutside=function () {
    this._visible = false
    btn_pause._visible = true
};
btn_pause.onPress = function() {
    playing = false;
    this._visible = false
    btn_play._visible = true
    clearInterval(myInterval);
};

I used the tutorial and it’s very well explained. Thank you.
So, i’m working in a gallery with thumbnails following the tutorial and i’m wondering, is it possible to have only the pictures and use a resize code to use in the thumbnails instead of resizing the pictures?

hi:)
I’ve been checking the Photo Gallery Using XML and Flash (http://www.kirupa.com/developer/mx2004/xml_flash_photogallery.htm) and trying to modify it in some ways… is it possible to make the description text fade in and out like the images do? Or at least that the description text only appeared after the images has been loaded…
Many thanks!

Gonçalo