Tutorial: DisplayShelf Component
October 22nd, 2006
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.
November 1st, 2006 at 1:59 pm
[...] The demo, source browser, and zip file are available here. Take a look, then come back and leave me a comment, tell me what you think. [...]
November 3rd, 2006 at 3:19 am
[...] [ Read More | Demo ] [...]
January 18th, 2007 at 6:21 pm
[...] This afternoon, at CodeMash, James Ward and I took over an open spaces table, got some extra displays set up and hacked up a TurboGears widget wrapper for Ely Greenfield’s Display Shelf Flex component. The Display Shelf gives you the effect that Apple created in iTunes 7 with the cover art view. Now, in TurboGears, you can display your own photos the same way trivially. Just call the widget with a Python list of image URLs, and you’ve got your shelf! [...]
January 20th, 2007 at 9:39 am
[...] This past week I spoke at the CodeMash conference. It was a really great event full of stimulating conversation. Even more fun than trying to surf in the wave machine was an Open Spaces style session that Kevin Dangoor (creator of TurboGears) and I hosted. We had planned to just sneak off into a corner and turn Ely Greenfield’s DisplayShelf component into a TurboGears Widget. However, word quickly spread that we were going to do this and everyone wanted to watch as we coded. We had a bunch of fellow geeks huddled around every spare laptop and monitor we could find. I shared my screen with VNC so that everyone could watch what Kevin and I were doing. It was by far the best geek-out session I have had in a long time! Check out a screenshot of the DisplayShelf widget in a TurboGears application, showing a picture of our geek-out session: [...]
February 6th, 2007 at 8:56 am
[...] Quietly Scheming » 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. (tags: software tutorial flex flash as3) Tags:No Tags [...]
February 20th, 2007 at 11:48 am
[...] Updated DisplayShelf page with interactive walkthrough [...]
February 22nd, 2007 at 12:29 pm
[...] very nice and usable component with source is available here [...]
March 1st, 2007 at 5:15 pm
[...] Ely Greenfield at Adobe is so talented. His blog is loaded with Flex Goodies, including Itunes 7esq image scroller with a reflection and bitmap tweening. There’s also a pretty cool addition called SuperImage, which helps with Flex image resizing. [...]
March 31st, 2007 at 5:14 am
[...] The app uses the standard Cairngorm approach to structuring the code. The DisplayShelf component for the sets is from Quitely Scheming. When you select a set, it lazy downloads all the pictures for that set. I haven’t written the code to download to a directory, but that can be added easily. As expected its all data-bound with the ModelLocator. I have a FlickrDelegate class that does the job of talking to Flickr using the as3flickrlib. [...]
July 10th, 2007 at 8:27 pm
[...] Tutorial: DisplayShelf Component Great flex component for browsing images iTunes style (tags: flex flash components slideshow photo howto) [...]
August 1st, 2007 at 12:23 am
[...] Ely Greenfield made a wonderful component which exactly does it. He calls the component DisplayShelf and you find his blog post here with source and example. Bookmark to: - Posted in Flash, Flex by Sönke [...]
August 9th, 2007 at 4:53 pm
[...] Quietly Scheming » Tutorial: DisplayShelf Component (tags: flex flash as3 actionscript flex2 components slideshow photo album amazing apple animation browser blogs) [...]
August 21st, 2007 at 8:56 pm
[...] DisplayShelf Component Provides a rich, templatable control to display a faux-3d view of a list of items http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/ [...]
August 25th, 2007 at 8:29 pm
[...] Tip #1: Research I would have to highly recommend Ely’s blog and look in the code he spent some serious time commenting. Especially check out the Display Shelf tutorial. [...]
September 18th, 2007 at 6:45 am
[...] DisplayShelf Component http://www.quietlyscheming.com/blog/components/tutorial-displayshelf-component/ [...]
October 10th, 2007 at 6:52 am
[...] Basically it uses the beta of Flex 3 and the DisplayShelf component, and some glue to get Flickr pictures into it. The source code is here: http://flickr.1stein.org/flickrflow/srcview. [...]
October 11th, 2007 at 2:56 am
[...] JSP Proxy code for sourcing cross-domain Images Sudheer and some guys from IITB were building some UI in Flex. They had a case where they were getting some photos from a server in another domain and then giving it to the DisplayShelf component by Ely to display in a cool UI. But when they tried to flip through the pictures using the interface, it threw an error as below. SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://rrao01:8080/test/BugProject.swf cannot access http://www.theflexshow.com/blog/images/the_flex_show.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded. at flash.display::BitmapData/draw() [...]