header_graphic
header_gradient
 
:: Documentation :: Slideshow v.3

General File Descriptions:

  • XML - text file (i.e. flat file database) that is used to load multiple images at run-time
  • SWF - published Flash 8 movie file that is ready for immediate use on a website
  • FLA - Flash document that can be opened and modified using Flash 8/CS3/CS4
  • MXP - Macromedia Extension Package that can be installed into your Flash 8/CS3/CS4 component menu
  • CSS - Cascading Style Sheet that is used to configure the caption and playlist text properties
  • HTML- example web page that shows how the slideshow component should be embedded in a webpage

Each package contains 1 customizable layout in FLA format and 1 published SWF file:

  • slideshow.fla & slideshow.swf - display size = 500x300 pixels, total swf size = 620x330 pixels (includes skin)

dd

Basic use of the Default and Demo Slideshow files:

  • Upload the following example files and folders to the same location on your server:
    slideshow.swf
    index.html
    images.xml
    captions.css
    /images/ folder
  • Once the slideshow is up and running, you can edit the XML file to begin displaying your own images.
  • You can also edit the XML file to change the playback behaviors (e.g. autoplay, transition style, disable Google Tracking, etc.).
  • You can edit the "playlist" FlashVars in the index.html file to load a different XML file (e.g. to use a XML with a different filename or location).
  • You can open the FLA to change the size and other properties of the slideshow and publish a new SWF.
  • You can install the MXP to add the Slideshow Component to your Flash 8 or CS3 Component Menu, which makes it easier to access for future projects.

dd

Adding the published Slideshow (SWF) to your webpages:

To add the Slideshow to your webpage you must add the following scripts to your web document wherever you want the Slideshow to appear. Please note that the swf path (gray text), Flash player size (red text; should be equal to the swf size), and xml path (dark blue text) are specified in two places. You can alter these variables to meet your needs.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"
width="620" height="330" >
<
param name="movie" value="slideshow.swf" />
<
param name="FlashVars" value="playlist=images.xml" />
<embed
src="slideshow.swf" width="620" height="330" FlashVars="playlist=images.xml"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

dd

Modify the Slideshow and Publish a new SWF file using the FLA:

  • Using your Flash 8/CS3/CS4 authoring software, open the provided FLA file.
  • Move the Slideshow component around the stage by selecting it on the stage and dragging it to a new location, or you can use the Properties Inspector to accurately position the Slideshow (use the same approach for the Playlist component).
  • Change the size of the Slideshow component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions (use the same approach for the Playlist component).
  • Modify the Slideshow settings and behaviors (see Table 2 below for options) by selecting it on the stage, then open the Component Inspector to access the list of configurable parameters (use the same approach for the Playlist component).
  • Once you have finished modifying the component, resize the stage background to fit your modified slideshow, leaving room for a border if necessary, and save your project.
  • Publish or Export your new SWF file.

dd

