Here is the documentation for the ThumbnailScroller Component AS3. I hope you will 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

moveRight()

moveLeft()

moveUp()

moveDown()

example:

  1. import flash.events.MouseEvent;
  2.  
  3. left.addEventListener(MouseEvent.MOUSE_DOWN, leftHandler);
  4. right.addEventListener(MouseEvent.MOUSE_DOWN, rightHandler);
  5.  
  6. function leftHandler(event:MouseEvent){
  7.           myScroller.moveLeft();
  8. }
  9.  
  10. function rightHandler(event:MouseEvent){
  11.           myScroller.moveRight();
  12. }

cMoveRight()

cMoveLeft()

cMoveUp()

cMoveDown()

cMoveStop()

example:

  1. import flash.events.MouseEvent;
  2.  
  3. left.addEventListener(MouseEvent.ROLL_OVER, cLeftHandler);
  4. right.addEventListener(MouseEvent.ROLL_OVER, cRightHandler);
  5. left.addEventListener(MouseEvent.ROLL_OUT, cStopHandler);
  6. right.addEventListener(MouseEvent.ROLL_OUT, cStopHandler);
  7.  
  8. function cLeftHandler(event:MouseEvent){
  9.         myT.cMoveLeft();
  10. }
  11. function cRightHandler(event:MouseEvent){
  12.         myT.cMoveRight();
  13. }
  14. function cStopHandler(event:MouseEvent){
  15.         myT.cMoveStop();
  16. }

setSize(w:Number, h:Number)

example: myScroller.setSize(500, 70);

Properties

xmlPath

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

thumbHeight

-type:Number
-default value: 70
example: myScroller.thumbHeight = 70;

thumbWidth

-type:Number
-default value: 100
example: myScroller.thumbWidth = 100;

scaleMode

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

alignType

- type:String
- available values: “top”, “bottom”, “center”, “left”, “right” (you use “top” or”bottom” only when the direction is horizontal and “left” or “right” only when the direction is vertical)
- default value: “center”
example: myScroller.alignType = “bottom”;

direction

- type:String
- default value: “horizontal”
example: myScroller.direction = “vertical”;

space

-type:Number
-defaultValue: 10
example: myScroller.space = 5;

mouseMove

-type:Boolean
-default value: false
-if true, the images are scrolling when you move the mouse over the component
example: myScroller.mouseMove = true;

moveAmount

-type:Number
-default value: 100
-important only when you use the methods: moveRight(), moveLeft(), moveUp() and moveDown()
example: myScroller.moveAmount = 200;

duration

-type:Number
-default value: 1
-important only when you use the methods: moveRight(), moveLeft(), moveUp() and moveDown()
example: myScroller.duration = 2;

easingType

- type:String
- available values: “Back”, “Bounce”, “Circular”, “Cubic”, “Elastic”, “Exponential”, “Linear”, “Quadratic”, “Quartic”, “Quintic”, “Sine”
- default value: “Exponential”
-important only when you use the methods: moveRight(), moveLeft(), moveUp() and moveDown()
example: myScroller.easingType = “Quadratic”;

easingMethod

- type:String
- available values: “easeIn”, “easeOut”, “easeInOut”, “easeOutIn”
- default value: “easeOut”
-important only when you use the methods: moveRight(), moveLeft(), moveUp() and moveDown()
example: myScroller.easingMethod = “easeInOut”;

speed

-type:Number
-default value: 10
-the speed of the scrolling, in frames; a lower value for the speed propertie means a higher speed and vice versa
-important only when you use the methods: cMoveRight(), cMoveLeft(), cMoveUp(), cMoveDown() or when the mouseMove propertie is set to true

setBorder

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

borderThickness

- type:Number
- default value: 2
example: myScroller.borderThickness = 3;

borderAlpha

- type:Number
- default value: 100
example: myScroller.borderAlpha = 50;

borderColor

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

preloaderType

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

barPreloaderWidth

- type:Number
- default Value: 80
example:myScroller.barPreloaderWidth = 50;

circularPreloaderRadius

- type:Number
- default Value: 10
example:myScroller.circularPreloaderRadius = 15;

preloaderFillColor

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

preloaderLineColor

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

preloaderFillAlpha

- type:Number
- default value: 50
example: myScroller.preloaderFillAlpha = 40;

preloaderLineAlpha

- type:Number
- default value: 100
example: myScroller.preloaderLineAlpha = 80;

setTextPreloader

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

textPreloaderFont

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

textPreloaderSize

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

textPreloaderColor

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

textPreloaderBold

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

Working with XML

The “path” attribute is used to tell the component the path to each image.
example:

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

Working with events

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

THUMB_OPEN

- dispatched when the loading of a thumbnail starts

THUMB_PROGRESS

- dispatched when a thumbnail is loading

THUMB_INIT

- dispatched when the properties of a thumbnail are available

THUMB_COMPLETE

- dispatched when the loading of a thumbnail is complete

ALL_THUMBS_ADDED

- dispatched when all the thumbnails are loaded

CLICK

- dispatched when the user is clicking on a thumbnail

ROLL_OVER

- dispatched when the user moves the mouse over a thumbnail

ROLL_OUT

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

MOUSE_UP

- dispatched when the user releases the mouse over a thumbnail

MOUSE_DOWN

- dispatched when the user presses the mouse over a thumbnail

MOUSE_OVER

- dispatched when the user moves the mouse over a thumbnail

MOUSE_OUT

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

example:

  1. import com.flashotaku.thumbnailscroller.events.ThumbnailEvent;
  2.  
  3. myScroller.addEventListener(ThumbnailEvent.THUMB_PROGRESS, thumbProgressHandler);
  4. myScroller.addEventListener(ThumbnailEvent.ALL_THUMBS_ADDED, thumbsAddedHandler);
  5. myScroller.addEventListener(ThumbnailEvent.MOUSE_OVER, mouseOverHandler);
  6.  
  7. function thumbProgressHandler(event:ThumbnailEvent){
  8.         trace(event.item.bytesLoaded, event.item.bytesTotal);
  9. }
  10.  
  11. function thumbsAddedHandler(event:ThumbnailEvent){
  12.         trace("all thumbnails are loaded");
  13. }
  14.  
  15. function mouseOverHandler(event:ThumbnailEvent){
  16.         trace(event.item.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.