Flex/Flash/Actionscript

CoverFlow Flex Component

UPDATE: Feb 26, 2008
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 :P), 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.
    firefoxscreensnapz017.jpg
    View the Example | View the Source
  • Amazon Browser
    And here’s what you get if you drop in the Amazon API to do searches:
    firefoxscreensnapz016.jpg
    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.

Standard

175 thoughts on “CoverFlow Flex Component

  1. Tangent says:

    Doug, this is totally cool, I was just looking around for a good Display Shelf replacement, and here comes yours!

  2. Gobo Borz says:

    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

  3. Aryan says:

    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.

  4. Chris says:

    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?

  5. Stephen Weber says:

    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!

  6. 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…

  7. Pingback: Dreamer's Blog

  8. 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 ?

  9. Al says:

    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.

  10. Carrie says:

    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

  11. Pingback: iTunes and CoverFlow need a place in your library… at The Corkboard

  12. Pingback: Flex-info.fr : Communauté Flex » Blog Archive » Le nouveau copomsant CoverFlow en Flex

  13. MK says:

    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

  14. Michelle says:

    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!

  15. @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.

  16. 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.

  17. @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!

  18. Pingback: Papervision 3D - open source 3D engine for flash « Kaushik’s Blog

  19. Sudha says:

    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.

  20. 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.

  21. Pingback: Feargal’s blog » Blog Archive » My del.icio.us bookmarks for November 27th

  22. Qiao says:

    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!

  23. 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…

  24. Pingback: iphone gallerie in flash - PSD-Tutorials.de - Forum

  25. T_bo says:

    (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

  26. Eric says:

    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

  27. Pingback: www.video-flash.de

  28. 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

  29. Pingback: CoverFlow Component, Itunes ke Flex « Flexconfuser’s Weblog

  30. leo says:

    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

  31. leo says:

    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

  32. Clayton Gulick says:

    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.

  33. mightyx says:

    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.

  34. PwrSrg says:

    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?

  35. Chad says:

    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.

  36. Pingback: blog.vandervleuten.org » Blog Archive » CoverFlow Flex Component

  37. 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) ?

  38. 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.

  39. @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 🙂

  40. Tom says:

    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.

  41. Chris says:

    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 :D.

    Thank you
    Chris

  42. Pingback:   CoverFlow Flash: Raccolta Tutorial e Progetti | JuliusDesign

  43. ploufy says:

    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!

  44. Pingback: Running Appcelerator on the Google App Engine

  45. danik says:

    Hello, tell me please how to install CoverFlow Flex Component to Flex3 and (if possible) to Flash CS3. Thank you

  46. Pingback: Build RIA applications and deploy to Google AppEngine

  47. Pingback: Ajaxian » Appcelerator on App Engine

  48. Andrew says:

    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 …

  49. eunice says:

    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!

  50. Steve says:

    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

  51. 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.

  52. DAX says:

    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)

  53. 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

  54. Mark says:

    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?

  55. Pingback: jun :: realeyes » Blog Archive » Doug’s CoverFlowContainer and Drag/Drop

  56. 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

  57. Pingback: ????CoverFlow???HatenaTunes? | ClockMaker Blog

  58. 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

  59. 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

  60. Brisa says:

    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!!

  61. 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

  62. 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

  63. ferdinad says:

    i dont know how to use this component on my project plase can anyone help me, im new in this, thanks

  64. smpires says:

    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

  65. Pingback: Astuce pour améliorer la librairie Coverflow de Doug Mccune

  66. Pingback: Grass’s Blog - Asp.net|C# » Blog Archive » Adobe Releases Flash 10

  67. Shibli says:

    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.

  68. amar shukla says:

    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 .

  69. Pingback: Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Writing a Caching Engine for Flash Player

  70. Tom says:

    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

  71. FJ says:

    Hi there !

    I was wondering if it would be hard to manage multi-selection in the coverflow component ?

    Any idea ?

    Thanks in advance
    regards

  72. Pingback: Reiner’s Blog

  73. Mohan says:

    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.

  74. Jessica says:

    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

  75. 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

  76. DL says:

    Does anyone have the Source Code for the version of Papervision that Doug uses in his Coverflow component?

  77. Pingback: Cover Flow for histology pictures | DigitalNeurosurgeon.com

  78. ramon says:

    warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’
    Please Help that makes my video movies stop.

  79. rui says:

    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…

  80. fang says:

    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?

  81. Mike says:

    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!

  82. csabi says:

    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!

  83. Chris says:

    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 ?

  84. Twlght says:

    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.

  85. Johnny says:

    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

  86. Chris says:

    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 ?

  87. Pingback: Patrick Simon's personal blog

  88. 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.

  89. 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.

  90. Gemo says:

    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 🙂

  91. Tamer says:

    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 !!!

  92. Harsh says:

    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.

  93. johnson he says:

    one question, how to add an effect to zoomin and zoomout the component including in the cover flow?

  94. Zack says:

    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.

  95. gburek says:

    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().

  96. Rick says:

    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.

  97. Agent Smith says:

    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

  98. To resolve the “Error #2015: Invalid BitmapData” Problem just adjust the count of Segments in the containers:CoverFlowContainer Tag. That works 😉

  99. 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:

  100. mikako says:

    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!

  101. Wil says:

    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

  102. Grey says:

    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!

  103. 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.

  104. Eric says:

    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!

  105. hannes says:

    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?

  106. T says:

    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?

  107. Prajwal says:

    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

  108. Krazymins says:

    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 !

  109. Nathan B says:

    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

  110. I would like to use this component and i have the same problem as Nathan B and others.
    I added canvas with an image and a link to coverflowcontainer. No problems in development but when i put my files on the server. I can see only one image and the tween doesn’t work. I add canvas on the fly.
    Nathan,Prajwall or agent Smith, did you find an answer? Genius and generous Doug? Thanks a lot.

  111. Muthu says:

    hi Doug, you works very useful for us. i need one flex project, that project like youtube project run on the local machine. i hope you help me>

  112. Jassi says:

    I have the same problem like others when the number of images or more than 34 in coverflow display, I can only see one image in coverflow

    Any suggestion or fix?

    Thank you in advance for your help.

  113. Luis Eduardo says:

    Hi Doug, First of all, thanks for the great component.

    I propose a little fix to your CoverFlow.
    My scenario is: I have to add panels as children of the coverflow. Each panel has an image loaded at runtime. Your implementation works fine IF the panels dont change width or heigth after they are created.
    BUT depending on the image loaded at runtime, the width can be diferent than the heigth. It would be nice if the children panels redimension a bit to host better the image just loaded. (i.e. images with dimension of 400×200 should be viewed better if his parent container had higher width than heigth, diferent than images with dimension 200×400).

    So, i did a little hack and everything is working well now. Here is my solution:

    -in BasePV3DContainer i change the function replacePlaneForChild to public;
    -in CoverFlowContainer i create this new function:
    public function updateChildPlane( child:DisplayObject ):void {
    replacePlaneForChild(child);
    }
    after each image finishes to load i change the parent host dimension to something i think its better and then just needed to call:
    coverflow.updateChildPlane( p );
    (here “coverflow” is the id of CoverFlowContainer and “p” is the id of the Panel hosting the image just loaded)

    also, it would be nice if this component could be merged with FlexLib and let others keep it to date. (i have made some few improves in the MDI component too)

    thx again bro,
    – Luis

  114. alex says:

    Hi from Chile, i must to say that every time i visit your blog i find really amazing components.
    you really are a master in flex.
    congratulations and keep the good work.

  115. xavier says:

    hi, i’ve been testing your component and it looks really good, kudos for the work you’ve done.
    i’ve been trying to add a custom component based on a panel to the coverflow container to no avail, i’m getting this error:
    TypeError: Error #1034: Type Coercion failed: cannot convert coverflow::cmpItemCoverflow@139e2851 to mx.core.INavigatorContent.
    at mx.containers::ViewStack/get selectedChild()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\containers\ViewStack.as:628]
    at mx.containers::ViewStack/instantiateSelectedChild()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\containers\ViewStack.as:1242]
    at mx.containers::ViewStack/commitProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\containers\ViewStack.as:750]
    at mx.core::UIComponent/validateProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:7772]
    at mx.managers::LayoutManager/validateProperties()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:572]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:700]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]

    cmpItemCoverflow is the custom component i’m adding.

    and here is the code i’m using to add the component:
    for (var i:int=0;i<ArrListaCursos.length;i++){
    var coverflowitem:cmpItemCoverflow= new cmpItemCoverflow();
    cursoscoverflow.addElement(coverflowitem);
    }

    can you give me some pointers?

  116. Grauzone says:

    @xavier

    When i have tryed to compile the CF-Component with the SDK 4.0, I got the same Problem.
    You can solve it if u compile the Coverflow Project with the 3.5 SDK.
    Or, but i havent tryed this before, u can try to wrap the CF Items with the new Spark Component

    It would be cool if u could post your result here, if u solve this problem.

    greets

  117. Jack says:

    Hi,

    I would like rearrange the panels/childs in the ViewStack by clicking on next or prev panels like a carousel with five panels? I would like to have every time fife panels in the middle. When I selecting the next panel, the last on the other side must be going on the opposite side.

  118. Maile says:

    Hi there! These are great samples. I was wondering if you had plans to update these to the 4.1x SDK? I’m having trouble loading these into Flash Builder 4.

    Thanks!
    Maile

  119. You need to mention which versions of the libs you buit against. I just downloaded the latest versions and your code won’t compile against them. In some cases it is simple stuff like PaperVision moving objects into subpackages but I don’t know if I want to work through the rest of the compile errors. aaargghhh!!

  120. Pingback: Image- und Coverflow | WebmasterArchiv.com

  121. Subroto says:

    Doug I have been trying to couple your coverflow component with XML but am unable to do so. Can you share some examples to demonstrate this ?

  122. Kundanika says:

    Hi Doug

    First of all, hats off to you for making this component. It has been of a great help to me. But I am facing some issues when i am trying to make it scalable for say more than 1000 records.
    1) We don’t have addChildAt() which i can use to add a child at the beginning. So,i have used addChild() and then used setChildIndex() which is an alternative to it.
    2)When i try to add and remove coverflow children in chunks say 5 or 10, it starts degrading in performance, becomes slower and slower.
    I would really apperciate your inputs.
    Thank you in advance for your help.

  123. aiheguozhi says:

    Hi
    The CoverFlow component is very fantastic.It is very helpful.Could you provide us the Api ?Thanks.

  124. Jaxter says:

    Hey, this component is great stuff!! But is there any way to add tooltips to all the items in the coverflow? Oh yeah, and how do you add key down events to control the children selection? Please do advise…i’m trying to do this in Flex and i’m a complete newbie.

  125. Sathish says:

    Hi,
    Can you please upload the source for phunky with which this coverflow example is created. All the source projects that i get from internet are either incomplete or wrong version. Thank you!

  126. Sathish says:

    Hi can you please upload the source for phunky with which this coverflow example was created. All the source projects that i get from internet are either incomplete or wrong version. Can’t set it up in Flash builder 4. Thank you!

Comments are closed.