Here is the documentation for the ThumbnailScroller Component AS2. 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 8, Flash CS3
Actionscript: Actionscript 2 (Actionscript 3 version available here)
Player: Flash Player 8, Flash Player 9

Methods

moveRight()

moveLeft()

moveUp()

moveDown()

example:

  1. right.onRelease = function(){
  2. myScroller.moveRight();
  3. }
  4.  
  5. left.onRelease = function(){
  6. myScroller.moveLeft();
  7. }

cMoveRight()

cMoveLeft()

cMoveUp()

cMoveStop()

example:

  1. right.onRollOver = function(){
  2. myScroller.cMoveRight();
  3. }
  4. left.onRollOver = function(){
  5. myScroller.cMoveLeft();
  6. }
  7. right.onRollOut = left.onRollOut = function(){
  8. myScroller.cMoveStop();
  9. }

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;

handCursor

-type:Boolean
-defaultValue: false
example: myScroller.handCursor = true;

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 = 0x33ffcc;

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 = 0x33ff00;

preloaderLineColor

- type:Number
- default value: #ffffff
example: myScroller.preloaderLineColor = 0x33cc33;

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 = 0x33ff00;

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

onLoadXML

- dispatched when the loading of the XML file is complete

onThumbStart

- dispatched when the loading of a thumbnail is starting

onThumbProgress

- dispatched when a thumbnail is loading

onThumbComplete

- dispatched when the loading of a thumbnail is complete

onThumbInit

- dispatched when the properties of a thumbnail are available

allThumbsAdded

- dispatched when all the thumbnails are loaded

release

- dispatched when the user releases the mouse over a slide

rollOver

- dispatched when the user moves the mouse over a slide

rollOut

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

  1. var initObject:Object = new Object();
  2. var progressObject:Object = new Object();
  3. var allThumbsObject:Object = new Object();
  4.  
  5. myScroller.addEventListener("onThumbInit", initObject);
  6. myScroller.addEventListener("onThumbProgress", progressObject);
  7. myScroller.addEventListener("allThumbsAdded", allThumbsObject);
  8.  
  9. initObject.onThumbInit = function(evt:Object){
  10. trace(evt.target.id);
  11. }
  12.  
  13. progressObject.onThumbProgress = function(evt:Object){
  14. trace(evt.target.bytesLoaded);
  15. trace(evt.target.bytesLoaded);
  16. }
  17.  
  18. allThumbsObject.allThumbsAdded = function(evt:Object){
  19. trace("all thumbnails are loaded");
  20. }