Here is the documentation for working with the Slideshow Component AS3. I hope you’ll find it easy to use. If you have any questions, feel free to ask.

To preview and download the component go here.

Requirements

Authoring: Flash CS3
Actionscript: Actionscript 3 (Actionscript 2 version available here)
Player: Flash Player 9

Methods

loadImage(i:int)

example: mySlideshow.loadImage(3);

nextImage()

example: mySlideshow.nextImage();

prevImage()

example: mySlideshow.prevImage();

setSize(w:Number, h:Number)

example: mySlideshow.setSize(400, 300);

Properties

xmlPath

- type:String
- the path to the xml file
example: mySlideshow.xmlPath = “images.xml”;

scaleMode

- type:String
- available values: “exact fit”, “maintain aspect ratio”, “no scale”
- default value: “exact fit”
example: mySlideshow.scaleMode = “maintain aspect ratio”;

alignType

- type:String
- available values: “top-left”, “top-center”, “top-right”, “center-left”, “center”, “center-right”, “bottom-left”, “bottom-center”, “bottom-right”
- default value: “center”
example: mySlideshow.alignType = “top-left”;

autoLoad

- type:Boolean
- default value: true
example: mySlideshow.autoLoad = false;

setBorder

- type:Boolean
- default value: false
example: mySlideshow.setBorder = true;

borderThickness

- type:Number
- default value: 3
example: mySlideshow.borderThickness = 10;

borderAlpha

- type:Number
- default value: 1
example: mySlideshow.borderAlpha = 0.5;

borderColor

- type:uint
- default value: #ffffff
example: mySlideshow.borderColor = 0×33ffcc;

preloaderType

- type:String
- available values: “bar”, “circular”, “none”
- default value: “bar”
example: mySlideshow.preloaderType = “circular”;

barPreloaderWidth

- type:Number
- default Value: 100
example:mySlideshow.barPreloaderWidth = 200;

circularPreloaderRadius

- type:Number
- default Value: 20
example:mySlideshow.circularPreloaderRadius = 30;

preloaderFillColor

- type:uint
- default value: #ffffff
example: mySlideshow.preloaderFillColor = 0×33ff00;

preloaderLineColor

- type:uint
- default value: #ffffff
example: mySlideshow.preloaderLineColor = 0×33cc33;

preloaderFillAlpha

- type:Number
- default value: 0.5
example: mySlideshow.preloaderFillAlpha = 0.4;

preloaderLineAlpha

- type:Number
- default value: 1
example: mySlideshow.preloaderLineAlpha = 0.8;

setTextPreloader

- type:Boolean
- default value: true
example: mySlideshow.setTextPreloader = false;

textPreloaderFont

- type:String
- default value: “Arial”
example: mySlideshow.textPreloaderFont = “Verdana”;

textPreloaderSize

- type:Number
- default value: 12
example: mySlideshow.textPreloaderSize = 10;

textPreloaderColor

- type:uint
- default value: #ffffff
example: mySlideshow.textPreloaderColor = 0×33ff00;

textPreloaderBold

- type:Boolean
- default value: false
example: mySlideshow.textPreloaderBold = true;

transitionEffect

- type:String
- available values: “random”, “fade”, “blur”, “brightness”, “noise”, “pixel dissolve”, “threshold”, “pixelate”, “squares”, “explode”, “fly”, “none”
- default value: “random”
example: mySlideshow.transitionEffect = “brightness”;

transitionSpeed

- type:Number
- this propertie represents the speed of the transition in frames and the way this propertie influences the transition depends also on the transition effect (a lower value for the transitionSpeed means a higher speed and vice versa)
- default value: 30
example: mySlideshow.transitionSpeed = 10;

The next properties are available only for some effects.

horizontalSquares

- type:int
- available for “squares” and “explode” effects
- default value: 10
example: mySlideshow.horizontalSquares = 20;

verticalSquares

- type:int
- available for “squares” and “explode” effects
- default value: 10
example: mySlideshow.horizontalSquares = 14;

squaresEffectType

- type:String
- available for “squares” effect
- available values: “scale”, “height”, “width”, “alpha”, “blur”
- default value: “scale”
example: mySlideshow.squaresEffectType = “blur”;

squaresDirection

- type:String
- available for “squares” effect
- available values: “top-bottom”, “bottom-top”, “right-left”, “left-right”, “TL-BR”, “TR-BL”, “BL-TR”, “BR-TL”, “margin-center H”, “center-margin H”, “margin-center V”, “center-margin V”, “jump one T-B”, “jump one B-T”, “jump one L-R”, “jump one R-L”, “jump one V”, “jump one H”, “spiral M1″, “spiral M2″, “spiral C1″, “spiral C2″, “random”
- default value: “top-bottom”
example: mySlideshow.squaresDirection = “margin-center V”;

squaresSpeed

- type:Number
- available for “squares” effect
- represents the speed(in seconds) at which the square grows
- default value: 1
example: mySlideshow.squaresSpeed = 0.5;

squaresAAT

- type:Number
- available for “squares” effect
- represents the number of squares that are animated at a time
- default value: 2
example: mySlideshow.squaresAAT = 5;

registrationPoint

- type:String
- available for “squares” and “fly” effect
- available values: “center”, “center-right”, “center-left”, “top-right”, “top-center”, “top-left”, “bottom-right”, “bottom-center”, “bottom-left”
- default value: “center”
example: mySlideshow.registrationPoint = “top-right”;

