Photo
Slideshow Using
XML and Flash
by
kirupa |
28 December 2004
Alright! Now that you know what we are trying to
accomplish, from the previous page, let's go through the code.
To start our tour, let's take a look at the
slideshow() function:
- function
slideshow()
{
- myInterval
=
setInterval(pause_slideshow,
delay);
- function
pause_slideshow()
{
- clearInterval(myInterval);
- if
(p
==
(total-1))
{
- p
=
0;
- firstImage();
- }
else
{
- nextImage();
- }
- }
- }
The above function contains
(among other things) the
setInterval code required to cause the animation to pause and
resume after a fixed amount of time:
- myInterval
=
setInterval(pause_slideshow,
delay);
setInterval takes two arguments:
a function and a number representing time in milliseconds. I
assign the setInterval function to the variable myInterval
because it now allows me to manipulate or access the setInterval
code throughout the proper scope in the animation.
With setInterval, what you are
doing is telling Flash to execute a function every x
milliseconds. In our code, I am telling Flash to execute the
pause_slideshow function after a delay specified by the delay
variable. I explain the delay variable towards the end.
- function
pause_slideshow()
{
- clearInterval(myInterval);
- if
(p
== (total-1))
{
- p
=
0;
- firstImage();
- }
else {
- nextImage();
- }
- }
You have the pause_slideshow
function nested inside the slideshow function. Before I do
anything in the function, I first run clearInterval to
remove the setInterval call from earlier. When you clear a call
to your setInterval function, Flash stops calling the
setInterval instance (assigned to myInterval in our case)
specified by your clearInterval function. I will explain in a
few paragraphs why I clear the setInterval call in greater
detail.
- if (p
== (total-1))
{
- p
= 0;
- firstImage();
- }
else {
- nextImage();
- }
The above code is used to loop
the slideshow once you reach the last image in your sequence of
images. I check to see if you reach the last image. If you
remember from our photo gallery, the variable p keeps track of
which image is currently showing. If we reach the last image
(total - 1), then we reset the counter p to 0. We also tell
Flash to call our firstImage() function that displays the first
image. If we are not at our last image, I simply call the
nextImage() function.
So, we have our slideshow
function created, but it doesn't actually do anything unless it
is actually called first. We can't just randomly place a call to
our slideshow function at the end of our movie. We want to call
it after the image has loaded.
Remember - we don't want to have
our timer start while the image is preloading. We only want to
start our countdown initiated by setInterval only after the
image has loaded. A good place to place our slideshow would be
after the actual preloader code:
- 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
firstImage()
{
- if
(loaded
==
filesize)
{
-
picture._alpha
=
0;
-
picture.loadMovie(image[0],
1);
-
desc_txt.text
=
description[0];
-
picture_num();
- slideshow();
- }
- }
Since we have two functions that
call an image - nextImage & firstImage - we place
our call to the slideshow function inside our if statement that
executes code only after the image has fully loaded.
Phew - we are done with the major
chunks of code now. Yet, I still have not given a good enough
reason as to why I clear the setInterval by using the
clearInterval function! When a setInterval is called, after a
specified amount of time (the second argument to setInterval),
the function is called again. The function keeps getting called,
theoretically, for an indefinite period of time! That would work
great for a clock!
Unfortunately, the
non-terminating nature of setInterval is a problem for us with
regards to our slideshow. We only want our slideshow function to
be called after an image is loaded. Our nextImage function
contains a call to the slideshow function also. After one or two
image changes, you will have multiple calls to setInterval that
each call the nextImage function. You have the first setInterval
call, then you have another setInterval call called by
nextImage, and then you keep repeating that until you have a LOT
of setInterval calls running simultaneously. Calling a new
setInterval procedure does not override any existing setInterval
procedures. They simply get called along with any previous
incarnations of setInterval calls.
Therefore, we must find a way to
remove or stop old setInterval calls. ClearInterval is a good
built-in function that accomplishes just that. We clear our
setInterval calls in order to prevent multiple calls that causes
Flash to simply zoom through all of the images in a fraction of
the time.
After we call our slideshow
function, I immediately make a call to clear the interval
assigned by myInterval. That ensures that only one instance of
myInterval runs at any given time, and therefore the pause
between successive images remains the same!
- delay
= 3000;
- //-----------------------
When calling our setInterval
function, we passed in an argument called delay that takes in a
number in milliseconds. We declare our delay variable early on
because there is no harm in doing so, but more importantly, it
is easier for you to spot it amidst all of the other code.
In my example, I have delay set
to 3000. 3000 equates to 3 seconds, for the value is actually in
milli (1/1000) seconds. The higher the number, the longer your
image will be displayed before proceeding to the next image.
That is all there is to extending
our photo gallery in order to make a slideshow. I have provided
the MX 2004 and MX source files for this file:
I hope the information helped.
If you have any questions or comments, please don't hesitate to post them on the
kirupa.com Forums. Just post your question and I, or our friendly
forum helpers, will help answer it.
The following is a list of related tutorial and help resources that you may find
useful:
 |
page 3 of 3 |
|
|
