There’s a project page of this component now, check it here, it’s open source!
As you may have read in a few of my other posts I’ve hacked a CoverFlow component together, just to see if it could be done. I was glad to see a lot of people liked it, so I decided to turn it into a proper component instead of the “hacked together” version I’ve posted before.
A lot of things have changed under the hood, a lot of bugs are fixed and you have to use the component a bit different.
- The previous version was built as a container, the new version is built more like a dataGrid, so it’s a component with a dataProvider. The component just renders the data in the dataProvider
- It’s dynamic! It loads the images from the dataProvider. Changes on the dataProvider will be detected through binding
- It’s now compatible with the Flex history manager, I’ve implemented the IHistoryManagerClient interface
- It’s now compatible with the Flex focus manager, I’ve implemented the IFocusManagerComponent interface
- I’ve added keyboard control, so the left and right arrow keys change the selected cover
- It dispatches events, it lets everyone who’s listening know that the selectedIndex has changed, that it’s finished animating, etc
- It’s now properly masked, the 3d scene doesn’t stretch to the full stage width and height anymore
- And some more other small things
I’ve created a new sample project to demonstrate all of the features, see it in action here. You can see and download the source code of the sample project here.
The component free to download and free to use, download the swc here. I’m not publishing the source code of this one for now.
I’ve created documentation to help you put this component to good use, read it here.
Let me know what you think of it. I’d also like to see some end results. some projects in which you’ve used my component.
The next step? Hmm, a piclens component perhaps?
Hey man, looking good. i checked the demo but none of the settings (angle etc) seemed to change?
Hi Vinnie, I’ve put the wrong sample app online. I’ve fixed the problem, everything works fine now.
Sebastiaan, man — thanks a lot for the component. Words can’t describe how pleased I am to see dynamic version of your masterpiece. Best regards, Sergey.
One question though: in the previous version of the component there was a “shape” property of the component instance, which allowed to have 3D cubes with cover art images in its sides. Is there any way to instantiate such kind of a cube now?
Regards.
Hey Sebastiaan,
in the latest flex coverflow with dataprovider the main as file SebCoverFlow seem to be missing in the download. Do not know if that is suppose to be like that but the component does not work without it. look at the MX structure in SebCoverFlowApp.mxml
Hi Mauro, I didn’t pack the swc component in the source of the sample project, because the component itself is another project.
However, I’ve packed the swc file with the sample project, so if you download the sample project it should work right away. Don’t forget to add the lib folder to your library path.
@Sergey: I haven’t implemented the shape property in this version yet. I’m about to do that the following 2 weeks.
Awesome! Thanks for the dynamic DataGrid implementation. The speed on this rocks over any other flex coverflow I’ve seen.
Great stuff Sebastiaan
.. I don’t see a license on it, are we allowed to use it for commercial projects?
Nice work.
Does the library support adding dynamically created images?
I have a BitmapData object that I would like to add dynamically to the component which is not loaded via a URL. How do I do this?
Great component. Good job. I was wondering if you have to implement something special to handle filters on the data provider. I am adding items to the ArrayCollection, that i use as data provider, dynamically. The data comes from different servers so the items appear over a period of time. I have a function to filter the items in the cover flow depending on some attribute. I can go over the arrayCollection and remove items and add them again if I want. The problem is that the items on the arraycollection appear over time and therefore the arrayCollection is not sync… The best would be that I could filter the arrayCollection i use as Dataprovider and that the component is aware of this filter.
Never the less thanks again for this great component.
Javier.
Hi Sebastiaan,
Your SebCoverFlow.swc is the smoothest and most fluent of all CoverFlow components I’ve tried. I wish you can post the source code for it. Until then, thanks again. Great job.
How to set dataprovider to XML file?
[...] Holtrop has created a followup to his Flex CoverFlow component. Check it out here. This is by far the fastest of the Flex coverflow implementations I have seen. I’m going [...]
Great work. But one question
Is it possible to add other components to the coverflow e.g. Text or Buttons?
@Ret: At this moment it’s not possible to use any other component. It’s using an mx:Image internally. I’m still thinking to build this components to work with itemRenderers, in that way you can build your own renderers, but I don’t think I’ll be finishing that any time soon.
@MechanisM: It’s not possible to use an XML or XMLList object as a dataProvider, you must use an ArrayCollection as you can read in the documentation: http://sebastiaanholtrop.com/samples/coverFlowcomponent/asdoc/com/sebastiaanholtrop/components/coverflow/SebCoverFlow.html#dataProvider
Yo! I just wanted to post my 2 cents here about using other components with your CoverFlow project. What I’m currently working on requires displaying both video and imagery in the same gallery and since I’m getting that data from a WebService call, I never know what to expect…so in order to support video with your coverflow component, I did the following:
1. Make a placeholder image to represent videos that will be seen in the coverflow.
2. Add an ‘animationComplete’ event to the coverflow object.
3. Add a Canvas with a VideoDisplay nested inside of it that checks to see if the first item in the gallery is a video on init.
4. Switch the video canvas visibility on or off depending on what kind of media is currently loaded on (via animationComplete event)
5. Make sure that the video closes if you’re not viewing it (otherwise it will play in the background and never clear from memory).
That’s the basic idea…without all the code explaining it. If anyone wants a more in depth explanation, I’d be happy to post my code.
Thanks Sebastiaan! If you ever support other objects in your coverflow component, I would love to know about it!
–Curt
Have you tired working with image sizes of 600×400 also how do you put additional text or image information when a album is clicked. So lets say you click on a album it will have a info window with Artist, Name, CD release date
Is it possible to edit the reflection – ie, its transparency, length, etc?
I’ve tried using trace statements to bury into the component but all I’ve been able to do is affect the transparency of the entire thing.
I’m trying to utilize the dyanmic flex coverflow you have here and it’s working great so far! The only issue I run into is the scaling of the images as they are displayed. How should I go about scaling the images so they fit nicely in the coverflow? Right now, the images are too big where it overlaps each other. Your advice is greatly appreciated. Thanks in advance!!
No other words, Just Great!
Seb:
Awesome work on this component, I found yours after trying Eli Greenfield’s as well as Doug McCune’s.
I have the component working fine when loading it within the context of a Flex project and running it as a standard flex project. I’d like to include it in my web archive so that retrieval of it is handled through the application server container.
That being said, this evening I just moved the code over into that project and built. Everything worked fine, with the exception of the container you have provided. I believe I have found a bug and would love to help debug and find the root of the problem, unfortunately I don’t have the source.
Do you know why when passing in a list of string locations to images it does not load them?
Please email me if you have any suggestions – I’d love to see if I can pitch in any to improve (however little is possible) this great component.
-Adam
Seb,
Great work on this component. Works really well. Could you point out how one would turn the reflections off? Thanks in advance.
Bob
Seb,
Can you point out the path to the Reflections class to turn off the reflections? I see on your other post that if reflection is set to 0, this will eliminate reflections. Not sure how to call this path from this component. Would appreciate any insight. Great work again.
Regards,
BobM