easingType

- type:String
- available for “squares” and “fly” effect
- available values: “Back”, “Bounce”, “Circular”, “Cubic”, “Elastic”, “Exponential”, “Linear”, “Quadratic”, “Quartic”, “Quintic”, “Sine”
- default value: “Exponential”
example: mySlideshow.easingType = “Quadratic”;

easingMethod

- type:String
- available for “squares” and “fly” effect
- available values: “easeIn”, “easeOut”, “easeInOut”, “easeOutIn”
- default value: “easeOut”
example: mySlideshow.easingMethod = “easeInOut”;

flyDirection

- type:String
- available for “fly” effect
- available values: “top-bottom”, “bottom-top”, “left-right”, “right-left”, “zoom”
- default value: “top-bottom”
example: mySlideshow.flyDirection = “zoom”;

pixelSize

- type:Number
- available for “pixelate” effect
- represents the maximum pixel size for the transition
- default value: 100
example: mySlideshow.pixelSize = 50;

Working with XML

Use the “path” attribute to tell the slideshow the path to the image.
example:

  1. <images>
  2.           <img path="images/image0.jpg" />
  3.           <img path="images/image1.jpg" />
  4.           <img path="images/image2.jpg" />
  5.           <img path="images/image3.jpg" />
  6.           <img path="images/image4.jpg" />
  7.           <img path="images/image5.jpg" />
  8.           <img path="images/image6.jpg" />
  9.           <img path="images/image7.jpg" />
  10.           <img path="images/image8.jpg" />
  11.           <img path="images/image9.jpg" />
  12. </images>

Other attributes: effect, squaresDirection, verticalSquares, horizontalSquares, squaresAAT, squaresSpeed, registrationPoint, squaresEffectType, pixelSize, transitionSpeed, flyDirection, easingType, easingMethod, urlPath, urlWindow
example:

  1. <images>
  2.         <img path="images/image0.jpg" effect="fade" transitionSpeed="20" />
  3.         <img path="images/image1.jpg" effect="fly" flyDirection="left-right" easingType="Elastic" easingMethod="easeOut" />
  4.         <img path="images/image2.jpg" effect="pixelate" pixelSize="50" />
  5.         <img path="images/image3.jpg" effect="brightness" urlPath="http://flashotaku.com" ulrWindow="_blank" />
  6.         <img path="images/image4.jpg" effect="pixel dissolve" />
  7.         <img path="images/image5.jpg" effect="threshold" />
  8.         <img path="images/image6.jpg" effect="explode" horizontalSquares="30" verticalSquares="20" />
  9.         <img path="images/image7.jpg" effect="squares" squaresEffectType="blur" squaresDirection="random" squaresAAT="2" squaresSpeed="1" horizontalSquares="20" verticalSquares="14" transitionSpeed="20" />
  10.         <img path="images/image8.jpg" effect="noise" transitionSpeed="10" />
  11.         <img path="images/image9.jpg" effect="squares" squaresEffectType="scale" squaresDirection="spiral M1" squaresAAT="2" squaresSpeed="2" horizontalSquares="15" verticalSquares="7" transitionSpeed="30" />
  12. </images>

Woking with events

TRANSITION_START

- dispatched when the transition starts

TRANSITION_COMPLETE

- dispatched when the transition is complete

XML_OPEN

- dispatched when the loading of the XML file starts

XML_PROGRESS

- dispatched when the XML file is loading

XML_COMPLETE

- dispatched when the loading of the XML file is complete

SLIDE_OPEN

- dispatched when the loading of a slide starts

SLIDE_PROGRESS

- dispatched when a slide is loading

SLIDE_INIT

- dispatched when the properties of a slide are available

SLIDE_COMPLETE

- dispatched when the loading of a slide is complete

CLICK

- dispatched when the user is clicking on a slide

ROLL_OVER

- dispatched when the user moves the mouse over a slide

ROLL_OUT

- dispatched when the user moves the mouse away from a slide

MOUSE_UP

- dispatched when the user releases the mouse over a slide

MOUSE_DOWN

- dispatched when the user presses the mouse over a slide

MOUSE_OVER

- dispatched when the user moves the mouse over a slide

MOUSE_OUT

- dispatched when the user moves the mouse away from the slide

example:

  1. import com.flashotaku.slideshow.events.SlideshowEvent;
  2.  
  3. mySlideshow.addEventListener(SlideshowEvent.SLIDE_PROGRESS, slideProgressHandler);
  4. mySlideshow.addEventListener(SlideshowEvent.TRANSITION_START, transitionStartHandler);
  5. mySlideshow.addEventListener(SlideshowEvent.MOUSE_OVER, mouseOverHandler);
  6.  
  7. function slideProgressHandler(event:SlideshowEvent){
  8.         trace(event.slide.bytesLoaded, event.slide.bytesTotal);
  9. }
  10.  
  11. function transitionStartHandler(event:SlideshowEvent){
  12.         trace("transition is starting");
  13. }
  14.  
  15. function mouseOverHandler(event:SlideshowEvent){
  16.         trace(event.slide.id);
  17. }

Support

As of 11 March 2009, support is no longer provided for the free components. If you need support, please purchase the commercial version of the components.