I have updated the CoverFlow library a bit and added support for adding children without explicitly setting the width and height of the children (ie using the normal Flex auto-sizing validation stuff). Grab the latest source code here.
Here’s a Flex component (with source) that does that sweet looking CoverFlow thing (you know, the iTunes/iPhone thing to show cover art). It’s a Flex component, so you can drop it into any Flex app. Just like Lee Brimelow opened the floodgates for a barrage of 3D carousel effects, I hope to see the CoverFlow effect used everywhere. Especially in places where it makes no sense to have this effect whatsoever. Go forth and overuse it and abuse it.
Example
I’ll go ahead and drop an example right away so you don’t have to read the rest of this to get the idea:
- My iTunes
So Apple provides RSS feeds of your iTunes purchases if you want. So I dropped my iTunes RSS feed in and this is what I got:
This movie requires Flash Player 9
I’m thinking maybe I’ll put together a widget that you could customize and load in your own RSS feed and maybe change the colors and stuff, then let people embed this on their blogs. I dunno, I’m also kind of over CoverFlow now, so maybe not…
So what is this component?
It’s CoverFlow, duh. It’s a way of viewing stuff and scrolling through a list horizontally. It’s similar to Ely Greenfield’s DisplayShelf component (except this one does it the right way
), and it’s just like what the guys at Blitz did too (in fact, quite similar since they’re using PV3D and Tweener too). Basically you have a bunch of things (ie cover art images) and you want to show them in this eye-candy extreme way.
How it was done
So this is a Flex component, and it extends ViewStack. There’s an obvious question as to why I made it dependent on the Flex framework and not just straight in AS3 without Flex dependencies. The answer is that it saved me time (and by that I mean I wouldn’t have done it otherwise). By using the ViewStack component as my base I don’t have to deal with all the child management crap. I get all the addChild, removeChild, the use of selectedIndex and selectedChild, and the use of the component in MXML right out of the gate. I’m lazy, so extending ViewStack was the obvious choice.
The component uses two open source libraries: PaperVision 3D and Tweener. Basically when a child is added to the ViewStack the component create a 3D Plane that represents that child. If the reflection is turned on then it creates two 3D Planes for each child, and the reflection Plane is flipped and placed below the first Plane. Yes, this means that showing the reflection doubles the number of polygons PaperVision is rendering. There are other approaches for doing reflection, but this one was easiest for me. Then we use Tweener to lay out the children and tada, we got a nice looking CoverFlow component.
The only sneaky thing that’s done is that we take advantage of the ViewStack control to keep interactivity on the Planes. We do this without using any of the interactive material stuff in PaperVision. Why? Because that stuff makes your app slow as balls. And besides, in this case, the user is only going to interact with a Plane when it is facing directly straight towards the screen. So all we do is wait until the plane is directly facing the user, then we swap in the real child of the ViewStack in its place. This way we get full interactivity, it’s invisible to the user, and we don’t have to slow our app down by using the PV3D interactivity stuff.
Some Other Examples
- Flex Controls
This example shows using the component with a variety of standard Flex controls. Since this is an extension of ViewStrack you can use the control just like a ViewStack and have children defined in MXML. To keep this blog post from completely destroying your CPU I’ve chosen to only include the iTunes example in the page. This one and the next one you’ve got to click to go see. This app has “view source” enabled, so if you right click on the app you can get he full source code for the CoverFlow component.

View the Example | View the Source - Amazon Browser
And here’s what you get if you drop in the Amazon API to do searches:

View the Example
Source Code and Some Notes
The source code for the flex controls example in the list above is available here. That gives you the source code for the CoverFlow component. In that source code package I’ve included the PaperVision SWC and the Tweener SWC. I included those to make sure that people could download the code and test it out, but I encourage you to go get the source code of both of those libraries and compile them yourself. It’s good to know how to do that and that way you know you have the latest versions. A note about PaperVision: I used the Phunky branch of the project, but I don’t think I’m using anything that wouldn’t compile against the 1.5 release, but just in case, that’s the deal.
Sweet, I better see this effect all over the place. im in ur coverz, doin’ ur flow.
















