Easy Slideshow Component

Requirements :
Macromedia Flash MX,
Easy Slideshow Component, get it here
Intermediate knowledge of flash, and some knowledge of flash MX.

Time Required :
30-60 minutes.

Features :
Create Slideshow of images (jpegs), or swfs. Smoothly transition from one image to another. Choose from a variety of masking styles or create your own masks instead. Your custom masks can be both animated or scripted. Preview : Before we begin, you can take a look at what the slideshow component does here.

Introduction :
Prior to Flash MX, masking was limited to graphic shapes only. However Flash MX introduces the ability to use movieclips as masks as well. This feature of flash MX is exploited to generate the various masking transitions you saw above. The component loads a new file in the background and then removes the mask of the upper image piece by piece to generate the transition. Initially a data file (XML or text) is loaded into the component which parses the data and then goes on to load the current file from the list.

Usage :
Drag the Easy Slideshow component from the components panel to stage. You may resize it as you wish. Then enter the components parameters in the property inspector panel. And you are all set to go.

Parameters :
dataFile :
The absolute or relative URL to your data file. You can load XML data as well as text data into the component. The text data file can come from a server-side script like ASP, PHP, CFML, etc. as well.

E.g. :
Sample data Files can be,
Absolute -
http://www.mysite.com/imageData.xml OR
http://www.mysite.com/data/imageData.asp

Relative -
imageData.xml OR
data/imageData.asp,
depending on the location of your flash movie with respect to the data file

Syntax :
mySlideshow.setDataFile ("http://www.mysite.com/imageData.xml");

E.g. :
Sample dataTypes, only 2 "xml" OR "txt"

Syntax :
mySlideshow.setDataType ("txt");

E.g. :
Default pieces parameter is 20.

Syntax :
mySlideshow.setPieces (40)

E.g. :
Sample maskStyles "none", "fade", "dissolve", "stripesHorz", "stripesVert", "stripesDiag", "Sweep1", "movieclip", "random" Use lowercase characters for consistency.

Syntax :
mySlideshow.setMaskStyle ("random");

E.g. :
Sample removalStyles : "forward", "backward", "random", "adaptive", "random-random"

Syntax :
mySlideshow.setRemovalStyle ("adaptive");

E.g. :
Same as the linkage identifier you specify for your movieclip in the library.
Syntax :
mySlideshow.setMcID ("pageFlipMask");

E.g. :
any number between 1 & 100.
Syntax :
mySlideshow.setFadeStep (10);

E.g. :
a boolean (true or false)
Syntax :
mySlideshow.setLoop (true);

E.g. :
a number, ideally not very large, so that the transition is smooth. autoDelay : The time to pause in autoPlay mode before getting the next file. This time is in milliseconds.

Syntax :
mySlideshow.setAutoDelay (5000); // 5 seconds

E.g. :
Sample values : "forward", "backward", or "random".
Use lowercase characters for consistency.
Syntax :
mySlideshow.setPlayMode ("forward");

E.g.:
// in the sample (SlideshowPlayer) the loadHandler is updateCaption

Syntax :
setLoadHandler (functionName, containingObject);
// in this case
mySlideshow.setLoadHandler ("updateCaption", _root);

where _root is the containing object. If not specified it defaults to the parent timeline.

E.g. :
30 is Default

Syntax :
mySlideshow.preloader.setHeight (50);

E.g. :
"top" or "bottom"
Syntax :
mySlideshow.preloader.setDock ("top");

E.g. :
Any font face, embedded or otherwise.
Syntax :
mySlideshow.preloader.setFontFace ("Arial");

E.g. :
a number, default is 14
Syntax :
mySlideshow.preloader.setFontSize (8);

E.g. :
"#FF0000" // red
Syntax :
mySlideshow.preloader.setFontColor ("#FF0000");

E.g. :
0x00FF00 // green
Syntax :
mySlideshow.preloader.setFillColor (0x00FF00);

E.g. :
0x0000FF // blue
Syntax :
not needed

E.g. :
a boolean (true of false)
Syntax :
not needed

E.g. :
a boolean (true or false)
Syntax :
mySlideshow.preloader.setShowBytes (true);

»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»»

How To create the data file :
You can load 2 types of data files into the Easy slideshow component, namely xml and text. These files can come from any server-side scripting language as well. The data file contains the following information :
1. totalFiles in the file list
2. currentFile (first file) to load into the slideshow.
3. total attributes of each file. (URL attribute is necessary)
4. URL attribute indicates the location of that file. If relative, it should correspond to the location of the slideshow movie.
5. Other attributes of each individual file, like title, description, etc.

Structure of the XML dataFile :
The basic structure of the xml file should be :

<files totalfiles="2" currentFile="2">

<attributes total="1">

<attribute>URL</attribute>
</attributes>
<file num="1">

<URL>myImage1.jpg</URL>
</file>
<file num="2">

<URL>myImage2.jpg</URL>
</file>

E.g. :
mySlideshow.setAutoDelay (5000);
mySlideshow.startAutoPlay ();

makes the slideshow load a new file every 5 seconds.

E.g. :
mySlideshow.stopAutoPlay ();

E.g.:
//set the dataType to "xml"
mySlideshow.setDataType ("xml");

//set the dataFile to "newData.xml"
mySlideshow.setDataFile ("newData.xml");

//and load this new data
mySlideshow.doLoadData ();

stop ();
component = this._parent._parent._parent;
this._width = component.w;
this._height = component.h;
gotoAndPlay (this.currDirection);

stop ();
component.clearLag ();

stop ();
component.clearLag ();

component = this._parent._parent._parent;
mc = this._parent._parent;
dummy._width = component.w;
dummy._height = component.h;

component.startClearing.call (component);