Groups | Blog | Home
all groups > flash actionscript > april 2006 >

flash actionscript : Flash XML Slideshow - Load next image after set amount of time


Robert (IT-FX)
4/22/2006 9:38:31 PM
I'm creating flash xml slideshow and have managed to get the images to load
from the XML file. What I want to do now is have a timer that loads the next
image after x amount of seconds. Any help would be great.

Code sample

stop();

// Create XML Object
slideshow_xml = new XML();

// Start slideshow once XML file is loaded
slideshow_xml.onLoad = startSlideShow;

//Load XML file
slideshow_xml.load("slideshow.xml");

//Ignore Whitespace in XML Document
slideshow_xml.ignoreWhite = true;

//Create Function for Slideshow - Shows first slide and initalises variables
function startSlideShow(success) {
if (success == true) {
rootNode = slideshow_xml.firstChild;
totalSlides = rootNode.childNodes.length;
firstSlideNode = rootNode.firstChild;
currentSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(firstSlideNode);
}
}

function updateSlide(newSlideNode) {
imagePath = newSlideNode.attributes.jpgURL;
slideText = newSlideNode.firstChild.nodeValue;
loadMovie(imagePath, loadTarget);
}
Robert (IT-FX)
4/23/2006 12:06:04 PM
I've added the following code to the bottom of the code I posted previously

slideTimer = setInterval(updateSlide, 5000);

It loads the first image as indicated by the xml file but it doesn't load the
second image saying it is undefined however it looks ok when I rechecked it.
Can someone tell me if I am parsing the paramaters to the setInterval function
correctly?
LuigiL
4/23/2006 12:36:36 PM
You're not passing anything to the updateSlide function. Pass a parameter:
slideTimer = setInterval(updateSlide, 5000, secondSlide);
LuigiL
4/25/2006 12:00:00 AM
Maybe something like

function nextSlideImage() {
nextSlideNode = currentSlideNode.nextSibling;
if (nextSlideNode == null) {
rootNode = slideshow_xml.firstChild;
totalSlides = rootNode.childNodes.length;
firstSlideNode = rootNode.firstChild;
currentSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(firstSlideNode);
} else {
currentIndex++;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
}
}
Robert (IT-FX)
4/25/2006 3:59:33 AM
Ok I've added the following code


function nextSlideImage() {
nextSlideNode = currentSlideNode.nextSibling;
if (nextSlideNode == null) {
break;
} else {
currentIndex++;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
}
}


It's working now however where I have the break in the above function, how do
I get the process to repeat. I can copy the code from the startSlideShow
function but surely there is a way to call the function again. Any help is
really appreciated.
Robert (IT-FX)
5/1/2006 12:00:00 AM
Ok I've managed to get most of this working including the alpha fade in. I
haven't been able to get the images to fade out (fadeImageOut function) so if
someone can tell me what I'm doing wrong. Also should I have some sort of
preloader function for when each image loads? and if so any pointers, then it
should be done except that I might need to add some text for each image in the
XML file.



stop();

var container:MovieClip = this.createEmptyMovieClip("container",
this.getNextHighestDepth());

var loader1:MovieClip = this.createEmptyMovieClip("loader1",
this.getNextHighestDepth());

var loader2:MovieClip = this.createEmptyMovieClip("loader2",
this.getNextHighestDepth());

container._x = 0;
container._y = 0;

function fadeImageIn() {
var fadeTween = new mx.transitions.Tween(loader1, "_alpha",
mx.transitions.easing.Regular.easeIn, 0, 100, 1.5, true);
loadmovie(imagePath, loader1);
}

function fadeImageOut(loader1) {
var fadeTween = new mx.transitions.Tween(loader1, "_alpha",
mx.transitions.easing.Regular.easeOut, 100, 0, 1.5, true);
unloadMovie(loader1);
}

// Create XML Object
slideshow_xml = new XML();

// Find out what this does
slideshow_xml.onLoad = startSlideShow;

//Load XML file
slideshow_xml.load("slideshow.xml");

//Ignore Whitespace in XML Document
slideshow_xml.ignoreWhite = true;

//Create Function for Slideshow - Shows first slide and initalises variables
function startSlideShow(success) {
if (success == true) {
rootNode = slideshow_xml.firstChild;
totalSlides = rootNode.childNodes.length;
firstSlideNode = rootNode.firstChild;
currentSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(firstSlideNode);
}
}

function updateSlide(newSlideNode) {
imagePath = newSlideNode.attributes.jpgURL;
slideText = newSlideNode.firstChild.nodeValue;
//loadMovie(imagePath, loader1);
fadeImageIn();
}

function nextSlideImage() {
nextSlideNode = currentSlideNode.nextSibling;
if (nextSlideNode == null) {
rootNode = slideshow_xml.firstChild;
totalSlides = rootNode.childNodes.length;
firstSlideNode = rootNode.firstChild;
currentSlideNode = firstSlideNode;
currentIndex = 1;
updateSlide(firstSlideNode);
} else {
currentIndex++;
updateSlide(nextSlideNode);
currentSlideNode = nextSlideNode;
}
}


slideTimer = setInterval(nextSlideImage, 5000);
LuigiL
5/1/2006 7:00:54 PM
[quoted text, click to view]
function fadeImageIn() {
var fadeTween = new mx.transitions.Tween(loader1, "_alpha",
mx.transitions.easing.Regular.easeIn, 0, 100, 1.5, true);
loadmovie(imagePath, loader1);
}
Either the last line contains a typo (it's loadMovie with capital M) or you
call a function that you don't show here. If it's a typo then maybe this works
when testing locally but it won't work online. You need to load the jpg first
and when it's completely loaded you can perform the tween. Hit F1 and search
for loadMovie() for examples how to use the function (use the
MovieClip.loadMovie() instead of the global function). And if you are targeting
the Flash Player 7, I would use the MovieClipLoader Class.

[quoted text, click to view]
I don't see any call to the function so that's probably what is wrong.
function fadeImageOut(loader1) {
var fadeTween = new mx.transitions.Tween(loader1, "_alpha",
mx.transitions.easing.Regular.easeOut, 100, 0, 1.5, true);
unloadMovie(loader1);
}
This won't work. The code will be executed right away. If you first want to
fade out you will have to use unloadMovie() in a function you define for the
onMotionFinished handler of the tween:
function fadeImageOut(loader1) {
var fadeTween = new mx.transitions.Tween(loader1, "_alpha",
mx.transitions.easing.Regular.easeOut, 100, 0, 1.5, true);
fadeTween.onMotionFinished=function(){
unloadMovie(loader1);
}
}
But, when you remove the loader1 then how are you going to load new content?

The script still needs some work. On kirupa.com (and other sites) you will
find good tutorials on this topic. I would look into them before you proceed.
AddThis Social Bookmark Button