header_graphic
header_gradient
 
:: Documentation :: Banner Rotator v.3

General File Descriptions:

  • XML - text file (i.e. flat file database) that is used to load multiple banners 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
  • AS - action script source code files that can be used to modify the banner rotator component
  • CSS - Cascading Style Sheet that is used to configure the caption text properties
  • HTML- example web page that shows how the banner rotator component should be embedded in a webpage

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

  • rotator.fla & rotator.swf - banner size = 728x90 pixels, total swf size = 728x90 pixels (i.e. no border)

dd

Basic use of the Default and Demo Banner Rotator files:

  • Upload the following example files and folders to the same location on your server:
    rotator.swf
    index.html
    banners.xml
    caption.css
    /banners/ folder
  • Once the rotator is up and running, you can edit the XML file to begin displaying your own banners. learn more
  • You can also edit the XML file to change the playback behaviors (e.g. pause time, 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 rotator and publish a new SWF.
  • You can install the MXP to add the Banner Rotator Component to your Flash 8/CS3/CS4 Component Menu, which makes it easier to access for future projects.

dd

Adding the published Banner Rotator (SWF) to your webpages:

To add the Banner Rotator to your webpage you must add the following embed script (colored text) to the body of your web document wherever you want the rotator 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="728" height="90" >
<
param name="movie" value="rotator.swf" />
<
param name="FlashVars" value="playlist=banners.xml" />
<embed
src="rotator.swf" width="728" height="90" FlashVars="playlist=banners.xml"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

dd

Modify the Banner Rotator and Publish a new SWF file using the FLA:

  • Using your Flash 8/CS3/CS4 authoring software, open the provided FLA file.
  • Move the BannerRotator 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 rotator.
  • Change the size of the Banner Rotator component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions.
  • Modify the Banner Rotator 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.
  • Once you have finished modifying the component, resize the stage background to fit your modified rotator, 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 or CS3 Authoring Software:

  • Before installing the MXP file, shut down your authoring software if it is open.
  • Double click the file named BannerRotator.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 Banner Rotator ". In this folder, there will be a component named BannerRotator.
  • Add an instance of the BannerRotator component to the stage.
  • Move the BannerRotator 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 rotator.
  • Change the size of the Banner Rotator component by selecting it on the stage, then open the Properties Inspector and type in your desired dimensions.
  • Modify the Banner Rotator 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.
  • Once you have finished modifying the component, resize the stage background to fit your modified rotator, 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 BannerRotator.fla and BannerRotator.as (located in the /source/ folder).
  • Alter the source files according to your own specifications, and save them.
  • In the BannerRotator.fla file, right click the uncompiled BannerRotator 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 BannerRotator component to load it on the stage.

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 Banner Rotator (728 x 90 pixels)

Table2. Configurable Parameters that can be set using the Component Inspector in Flash 8/CS3/CS4.

Description of each configurable parameter available within the 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 - Transition - determines the transition style; options include: Fade, Iris, Wipe, BasicTween, PixelDissolve, Blinds, Random
  • 3 - Transition Direction - determines the load direction; options include: left_to_right, right_to_left, top_to_bottom, bottom_to_top
  • 4 - Transition Duration - determines how long the transitions will last in seconds
  • 5 - CSS URL - absolute or relative path to the CSS file that is used to configure the caption text
  • 6 - Enable Media Link - makes each of the banners clickable; options include: true, false
  • 7 - Banner Link Target - determines the vertical scroll policy; options include: _blank, _self, _top, _parent
  • 8 - Enable Alpha Fade - determines the alpha fade policy; options include: true, false.
  • 9 - Pause Duration- determines how long each banner is displayed in seconds
  • 10 - Order - determines the order of the banners; options include: sequential, random.
  • 11 - 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
  • 12 - Blinds Number - determines the number of blinds if the transition style is set to Blinds.
  • 13 - Blinds Width - determines the width of the blinds in pixels if the transition style is set to Blinds
  • 14 - pixelDissolve xSections - determines the number of pixel dissolve sections in the x-direction
  • 15 - pixelDissolve ySections - determines the number of pixel dissolve secitons in the y-direction

rotator_config

Figure 1. Screenshot of the parameters available within the 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'
  • pausetime - number of seconds between each banner transition
  • transitiontime - number of seconds it takes for each transition to complete
  • transition - 'BasicTween','Fade','Iris','Wipe','PixelDissolve','Blinds','Random'
  • direction - 'left_to_right','right_to_left','top_to_bottom','bottom_to_top'
  • mediaLink - 'true','false'
  • linkTarget - '_blank','_self','_top','_parent'
  • googleTracking - 'true','false'
  • alphaFade - '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)
  • cssurl - the url to the stylesheet you would like associated with the textfield (default = 'caption.css')

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

  • image - absolute or relative path to the JPG, SWF, PNG, or GIF banner image (only the first frame of an animated GIF will be loaded).
  • 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".
  • caption - this text will appear as an overlay on the rotator, you set the location using the "captionX" and "captionY" 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.
  • 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 Banner Rotator:

  • The banner rotator component will display JPG, SWF, PNG, or GIF banner 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 banners you intend to display need to have the exact same dimensions as the banner rotator you're using (e.g. if your banners are 250x250 pixels, you need to create a banner rotator with dimensions 250x250 pixels).

dd

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

Public Methods

loadXML(pathToXML:String);

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