Install the MXP in your Flash 8/CS3/CS4 Authoring Software:

  • Before installing the MXP file, shut down your authoring software if it is open.
  • Double click the file named Slideshow.mxp. This will open the Extension Manager, which will prompt you to complete your installation.
  • Open your copy of Flash 8/CS3/CS4 and create a new document.
  • Open the Components Panel and look for a folder named "ESA Slideshow". In this folder, there will be two components named Slideshow and Playlist.
  • Add an instance of the Slideshow component to the stage and give it an instance name of "mySlideshow" (use the same approach to add the Playlist component to the stage, and make sure to reference "mySlideshow" in the component inspector's "Slideshow Instance" parameter field).
  • Move the Slideshow component around the stage by selecting it on the stage and dragging it to a new location, or you can use the Properties Inspector to accurately position the Slideshow (use the same approach to move the Playlist component).
  • Change the size of the Slideshow component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions (use the same approach to resize the Playlist component).
  • Modify the Slideshow settings and behaviors (see Table 2 below for options) by selecting it on the stage, then open the Component Inspector to access the list of configurable parameters (use the same approach to configure the Playlist component).
  • Once you have finished modifying the component(s), resize the stage background to fit your modified Slideshow, leaving room for a border if necessary, and save your project.
  • Publish or Export your new SWF file.

dd

Modifying the source files and compiling and new component (SWC file):

  • Using your Flash 8/CS3/CS4 authoring software, open the files named Slideshow.fla and Slideshow.as (located in the /source/ folder).
  • Alter the source files according to your own specifications, and save them.
  • In the Slideshow.fla file, right click the uncompiled Slideshow component in the ‘Library’, and export a new SWC file to:
    c:\Program Files\Macromedia\Flash 8\en\Configuration\Components
  • To get the new SWC to show up in the Component list within your Flash authoring software (in the Windows menu), you’ll either need to close and reopen Flash, or you can use the “reload” button (open the components menu, click the small button just below the close button, and hit reload). Once the component list has been refreshed, you will double click the new Slideshow component to load it on the stage.
  • Use the same approach to create a new Playlist component (files associated with the Playlist component include: Slideshow.fla, Playlist.as, and HtmlCellRenderer.as - located in the /source/ folder).

Updating a component in an existing project:

  • First you have to get the new component to show up in the Components Menu within your Flash authoring software (in the Window Menu). If you have downloaded an update from our site, you should install the MXP then open your existing project FLA (Flash should be closed when you install the MXP). If you have created your own SWC using the steps above, you either need to close and reopen Flash, or you can use the “reload” button (open the Components Menu, click the small button just below the close button, and hit reload).
  • Once the Component Menu has been refreshed, you will locate and double click the new component in the list to load it on the stage.
  • Flash will open a "Resolve Library Conflict" window, and ask if you want to replace the existing item in the library - toggle the "Replace existing items" button and click "OK".
  • You should now see 2 components on the stage; one in the same position as the original, and a new component near the middle of the document.
  • Select the new component near the middle of the document and delete it.
  • The remaining component on the stage is the updated component with your previous settings.
  • You can now modify the component parameters in the Component Inspector, save your project, and publish a new SWF.

dd

Table1. Default Slideshow with Custom Controls and Playlist

 

Table2. Configurable Parameters that can be set for the Slideshow and Playlist components using the Component Inspector in Flash 8/CS3/CS4.

 

Description of each configurable parameter available within the Slideshow's Component Inspector:

  • 1 - xmlLocation - absolute or relative path to the xml file; this should be blank if you're using FlashVars to load the xml path dynamically
  • 2 - Order - determines the order of the images; options include: sequential, random.
  • 3 - Looping - determines the looping behavior; options include: true, false
  • 4 - Autoplay - determines the autoplay behavior; options include: true, false
  • 5 - Enable Media Link - makes each of the images clickable; options include: true, false
  • 6 - Media Link Target - determines the link target for the clickable images; options include: _self, _blank, _top, _parent
  • 7 - Enable Google Tracking - enables the Google Analytics tracking nodes in the XML; you must have a Google Analytics account and implement the codes to track your site statistics; options include: true, false
  • 8 - CSS URL - absolute or relative path to the CSS file that is used to configure the caption text
  • 9 - Transition - determines the transition style; options include: Fade, Wipe, PixelDissolve, Blinds, Random
  • 10 - Easing - determines the easing style; options include: none, bounce, regular, strong, elastic, back
  • 11 - Transition Duration - determines how long the transitions will last in seconds
  • 12 - Wipe - Start Location - determines the starting position of the Wipe transition; options include: '1':top left,'2':top middle,'3':top right,'4': left,'6': right,'7': bottom left,'8': bottom,'9': bottom right
  • 13 - Blinds - Number of Blinds - determines the number of blinds
  • 14 - Blinds - Width - determines the width of the blinds in pixels
  • 15 - pixelDissolve xSections - determines the number of pixel dissolve sections in the x-direction
  • 16 - pixelDissolve ySections - determines the number of pixel dissolve secitons in the y-direction

slideshow_config

Figure 1. Screenshot of the parameters available within the Slideshow's Component Inspector

 

 

Description of each configurable parameter available within the Playlist's Component Inspector:

  • 1 - Slideshow Instance - instance name of the Slideshow component (e.g. mySlideshow)
  • 2 - CSS Location - absolute or relative path to the CSS file that is used to configure text in the playlist
  • 3 - Row Height - height of each row in pixels
  • 4 - Alternate Row Color 1 - color of alternating rows (optional)
  • 5 - Alternate Row Color 2 - color of alternating rows (optional)
  • 6 - Roll Over Color - row color upon rollover
  • 7 - Selection Color - row color of selected item
  • 8 - Background Color - color of playlist background
  • 9 - Background Transparent - determines the transparency status of the playlist; options include: true, false
  • 10 - List Border Style - determines the style of the list border; options include: none, inset, outset, solid
  • 11 - Vertical Scroll Policy - determines the state of the vertical scroll bar; options include: auto, on, off
  • 12 - Scroll Track Color - color of the scroll bar track
  • 13 - Scroll Arrow Color - color of the scroll bar arrows
  • 14 - Scroll Border Color - color of the scroll bar border
  • 15 - Scroll Highlight Color - color of the scroll bar highlight
  • 16 - Scroll Shadow Color - color of the scroll bar shadow
  • 17 - Icon Symbol Name - name of a movie clip in the library that is added to each row of the playlist (optional)

slideshow_config

Figure 2. Screenshot of the parameters available within the Playlist's Component Inspector

 

dd

Working with the XML Playlist:

Configurable Parameters set within the XML: link to xml example with parameters
(note: parameters set within the xml file will override the published SWF settings)

  • order - order in which your banners will be displayed; 'sequential','random'
  • transitiontime - number of seconds it takes for each transition to complete
  • transition - 'Fade','Wipe','PixelDissolve','Blinds','Random'
  • start location - only applies to 'Wipe' transition; '1':top left,'2':top middle,'3':top right,'4': left,'6': right,'7': bottom left,'8': bottom,'9': bottom right
  • autoplay - 'true','false'
  • looping - 'true','false'
  • mediaLink - 'true','false'
  • linkTarget - '_blank','_self','_top','_parent'
  • googleTracking - 'true','false'
  • captionx - the x pixel position where the caption textfield will be created (default = 0)
  • captiony - the y pixel position where the caption textfield will be created (default = component height + 10)
  • captionw - the width of the caption text field in pixels (default = component width)
  • captionh - the height of the caption text field in pixels (default = 30)
  • cssurl - the url to the stylesheet you would like associated with the textfield (default = 'captions.css')

Nodes for loading dynamic content: link to xml example without parameters

  • title - used to populate the playlist component, and is therefore only necessary if you are using the playlist component. [img src = "path to the thumbnail image"] [hspace = "horizontal padding in pixels"] [vspace = "vertical padding in pixels"] [class='text styles defined in captions.css file'] .
  • url - absolute or relative path to the JPG, SWF, PNG, or GIF image (only the first frame of an animated GIF will be loaded).
  • caption - this text will appear as an overlay on the slideshow, you set the location and size of the text field using the "captionx, captiony, captionw, captionh" parameters described above, and the text styles are set using CSS. If you do not wish to use the caption feature you can simply delete this node.
  • duration - duration of slide in seconds
  • link - mediaLink url - the user will be taken to this address when they click the current image. If you do not wish to use the mediaLink feature, you should set the mediaLink parameter to "false".
  • gtimpressions - this address is used to track the number of impressions for the current banner in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/")
  • gtclicks - this address is used to track the number of clicks for the current banner in your Google Analytics account if the googleTracking parameter is set to "true" (string must start with a "/")

dd

Converting your image files to work with the Slideshow:

  • The Slideshow component will display JPG, SWF, PNG, or GIF images (only the first frame of an animated GIF will be loaded), so you need to convert your image files to one of these formats using Flash authoring software or another type of image conversion software.
  • The images you display will be automatically resized to fit within the Slideshow display area - the aspect ratio of the image will be retained, which could cause letterboxing if the image aspect does not match the slideshow aspect.

dd

Actionscript Application Programming Interface (API - used for advanced customization):

Public Properties:
mediaLength:Number; //Duration of current image
pauseFlag:Boolean; //Current play/pause state
currentSlidePosition:Number; //Current play time in seconds
currentSlideNumber:Number; //Current image number (first slide is number 0)
currentDownloadPosition:Number; //Percentage of total bytes downloaded for current image
 
Example call for public property: trace(mySlideshow.currentDownloadPosition);
 
Public Methods:

loadXML(pathToXML:String); //load XML dynamically

play(); //Toggle play
pause(); //Toggle pause
prevImage(); //Jump to previous image
nextImage(); //Jump to next image
jumpToImage(n:Number); //Jump to a specific image number in the XML array (n starts at 0)
 
Listener Syntax:
function handleEvent(evt) {
  if (evt.type == "start") {
    trace("start");
  }
}
 
Listener Events:
addEventListener("start", handleEvent);
addEventListener("end", handleEvent);
addEventListener("mediaLength", handleEvent);
addEventListener("mediaTime", handleEvent);
addEventListener("xmlLoaded", handleEvent);
addEventListener("mediaControls", handleEvent);
addEventListener("loadError", handleEvent);
addEventListener("play", handleEvent);
addEventListener("pause", handleEvent);

dd

Related Links:

dd

Release Notes v.3.1:

  • We are no longer recommending the Javascript embed approach (AC_RunActiveContent), because it is no longer required to automatically activate Flash objects in Internet Explorer.
 
footer_graphic

Support - Documentation - Skin Wizard - Sample Skins - Tutorials
Copyright © 2003-2012 Earth Science Agency, LLC - All Rights Reserved