Flex Carousel Component
I recently made this Carousel component for Flex
As it’s basically just a slightly jazzier way of selecting a single item, I made it in the same way one would create a List component: with properties like selectedIndex, selectedItem, dataProvider, itemRenderer etc. etc. Basically, just hand it a dataProvider and it’ll lay it all out for you. ‘Should play ball, but hasn’t been exhaustively tested so you might get some bugs, dunno.
The Carousel can be controlled in various ways. Clicking the slider will tween it to that position. Dragging the slider point will tween it to the slider’s current position. Clicking a renderer will tween that renderer into the centre.
I’ll explain further down this post how to use it but first some documentation. I haven’t had - and probably won’t get - the time to document it properly, with ASDocs or whatever, so here is a scrappily thrown together lists of it’s various properties.
CONSTANTS
MIN_DIAMETER:int = 1024;
The minimum width of the circle the renderers sit on.
MAX_DIAMETER:int = 8192;
The maximum width of the circle the renderers sit on.
PROPERTIES
container:Canvas
The bounding box that contains the renderers (read-only).
dataProvider:Object
The data for the component. Currently only Arrays are accepted.
diameter:int
The width of the circle. Value must be between MIN_DIAMETER and MAX_DIAMETER. The default is half MAX_DIAMETER.
focusFrame:CarouselFocusFrame
The grey box that frames the selected renderer. The value of this property must be a DisplayObject that extends CarouselFocusFrame and implements ICarouselFocusFrame.
focusFrameDisplaysConstantly:Boolean
A flag that indicates whether the focusFrame should display permanently (true) or disappears whilst the Carousel is spinning (false). The default is true.
itemRenderer:IFactory
The itemRenderer for the Carousel. The ‘generator’ for this property must implement ICarouselRenderer.
labelField:String
The name of the property on the dataProvider objects used to populate the text labels on the renderers. The default is ‘label’.
rendererGap:uint
The distance in pixels between each renderer. The default is 50.
rendererHeight:int
The height in pixels of each renderer. The default is 190.
rendererWidth:int
The width in pixels of each renderer. The default is 150.
selectedIndex:int
The index of the currently selected item. Setting selectedIndex moves the Carousel to that point directly, setting targetIndex tweens it there.
selectedItem:Object
The currently selected item.
slider:HSlider (read-only)
The HSlider instance that controls the Carousel (read-only).
sliderIntervalGap:int
The length in pixels to set the slider for every renderer it controls. The default is 50.
smoothing:Boolean
The smoothing to be used on the renderer images. The default is true.
sourceField:Object
The name of the property on the dataProvider objects used to populate the images in the renderers. The default is ’source’.
targetIndex:int
The currently requested index for the Carousel to tween to. Setting targetIndex tweens the Carousel to that point, setting selectedIndex moves it there directly.
STYLES
The component also has a couple of styles: ‘carouselColor’ and ‘carouselPaddingTop’.
carouselColor:int
Sets the colour of the container Canvas that holds the renderers.
carouselPaddingTop:Number
Sets the padding between the top of the component and the top of the container Canvas that holds the renderers.
Using the Carousel Component
This should be pretty straightforward.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:carousel="uk.co.richtextformat.flex.view.components.carousel.*" layout="absolute"> <carousel:Carousel id="myCarousel" width="100%" height="100%" focusFrameDisplaysConstantly="false" carouselPaddingTop="20" /> </mx:Application>
Setting the dataProvider should be all you need to do to get it rolling.
var dataProvider:Array = [ {label:'Tobias', source:'img1.jpg'}, {label:'Cynthia', source:'img2.jpg'}, {label:'Walter', source:'img3.jpg'} ]; myCarousel.dataProvider = dataProvider;
And if your data is bespoke and you needed to change the property names, that should be straightforward too.
myCarousel.labelField = 'name'; myCarousel.sourceField = 'imgURL'; var dataProvider:Array = [ {name:'Tobias', imgURL:'img1.jpg'}, {name:'Cynthia', imgURL:'img2.jpg'}, {name:'Walter', imgURL:'img3.jpg'} ]; myCarousel.dataProvider = dataProvider;
The ’source’ property of your data objects can either be a valid URL to an image online (a default blue ‘No Image Available’ image will be used where the URL is invalid) or a Bitmap instance.
The component is free for use and can be downloaded here from my repo on Github. I think and hope so anyway. I’m new to Github (only signed up today) and am not really familiar with the way it works yet, so if you get any probs getting hold of it from there leave a message for me somewhere and I’ll see what I can do to help.