Tutorial details:
Written by: Darshan Sawardekar | http://www.octaneinteractive.com/
Time: 45 minutes
Difficulty Level: Intermediate
Requirements: Flash MX, Easy Slideshow Component, .mxp (recommended)/ .zip
Topics Covered: How to use the new LocalConnection Objects in Flash MX to interact between SWF files.
Assumed knowledge: Variables, Paths, Objects, Methods, Flash MX Event Model.

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.

Sample data Files can be,
Absolute -

http://www.mysite.com/imageData.xml OR

Relative -

imageData.xml OR

depending on the location of your flash movie with respect to the data file


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

dataType: Specifies whether the dataFile is an XML document or plain text. Please specify the correct dataType for the corresponding dataFile. Note the dataType parameter specifies the data type of the data file, and not the data type of the data inside the data file.

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

Syntax :

mySlideshow.setDataType ("txt");

pieces: As explained above the masking transitions are achieved by removing each piece of the overlying mask one by one. The pieces parameter specifies how many pieces constitute the entire mask. Please do not set this parameter too high as it will cause flash to think it is an infinite loop, causing the script to stop responding. The Default value is 20. Masking styles like "dissolve", "stripesDiag", "Sweep1", etc. are processor intensive tasks and should not be used with very high number of pieces. On slower machines pieces above 150-200 can cause slowing down of the movie. You might have to experiment a bit to achieve the right balance.

Also, you might get erroneous lines or stripes depending on you pieces parameter. The individual piece widths and heights for most masking styles is calculated as the ratio,

componentWidth/pieces AND

To avoid getting these lines or stripes, try to use pieces which are exactly divide the component width or height.
For component width 200, 20 pieces is okay, but 17 is not.

E.g.: Default pieces parameter is 20.

Syntax :

mySlideshow.setPieces (40);

maskStyle: Mask styles are transitions between the currently displaying image and the newly loaded image.

You can choose from these predefined maskStyles, none, fade, dissolve, stripesHorz, stripesVert, stripesDiag, Sweep1, movieclip, random.

none: No transition effect, as soon as the next image is loaded it is displayed on top.
fade: The front image fade out.
dissolve: A rectangular grid is created and pieces are removed from it depending on the pieceRemoval style. Coupled with random piece removal you can get a dissolve animation effect.
stripesHorz: Horizontal stripes are removed from the front image piece by piece, thereby uncovering the next loaded image.
stripesVert: Vertical stripes are removed from the front image pieces by piece, thereby uncovering the next loaded image.
stripesDiag: Diagonal pieces of the front image are removed piece by piece.
Sweep1: A variation of the stripesDiag style, but removes 3 different pieces simultaneously.
movieclip: Uses your own movieclip as the custom mask that removes piece by piece of the front image. The mcID parameter has to be specified correctly for this to work. More information on creating your own custom masks later.
random: randomly chooses a masking style from the above mentioned styles.

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

Syntax :

mySlideshow.setMaskStyle ("random");

removalStyle: This parameter indicates the order of removal of the pieces from the mask. The following removalStyles are available: forward, backward, random, adaptive, random-random

forward: pieces are removed in the order that they were created. (FIFO - First in First Out)
backward: pieces are removed in the opposite order that they were created (LIFO - Last in First Out)
random: pieces are removed randomly
adaptive: When navigating to the next image, the forward removalStyle is used and when navigating to the previous image, the backward removalStyle is used.
random-random: A random removalStyle is chosen between the above 4 styles.

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


mySlideshow.setRemovalStyle ("adaptive");

mcID: Specifies the linkage identifier of your customMask movieclip. More information on creating you own custom masks later. 2 Sample custom Masks (pageFlipMask and scriptedMask) can be found in the custom masks folder of the Easy slideshow component.

E.g.: Same as the linkage identifier you specify for your movieclip in the library.
Syntax :

mySlideshow.setMcID ("pageFlipMask");

fadeStep: The speed with which the front image fades, when using the "fade" maskStyle. A number between 1 and 100 is expected.

E.g.: any number between 1 & 100.
Syntax :

mySlideshow.setFadeStep (10);

loop: Specifies whether the Slideshow loops after the end of the file list. If specified to true, the slideshow loads the first file after the last file, and the last file after the first file.

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

mySlideshow.setLoop (true);

removalDelay: The time to pause before removing the next piece of the mask. This time is specified in milliseconds. The default is 1.

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

The direction of play back of the slideshow in autoplay mode. The following playModes are available, forward, backward, random
forward: loads the next file in the file list.
backward: loads the prev file in the file list.
random: randomly load any file in the file list.

E.g.: Sample values: "forward", "backward", or "random".
Use lowercase characters for consistency.

mySlideshow.setPlayMode ("forward");

loadHandler: The loadHandler function is called every time a file is loaded into the Easy Slideshow component. 3 arguments are passed to the load handler function.
1. An object containing all the attributes of the current file.
2. An array containing the names of all the attributes available.
3. The file ID of the currently loaded file.
The load handler function can be used to display information about the currently loaded file, outside the Easy Slideshow component. More information on using loadHandlers later.

// 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.