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.
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.
Another cool ass component to dissect. Thanks Doug.
Doug, this is totally cool, I was just looking around for a good Display Shelf replacement, and here comes yours!
clicking on the unselected items makes the z-order mess up.
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
Shweeettt!!
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!
+1
2 Thumbs Up !! Love your work Doug
Thanks 🙂
Hey nice going.. I like the way you did this, would never have thought of building upon ViewStack..
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.
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?
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!
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…
Pingback: Dreamer's Blog
Cool! Great work..
My buddy Sagar Mahapatro @Mixercast did the same using AS2..
-abdul
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 ?
Cool Doug!
Thanks for sharing the source code. Your logic for integrating PPV3D in the MX:ViewStack is ingenious!
Arpit, Tweener lets you tween multiple numeric properties of a component with just one line of code. Very easy to use.
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.
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
Awesome stuff Doug. Long live 3D list effects!
Pingback: iTunes and CoverFlow need a place in your library… at The Corkboard
Pingback: Flex-info.fr : Communauté Flex » Blog Archive » Le nouveau copomsant CoverFlow en Flex
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
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!
Hi Doug,
I keep getting an Invalid BitmapData error when I add images to the CoverFlowContainer. Any ideas?
@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.
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.
@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!
Pingback: Papervision 3D - open source 3D engine for flash « Kaushik’s Blog
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.
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.
Hi dough !
please let me know how to set the height of the off-centered components(panels)
thank you
fkin A dude !
cheers, realy great work on this one !
Pingback: Feargal’s blog » Blog Archive » My del.icio.us bookmarks for November 27th
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!
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…
Pingback: iphone gallerie in flash - PSD-Tutorials.de - Forum
(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
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
how do you get the flex controls example to be compliant with the safari – works fine in firefox – thanks 🙂 great app
Pingback: www.video-flash.de
The guy whom I respect
good!
??????????
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
Pingback: CoverFlow Component, Itunes ke Flex « Flexconfuser’s Weblog
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
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
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/
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.
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?
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.
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?
cool shit, cool shit… excellent preso at 360 ATL. Great meeting you Doug.
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.
Pingback: blog.vandervleuten.org » Blog Archive » CoverFlow Flex Component
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) ?
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.
@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 🙂
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.
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
Pingback: CoverFlow Flash: Raccolta Tutorial e Progetti | JuliusDesign
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!
How can you change the height of non-selected children?
Pingback: Running Appcelerator on the Google App Engine
Hello, tell me please how to install CoverFlow Flex Component to Flex3 and (if possible) to Flash CS3. Thank you
Pingback: Build RIA applications and deploy to Google AppEngine
Pingback: Ajaxian » Appcelerator on App Engine
Ah! I didn’t realise how it was done
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 …
ok forget my previous post, anyone know how to set a preloader in for the video?
Can you tell me how to input the “CoverFlow” into Flex?
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!
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
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.
Dan, your prototype is really nice!
I did’t find where to set the selectedIndex at startup, sorry ;(
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)
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
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?
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
Pingback: jun :: realeyes » Blog Archive » Doug’s CoverFlowContainer and Drag/Drop
joder tio! bien hecha la actualizacion 😀
thanks a lot
JJJDDD
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
Pingback: ????CoverFlow???HatenaTunes? | ClockMaker Blog
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
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
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!!
Coverflow is horrible. it has a lot of memory leaks,due to papervision. use displayshelf instead
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
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
Using cover flow how to make both side balanced menu. Always menu should be both side.
Thanks,
Viswa
i dont know how to use this component on my project plase can anyone help me, im new in this, thanks
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
Pingback: Astuce pour améliorer la librairie Coverflow de Doug Mccune
Any chance of porting this to the latest pv3d?
Pingback: Grass’s Blog - Asp.net|C# » Blog Archive » Adobe Releases Flash 10
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.
How can I add some title to my tracks that should be displayed in this? Please help
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 .
Pingback: Flex and Flash Developer - Jesse Warden dot Kizz-ohm » Blog Archive » Writing a Caching Engine for Flash Player
amar,
Speaking of training, you need to go find basic training on how to present yourself in public.
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
this is slick. thanks a ton.
Hi there !
I was wondering if it would be hard to manage multi-selection in the coverflow component ?
Any idea ?
Thanks in advance
regards
Pingback: Reiner’s Blog
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.
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
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
Does anyone have the Source Code for the version of Papervision that Doug uses in his Coverflow component?
warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’
Pingback: Cover Flow for histology pictures | DigitalNeurosurgeon.com
Has anyone tried using this library and the efflex library. I get a pretty nasty error.
Great code but unfortunately doesn’t compile with Papervision3D_2.0.883p
Could someone update it?
warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’
Please Help that makes my video movies stop.
hi this a good work. we copy the source code for our admin development.
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…
wait never mind.. i’m an idiot
This is awesome btw
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?
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!
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!
Nossa queria muito esse blugin. quem tiver me manda no meu email
joao.diniz@grupodecio.com.br
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 ?
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.
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
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 ?
I wanted to know how do i increase the height of the offcentered panels….
Pingback: Patrick Simon's personal blog
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?
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.
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.
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 🙂
I downloaded the souce but
HOW TO USE IT ??
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 !!!
could not resolve
ns2:CoverFlowContainer
to a component implementation
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.
one question, how to add an effect to zoomin and zoomout the component including in the cover flow?
I got the same error when I try to load Images into the panels, can you us Doug
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.
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().
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.
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
To resolve the “Error #2015: Invalid BitmapData” Problem just adjust the count of Segments in the containers:CoverFlowContainer Tag. That works 😉
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:
…
…
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!
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
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!
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.
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!
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?
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?
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
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 !
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
This is indeed a very good component!! Thanks for everything Doug you are Great!!
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.
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>
Great Component 🙂
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.
Nathan B. did you every fix the issue?
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
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.
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?
@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
ouuups the new Spark Component i ment is s:NavigatorContent
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.
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
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!!
Pingback: Image- und Coverflow | WebmasterArchiv.com
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 ?
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.
Hi
The CoverFlow component is very fantastic.It is very helpful.Could you provide us the Api ?Thanks.
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.
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!
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!