Astra Carousel
Carousel is a UI component used for for displaying a list of items, much like the standard List component. Additionally, it provides many useful hooks for customizing how the items are positioned and displayed.
Using Carousel in Flash CS3
In Getting Started we used a Carousel control with mostly default settings. There are some powerful ways to customize a Carousel to make it look and behave in surprisingly different ways. Just like the List control, cell renderers may be used to display a custom view for each of the data provider's items. Additionally, the Carousel control has something called a layout renderer. It allows developers to customize how the entire Carousel is drawn.
A custom layout renderer can size and position the items in a variety of ways, such as one at a time, all at once in a circular pattern, using different animations between selection changes, and the items could be displayed in 3D if you are willing to develop such a component. The only limit is your imagination and your desire to spend time writing code for new layout renderers.
Example: Paged Carousel
The default layout renderer used by the Carousel is called the SlidingCarouselRenderer. With this renderer, a sliding animation moves the selected item into position. The default settings put the selected item in the center of the Carousel, and if you click on another item, it will be selected and slide into view.
The SlidingCarouselRenderer class offers several customization options. For instance, you can set how many items should be displayed at one time by setting the rowCount property. You can change the direction property to either "horizontal" or "vertical". You can go a step further by setting the horizontalAlign or verticalAlign properties to specify where the selected item is displayed. Those are only a few of the available options.
In the following example, we customize the SlidingCarouselRenderer to display items two at a time over a series of "pages".
To see a live example, please install Adobe Flash Player version 9 or higher and ensure that JavaScript is enabled.
The code below demonstrates how this layout was created. First, we aligned the selected item to the left using horizontalAlign. Ten pixels are placed between each item using horizontalGap. With displayedItemCount, we specify to the renderer that two items should always be displayed. The Carousel will automatically resize itself to fit. This is similar to the rowCount property on the List control.
Finally, we tell the layout mode that we don't want to click items to select them. Instead, we want to control the navigation using buttons outside the Carousel. One of the most flexible parts of the Carousel control is its ability to receive input from a wide variety of external controls. Other properties are available, including ways to customize the easing function and the duration of the sliding animation. Be sure to check the ActionScript 3.0 Class Reference for more information.
Download the FLA file and the Document Class for more information about how this example was created.
Example: Stacked Carousel
Another layout renderer included with the Carousel control is the StackCarouselRenderer. This renderer displays items one at a time, and when the selected item changes, the old selected item fades out and the new selected item fades in.
To see a live example, please install Adobe Flash Player version 9 or higher and ensure that JavaScript is enabled.
For this example, we only customize one property of the StackCarouselRenderer.
The drawAllRenderers property, also available on SlidingCarouselLayout, tells the layout renderer to create a cell renderer for every item in the Carousel's data provider. Normally, if an item isn't visible in the Carousel, no cell renderer is created for it. This is a useful memory saving optimization. However, if you load images into your cell renderers, there can be slight delays or flickering as you change the selected item on the carousel. If the person viewing your SWF has a slow network connection, this can be more noticeable Setting drawAllRenderers to true will keep the cell renderers on the display list, and transitions between the selected items will be smoother and generally better looking.
Download the FLA file and the Document Class for complete details about how this example was created.
Designer-friendly Cell Renderers
In both of the examples above, the cell renderers are created as symbols in the library. The sub-controls in the cell renderer are drawn visually on stage in a more design-friendly way. A very short snippet of code on the timeline is used to connect these sub-controls to the cell renderer's data.
The screenshot above shows the "ItemNode" cell renderer from the Paged Carousel example that was introduced above. This cell renderer was created on stage rather than programmatically, and you can see how it looks at design time in the Flash authoring tool. Several items are placed on stage, including a UILoader and three TextFields, and they are referenced in some code that will be introduced in a moment. The symbol appears in the library's "Project Assets/views" folder.
This cell renderer relies on a special class, com.yahoo.astra.fl.controls.CellRendererSymbol. It was built with designers in mind because it doesn't require the creation of a new class that implements ICellRenderer. Instead, it provides a hook with one function call to set up all the data when the cell renderer needs to redraw.
CellRendererSymbol's data hook is a property called commitFunction. Someone creating a custom cell renderer simply passes in a function created on the timeline and the underlying class handles the rest. The function passed in will be called any time the cell renderer receives new data and needs to redraw. It accepts one parameter, which is the data property of the cell renderer. However, any of the other properties of the cell renderer can be accessed by using the this keyword.
In this example, we pass data.description to a TextField on stage and data.url to another TextField. We access the label and the image source for the UILoader from the listData object defined by ICellRenderer. Of course, we can always access these values directly from the data parameter if we know the correct field names. In this example, we could use data.title and data.imageURL, respectively.
If you want to use CellRendererSymbol to create a custom cell renderer, you need to set its class name (with full package path) as the Base class for a symbol in library. This may be done in the Linkage Properties dialog for the symbol. The fully-qualifed class name is com.yahoo.astra.fl.controls.CellRendererSymbol.
A great advantage of the CellRendererSymbol class is that it works with the standard List component too! Anything that uses the fl.controls.listClasses.ICellRenderer interface for renderers can benefit from this handy component! It's important to note that Carousel doesn't require you to use CellRendererSymbol either. You can still subclass CellRenderer or implement ICellRenderer. It's merely a helpful shortcut for those who are more comfortable working in the visual environment provided by the Flash authoring tool.
For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the Carousel component.