Slideshow Template
We have created a slideshow library to allow for easy creation of slide show widgets. Here's an example:
Upon initialization, the slideshow will load and cache images into clips and begin automatically playing them. There is built-in support for manual control to scroll through the previous and next clips and all that’s required is binding the buttons to the functions.
Setting Your Development Environment(Flash Pro/Flash CS3):
Before we proceed, you need to setup your development environment in Flash Pro or the new Flash CS3. When importing external *.as files, the classpaths must be setup correctly in the corresponding fla file or in the development environment to use any available public methods provided by libraries.
First let's setup the folder structure for our project. Create folders and subfolders are shown below.
My Projects (root)
The folder structure above will be the foundation for all the code libraries that we provide however as a third party developer you can stick to your own conventions.
Breakdown of Folder Structure
com > util > slideshow:
The folder "com > util> slideshow" contains the external ActionScript file called "Slideshow.as". This external file's purpose is to handle all data abstraction for you. You provide an empty movie clip for the images to be loaded into, an array of images you would like to slideshow through, an array of descriptions for those images, and time in seconds for each to transition through. Please view the section "Slideshow API(s)" below "Usage Instructions" for more information.
my_slideshow_project > app:
Flash can publish an *.exe (executable) or *.app (macintosh projector). This is where you would deploy if you were creating a desktop application. Not necessary for now.
my_slideshow_project > assets:
All assets from images, sounds, etc.. used in your flash file would be stored here.
my_slidshow_project > deploy:
In the flash libraries we provide for you, the flash files will be publishing to this directory to separate the source files from your compiled files (*.SWF). If you download the full zip package for the Slideshow template, a *.SWF should have been compiled for you already in this directory called "slideshowExample.swf".
my_slideshow_project > source:
All flash source files (*.FLA) will be in this directory. If you download the full zip package of the Slideshow template, you will find the *.FLA file called "slideshowExample.fla".
Adding a Classpath
As mentioned before, we prefer to add classpaths in source flash files (*.FLA) settings so that users do not need to change or add to their native Flash Pro or CS3 environment settings, and add ease to the portability of our source files.
Let's learn on how to add a classpath to an *.FLA file:
1. Open an existing *.FLA or create a new one.
2. Go to "File > publish settings" . This will pop up the "Publish Settings" dialog box.
3. Near the top you will see "Formats | Flash | HTML" tabs. Now select "Flash".
4. Next to "ActionScript version: ActionScript 2.0" will be a button to select called "Settings". Press this button to reveal the "ActionScript 2.0 Settings" dialog box.
5. You can manually add by selecting "+".
Usage Instructions
1. Open the slideshowExample.fla.
2. In your project: Add the slideshow class to your build path and import the class.
3. In your library, pull the “MC Object” movieclip from the Slideshow Object flash document library into your image frame.
4. Name the new clip e.g., “screenshot_mc”… all images will be dynamically loaded into this.
5. Create a new instance of the Slideshow class and attach its fetchPrev and fetchNext functions to the prev/next presses, if you want to enable manual control.
Example code
// Import the Library
import com.util.slideshow.*;
// Declare and Define variables
var msTimeout:Number = 1950;
var images:Array = new Array("one.jpg", "two.jpg", "three.jpg");
var desc:Array = new Array("One", "Two", "Three");
// Instantiate Slideshow Object
var ss:Slideshow = new Slideshow(screenshot_mc, images, descs, msTimeout);
// Define User Controls
prev_btn.onPress = function():Void { ss.fetchPrev(); }
next_btn.onPress = function():Void { ss.fetchNext(); }
Slideshow API(s)
Current Available Methods:
- (CONSTRUCTOR) public function Slideshow(mcIn:MovieClip, img:Array, desc:Array, timeout:Number, controlIn:MovieClip, doAutoPlay:Boolean, transitionalType:String, doLoop:Boolean);
Parameter: mcIn
Type: MovieClip
Value: MovieClip instance name that will hold the image
Parameter: img
Type: Array
Value: Array of images url references (absolute)
Optional Parameters
Parameter: desc
Type: Array
Value: Array of descriptions for each image
Parameter: timeout
Type: Number
Value: Delay between each image in milliseconds (defaults to 1950)
Parameter: controlIn
Type: MovieClip
Value: MovieClip containing controls and optional status indicator.
Parameter: doAutoPlay
Type: Boolean
Value: If slideshow should begin automatically (defaults to true)
Parameter: doLoop
Type: Boolean
Value: If slideshow should loop through all images and start from beginning (defaults to true)
- public function fetchPrev()
Display previous image - public function fetchNext()
Display next image - public function destroy()
Function ensures proper cleanup and removal of screen shot MCs. Use this in conjunction with a delete on the slideshow object.
Check it out
Complete Slideshow Template Package
Individual Files
Next Steps
Be one step closer to being a widget ninja by learning how to link out of MySpace...
