Photo
Slideshow Using
XML and Flash
by
kirupa |
28 December 2004
In this tutorial, you will learn how to create a
slideshow that loads image data from an XML file. While I
will explain the new concepts and code used in making the
slideshow, you must understand how my earlier photo gallery
explained in the
xml photo gallery tutorial works.
The reason is that I will extend
my earlier photo gallery code to work in this slideshow format.
The following is an example of a slideshow you will create:
[ the slideshow automatically
progresses to the next image ]
Most of this tutorial involves using recycled
code and interface elements from my earlier tutorial.
Therefore, you should download and open the final photo
gallery source file provided below:
If you want, you can test your
movie now itself. You should see a fully functioning photo
gallery.
Make sure you open the source
file from above into your version of Flash. Select the frame in the
action layer
and press F9 to view the Actions. Highlight all of the code you see
and overwrite it with the following code:
- delay
= 3000;
- //-----------------------
- function
loadXML(loaded)
{
- if
(loaded)
{
- xmlNode
=
this.firstChild;
- image
=
[];
- description
=
[];
- total
=
xmlNode.childNodes.length;
- for
(i=0;
i<total;
i++)
{
- image[i]
=
xmlNode.childNodes[i].childNodes[0].firstChild.nodeValue;
- description[i]
=
xmlNode.childNodes[i].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();
- }
- };
- 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();
- }
- }
- }
If you test your animation now,
you will see that the photo gallery cycles through your images
automatically using data from the images.xml file. If you
want, you can remove the next and previous buttons, for
you probably won't need it.
On the next page, I will point
out the few, yet important, differences between the photo gallery code and the
new slideshow code. After that, I will explain setInterval
and how it works..
Onwards to the
next page!
| |
page 1 of 3 |
 |
|
