Carousel (AS 3.0) V. 2.1 Documentation
Properties
| Name | Type | Description |
| carouselStyle | Object | Property defines image size. Please note that width and height parameters override maintainAspectRatio and scaleContent properties. 1. perspective:Number 2. angle:Number 3. position:String. (positive or negative) Example myCarousel.carouselStyle = {perspective: .5, angle: 0, position: positive}; |
| content | Object | Defines displayed content. 1.description:String 2.path:Mixed 3.type:String – content type com.afcomponents.common.ContentType ContentType.IMAGE ContentType.INSTANCE 4.data - Miscellaneous property Example import fl.data.DataProvider; function onCarouselInit(event:CarouselEvent) { var dp:DataProvider = new DataProvider(); dp.addItem({path:"img_1.jpg", type:"image", description:"test", data:"test"}); dp.addItem({path:"img_2.jpg", type:"image", description:"test", data:"test"}); dp.addItem({path:"img_3.jpg", type:"image", description:"test", data:"test"}); myCarousel.content = dp; } myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit); |
| contentXML | String | Path to content XML file or RSS 2.0 image feed. XML File Format <content> myScroll.contentXML = "file.xml"; Note: You can use a custom node in your XML and it becomes of property of the item. Custom Node XML Example <content> <item> <description>Image 1</description> <path>image.jpg</path> <data>url.html</data> <name>MyCustomNode</name> </item> </content> trace(myCarousel.getSelectedItem().name); |
| contentStyle | Object | Property defines image size. Please note that width and height parameters override maintainAspectRatio and scaleContent properties. 1. width:Number 2. height:Number 3. maintainAspectRatio:Boolean 4. scaleContent:Boolean 5. padding:Number – horizontal padding 6. autoSize:Boolean Example myCarousel.contentStyle = {width:100, height:150, maintainAspectRatio:true, scaleContent:true, padding:10, autoSize: false}; |
| itemContainerDefaultStyle | Object | Defines the default item container shape style. 1.fill:Bolean 2.fillColor:Number (ARGB) 3.fillGradient:Object [ActionScript Only] 4.stroke:Boolean 5.strokeColor:Number (ARGB) 6.cornerRadius:Number 7.horizontalPadding:Number 8.verticalPadding:Number Example myCarousel.itemContainerDefaultStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5}; |
| itemContainerOverStyle | Object | Defines the item container shape style on mouse over event. 1.fill:Bolean 2.fillColor:Number (ARGB) 3.fillGradient:Object [ActionScript Only] 4.stroke:Boolean 5.strokeColor:Number (ARGB) 6.cornerRadius:Number 7.horizontalPadding:Number 8.verticalPadding:Number Example myCarousel.itemContainerOverStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5}; |
| itemContainerSelectedStyle | Object | 1.fill:Bolean 2.fillColor:Number (ARGB) 3.fillGradient:Object [ActionScript Only] 4.stroke:Boolean 5.strokeColor:Number (ARGB) 6.cornerRadius:Number 7.horizontalPadding:Number 8.verticalPadding:Number Example myCarousel.itemContainerSelectedStyle = {fill:true, fillColor:0xFF0000CC, stroke:false, strokeColor:0x00FF00CC, cornerRadius:2, horizontalPadding: 5, verticalPadding: 5}; |
| previewClip | String | Property defines a class of a placeholder movie clip. Example myCarousel.previewClip = "MyClip"; |
| reflectionStyle | Object | Set the reflection. 1. enable:Bolean 2. alpha:Number 3. clipAlpha:Number 4. distance:Number 5. matrixRatio:Number 6. matrixDropOff:Number Example myCarousel.reflectionStyle = {enable:true, alpha: 0.8, clipAlpha: 0.5, distance: 1, matrixRatio: 1, matrixDropOff: 1}; |
| scrollAnimation | Object | Property defines scroll properties. Properties 1. enabled:Boolean 2. motion:fl.motion.easing (Back, Bounce, Circular, Cubic, Elastic, Exponential, Linear, Quadratic, Quatric, Quintric, or Sine) 3. easing:String (easeIn, easeInOut, easeOut, or easeNone) 4. speed:Number Example myCarousel.scrollAnimation = {motin:fl.motion.easing.Back, easing:"easeIn",speed:10} |
| selectedItem | Number | Defines initially selected item. First item is selected by default. Example myCarousel.selectedItem = 5; |
| selectedItemAlign | Void | Defines the alignment of the selected item. If set to “CENTER” the selected item is moved to the center of the component. If set to “DYNAMIC” then the selected item is not moved. Example myCarousel.selectedItemAlign = ItemsAlign.CENTER; |
| selectOnPageScroll | Boolean | Defines whether an item gets selected once the page scroll is activated. Example myCarousel.selectOnPageScroll = false; |
| slideShow | Object | Defines slide show properties. 1. enabled:Boolean 2. loop:Boolean 3. time:Boolean [time in seconds] myCarousel.slideShow = {enabled:true, loop:false, time:5}; |
| transition | Object | Property determines whether to display image transition (true) or not (false). Fade transition is displayed after thumbnail image has been loaded. Options 1. enable:Boolean 2. transition:fl.transitions (Blinds, Fly, Fade, Iris, Photo, PixelDissolve, Rotate, Squizee, Wipe, or Zoom) 2. motion:Class 3. easing:String 4. duration:Number Example myCarousel.transition = {enable:true, transition:fl.transition.PixelDissolve, motion:fl.motion.easing.Linear,duration:1} |
| scrollBar | Object | An instance of the UIScrollbar component that would be used to control the Carousel. Example myCarousel.scrollBar = myScrollbar; |
| length | Number | Read-only property indicates the number of items in the Carousel. Example trace(myCarousel.length); |
Methods
| Name | Return Type | Description |
| getItemNum( index:Number ) | Object | Returns content item object specified by index parameter. Example var item:Object = new Object(); item = myCarousel.getItemNum(2); trace(item.description); trace(item.path); trace(item.data); trace(item.id); |
| getTotalItems( ) | Number | Returns total number of items in the content object. Example var items = myCarousel.getTotalItems(); |
| getSelectedItem( ) | Object | Returns selected item object. Example var item:Object = new Object(); item = myCarousel.getSelectedItem(); trace(item.description); trace(item.path); trace(item.data); trace(item.id); |
| selectItem( item:Object ) | Void | Selects item specified by item parameter. Example var item:Object = new Object(); item = myCarousel.getItemNum(2); myCarousel.selectItem(item); |
| selectItemNum( index:Number ) | Void | Selects item specified by index parameter. Example myCarousel.selectItemNum(2); |
| selectNextItem( ) | Void | Selects next item. Example myCarousel.selectNextItem(); |
| selectPreviousItem( ) | Void | Selects previous item. Example myCarousel.selectPreviousItem(); |
| addItem( item:Object ) | Void | Adds a new item to the Carousel. Example myCarousel.addItem({description:"Item", path:"image.jpg",data:"url.html", type:ContentType.IMAGE}); |
| removeItem( item:Object ) | Void | Removes item from the Carousel. Example var item = myCarousel.getItemNum(3); myCarousel.removeItem(item); |
| addGenericItemEventListener( event:String, listener:Function ) |
Void | Adds an event listener to each item in the Carousel. Generic Event Example import flash.events.MouseEvent; import com.afcomponents.events.CarouselEvent; function eventHandler(event:MouseEvent){ trace(event.target); } function onCarouselContentLoaded(event:CarouselEvent) { myCarousel.addGenericItemEventListener(MouseEvent.CLICK, eventHandler); } myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_COMPLETE, onCarouselContentLoaded); |
| getItemAt( index:Number ) | Object | Returns content item object specified by index parameter. Example var item:Object = new Object(); item = myCarousel.getItemAt(2); trace(item.description); trace(item.path); trace(item.data); trace(item.id); |
| selectItemAt( index:Number ) | Void | Selects the item specified in the index parameter. Example myCarousel.selectItemAt(3); |
| addItemAt( item:Object, index:Number ) |
Void | Adds the object passed in the item parameter at index in the Carousel. Example myCarousel.addItemAt({description:"description", path:"pic.jpg", data:"url.html"}, 3); |
| removeItemAt( index:Number ) | Void | Removes the item at index from the Carousel. Example myCarousel.removeItemAt(3); |
| replaceItemAt( item:Object, index:Number ) |
Void | Replaces the item at index with the passed item object. Example myCarousel.replaceItemAt({description:"description", path:"pic.jpg", data:"url.html"}, 3); |
| removeAll( ) | Void | Removes all items from the Carousel. Example myCarousel.removeAll(); |
| addItemEventListener( index:Number, event:String, listener:Function ) |
Void | Adds an event listener to the item specified by index. Example myCarousel.addItemEventListener (4, MouseEvent.CLICK, eventHandler); |
Events
| Name | Return Value | Description |
| INITIALIZE | type target |
Triggered after component initializes. Example import com.afcomponents.events.CarouselEvent; function onCarouselInit(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.INITIALIZE, onCarouselInit); |
| ERROR | type target message |
Triggered when the component encounters an error. Example import com.afcomponents.events.CarouselEvent; function onCarouselError(event:CarouselEvent) { trace(event.type); trace(event.target); trace(event.message); } myCarousel.addEventListener(CarouselEvent.ERROR, onCarouselError); |
| CHANGE | type target |
Triggered when any of the component's properties are changed at runtime. Example import com.afcomponents.events.CarouselEvent; function onCarouselChange(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.CHANGE, onCarouselChange); |
| XML_LOAD_START | type target |
Triggered when XML starts loading. Example import com.afcomponents.events.CarouselEvent; function onCarouselXMLLoadStart(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.XML_LOAD_START, onCarouselXMLLoadStart); |
| XML_LOAD_PROGRESS | type target bytesLoaded bytesTotal |
Triggered during XML loading to indicate progress. Example import com.afcomponents.events.CarouselEvent; function onCarouselXMLLoadProgress(event:CarouselEvent) { trace(event.type); trace(event.target); trace(event.bytesLoaded + " of " + event.bytesTotal); } myCarousel.addEventListener(CarouselEvent.XML_LOAD_PROGRESS, onCarouselXMLLoadProgress); |
| XML_LOAD_COMPLETE | type target |
Triggered when XML loading is complete. Example import com.afcomponents.events.CarouselEvent; function onCarouselXMLLoadComplete(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.XML_LOAD_COMPLETE, onCarouselXMLLoadComplete); |
| ITEM_LOAD_START | type target |
Triggered for each item when it starts loading. Example import com.afcomponents.events.CarouselEvent; function onCarouselItemLoadStart(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.ITEM_LOAD_START, onCarouselItemLoadStart); |
| ITEM_LOAD_PROGRESS | type target bytesLoaded bytesTotal |
Triggered for each item during loading to indicate progress. Example import com.afcomponents.events.CarouselEvent; function onCarouselItemLoadProgress(event:CarouselEvent) { trace(event.type); trace(event.target); trace(event.bytesLoaded + " of " + event.bytesTotal); } myCarousel.addEventListener(CarouselEvent.ITEM_LOAD_PROGRESS, onCarouselItemLoadProgress); |
| ITEM_LOAD_COMPLETE | type target |
Triggered for each item when it is finished loading. Example import com.afcomponents.events.CarouselEvent; function onCarouselItemLoadComplete(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.ITEM_LOAD_COMPLETE, onCarouselItemLoadComplete); |
| CONTENT_LOAD_START | type target |
Triggered when content loading starts. Example import com.afcomponents.events.CarouselEvent; function onCarouselContentLoadStart(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_START, onCarouselContentLoadStart); |
| CONTENT_LOAD_PROGRESS | type target itemsLoaded itemsTotal |
Triggered during content loading to indicate progress. Example import com.afcomponents.events.CarouselEvent; function onCarouselContentLoadProgress(event:CarouselEvent) { trace(event.type); trace(event.target); trace(event.itemsLoaded + " of " + event.itemsTotal); } myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_PROGRESS, onCarouselContentLoadProgress); |
| CONTENT_LOAD_COMPLETE | type target |
Triggered when content is finished loading. Example import com.afcomponents.events.CarouselEvent; function onCarouselContentLoadComplete(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.CONTENT_LOAD_COMPLETE, onCarouselContentLoadComplete); |
| ITEM_SELECTED | type target |
Triggered when a new item is selected. Example import com.afcomponents.events.CarouselEvent; function onCarouselItemSelected(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.ITEM_SELECTED, onCarouselItemSelected); |
| TRANSITION_END | type target |
Triggered when the selected item is finished moving into place. Example import com.afcomponents.events.CarouselEvent; function onCarouselTransitionEnd(event:CarouselEvent) { trace(event.type); trace(event.target); } myCarousel.addEventListener(CarouselEvent.TRANSITION_END, onCarouselItemMoveComplete); |
