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.
This entry was posted
on Saturday, November 3rd, 2007 at 5:16 pm and is filed under Apple, Flex.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
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 f?r 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
July 11th, 2008 at 12:09 pm
Great component Doug!
Has anyone used this with more than just sample data? I’m trying to import my entire CD collection (about 900 covers) and it crawls to a halt. I’d love to be able to display my collection on my website. Any performance tweaks I could try?
doug
July 27th, 2008 at 11:34 am
[...] Doug McCune » Blog Archive » CoverFlow Flex Component [...]
July 29th, 2008 at 7:34 am
hey Doug I have a problem with Coverflow on FullScreen, flash player crash in firefox and ie, the debug show this:
warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’
I need help please, I dont know what to do.
Take Care
August 1st, 2008 at 2:17 am
Hi Doug
I tried downloading the latest source & tried running th program I get “four” errors
any idea how do i correct them ?
Error in class “BasePV3DContainer.as ”
1061: Call to a possibly undefined method renderCamera through a
reference with static type org.papervision3d.scenes:Scene3D.
FlipCardExample/src/com/dougmccune/containers BasePV3DContainer.as
line 195
1119: Access of possibly undefined property triangleCuller through a
reference with static type org.papervision3d.scenes:Scene3D.
FlipCardExample/src/com/dougmccune/containers BasePV3DContainer.as
line 181
1119: Access of possibly undefined property triangleCuller through a
reference with static type org.papervision3d.scenes:Scene3D.
FlipCardExample/src/com/dougmccune/containers BasePV3DContainer.as
line 404
1119: Access of possibly undefined property triangleCuller through a
reference with static type org.papervision3d.scenes:Scene3D.
FlipCardExample/src/com/dougmccune/containers BasePV3DContainer.as
line 405
August 7th, 2008 at 2:49 pm
I’v ebeen palying with this for some days, but can’t find where to import the data from. How do I set the data provider? tks!!
August 10th, 2008 at 8:28 pm
Coverflow is horrible. it has a lot of memory leaks,due to papervision. use displayshelf instead
August 19th, 2008 at 8:18 am
Hi, I have been playing with this lately but without coding it in MXML, I want the whole thing to be dynamic. Has anyone used this component in this way? The code below does not error but will not display anything when called… anyone have any pointers or can tell me where I have gone wrong?
Cheers!
public function coverFlowDisplay():void{
//use doug mccunes coverflow component to display the images
var coverFlowContainer:BasePV3DContainer = new BasePV3DContainer();
var coverFlow:CoverFlowContainer = new CoverFlowContainer();
for(var i:Number = 0; i
August 19th, 2008 at 8:19 am
sorry it seems to have cut off the code!
public function coverFlowDisplay():void{
//use doug mccunes coverflow component to display the images
var coverFlowContainer:BasePV3DContainer = new BasePV3DContainer();
var coverFlow:CoverFlowContainer = new CoverFlowContainer();
for(var i:Number = 0; i
September 12th, 2008 at 1:58 am
Using cover flow how to make both side balanced menu. Always menu should be both side.
Thanks,
Viswa
October 8th, 2008 at 3:44 pm
i dont know how to use this component on my project plase can anyone help me, im new in this, thanks
October 24th, 2008 at 8:15 am
hi. i’ve a question.
i tried the coverflow and it works. but i tried to add a new panel width an image and when i export, the image (24Kb) only appears when i click on the new panel and wait a moment. i think it’s because it’s loading the image but there is another way to do it without wait that moment? sorry my english, i’m portuguese…
thanks
October 25th, 2008 at 3:46 am
[...] avoir découvert la librairie Coverflow de Doug Mccune, et suite à quelques développements basés sur cette librairie, je dois dire que son travail est [...]
October 26th, 2008 at 12:06 am
Any chance of porting this to the latest pv3d?
October 26th, 2008 at 12:18 am
[...] for 3D Effects will make it easier to build advanced components, like the frequently implemented CoverFlow component. Add a new dimension to your applications and extend the creative possibilities by easily [...]
November 6th, 2008 at 1:53 pm
Hi, I am Shibli. I am totally new in Flex. I really like your component but unfortunately it gives me error. When I first import coverflow componet in my library-File-New-FlexLibraryproject-I give a project name CoverFlow and hit ok. After that it showing me
nothing was specified to be included in the library-CoverFlow-Unknown.
Could you please tell me how do i import this CoverFlow component in my library.
I really appreciate if you help me about this.
November 13th, 2008 at 3:57 am
How can I add some title to my tracks that should be displayed in this? Please help
November 14th, 2008 at 2:43 am
the fuckers who don’t know how to import it into flex builder , they should go for a basic training first then they should come here to use it .
If the developers are asking how to import it into flex Builder then they are not even gud user and have lost their mind.
so newbies first learn some basic things then try these things .
November 22nd, 2008 at 1:40 pm
[...] metaphor to use is like the CoverFlow components that abound, duplicating the user interface functionality iTunes popularized. You are [...]
November 24th, 2008 at 7:30 am
amar,
Speaking of training, you need to go find basic training on how to present yourself in public.
November 25th, 2008 at 11:45 am
Hello All,
I just wanted know anybody compiled swf using Flex SDK(COMMAND LINE) on either Mac or Linux. I compiled the code and generated the swf. When I view the swf I dont’ see the examples.
While compiling I got an error like:
com/dougmccune/containers/materials/ReflectionFlexMaterial.as(16): col: 28 Error: Method marked override must override another method.
override public function drawBitmap():void {
and I fixed removing override. I am using latest 3.2 version of FLEX SDK.
Thanks In Advance.
Tommy
December 10th, 2008 at 4:33 pm
this is slick. thanks a ton.
December 15th, 2008 at 8:12 am
Hi there !
I was wondering if it would be hard to manage multi-selection in the coverflow component ?
Any idea ?
Thanks in advance
regards
December 30th, 2008 at 12:37 am
[...] feeds. You can also find an interesting Flex component and library for coverflows from Doug McCune here. It sounds easy to combine these three concepts and in fact it [...]
January 3rd, 2009 at 7:05 am
I am looking for a CoverFlow component with the buttons to move the contents instead of scroll bar. So can you help me out on how to do that.
January 30th, 2009 at 9:47 am
Hi guys! I’m currently using this coverflow tool, but I’m having some trouble trying to figure out how to get the selected child on AS. I mean, there’s a ‘getChildAt(index)’ function, but there isn’t any function like ‘getSelectedIndex()’ to know that index… sry if my explanation isn’t clear
Thanks in advance!
Jessica
February 6th, 2009 at 7:34 am
Hey there… so I have a question about memory leakage… I noticed that your example hits you hard when everything is moving, but then memory frees up once the picture is stationary. I am having major trouble with the CPU usage, using a viewport, displayObjects and Dictionary’s which build a wall gallery with a 3d camera view… and I am only loading in like 300 kb of pictures but it is taking up 90% of memory on a 3 gig RAM. crazy. Any suggestions?
Thanks,
Ryan
February 8th, 2009 at 7:46 pm
Does anyone have the Source Code for the version of Papervision that Doug uses in his Coverflow component?
February 11th, 2009 at 4:15 am
warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’
February 28th, 2009 at 5:52 am
[...] Flow in ActionScript 3.0 is based on Doug McCune’s custom component. I downloaded the latest source files, and soon concluded that I did not know how [...]
March 3rd, 2009 at 10:33 pm
Has anyone tried using this library and the efflex library. I get a pretty nasty error.
March 13th, 2009 at 5:58 am
Great code but unfortunately doesn’t compile with Papervision3D_2.0.883p
Could someone update it?
March 15th, 2009 at 2:19 pm
warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’
Please Help that makes my video movies stop.
March 15th, 2009 at 9:27 pm
hi this a good work. we copy the source code for our admin development.
March 23rd, 2009 at 9:28 am
for those wondering the papervision3d version this uses is version 1.5 (i think).
but i still cant get arround the “override public function drawBitmap():void {” error.
i think it is related to the flex version or the flash version but not sure…
April 3rd, 2009 at 5:11 pm
wait never mind.. i’m an idiot
This is awesome btw
April 5th, 2009 at 5:56 pm
Hi Doug,
Is there any sample for iTunes coverflow?
I just don’t know how to set the label below the image. Could you tell me how to add such label?
April 9th, 2009 at 12:02 am
Hi all,
I was wondering how I could get some text ON TOP of the reflection as it is shown in the first app above.
The coverflow works perfect, but I can only put thing inside the shape and not on top of the reflection.
And that would look a lot nicer offcourse…
Thanks ahead for the quick replies!
April 16th, 2009 at 12:37 am
Hi!
Your component is great! I have a question: how can I set background image instead of the black background? Is it possible at all?
Thank you!
April 24th, 2009 at 11:17 am
Nossa queria muito esse blugin. quem tiver me manda no meu email
joao.diniz
April 29th, 2009 at 7:44 am
When I use a repeater in order to have dynamically the right number of Panel necessary in my coverflow, it doesn’t work with any drag and drop system… any way I can solve this ?
April 29th, 2009 at 8:10 am
This is not possible, the coverflow component is really not compatible with drag and drop and repeater. It should be used only for its original purpose : to display without any user interaction. Any modification will tend to make the whole component more and more unstable.
June 4th, 2009 at 4:32 am
Hi … I used your coverflow container inside an application to view and collect my medias … all parameters are simple to change, but …….
I have a simple question:
Is it possible to create a (runtime) resize effect with camera zoom?
Better … i want to resize the Canvas that contains Coverflow using the camera zoom, but the selected child don’t respect the line (size) of zoomed reflection!
I need to adjust the location of the selected child so it exactly lines up with where our 3D plane will be …
How can I do? There is a way to make this, or it’s impossible?
Please help me … I just become crazy …
Thx in adv!
Johnny
June 4th, 2009 at 7:01 am
Hi Doug,
I have a problem with your coverflow. When I’m using it with a ArrayCollection as dataprovider, it becomes a nice dynamic Coverflow where I can add Drag & Drop, by just deleting or adding items in the ArrayCollection.
Problem is, when I specify a SelectedIndex, it works at the first display of the coverflow, but then, if I remove or add any items, and cause the coverflow to refresh, the SelectedIndex property doesn’t work anymore, and the coverflow display the first card anytime.
Do you know how I cann solve this ?
June 11th, 2009 at 8:46 pm
I wanted to know how do i increase the height of the offcentered panels….
June 21st, 2009 at 2:55 am
re-visiting FLEX…
After not using FLEX for about a year I thought I’d look into it again after seeing some "cool" itunes coverflow effects for images. I’d lost my FLEX developer license due to leaving a job that covered it – so had to look into any opensourc…
June 25th, 2009 at 1:41 pm
Hi all! In my website I have comunicated flex (taking data from xml file) with javascript, and as you can see here (http://www.barbarrojarock.com/media.php) the image is shown up by clicking on it.
Next step: view youtube video with the coverflow component.
Anyone knows how to show the label of the current image?
June 27th, 2009 at 6:58 am
Nice job Doug… looks like the comments blocks are filled in automatically if I link back to this page… interesting… (ie. the comment entry above that links to my pesonal blog was NOT filled in by myself).
Anyway, thanks for the widget(s). I have built a component that gets images from a coppermine photogallery (php, MySQL app) and pulls them into the coverflow components. Its on my homie page.
July 2nd, 2009 at 8:43 pm
Thanks for all your works, if the playitems are of larger size, the images are not rendering properly(it is cutting off). Is it suitable for large i.e, more thank 400px for each item.
July 25th, 2009 at 12:34 am
Doug
Nice component!!! Really rocks !!! Instead of ur Papervision_Phunky i need to use Pv3D 2.0 library.. Can u pls help by replacing Phunky to PV3D 2.0 If u hav already done with that please mail me the source code or publish that component also…
Thanks a million
July 26th, 2009 at 11:31 am
I downloaded the souce but
HOW TO USE IT ??
July 26th, 2009 at 12:02 pm
i mean, i can see components under custom (components panel) but when i drop it to my project and compile it gives this error “could not resolve to a component implementation”..
WHY THAT !!!
July 26th, 2009 at 12:03 pm
could not resolve
ns2:CoverFlowContainer
to a component implementation
August 12th, 2009 at 12:11 pm
Hi Doug,
Nice Application…………
I am unable to run the application after changing the children in the panels. I have removed numericstepper,… all those and added my own stuff. It compiles and when I run it..
ArgumentError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData()
at org.papervision3d.materials::MovieMaterial/initBitmap()[/Users/dougmccune/Documents/Flex Builder 3/PaperVision_Phunky_Unmodded/src/org/papervision3d/materials/MovieMaterial.as:165]
at org.papervision3d.materials::MovieMaterial/createBitmapFromSprite()[/Users/dougmccune/Documents/Flex Builder 3/PaperVision_Phunky_Unmodded/src/org/papervision3d/materials/MovieMaterial.as:146]
at org.papervision3d.materials::MovieMaterial/set texture()[/Users/dougmccune/Documents/Flex Builder 3/PaperVision_Phunky_Unmodded/src/org/papervision3d/materials/MovieMaterial.as:113]
at org.papervision3d.materials::MovieMaterial()[/Users/dougmccune/Documents/Flex Builder 3/PaperVision_Phunky_Unmodded/src/org/papervision3d/materials/MovieMaterial.as:130]
at com.dougmccune.containers.materials::FlexMaterial()
It runs fine with your code.. I just replaced the components in Panel with grids, Lists and Labels.
August 23rd, 2009 at 6:37 am
one question, how to add an effect to zoomin and zoomout the component including in the cover flow?
September 7th, 2009 at 12:19 am
I got the same error when I try to load Images into the panels, can you us Doug
September 15th, 2009 at 9:42 am
For those having an issue with large panels covering others, I figured out a way to remedy this. In CoverFlowContainer.as, around line 96, there is the following line of code:
var xPosition:Number = selectedChild.width + ((abs-1) * horizontalGap);
add some positioning to this:
var xPosition:Number = selectedChild.width + ((abs-1) * horizontalGap) + n;
There is probably a better way to have this positioning changed based on the maxChildWidth, but I didn’t bother figuring that out. For me, all the panels had a width of 680, and I found that n = 300 worked well for me.
September 15th, 2009 at 12:11 pm
Good job!
We use this in a kiosk product catalog (touch screen). It is somewhat slow at 1200×500 with over 10 items inside.
One small change improved things a little bit: set segmentsW to 1 in BasePV3DContainer.createPlane().
September 24th, 2009 at 7:45 pm
Hi Doug,
Great job with the Flex component. Any plans on porting your component to Papervision3D 2.x? I’m trying to use the latest PV3D stuff but your component will not work with it. Thanks.
September 24th, 2009 at 7:54 pm
I am having problems displaying images in place of flex controls. I am trying to create a photo coverflow or photoflow with text at the bottom of each image.
In place of a Panel i used Canvas with an Image tag inside it with source set to my image. This would generate the cover flow but you only see the selected or centered image at one instance and the surrounding ones just disappear. I couldn’t figure out the reason yet but i know it is possible after watching the example from “Chispito”.
Any help greatly appreciated
October 2nd, 2009 at 6:35 am
To resolve the “Error #2015: Invalid BitmapData” Problem just adjust the count of Segments in the containers:CoverFlowContainer Tag. That works
October 2nd, 2009 at 7:00 am
Big sorry that post before was complete bullshit. I was confused. The real solution was to use the updated version of this Project from the top of the page and add the images in a Canvas component like:
…
…
October 11th, 2009 at 10:12 pm
Hi.
I have a problem now.
When I debug this component at local PC,It works fine.
But I uploaded the application including this component on Web server,It doesnt work well.
(Main Image is shown,but other images are not shown)
Please help me and Thank you for nice component!
November 3rd, 2009 at 4:28 am
Hi,
You did a great work with this component but I don’t understand why there is no example with images?
Am I missing something? I’ve only found examples with buttons, checkboxes or sliders…
Cheers
November 26th, 2009 at 4:28 pm
Hi,
is it possible to scale the not selected Children. I cant figure out how to make the bigger? Can you give me a hint where to adjust there Scale or Width.
thx!
December 17th, 2009 at 4:09 pm
Doug,
I’m using it. You made a great component and the precision is absolutely perfect. I played with the timing in the BasePV3DContainer and it works best with your setting of 1 or there abouts. I use a “tweenDuration” of 0.9. Also, I know it’s difficult to add styles to horizontal scroll bar via css, but if yo u play with the settings you can get something acceptable. It’s a BIG hack though — seriously cheating.
If I remember correctly, if you put it in a repeater and do a RENDER listener on the repeater or panel ( can’t remember which one, try and see yourself), you can call event.currentTarget.getRepeaterItem().dispatchEvent( new Event( FlexEvent.UPDATE_COMPLETE));. So all the images render and you’ve got it all in a repeater.
This might not be news to anybody, but I though wow! This whole thing can be controlled with an XML file that a client can change whenever he wants to configure the CoverFlow container or Carousel on the slightest whim.
Great job Doug.
December 25th, 2009 at 11:50 pm
This is really cool!!!
I’ve been looking for an effect just like this for a long time and now i dont have to do it any more.
Thanks Doug!
December 26th, 2009 at 7:29 am
Hi,
Compiled under ubuntu9.1 flex_sdk_3.4
Compiler output:
hannes@FatalError:~/flex/bin$ ./mxmlc /home/hannes/flex/myFlex/CoverFlow/CoverFlow_FlexControls.mxml
Loading configuration file /home/hannes/flex/frameworks/flex-config.xml
/home/hannes/flex/myFlex/CoverFlow/com/dougmccune/containers/materials/FlexMaterial.as(12): col: 36 Error: The definition of base class MovieMaterial was not found.
public class FlexMaterial extends MovieMaterial
^
If I add Papervision3D_2.0.883 and tweener_1_33_74_as3 error output is way to long to paste here. But without extends MovieMaterial error.
Any ideas?
December 30th, 2009 at 3:44 am
Is there any way to add tooltip for each element in the coverflow?
Tried using normal tooltip option, but it display it only for the selected item and not for others?
January 13th, 2010 at 1:57 am
Hi All,
Well i am using the coverflow control given by Doug McCune available here – http://bit.ly/zCc11.
If i add an image to one of the panel create at runtime, the panel does not show up at the background. But when i click just above the reflection of the same panel, the coverflow effect will not be seen but after the effect the panel appears on the front.
Following is my code
Panel {
borderColor: #99CDEE;
borderAlpha: 1;
borderThickness: 1;
borderThicknessLeft: 1;
borderThicknessTop: 0;
borderThicknessBottom: 1;
borderThicknessRight: 1;
roundedBottomCorners: false;
cornerRadius: 5;
headerColors: #b5e6f3, #81b3e6;
dropShadowEnabled: false;
titleStyleName: “mypanelTitle”;
vertical-align:middle;
horizontal-align:center;
}
.mypanelTitle {
letterSpacing: 1;
color: #333333;
fontSize: 12;
fontWeight: bold;
}
Thanks,
Prajwal
January 18th, 2010 at 1:48 pm
Hy guys,
First, Many thanks to Doug for this great component ! It’s really usefull and beautiful, and everything is fluid.
Bill, I would ask you if you can explain more about what you said. I tried to put a repeater inside my component to add new pictures externaly, without recompiling but I have several problems with them.
Could you tell us more please ?
Thanks !
February 16th, 2010 at 3:29 pm
The processor is branded as a little bit newer design amount however it and also the GPU are likely the same pace as the 3GS. The old Touch with the same Processor and GPU since the 3G was quicker. Apart from getting the clock pace turned up higher the Contact has much less software programs to run since it?s not a phone. It ought to do more than any iPhone to this day in overall performance.
March 2nd, 2010 at 11:41 am
i am having an issue with the coverflow component. During my development, everything works fine, but when i :
a. copy working files to new folder for publishing
b. use the export for publish feature of flex
c. copy entire working directory contents into new folder
the coverflow doesn’t work properly. it acts more like the original viewsack, but centered. all tween events are not shown. I have added in a timing event into my app to automaticall scroll through the contents which pauses when mouseOver. i only see one(1) item when i hover over the component, thus initiating the pause portion of my timer event. When the cursor is not over the component, i see nothing except for the colored background.
i have tried adding the swc files, both the ones provided with source and the most recent copies, to the build tab of properties. I had the same result.
like i said, everything works perfectly in development, i.e. running my app through Flex 3.
i need help ASAP
March 16th, 2010 at 7:47 am
This is indeed a very good component!! Thanks for everything Doug you are Great!!