Tutorial
Title: Xml driven Slideshow
Time: 10 Mins
Difficulty Level: Intermediate
Summary: How to make a xml driven slideshow
Assumed knowledge: Xml, Components
Author: Chris Calangi
Website: Templates247.com
Tutorial Files: Source

 

 

Preview:

 

IHi here's another tutorial for you guys. I picked up a very nifty component for flash. It was developed by Alessandro Crugnola (Sepirtoh IT) and was inovate by Emanuele Feronato to add pauses.

This is a very useful component since you don't need that much knowledge in flash to get this xml driven slideshow to work. Now, on to our nifty tutorial!.

Fire up Flash and open the fla included in this file <link of flash> create a new document and think of a dimension you want to use for your images. In this tutorial, I used 300x225 pixel.

So make a new document with this dimension and use 300x225. press f11 if the library is not showing. Click the dropdownmenu and choose the opened fla library. Click the "ImageFader Folder" and right click > copy.

Click on the dropdownmenu and select your document again, and paste the whole folder on your library. You should now have the whole folder inside your fla file. Drag the ImageFader component to your stage and press ctrl-K to bring up the align window. Click match width and height. Make sure the align to stage is selected. After that press align vertical and align horizontal.

Now that you have the component on your stage, its now ready to customize it. =) It's not really that hard to customize it. You just need to input the xml file that our fader will be reading.

In our case I use images.xml, which is also included in our source file. Just click on the component in the stage, name it to whatever you want. I use "fader" in this example. Now set the loop parameter to true.

The code of the xml file:

<RSS PAUSE="6000">
<IMAGE TRANSITION="0" ALT_PAUSE = "6000">gallery01.jpg</IMAGE>
<IMAGE TRANSITION="0" ALT_PAUSE = "6000">gallery02.jpg</IMAGE>
</RSS>

Our code is pretty straight forward, I'll explain each part of it as we go on.

First line:
<RSS PAUSE="6000">

This stands for the default delay value for the slideshow. Its express in milliseconds so 6000 means 6 seconds.

Second Line:
<IMAGE TRANSITION="0" ALT_PAUSE = "6000">gallery01.jpg</IMAGE>

ALT_PAUSE = "6000" stands for alternate delay which is a custom delay for that particular image
gallery01.jpg stands for the source file that we will load in our slideshow
IMAGE TRANSITION="0" stands for image transition type. The "0" value is the for random transiton.

There are 9 transitions all.

Transition 1:

Transition 2:

Transition 3:

Transition 4:

Transition 5:

Transition 7:

Transition 8:

Transition 9:

 

I removed transition 6, because it's still has a bug, but you can use the other transitions and add on your own, Ofcourse adding that transition would be another tutorial. Till nex time! :)