Tutorial: DisplayShelf Component
The DisplayShelf component demonstrates using a number of flex and flash concepts to provide a rich, templatable control to display a faux-3d view of a list of items. Its behavior is similar to the CoverFlow visualization added to iTunes in version 7.
The sample is broken into two pieces. The first, the TiltingPane component, takes any content and wraps it in a faux ‘3d’ effect, allowing you to tilt it from side to side. The second, the DisplayShelf component, uses the TiltingPane component to render a list of items along a virtual shelf, with the selected item pulled out for display.
Some of the concepts this sample illustrates:
- matrix transformations
- graphics API
- masking
- bitmap manipulation
- templating
- item renderers
- the IList interface
- implementing dataProviders
- effective animation
This sample was the centerpiece from my MAX 2006 presentation, “Flex under the hood: A tour through the Flex architecture.”
Try a demo here:
DisplayShelf browser sample
Interested in seeing how the 3D effect works? You can see how it gets built, one step at a time, with an interactive walkthrough here:
Interactive 3D Walkthrough
The source, as always, is available under the MIT open source license, so you can do whatever zany thing you crazy kids want with it.
* View the source
* Download the source
Feedback or thoughts, as always, are much appreciated. Leave comments, suggestions, criticisms here.
RSS Feed