Entries (RSS)
November 3rd, 2007 at 6:35 pm
Another cool ass component to dissect. Thanks Doug.
November 3rd, 2007 at 7:57 pm
Doug, this is totally cool, I was just looking around for a good Display Shelf replacement, and here comes yours!
November 3rd, 2007 at 9:27 pm
clicking on the unselected items makes the z-order mess up.
November 3rd, 2007 at 9:51 pm
Very nice. I have a problem building a project because the “import org.papervision3d.materials.MovieMaterial” seems to be failing because MovieMaterial can’t be extended. How do I change the code to refer find the MovieMaterial class inside the swc’s?
thanks, Gobo
November 4th, 2007 at 2:12 am
Shweeettt!!
November 4th, 2007 at 2:20 am
cool!
Atleast you aren’t as lazy as me. I’ve been procastinating doing the same for so long. and there, you already did it!
Thanks dude!
November 4th, 2007 at 2:22 am
+1
November 4th, 2007 at 2:44 am
2 Thumbs Up !! Love your work Doug
Thanks
November 4th, 2007 at 3:30 am
Hey nice going.. I like the way you did this, would never have thought of building upon ViewStack..
November 4th, 2007 at 9:40 am
It is very nice, I appreciate it and work behind that.
Few early observations from my side.
1. Great Job
2. It will be nice to know how to increase the height of off-centered images, because 200×200 looks really small in 1024×768.
3. Nice if it can live with less CPU !
4. I appreciate it.
Thanks.
November 4th, 2007 at 12:58 pm
This is very cool and I want to start using it right away but….
Any idea what’s making the CPU crank so hard to display this?
November 4th, 2007 at 6:58 pm
Good try! Although this uses Papervision so anyone actually using this with a lot of data will REALLY start to see a performance hit. Papervision is spectacular, but unrealistic if used for lots of data because of the HUGE performance hit. I use the displayshelf version on a video application in Flex and due to the large amounts of data that I deal with it is optimal for this me. Keep playing with Papervision though! Although the new Flash will completely remove the need for it. Thanks!
November 4th, 2007 at 8:30 pm
Doug, cool stuff. In mine, I added scroll wheel and keyboard arrow functionality which I thought made it fun to use. Your reflections look awesome…
November 4th, 2007 at 9:05 pm
CoverFlow Flex Component…
Doug又写了一个很cool的Flex 组件,可以带给用户很好的体验。这个组件扩展自Flex的ViewStack,使用了两个开源的类库:PV3D和Tweener。
示例:
Flex 控件 | Amazon搜索
查看组件源码
Popularity: unrank…
November 5th, 2007 at 1:12 am
Cool! Great work..
My buddy Sagar Mahapatro @Mixercast did the same using AS2..
-abdul
November 5th, 2007 at 7:07 am
Nicely done. Is there any reason you are using Tweener instead of the mx.effects classes? If this component lives inside another Flex app, it is very likely that the mx.effects classes are compiled in anyway so why would I need two effect libraries in my swf ?
November 5th, 2007 at 10:33 am
Cool Doug!
November 5th, 2007 at 12:38 pm
Thanks for sharing the source code. Your logic for integrating PPV3D in the MX:ViewStack is ingenious!
November 5th, 2007 at 12:40 pm
Arpit, Tweener lets you tween multiple numeric properties of a component with just one line of code. Very easy to use.
November 5th, 2007 at 3:44 pm
Great work Doug, a fascinating insite into how to really push the boundaries of Flex whilst keeping everything clean and building on the framework. Nice.
@Stephen Weber:
You’d really need to throw a LOT of data at this to see a HUGE performance hit - have you seen some of Carlos’ and Ralph’s latest demos? And to be honest, anyone who threw that much data at something like this should really think about re-architecting their data/GUI.
November 6th, 2007 at 3:34 pm
I have the same question as Gobo…
“I have a problem building a project because the “import org.papervision3d.materials.MovieMaterial” seems to be failing because MovieMaterial can’t be extended. How do I change the code to refer find the MovieMaterial class inside the swc’s?”
thanks,
Carrie
November 7th, 2007 at 9:23 am
Awesome stuff Doug. Long live 3D list effects!
November 8th, 2007 at 4:11 pm
[…] CoverFlow Flex Component […]
November 9th, 2007 at 6:34 am
[…] Le CoverFlow nouveau est disponible ici : http://dougmccune.com/blog/2007/11/03/coverflow-flex-component/ […]
November 9th, 2007 at 10:49 am
For Gobo and Carrie, as Doug said earlier in his post : «I encourage you to go get the source code of both of those libraries and compile them yourself». So you just have to download the packages of Papervision3D and Tweener, and it will run very well under flex builder 2.
Merci Doug.
MK
November 9th, 2007 at 2:03 pm
this is awesome, Doug. i had the same compiler error as Gobo and Carrie and this is what you can do:
Right click on the project, go to Properties, select Build Path, select the Library Path tab and hit Add SWC for each of the SWC.
I have another issue - when i deploy the code to my server, the reflections and the rest of the images around the center are missing… not sure what i’m not doing right. i tried fiddling around with the build options but to no avail. it works perfectly on my local machine. thanks!
November 10th, 2007 at 11:33 am
Hi Doug,
I keep getting an Invalid BitmapData error when I add images to the CoverFlowContainer. Any ideas?
November 10th, 2007 at 12:07 pm
@Shaun - your issue is probably a crossdomain security issue. The server that you’re loading your images from must have a crossdomain.xml file that lets you load the images because papervision requires access to the BitmapData of the image. This means you need to add a crossdomain.xml file that allows access on the server and you also need to specify a LoaderContext object with checkSecurityPolicy to true when you load the Image. Hope that made sense.
November 11th, 2007 at 8:05 am
hi,
nice tool!
is there a way set the space between objects in the background?
e.g. if selected item 800×600 the ones in the background are completely hidden, then non clickable and you loose an important functionality.
November 12th, 2007 at 9:18 am
@doug the crossdomain happend also in the IDE, when you’re testing. So it is not a matter of crossdomain.
I noticed that it happens when you put an image as direct child of CoverFlowContainer. If you put a Panel in between (child of CFcontainer and parent of image) then all runs fine. Weird!
November 13th, 2007 at 5:27 am
[…] Papervision 3D - open source 3D engine for flash I was wondering whether this page has Flash Video or is it done using Papervision 3d. Then I found this link and look at the wheel and it is rotating!!! (use the arrow keys to drive the car). Then I concluded that Nissan Rogue website is using Papervision 3D. Look at the other examples . So here is Papervision3D effects for Flex. I couldn’t resist but download papervision 3D. Check out the blogs on Papervision 3D. Here is Lee Brimelow’s website with useful tutorials. Here is Papervision 3d Carousel example in Flash. Here is Doug’s CoverFlow Flex component. […]
November 15th, 2007 at 8:50 pm
This example and the explanation is so helpful for the begginers.Thanks a lot.
This concept is so cool.
I just wanted to know how do i increase the height of the offcentered panels.
November 16th, 2007 at 8:13 am
re. clicking on a unselected item makes the z-order bugger up. looks to me that apple puch the item back and into position at a faster pace, therefore getting round the z-order problem (could be worth looking at).
re. using a lot of data. If the component uses the RectangleTriangleCuller, PV3D shouldn’t attempt to render anything that isn’t displayed, therefore freeing up CPU.
November 18th, 2007 at 10:03 pm
Hi dough !
please let me know how to set the height of the off-centered components(panels)
thank you
November 21st, 2007 at 7:51 am
fkin A dude !
cheers, realy great work on this one !
November 27th, 2007 at 6:40 pm
[…] dougmccune.com > Blog Archive > CoverFlow Flex Component […]
December 4th, 2007 at 7:36 pm
This is great!!! I have, however, having some troubles adding new child dynamically. Would it be possible for you to publish the source for the Amazon example as well. Thanks a lot!
December 18th, 2007 at 6:54 am
I was getting the Invalid BitmapData error as well and found that I had to set a height and width on the container being added to the coverflow container…
December 26th, 2007 at 6:02 am
[…] AW: iphone gallerie in flash ok hier mal ein paar links fr dich, vllt helfen sie dir ja weiter. dougmccune.com Blog Archive CoverFlow Flex Component iTunes User Interface in Papervision3D with Tweener on BLITZ Labs, the BLITZ Agency Blog n99creations.com […]
December 27th, 2007 at 12:32 am
(First, sorry for my english i’m a french)
Hi, awesome source thanks a lot. I try to add a keyboard control on your coverflow but i have some issue with this function it works sometimes and depends of the type of composant use in the coverflow no problem with image for the exemple but if you use a component that accept focus like a textarea I loose my keyboardevent listenner when i focus out this control. Did you have any idea.
Excuse me if i’m not well understandable. Good holidays
January 6th, 2008 at 12:58 am
Hey,Doug,thanks for your coverFlow component,that is already working with my programme.
But I’ve found a huge bug of it.
when u keep doing the addChild and removeAllchild method,it turns to be slower and slower.
In the end,my computer even can not run smoothly.
For Example:
step1: add 20 pics into the coverFlow
step2: remove all of the pics
step3: goto step1
after several loops , click one pic, u can see the coverFlow works very very slow.
I don’t know how to fix this problem.
so can you give me some advise?Thanks
January 6th, 2008 at 11:11 am
how do you get the flex controls example to be compliant with the safari - works fine in firefox - thanks
great app
January 8th, 2008 at 6:30 am
Übersicht: Coverflow-Effekt in Flash und Flex…
Der von Apple geprägte Coverflow-Effekt ist mittlerweile sehr populär. Im Folgenden ein knappes Dutzend Beispiele für Coverflow in Flash oder Flex. Größtenteils können die Quelldateien heruntergeladen werden.
DisplayShelf Component
Eine ausge…
January 15th, 2008 at 12:05 pm
The guy whom I respect
January 25th, 2008 at 12:05 am
good!
这个效果真是太好了!
February 14th, 2008 at 1:25 am
Hi there!
You did great work on this component! So cool!
But i was wondering what are the steps to add a child at runtime? AddChild() does its job, but the new child is not part of the Coverflow Stack.
Do I have to reinitialize the Stack or something like this?
Jens
February 17th, 2008 at 1:35 pm
[…] CoverFlow Component, Itunes ke Flex CoverFlow component, seperti yang bisa kita lihat di itunes diimplementasikan ke FlexBuilder, jadinya ? unik, lucu sekaligus membakar CPU, lumayan lah setidaknya sudah ada orang yg membuat hal tersebut, bagi saya yg pemalas, source CoverFlow tersebut semakin menambah pundi koleksi flex komponen di tengah gersangnya komponen Flex di Internet. […]
February 22nd, 2008 at 5:55 am
Wonderful component Mr.Doug !!! I’m a newby: how i can install this component into flex 2.0.1 ??? Some suggestes ??? i’ll appreciate a lot them
thanks, best regards
leo
February 22nd, 2008 at 4:23 pm
i’ve “installed” the component but i have a problem: when i don’t use the panel component into the coverflow component i have some visualizations problem, i don’t see the component (for example a button)
doh! The “bug” is caused by the ViewStack, i’ve undestood.. but i need some help or suggests to get work this beatuful component 
thanks
February 26th, 2008 at 8:28 am
can anyone explain me what this guy here is importing there and how i can do this myself? I downloaded your stuff but got no local:VideoCoverFlow…?
http://www.adobe.com/products/flex/media/flexapp/
February 26th, 2008 at 3:48 pm
Awesome, thanks for the update! You have good timing, I was just working on porting Derrick Grigg’s CubeForm over to use your base container - this update will make it much easier. When I finish it, I’ll post it here if anyone is interested.
February 26th, 2008 at 7:21 pm
I am having same issue as mightyx trying to clone the app on http://www.adobe.com/products/flex/media/flexapp/
but i dont have videocoverflow component. any ideas?
February 28th, 2008 at 12:08 am
hm ye i still don’t get it.
I also like to have a look at the My iTunes example. Is that possible? I don’t get how to display the names dependent on the HScrollBar like this.
February 28th, 2008 at 7:21 am
Same problem here as the last few. Can’t seem to get the “local:VideoCoverFlow” tutorial on Adobe’s own website to work. Did this component’s structure completely change since then, or are we all doing something wrong?
February 28th, 2008 at 8:18 pm
cool shit, cool shit… excellent preso at 360 ATL. Great meeting you Doug.
March 12th, 2008 at 12:51 pm
I would really like to use this for a website that I am developing but I have little flash and AS background. Can someone please explain this to me in laymen’s terms or send me a finished example?
Any help would be greatly appreciated.
March 13th, 2008 at 12:08 pm
[…] Here’s a Flex component (with source) that does that sweet looking CoverFlow thing (you know, the iTunes/iPhone thing to show cover art). It’s a Flex component, so you can drop it into any Flex app. […]
March 14th, 2008 at 10:34 am
ARGGGGGG!!!
Ok, so I’m a newbie and don’t know anything. I apologies for that ahead of the predictable barrage of insults and condesension. But I have senior managers who I am trying to convince as to the importance of Flex as a RIA tool, and I need this to work now - (not two weeks from now when I have finally figured out how to compile and install your component).
I am new to Flex. I am new to Flex Builder. I am new to Eclipse.
I have spent the better part of three days trying to figure this out to no avail.
Is there anyone willing to step off the mount for a moment to explain the process (click by click) ?
March 14th, 2008 at 11:44 am
Flash CS3 is the way of the future. Adobe is taking all the componets Flex had and putting them in Flash. Example: I came across a simple image loader app written in both Flex and Flash (Actionscript 3.0). The Flash version had 3 simple Actionscript files. The Flex version had a wopping 22 files, not only did it have 22 files, they were all different types of files too. Of, course the majority of people support Flex, but only because it is free unlike Flash fo what $800 bucks. Your going to get more people learning how to program in Flex if it’s free. Here’s the catch, Adobe is playing the hook line and sinker strategy. Adobe made Flex so people would learn how to code in Actionscript. Then they start to limit features in furture releases of Flex, and improve the features in Flash. WHY?…Because Adobe wants all the people who learned Actionscript to go out and purchase Flash for the $800. Microsoft is doing the same thing with Silverlight. How else do you get people interested in a product, make the software free at first to get people hooked then start to charge them for the newer improved versions. Economics 101. Create a big demmand, then limit the supply, force people to pay big bucks. I know I wouldn’t pay $200 - $800 for new software unless I got to try it first. And 30 day demos aren’t enough to get people hooked. You may think I am wrong, but just wait you’ll see.
March 14th, 2008 at 11:50 am
@Tim - wow, just wow. Not only do I think you’re wrong, I think you’re absolutely, without a doubt in the completely wrong ballpark. From your comment I get the feeling that you haven’t developed large applications with either Flash or Flex and that you don’t really understand what the Flex framework and Flex Builder (which is not free BTW) are all about. Try developing a big application in Flash IDE and then try developing in Flex.
But what do I know? I guess I’ll just wait and see
March 16th, 2008 at 11:45 am
Reall cool! I’m wondering if there’s any way to make it smoother though? Is there any easing? It just seems really rough and not sexy smooth. Though functionally it’s great. I even like the way the scroll bar is done…while not like other cover flow scripts that completely steal imagery/slider functionality from itunes, this is nice…but I’d probably want to change that too to some degree.
The major thing is the easing though.
March 24th, 2008 at 8:11 pm
I am a newbie to flex just realized it existed. I apologize for being ignorant. I have downloaded a trial of flex and am trying to see if it is something I would be interested in. I like your component and am trying to figure out how to install it into flex so that I can use it or at least test some things out. I am at a complete loss as to how to do this. I have tried file import but that doesnt work. If someone could provide me with instructions on how to install this component or any flex component it will be greatly appreciated. I cant seem to find good instructions on how to do this anywhere. I will probably be your first buyer of the dummies book
.
Thank you
Chris
April 5th, 2008 at 12:33 am
[…] CoverFlow Flex Component […]
April 7th, 2008 at 12:03 am
Unfortunately I have the same problems than other persons here. I have an Invalid BitmapData error and it’s not a problem of crossdomain policy. Cesare says to put a Panel in between (child of CFcontainer and parent of image). Does someone can give more explanations please?
Thx and congratulations for your work!
April 8th, 2008 at 10:40 am
How can you change the height of non-selected children?
April 10th, 2008 at 10:46 pm
[…] Doug McCune for his super bad ass CoverFlow Flex Component. We’ve used the Appcelerator Widget API to widgetize this flex widget and allow it to be both declaratively added to markup and the power of Appcelerator’s Web Expression Language to add remoting capabilities for data binding. This also shows off the power of using Appcelerator + Adobe’s Flex bridge to get the best of both worlds. […]
April 11th, 2008 at 8:47 am
Hello, tell me please how to install CoverFlow Flex Component to Flex3 and (if possible) to Flash CS3. Thank you
April 13th, 2008 at 12:02 pm
[…] Doug McCune for his super bad ass CoverFlow Flex Component. We’ve used the Appcelerator Widget API to widgetize this flex widget and allow it to be both declaratively added to markup and the power of Appcelerator’s Web Expression Language to add remoting capabilities for data binding. This also shows off the power of using Appcelerator + Adobe’s Flex bridge to get the best of both worlds. […]
April 14th, 2008 at 12:14 pm
[…] The example uses embedded Flex components and sound. […]
April 15th, 2008 at 12:10 pm
Ah! I didn’t realise how it was done
April 18th, 2008 at 2:49 am
just watch the video by James Ward - RIA Cowboy using dataprovider to set image / video image but this looks to be missing on the version I download can you tell me how to link the cloverflow to a data scource
Thank for you help is this …
April 23rd, 2008 at 6:21 pm
ok forget my previous post, anyone know how to set a preloader in for the video?
April 25th, 2008 at 1:09 am
Can you tell me how to input the “CoverFlow” into Flex?
April 25th, 2008 at 1:20 am
I have download a CoverFlow source and unzip this, but i dont know how to use this?? and how to import the CoverFlow folder into Flex Builder3?
anyone can hlep me? Thanks!
April 27th, 2008 at 3:25 am
I know folks should try and work stuff out for themselves rather than expecting to be spoon fed but when there are so many posts asking how to install something it might be nice to try and help a little ?
Ps
If I ever get it up and running I will gladly post a few instructions
May 2nd, 2008 at 10:12 am
I created a prototype using James Ward’s example see it at:
http://nwlearning.com/view/roomviews.html
I put some screenshots up on my website to illustrate
I used the source files from James Ward’s VideoCoverFlow to act as a ‘wrapper’ for Doug’s CoverFlow component. I took out the video stuff because I’m not using video and modified the source here and there for my needs.
I was having difficulty understanding how to get Doug’s CoverFlow setup in Flex too, so by using James’ example (which included the MXML file, a HUGE help in understanding the structure!) I was able to quickly convert his example.
One of the difficulties I think people are having is in understanding how the SWC file gets used. In the image above you’ll see Doug’s CoverFlow_lib.swc file in the libs folder in the project (this was already set up in James’ download files)… and below, you’ll see how James’ file (orginally named VideoCoverFlow) makes a reference to it. Notice that the package path is referenced just as you would for any package, yet you do not see that path (the folders) because its all compiled into the SWC file.
Now, I have a question: Does anyone know where to set the selectedIndex at startup? I would like to set it to display the middle image instead of the first one.
May 12th, 2008 at 9:44 am
Dan, your prototype is really nice!
I did’t find where to set the selectedIndex at startup, sorry ;(
May 14th, 2008 at 11:57 am
Still wondering if anyone has figured out a way for the videos (in the video coverflow version) to actually unload instead of stop at the last frame. (another words go back to the image in the xml file that was there before you hit play.) I still can’t see where and what code to place)
May 18th, 2008 at 7:09 am
Hi Guyzzz & Doug !
First of all, greaaat job ! But as a newbie in Flex, I first wondered how to add images in a coverflow control and what formats are usable (jpg, bmp, etc).
Chinese proverb : No matter how long is the path, there’s always a frst step…..
Lorenzo
May 18th, 2008 at 1:13 pm
One thing I noticed in the Flex Controls example is if you surround one of the mx:panel nodes with an mx:repeat, the maxScrollPosition=”{coverflow.numChildren - 1} attribute inside the mx:HScrollBar doesn’t evaluate correctly. In other words, if the repeat is iterating say 10 times, the coverflow.numChildren count will not include those child objects derived from the iterations.
I am a complete novice to Flex but was wondering if this is intended behavior?
May 19th, 2008 at 1:33 pm
Hi,
Just to say thank you for this nice CoverFlow component, I have built a funny gallery with it : http://www.musiic.net/sleeveface/
Have fun
Victor
June 2nd, 2008 at 10:09 pm
[…] A student of mine decided to use Doug McCune’s CoverFlowContainer component in his class project. He also wanted to enable drag/drop from one CoverFlowContainer to the next so I took what he had and added some Drag/Drop to it. […]
June 23rd, 2008 at 8:15 pm
joder tio! bien hecha la actualizacion
thanks a lot
JJJDDD