Flex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlow
Posted by: Doug, in Flex, PaperVision 3DI 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.
I’ve made some much needed performance improvements to the Flex CoverFlow component I released a few days ago. I’ve also taken the concept of 3D Flex containers a little further and added a 3D Carousel container and a vertical version of CoverFlow. Source code here.
Check out the performance now and stop whining (oh, and notice that this blog post has 3 of these embedded 3D components):
Performance improvements
When I first released the component I took the shotgun approach to rendering, which meant I rendered the entire scene every frame and all the materials were animated. This is the lazy approach that ensures that the 3D scene always looks right, but it also kills performance. So you poor people out there with computers from the 1980s complained that the component made your browser shoot up to 110% cpu and all that. Instead of telling you to get faster computers I decided to make a few small modifications to speed things up.
First, instead of rendering every frame we’re now rendering only while the animation is happening. This is a sweet improvement that Brock Brinkerhoff suggested in an email he sent me (thanks Brock!). Basically in our enter frame handler we check if Tweener is currently tweening the selected child. If so, we make PaperVision 3D render the scene. If not we just ignore and don’t waste CPU power. This means that once the movement has stopped (ie the selected child comes to rest in the center), the component no longer uses much CPU at all.
The second improvement was to not use animated materials. I added a new material that I called FlexMaterial (and the associated reflected version, ReflectionFlexMaterial). This material is non animated, but listens for FlexEvent.UPDATE_COMPLETE events fired from the child (and all of the child’s children if it has any). Whenever an updateComplete event fires the material re-renders. This ensures that our material is always up-to-date. One note about this: if you have animations in your child components that do not dispatch updateComplete events you’ll have to manually dispatch updateComplete over and over. This is pretty easy, basically what I did for a child that I wanted animated was add the following code in MXML:
enterFrame="event.currentTarget.dispatchEvent(new FlexEvent(FlexEvent.UPDATE_COMPLETE))"
and that ensures that the child will always be updated.
Oh, and while I was at it I made a modification to get around the z-ordering issue. This was a problem when you selected one of the planes that was not directly next to the selected one. When the selected plane moved back into place it would move through the other planes on its way. Now we push the selected plane straight back at a faster rate than it moves sideways, seems to have pretty much fixed the issue (at least good enough for my eyes).
Vertical CoverFlow
I refactored the code a little bit to allow me to easily change the 3D layout. This let me crank out a vertical version of the CoverFlow component in no time, shown here on the right. This is almost all the same code, just tweaked to lay things out vertically instead of horizontally. I figure this can be used for a sidebar widget. I had to remove the sweet web 2.0 reflections cause I didn’t know where they would go. The cool part about the refactored code is that the base component handles all the core stuff (like creating the 3d scene and planes, etc) and then each extension can simply modify the layout method. Sweet.
Carousel Flex Component
And while I was playing I couldn’t help taking some of Lee Brimelow’s code and making a 3D carousel Flex component. Thanks to Lee for doing the math for me. So here’s a Flex container to do that 3D carousel thingy. One sweet thing is that I took the same approach to preserve full interactivity of the child components. When the selected child is rotated to completely face the user the real child is swapped with the 3D plane and you can fully interact with it just like in a normal Flex app.
Take it further
So if you take a look at the source code you’ll see that I’ve created a BasePV3DContainer, which extends ViewStack and creates 3D planes for each child in the container. The idea here is that you can create an extension of this class and implement the layoutChildren() method and make up your own 3D container component. I wouldn’t say the base class I’ve provided is perfect, there’s certainly some code that should get moved around or done differently, but you can figure it out (hell, it’s only 300 some lines of code with comments). If you make any other 3D container Flex components then either post a comment here or drop me an email: doug.
Get the source
(Note that this source package include the CoverFlow, Vertical CoverFlow, and Carousel components, as well as an example showing using the CoverFlow component with Flex controls. This does not include the iTunes examples in this post. I’m too lazy to clean that code up well enough to give out.)
This entry was posted
on Monday, November 19th, 2007 at 9:17 pm and is filed under Flex, PaperVision 3D.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
November 19th, 2007 at 9:52 pm
Awesome! Thanks for the sources, Doug!
November 20th, 2007 at 12:03 am
wow!
So Coooooooooooooooooooooooooooooooooool!
Thanks, Doug!
November 20th, 2007 at 1:54 am
Hi Doug,
your examples on this page are throwing up lots of error messages.
I am using flash version 9,0,60,235 on a an Intel Mac
and the error is:
ArgumentError: Error #2015: Invalid BitmapData.
at flash.display::BitmapData()
at org.papervision3d.materials::MovieMaterial/initBitmap()
at org.papervision3d.materials::MovieMaterial/updateBitmap()
at com.dougmccune.containers.materials::FlexMaterial/handleUpdateComplete()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.managers::LayoutManager/doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()
November 20th, 2007 at 2:22 am
great job.
I wondered if you could contact me via email bud
November 20th, 2007 at 2:44 am
Hi Joc,
This happens when you add viewstack item which has an percentage width and/or height. If you use absolute values this won’t happen.
Regards,
Bart
November 20th, 2007 at 3:01 am
I can’t see anything with player 9,0,60,235, I just see the black background, while is working with older players.
November 20th, 2007 at 5:16 am
sloooooOOOoooow……
November 20th, 2007 at 8:14 am
Gotta hand it top you - instead of just telling all the whiners to shove it you came back with even more awesome stuff with vast performance improvements. This is fantastic. - Thanks!
November 20th, 2007 at 9:43 am
The vertical layout kicks ass.
November 20th, 2007 at 10:36 am
Great work Doug. The carousel idea sounds similar to the flex 3d form I built using papervision.
http://www.dgrigg.com/post.cfm/04/18/2007/Flex-form-with-a-3d-twist
November 20th, 2007 at 2:35 pm
Nice! I did think Ely’s DisplayShelf was a little contrived with the faux-faux-3D mask effect. This looks alot better.
November 21st, 2007 at 8:35 am
Hello,
very nice component, thank you !
What is the best way to remove the component from the display, as it make huge memory leaks when using coverflow.removeAllChildren() or removing the component it self from the parent container.
Any idea on how to implement proper removeAllChildren() method ? or at least proper removeChildAt( index : uint ).
Thank you in advance !
November 21st, 2007 at 9:12 am
I tried removeChild() too, and it makes memory leaks as well.
I don’t know if it is PV3D related or your component I have no time to investigate for the moment.
Try to trigger populateCoverFlow() several times, and look at the memory :
private function populateCoverFlow() : void
{
// clears the coverflow
clearCoverFlow();
var i : int = 0;
var n : int = 10;
for( i; i
November 21st, 2007 at 9:15 am
well sorry its truncated
here :
http://pastebin.sekati.com/?id=Anonymous@32388-73e5df17-t
November 21st, 2007 at 9:22 am
@Adnan - yeah, I didn’t implement removeChild and make it remove the 3D planes. I’ll try to update the component soon and implement removeChild correctly. Basically every time a child is removed we need to remove the 3D plane and the reflection 3D plane from the PV3D scene.
November 21st, 2007 at 9:42 am
@Doug - here you can see a sample with your overrided function removeChild() :
http://astronaute.net/_temp/flex/TestCoverFlow/TestCoverFlow.html
As you can see it creates huge memory leaks too so I don’t know if it is your PV3D implementation or PV3D itself that is responsible for those leaks.
Hope it helps you
Cheers and thank you again for good work !
Adnan
November 22nd, 2007 at 3:19 am
great demos Doug! Love them
just a question about that not uploaded iTunes example: the album covers are embedded in your project or you retrieve them from any online service? Would need some place where to get album covers… but can’t find nothing with a genereous crosssdomain.xml. Anyone knows?
thanks
Marc
November 22nd, 2007 at 7:57 am
@marc - They’re being loaded in from the my itunes RSS feed that’s available to anyone who purchases music from iTunes. Unfortunately, Apple doesn’t give us a friendly crossdomain file, so I’m using a proxy for the images to route them through my server.
November 22nd, 2007 at 8:35 pm
I get an error when I try to run this code in Flex 2
1017 The definition of base class MovieMaterial was not found. FlexMaterial.as
November 25th, 2007 at 9:06 am
Very nice component.
I made a Flex Library Project from your sources using FB 3 Beta 2. It makes your components easier to deploy through a CoverFlow.swc library : you only need to add the CoverFlow.swc to the build path of your own project.
You can extend the library by editing the manifest file and adding some more new cool components.
You can find the Library Project here : http://jarodinou.free.fr/flex/CoverFlow.zip
November 25th, 2007 at 9:20 am
[…] Doug McCune a developpé un composant Flex permettant de mimer le fameux effet CoverFlow, cher à tout utilisateur de Mac OS X, à une liste de composants Flex. Il a également étendu ce composant à un autre permettant de faire ce même effet en scrollant les composants Flex verticalement.J’ai regroupé ces composants dans un projet compatible Flex Builder 3 Beta 2, facilitant le déploiement de ces composants sous la forme d’une librairie CoverFlow.swc.À télécharger ici. […]
November 27th, 2007 at 9:19 am
[…] I blame the long weekend, Doug McCune’s sweet and inspiring CoverFlow component and an over-elaborate idea to build a 3D Ribbit app for my recent immersion (more like head first-dunking) into PaperVision3D. […]
November 28th, 2007 at 2:12 am
Great work Doug…
Reading your articles as far away as Slovenia
November 28th, 2007 at 7:16 pm
Awesome stuff…. however, I noticed that when I add a component larger than 200 in width, the side towards the direction of motion clips until the animation completes. This was on the Carousel. Any thoughts?
November 28th, 2007 at 9:35 pm
It would also appear that there is some issue with measuring the children inside the view container; padding and borders (on panels) seem to be ignored.
To correct my former post, the size that clipping begins is at 250, not 200. When set to a great value, 1000 for instance, clipping happens on each load of the child, and the reflective plane remains clipped at its furthest extent.
December 1st, 2007 at 8:00 pm
[…] http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/ Posted in FLEX […]
December 5th, 2007 at 11:17 pm
Papervision3D 2.0 alpha is out. A few blogs say it’s faster. Perhaps it would improve the performance of this component even more.
December 6th, 2007 at 2:48 pm
Hey do you think the CoverFlow component can be modified to flow like a carousel, in a loop. My tough is as it advances move the last item from the direction you are going a way from and add it to the direction you are going. Does that make sense. Doug or somebody, let me know.
December 7th, 2007 at 3:40 pm
BBC webdesigner took the coverflow carousel to the next step, check it out it’s pretty awesome if you ask me.
http://www.bbc.co.uk/radio1/djs/
December 9th, 2007 at 8:44 pm
@jwb I wish he had source for that. BBC thing
December 13th, 2007 at 5:13 pm
Odd…
The first version worked fine but with this version it loads and all I can see are scroll bars.
December 14th, 2007 at 5:25 am
Doesn’t work for me on the new Flash 9 update player (9,0,115,0)… would love to check it out, though!
December 14th, 2007 at 4:48 pm
We did the BBC thing
. It was actually done in AS 2.0 using Sandy not Papervision.
December 15th, 2007 at 11:35 am
@Tink can give me the jist of how to got each block to display their rotationY to the tangent. Like each block is a slice of pizza. I’ve been exploring this but I get lots of hickups.
December 15th, 2007 at 6:16 pm
@Chad, woops, Apple went and changed the way the RSS feed that I was pulling in the images worked. I updated the feed URLs for the My iTunes feed and now it works again. Wasn’t a problem with flash player or the component, it was the data source.
December 19th, 2007 at 4:11 am
Here’s the code that manages the rotation (NOTE: it isn’t the full class)
public function get position():Number
{
return _position;
}
public function set position( value:Number ):Void
{
_position = _tweenStartPos + ( ( _tweenEndPos - _tweenStartPos ) * value );
checkAndResetPosition();
setItemOrientations();
}
private function setItemOrientations():Void
{
var artist3D:ListItem3D;
var numArtists:Number = _artists.length;
var targetPos:Number;
for( var i:Number = 0; i Math.floor( ( _numArtists / 2 ) + _position ) )
{
artist3D.artistVO.position = artist3D.artistVO.index - _numArtists;
}
else
{
artist3D.artistVO.position = artist3D.artistVO.index;
}
targetPos = artist3D.artistVO.position - _position;
if( targetPos = 1 )
{
var circAngle:Number = SELECTED_ANGLE + ( targetPos - 1 ) * SEPERATED_ANGLE;
var slideAngle:Number = 90;
var circRadTemp:Number = RADIUS;
}
else
{
var circAngle:Number = targetPos * SELECTED_ANGLE;
var slideAngle:Number = targetPos * 90;
var circRadTemp:Number = RADIUS * (1.3 - Math.abs( 0.3 * targetPos ) );
}
orientateSlide( artist3D, circAngle, slideAngle, circRadTemp );
}
}
private function setPosition():Void
{
var center:Number = View.STAGE_WIDTH / 2;
if( ( getMouseX() ( center + DEAD_ZONE_WIDTH / 2 ) ) )
{
// was 1800
_position += ( getMouseX() - center ) / 1300;
}
else
{
var target = Math.round( _position );
if( target _position )
{
_position += 0.0283333333333333;
if( _position > target ) _position = target;
}
}
checkAndResetPosition();
}
private function checkAndResetPosition():Void
{
if( _numArtists != _numArtistsAdded )
{
if( _minTarget2 == null )
{
if( _position _maxTarget )
{
_position = _maxTarget;
}
}
else
{
if( _position > _maxTarget2 )
{
_position = _maxTarget2;
}
}
}
else
{
if( _position > _numArtists / 2 )
{
_position -= ( _numArtists );
}
else if( _position 85 && artist3D.render )
{
artist3D.render = false;
}
else if(Math.abs(pCircAngle) = _numArtists ) ? Math.round( _position ) : Math.round( _position + _numArtists );
if( _numArtistsAdded != numArtists )
{
var dummyArtist:ListItem3D;
if( artist3D.artistVO.position > _position )
{
dummyArtist = ( artist3D.artistVO.index == 0 ) ? ListItem3D( _artists[ _numArtists - 1 ] ) : ListItem3D( _artists[ artist3D.artistVO.index - 1 ] );
if( dummyArtist && dummyArtist.render )
{
artist3D.render = true;
}
}
else if( artist3D.artistVO.position
December 21st, 2007 at 12:03 am
Thanks Tink - but I think the code got cut off at the bottom - could you re-post the missing code.
December 21st, 2007 at 12:36 am
Oops Sorry - just notice - you noted that this was not the full class…
December 21st, 2007 at 12:39 am
@Arnold - that’s almost all the code that Tink tried to post, it did in fact get a bit cut off at the bottom. I’ve got the code and will be posting a formatted version of it in the comments later tonight.
December 22nd, 2007 at 6:47 pm
@Doug - Can you implement removeChild and also addChildAt? I get invisible components that error out when I removeChildAt and then addChildAt. Plzzz.
December 24th, 2007 at 5:34 am
@Doug - I’ve implemented the addChildAt function so that it works / updates the scene properly. I basically edited BasePV3DContainer.as, copied addChild and renamed it to addChildAt and edited two lines. One line to add offSet as a function param and the 2nd to call the super function.
var child:DisplayObject = super.addChildAt(child,offSet);
Thanks for taking the time to write this code in the first place!
Regards!
December 27th, 2007 at 10:29 am
I’ve got an error ReflectionFlexMaterial.as. The translation from spanish for the error code is:
1020: The method marked as override must substitute another method.
Did somebody got the same error? The method is drawBitmap()
December 31st, 2007 at 8:34 pm
on the rotation one. the whole thing bounces when you click the arrow keys. Does anyone know how to fix that?
Cheers
December 31st, 2007 at 8:34 pm
cool
December 31st, 2007 at 9:50 pm
Happy new year guys! Its snowing like crazy!
P.S. I am typing on my iPod touch.
January 2nd, 2008 at 12:58 am
Thanks for the sources, Doug!
so great!!!
January 3rd, 2008 at 6:54 pm
@Saul Martinez - I had the same problem with PV3D 1.5 that I downloaded from Google Code. I didn’t get it to work until I downloaded the stable release of PV3D through SVN.
January 8th, 2008 at 2:23 pm
This is cool stuff guys! Sorry I cannot see the code in any of the above comments could someone please point it out to me.
Thanks in advance
Duncan
January 9th, 2008 at 7:13 pm
@ Issac (and those of you experiencing the MovieMaterial error, i.e. ‘1017 The definition of base class MovieMaterial was not found.’ Your problem was answered by Michelle in the previous coverflow post :
“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.” The SWC files are located in the libs directory.
January 11th, 2008 at 3:06 am
Hello, I want to hide a panel in the coverflow but the propriety visible=”false” doesn’t seem to work. Is there a solution?
January 12th, 2008 at 3:18 am
Very great component, i’m screwing it up right now for use in our own website
I’m missing one thing very badly: easy masking (to get rid of the “hard” borders).
I’ve tried a lot, but the basic masking functionallity doesn’t seem to work (something overrides everything or so).
Suggestions?
January 14th, 2008 at 3:15 pm
[…] You could build a quick FLEX demo in 12 days that will be one of the best things ever — because there aren’t a lot of good FLEX apps. Check this one out, for example, it uses an existing 3D toolkit and the code isn’t even that long. Or another idea is that you could build an ExtJS demo in less than 2 days that will make you look like you are a Web Genius — this demo is awesome and barely 50 lines long. It doesn’t even have to look that great or work completely. You’ll also feel good about yourself in the end. […]
February 9th, 2008 at 8:38 am
[…] Product Page | Author: dougmccune.com […]
February 11th, 2008 at 8:16 pm
ok… so i may be dumb… but i have flex 2.0 and i have flash cs3… how do i get this to open… for use.
February 22nd, 2008 at 4:53 am
[…] Product Page | Author: dougmccune.com […]
February 26th, 2008 at 12:53 pm
[…] CoverFlow Flex component […]
February 29th, 2008 at 4:48 am
Hi Doug, great inspirational resources… I have done a project based on the coverflow principle, but i’m having trouble with the processor when using animated movies, transparent or not, with inner content as materials for planes…
Can you add animated movie materials on more than one plane without losing performance? Also, I’m using a 1024×768 or 800×600 stage setup, precise smooth materials, and even transparency (but that’s an extra)… Somehow, all these kill my processor like crazy…
Could you please give me a hint/hand?
Thank you,
Cristi
February 29th, 2008 at 11:22 am
Hi Doug,
Thanks for this amazing sources and your follow-up.
Those components work perfectly but not in a ViewStack:
I am trying to create two instances of the CoverFlow - each as a child in a ViewStack -
But the application crashes when loading (”Invalid bitmap data…”)
I spent many hours trying to solve this…. any thought?
This would help me a lot!
February 29th, 2008 at 2:20 pm
i must precise that this happens only when the ViewStack’s creationPolicy is set to “all”
thanks for your help
March 7th, 2008 at 1:25 am
Hi Doug,
this looks very cool. Under which license do you release the source code?
Best,
Ronald
March 7th, 2008 at 9:58 am
@Ronald, all source code released on my blog, unless otherwise explicitly stated, is released under the MIT license. Feel free to do whatever you want with it.
March 10th, 2008 at 6:36 am
Hey ho, doug.
Very nice component. How can I add a dataProvider or something like one?
Regards,
Tom
March 11th, 2008 at 3:21 am
I am adding new children through AS now…
Something weird: the index of the first child is -1 and the others are 0 when I use addChild???
How can I fix that?
Regards, Tom
March 11th, 2008 at 7:59 am
[…] For the Flex 2 product pages on adobe.com I recorded a screencast of a Flex app being built in 11 minutes. For Flex 3 I recorded a new version of that screencast. In the new version I used Doug McCune’s CoverFlow component but extended it to easily support playing videos. Check out a demo of the VideoCoverFlow component and right-click to download the source code. For those trying to use the VideoCoverFlow component - the implementation has changed slightly since I recorded the screencast so check out the myTube application as example of how to use it. […]
March 11th, 2008 at 8:55 am
Very cool stuff!
March 16th, 2008 at 4:41 pm
This is great.
Better than I could ever do.
HOWEVER,
I was just wondering what would happen if you loaded up a data set with 5000 elements in it?
Is it cleaver enough to deal with that and only render the elements it needs to SHOW?
Thanks,
James
March 20th, 2008 at 10:41 am
This component is so sexy, it hurts.
Thanks Doug for all the amazing code you write and make available. It really inspires and educates me to continue to improve my Flex, so maybe I can Flex like you do
Peace
March 23rd, 2008 at 6:59 am
[…] The second component is called as a carousel which you can find information on http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/ . […]
March 24th, 2008 at 3:37 pm
[…] This is cool! Combining Doug McCune’s CoverFlow […]
March 27th, 2008 at 5:17 pm
FUCK MAN, THAT IS AWESOME!!
I still cant belive you have release the source code.
You have make my day lighter!
ps: sorry for bad english
March 30th, 2008 at 1:39 am
Nice! I did think Ely’s DisplayShelf was a little contrived with the faux-faux-3D mask effect. This looks alot better.
March 31st, 2008 at 10:06 am
[…] I’ve ported over Doug McCune’s CoverFlow component as 3D layouts in OpenFlux. You can switch between horizontal, vertical and carousel layout in the same List component along with a few other adjustable properties. It’s highly likely there are a few bugs and I had to limit it to 20 cards (52 cards was crazy slow) but this should give you a great idea of where OpenFlux is going. […]
April 1st, 2008 at 12:01 pm
You Rock man!!!
very nice =)
thanks for release the source code
April 4th, 2008 at 11:09 am
Sorry if this is a lame question as I am bit new to flex. In the samples you have when the album cover is pressed the album info show up the text field. This is not in the downloadable source. I have tried adding a lick() to the panel or the image in the panel this sort of work but it has to be clicked twice. Once to get it to move to be the selected then a second click. I am wondering how to get a click event when you click a panel the first time?
Thanx a ton this is a super cool component you have shared with us.
dave
April 6th, 2008 at 3:14 pm
The example look great but i can get it to work using the Flex 3 getting error Type was not found a complie-time constant CoverFlowContainer . created as new project then standalone copy the zip into src folder the used the example..
Help me if you can
April 8th, 2008 at 7:17 am
Andrew
I had the same problem. I unziped the file outside of flex. Then in flex I created a new project. I copied the lib and the other files into that project. THen open the coverflow mxml file in note pad and copy the code then paste it into you main mxml file in the new project. Pain in the butt but I got it working that way. I have had problems like this with other projects in flex must be a import bug or something.
April 8th, 2008 at 5:34 pm
Any plans for a GreatWhite version?
April 9th, 2008 at 1:53 am
Hey, this is such an awesome stuff! ^__^
but wondering if i can get a lil bit of hand as how to modify the source code to change each children (in the main .mxml file) to show images, like how it is demonstrated in this page.
I tried setting the image on each panel using attribute “backgroundImage” but it seems to slow the performance down, and works nothing like the demo
help
April 12th, 2008 at 8:06 am
[…] In case you’d like to learn how to visualize data using Flex or AIR, check this video and see how easy it is to visualize data using DataGrid, AdvandedDataGrid and a CoverFlow component of Doug McCune. […]
April 17th, 2008 at 5:57 am
does anyone know how and can provide code to add a few other playback buttons?
id like to stop, play and Pause button or a toggle of play and pause.
(instead of how it behaves now)
A progress bar would be nice but i wont ask to much
April 18th, 2008 at 8:26 am
Hi, Doug
Thanks for the sources
I use your component to implement my idea.
This is my work.
http://clover.csie.org/~janetyc/flex/TestGraph3DRIA/TestGraphRIA.html
Thank you again! ^^
You give me a very big help!!
- janet
April 19th, 2008 at 12:58 pm
Very good sources. Thanks a lot, Doug.
very nice component, thank you!
April 20th, 2008 at 9:20 am
I’m a beginner in Flex, but I think I’ll be able to modify your code to meet our requirements. Thanks so much, Doug! Great job!
April 21st, 2008 at 12:05 pm
Hi Doug,
Thanks so much for this, I’m using it in a social network site I’m making in Flex for a University project. I’ll be putting a credit beside the carousel!
Thanks
David
April 23rd, 2008 at 7:25 am
Hi Doug,
I have been using your component for a while and it’s great, however on deployment I noticed no images were loading in, apart from the front one.
I expect this is because the images are loading from a different URL and the bitmap caching isn’t working and returning null (or transparent).
I have through of ways around this, creating a proxy etc, but then I realised that your Amazon / iTunes example, and that you are using a flickrproxy.php
Could you share this code?
Thanks
Rob
April 23rd, 2008 at 8:35 am
@Rob - check out my previous post about loading images from Flickr: http://dougmccune.com/blog/2007/05/31/my-first-flickr-flex-app/
In the comments there I show some code that I was using for my PHP proxy. Note that this was before Flickr added proper crossdomain files to their image servers, so you used to need a proxy to load images from Flickr too (now they have a crossdomain file in place).
April 24th, 2008 at 3:22 am
ok forget my previous post, anyone know how to set or use a preloader for the videos?
Im getting some choppy play on good compresseion videos and and think a preloader will help, any ideas?
April 25th, 2008 at 9:35 am
[…] Then a few days ago people went ga-ga over this video of some dude showing muxtape mixes using the Coverflow visualization to browse through them. OK, so that’s cool, except it uses a Mac-only application called Fluid to basically add normal Mac desktop functionality to web apps. That shit got dugg like 750 times. Now I’m not saying it’s not cool, cause it is. But I figured I could probably whip up a Flex application pretty quickly using the Coverflow component I released before and get a real desktop application that anyone could download and use. Oh, and I thought it would be neat to add downloading functionality too. […]
April 25th, 2008 at 9:57 am
hi guys just wondering if I could link these picture up to something else so when the user clicks on them they take the user to the located file. also I wanna know if I can change the pictures that are in there and if so please tell me how to do it. also there is another thing that can I publish it to the SWF file.
reply soon thanks.
April 26th, 2008 at 2:36 am
[…] Flex CoverFlow One of my favourite PV3D components is this is great CoverFlow Flex component by Doug McCune. […]
April 26th, 2008 at 8:51 am
Awesome job. That is a very nice component and very popular these days. Glad to see it implemented in Flex.
April 26th, 2008 at 9:31 am
[…] As a demonstration, I wrapped Doug Mccune’s Flex Cover Flow library as a Appcelerator Widget. James Ward from Adobe was kind enough to donate the MXML shell with the Flex Ajax Bridge baked-in. […]
April 28th, 2008 at 1:40 pm
I only see black. Why doesn’t it work?
April 29th, 2008 at 1:39 pm
Very cool.
It appears that if the cover is larger than 250×250 - the nearest covers will be hidden behind the currently selected cover. Is this a limitation - or am I missing something?
Thanks,
David
April 30th, 2008 at 11:11 am
Hi,
I ‘m trying to insert new children in coverflow object, the new children is a my componente.
But when I put the children, It’s not displayed in back, only when it is in front.
Can you help?
Thanks and congratulations by your code.
i’m sorry for my poor english!
Rubens
April 30th, 2008 at 11:21 am
ok smal:
you can put in swf’s in stead of a jpg’s (thus adding links to related files and the jpg in your swf)
Does anyone know how to truly remove the video flv’s (when using the videocoverflow).
As it stands when the video’s end they really do not leave the app and thus collect up and make the other videos choppy.
HELP PLEASE
May 1st, 2008 at 7:05 am
further explaination, if anyone can help please…..
when the videos in coverflow get to the end they just sit there on the last screen.
I need help adding code for the video to actually go away and the user see the actuall jpg that was there prior.
any ideas?
Im so close …………………
May 2nd, 2008 at 4:53 pm
[…] Dan McAdams has posted a quick guide to help people get up and running with the CoverFlow Flex component SWC file. This component has generated a lot of interest, which is great, but it also means that there are a lot of people who are brand new to Flex (and hence don’t know how to use SWC files or how to set up Flex projects) trying to use the component. My posts about coverflow have gotten quite a few comments from people who don’t know how to get the examples I posted working, or can’t figure out how to use the coverflow library in their own applications. Thus far I haven’t spent the time to go through a detailed step-by-step tutorial on exactly how to use a SWC library in your own projects (although google really does do wonders people…). […]
May 3rd, 2008 at 10:11 pm
[…] I love to reuse existing code where possible, probably one of my biggest sticky points as a software developer. In this case Doug Mccune has an awesome image dispaly component written using papervision and I’m just going to reuse his code. You can download his cover flow component here and link it into his code. I’m not going to go into a bunch of details on how to use his component, he has many links on his site on how to get it up and running. […]
May 6th, 2008 at 11:22 pm
[…] http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/ […]
May 8th, 2008 at 6:15 am
Hi,
Lovely component!!! Thanks Doug. unfortunately I’ve stuck on controlling unscaledWidth:Number, unscaledHeight:Number. Is there any kind person to help ?
I was playing around with horizontalSpacing, verticalSpacing, verticalWidth etc.. with no luck.
Thanks for your help.
P.
May 8th, 2008 at 7:26 pm
seriously - this is absolutely brilliant = much kudos!!!
May 9th, 2008 at 11:12 pm
Great work… brilliant… is there anyone who has posted next level of coverflow… if not contact us.
May 10th, 2008 at 3:31 pm
I’ve been having issues with gettin this to work. i copied all files to the project. im getting one error.
1046: Type was not found or was not a compile-time constant: CoverFlowContainer. In CoverFlow_FlexControls.mxml on line 38.
Line 38 is:
May 10th, 2008 at 4:26 pm
my bad. I didnt have the “com” folder under the “src” folder
May 11th, 2008 at 10:58 am
[…] The major source attraction proved to be the Flex demo’s which included the Nokia Shop and a sample consumer application. The Flex charts components and 3rd party flex UI components such as coverflow component and the Flex Book component snatched away everyone’s breath. […]
May 20th, 2008 at 11:10 am
Very cool component! Was able to create a library and drop it into my app very quickly. I really like the flexibility of being able to add a Panel (and the endless options that that provides). A big thanks!
My problem/question is I’m leaking memory and I’m not sure how to fix. When my list changes, I use removeAllChildren and then build new children (all Panels), but it doesn’t seem to clean up everything it should…I still see a lot of PaperVision instances running around…and eventually I’m sitting on 100s of meg in memory. Any help out there? I looked at that PaperVision source and it’s over my head at this point - still pretty new to a lot of this stuff.
May 20th, 2008 at 12:20 pm
Just to experiment, I checked out the PaperVision (phunky) source and changed all of the addEventListener calls to use weak references and changed all of the Dictionary constructs to use a parameter of (true). There are still some leaks, but it seems to have cleaned up the bulk of them. Of course, I’m not sure what all I’ve broken by making those changes - some of the Dictionary constructs were explicitly set to (false) - DisplayObjectContainer3D, MaterialList, and MovieMaterial for example. As I said, just experimenting. If there are any PaperVision experts out there, can you shed some light? I’d really like to use this component if I can figure out how to stop the memory leaks. Thanks again!
May 23rd, 2008 at 2:10 am
Hi Doug!
First of all, great work!
I would like to use the carousel component for my final work in school. Under what license did you publish it?
I allready made a version for testing, you can find it here: http://www.thorstenschmitz.be/dotChallenge/ (As account use demo:demo if you wan’t to create an account). It’s located under the games section.
greatings,
Thorsten Schmitz
May 23rd, 2008 at 3:44 pm
yay!! awsome components!Great work
May 25th, 2008 at 11:01 pm
do you still have the carousel component for flex 2? If so where is it posted thanks.
June 1st, 2008 at 1:43 pm
Found an issue with the Carousel component. When dynamically adding panels to the CarouselContainer using addChild() an error exception is thrown if the reflectionEnabled property is set to false.
A simple validation in the addChild method ( CarouselContainer.as ) will solve the problem:
override public function addChild(child:DisplayObject):DisplayObject {
var child:DisplayObject = super.addChild(child);
var plane:DisplayObject3D = lookupPlane(child);
plane.material.doubleSided = true;
//replaced the following to lines with the if {} sequence…
//var reflection:DisplayObject3D = lookupReflection(child);
//reflection.material.doubleSided = true;
if (reflectionEnabled)
{
var reflection:DisplayObject3D = lookupReflection(child);
reflection.material.doubleSided = true;
}
return child;
}
June 12th, 2008 at 4:30 pm
Still black!!!
Could you please put in at least a few sample images so that people can see how the effects works?
I’m one of the many who want to see it.
June 13th, 2008 at 5:24 am
Awesome component
I made some changes with what I was doing on it and the scrollbar disables itself if I pass maxPosition=”{coverflow.numChildren - 1}”
If I pass it just a static number it works fine. Any ideas?
June 17th, 2008 at 4:14 am
[…] There are many Image Galleries availble on web, but time to time I want to make one of me own. This time I used Flex, PHP and MySQL. I found one excellent Flex Component from Doug McCune - CoverFlow Component and created my Image Gallery Menu with it. […]
June 18th, 2008 at 8:51 am
Awesome if you don’t actually have to use it for something besides a blog example. It’s funny that the title of this post includes “performance improvement” because the performance is deplorable. Don’t get me wrong. It’s an awesome example of Flex “possibilities.” However, it’s no more than toy, not a real-world component. As soon as you get about 20 items into it, the reflections can’t keep up. It’s a very surreal (and unpleasant) effect to see a reflection lagging behind the reflected object.
I guess this makes me one of the whiners.
But I’d hate to see someone (me for instance) waste a lot of hours trying to make this work in a real project only to find himself back at the drawing board with an angry client on the phone. The examples on this page use the component to display album covers. (I hope you have narrow musical tastes, like no more than fifteen albums.)
June 29th, 2008 at 10:42 am
Joe, you are absolutely right. but even professional components, like those from flashloaded are even much worse!!
Joe, i think you hit the right point with: “But I’d hate to see someone (me for instance) waste a lot of hours trying to make this work in a real project only to find himself back at the drawing board with an angry client on the phone.”
what you call a component - not matter if it’s free or not - should be a REALLY flexible piece of code. i’ve already had dozens of such deceptions and finally rebuilt nearly any component myself at the end - nothing funny when your customer already saw your simple coverflow demo. the same will most probably happen here as well…
anyway, what about a strategy for “many” childs. i mean 3, 5, 7 or in some case 9 childs are realistic, but more child don’t run properly. this is not what i call flexible, it’s actually a demonstration tool - not enough to call it a “component”.
it is currently a huge stress to add any kind of dynamic behavior, you obviously never tried it. the problem is very simple: everything is based on the child-index. but the child indicees change as soon as you remove or add a child at index 0, the selectedIndex changes after these operations. it should be based on a dataprovider IMO.
and in any way, the current memory leaks (=missing support for removeChild) makes any dynamic behavior nearly impossible.
July 1st, 2008 at 10:35 am
Would this component function smooth or work better creating it in Flash converting it to a SWC then into Flex or would the quality be the same just using Flex to create it?
July 2nd, 2008 at 3:56 am
[…] しかし、元ネタのサンプルFlex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlowを見ると、Carouselの方がイカしているじゃない？というわけでこちらを採用。Carouselという言葉の訳では、回転木馬らしいのだけども、「回転木馬」って言われてもしっくりこないので、とりあえずCoverFlowの亜種と言ったらいいのかしらん。 […]
July 7th, 2008 at 3:59 am
Hey Doug!
This is fantastic, and thank you for sharing the source.
I’ve been playing around with the carousel and coverflow containers.
I have added some script to loop from an array, pulling in images locally to display within the carousel. I’m stuck on a few points though, if anyone can help me..?
The images I need to load in are all stored within the root folder. When the script runs, the ‘image.source = e.currentTarget.content;’ line only seems to append one image to the last panel. I am outputting the actual items from the array onto the panel as a label, and the links take the user through to the correct video, I just can’t seem to get the right image to load onto the correct panel, and it’s driving me nuts.
Also, can it be adapted to work without the panels, and just show the images, as you have in your iTunes examples..?
The code is below:
var arr:Array = [”PMDMMfrDUBI”, “KiR838VOCrA”, “DbC2iMFMcuk”];
totalItems = arr.length;
// Use a regular for in loop to access the properties in arr
for each ( var s:String in arr ) {
thisItem = thisItem + 1;
// create a new panel
var thisPanel:Panel = new Panel();
thisPanel.width = 200;
thisPanel.height = 200;
var thisID:String = ‘_img’ + thisItem;
// create a new image
var image:Image = new Image();
image.name = thisID;
image.id = thisID;
//image.source = imgClass;
// create a new label
var imageLabel:Label = new Label;
imageLabel.text = s + thisID;
imageLabel.id = s;
imageLabel.addEventListener(MouseEvent.CLICK, function(e:Event):void
{
var vidID:String = e.currentTarget.id;
var url:URLRequest = new URLRequest(”http://localhost/youtubeDownloader-debug/index.cfm?video=” + vidID);
navigateToURL(url, “_blank”);
});
// add the image and label to the new panel
thisPanel.addChild(image);
thisPanel.addChild(imageLabel);
// add the panel to the coverflow container
coverflow.addChild(thisPanel);
//source code of the second way
_loader = new Loader();
//notice: NOT _loader.addEventListener,is _loader.contentLoaderInfo.addEventListener
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void
{
image.source = e.currentTarget.content;
});
_loader.load(new URLRequest(encodeURI(s + “.jpg”)));
// end of loop
}
If anyone can help me, I would be eternally grateful.
Many thanks,
Matt
July 9th, 2008 at 9:13 pm
[…] Liga: http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/ Read More […]
July 11th, 2008 at 1:51 am
Hello Doug!!!
I’m not so good in Flex and in English too..so I have a question..
how can I set a repeater and dataprovider with XML of images to show in CoverFlowContainer??
July 28th, 2008 at 9:25 am
AWESOME! Thanks so much!!!!