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.)
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!!!!
August 11th, 2008 at 6:32 am
Hi, Love the code!!! thanks!! Although I am having trouble editing it so that it turns into the vertical coverflow. Can anyone help me? How is it done?? many thanks..
Donna.
August 11th, 2008 at 1:18 pm
Forget the above post. I have figured that one out…. the next question is on of linking. How can i make the panels link out to various URLS?
Help is much appreciated
August 14th, 2008 at 12:33 am
?????????
August 15th, 2008 at 9:14 am
Thanks Doug. Great stuff
Dan, the numChildren member is not incremented when you add child objects dynamically. Define a variable in CoverFlowContainer and keep track of the child count in addChild and removeChild overrides. Bind the value of this count to the scroll bar like,
maxPosition=”{coverflow.myNumChildren – 1}”
August 15th, 2008 at 9:46 am
For those face problems in centering images within the panel or smoothing the resized images, here is a working solution – http://blog.vixiom.com/2007/11/02/flex-image-component-loading-resizing-aligning-and-smoothing/
You may need this when you load images of variant sizes.
August 20th, 2008 at 1:13 am
thx for the work. Was exactly what I needed to build upon. If I want to place the coverFlow as a component in a viewStack container an error 2015 is thrown. (invalidBitmap data stuff). Is there any known work around I need the viewStack and due to dta transfers within the viewStack I need the creationPolicy set to all.
thx for any help.
btw I fill the containers witj video
September 10th, 2008 at 7:23 am
Hi all.
Could someone please tell me what to do to change the color of the text from white to black?
Thank you very much in advance
September 11th, 2008 at 3:37 am
Hi guys
I’m trying to add previous / next buttons to the application, to allow the user to click scroll through the carousel as well as by selecting a specific item.
How can I do this?
I can’t seem to access the functions to scroll the carousel.
Any help would be great! Many thanks
September 14th, 2008 at 4:17 am
Hi Matt,
Make use of the selectedIndex to move it around.
Doug thanks for this code…you’re a legend.
You need a donations link bud.
September 15th, 2008 at 1:07 am
Thanks Ryan
I found the selectedIndex variable within one of the .as files, but wasnt sure how to either a) reference it from the mxml file, as it wasn’t declared, or b) create the function within to move using buttons within the .as file, and call that from the mxml file.
If anyone can help me with a sample or some suggestions, I’d really appreciate it. My AS3 skills are getting better, but I haven’t done too much involving classes or packages yet.
Thanks so much, and yeah, Doug, you need a donation button on here!
September 22nd, 2008 at 9:23 pm
Hey thanks for the amazing component!
I have one question, might be with the SWC, but it works perfectly whenever it’s on my computer, but if I upload to a server and then load, it doesn’t work, is there something I need to do with the swcs?
Thanks!
October 11th, 2008 at 2:08 pm
What an awesome component – you absolutely rock!
November 1st, 2008 at 6:16 am
Here is a customized implementation of this excelent component found at https://www.ebucket.net/webdrive/
We’ve modified CarouselContainer.as and added the navigation arrows and mouse-wheel scroll support. Thank you for sharing the code.
November 19th, 2008 at 1:27 am
can anyone help me, i have download de source code, and i add to a panel and image
put the source, but only work if image is emebed, what can i do if the image i wanna show are from a server.
excuse my english .
November 29th, 2008 at 11:00 pm
I get an error when I try to run this code in Flex 3
The definition of base class MovieMaterial was not found.
Please Help
November 29th, 2008 at 11:04 pm
You really great.
but, I do not know where.
I get an error when I try to run this code in Flex 3
The definition of base class MovieMaterial was not found.
Please Help
December 1st, 2008 at 4:23 pm
sxxxGO:
You need to add papervision_phunky.swc and tweener.swc.
December 4th, 2008 at 7:02 am
Hi, I use this script with the following mxml. There are no slide effects. I can only see the pictures, when they are selected. Pictures in the background don’t appear.
Panel {
borderColor: #000000;
borderAlpha: 1;
borderThickness: 1;
borderThicknessLeft: 1;
borderThicknessTop: 0;
borderThicknessBottom: 1;
borderThicknessRight: 1;
roundedBottomCorners: false;
cornerRadius: 5;
headerColors: #000011, #000000;
dropShadowEnabled: false;
titleStyleName: “mypanelTitle”;
vertical-align:middle;
horizontal-align:center;
}
.mypanelTitle {
letterSpacing: 1;
color: #333333;
fontSize: 12;
fontWeight: bold;
}
ScrollBar {
up-arrow-skin: ClassReference(null);
down-arrow-skin: ClassReference(null);
trackSkin: Embed(source=”images/VScrollBar.png”, scaleGridLeft=”1″, scaleGridTop=”4″, scaleGridRight=”5″, scaleGridBottom=”16″);
thumbUpSkin: Embed(source=”images/VScrollBarThumb.png”, scaleGridLeft=”1″, scaleGridTop=”4″, scaleGridRight=”5″, scaleGridBottom=”16″);
thumbOverSkin: Embed(source=”images/VScrollBarThumbOver.png”, scaleGridLeft=”9″, scaleGridTop=”9″, scaleGridRight=”10″, scaleGridBottom=”10″);
thumbDownSkin: Embed(source=”images/VScrollBarThumbDown.png”, scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”5″, scaleGridBottom=”5″);
}
images/coverflow.jpg
images/coverflow.jpg
Need Help, Thanks
December 4th, 2008 at 7:05 am
Looks like it didn’t copy the complete script. Here is a short version
images/coverflow.jpg
…
images/coverflow.jpg
If I use a panel without an image it works correct
December 4th, 2008 at 8:09 am
One last try. Can someone please send me an mxml file with static images in it. Just three panels with mx:image inside each of it. Thank you. bodhy
January 5th, 2009 at 9:21 pm
Does anybody know how to set the size of the children or prevent it from scaling smaller? I want the children to be the same size as the active item, Thanks
January 6th, 2009 at 8:30 am
interesting error:using any of the containers in a flex application works. However, in an AIR app, it just crashes(Invalid Bitmap Data in the MovieMaterial.as). I’m an old c++, java guy new to flex. Help with this will be greatly appreciated.
February 3rd, 2009 at 12:07 pm
Doug, thanks for the coverflow component. Two things:
1.) It looks like your images aren’t working Warning: Not a known player download type, http://www.dougmccune.com/flickrProxy.php?file=http://a1.phobos.apple.com/us/r10/Music/2d/68/60/mzi.vuqttywr.170×170-75.jpg
is in the trace.
2.) Can you post the source to the other examples? All the links go to the component example.
thanks
February 3rd, 2009 at 12:29 pm
@Dave – thanks for the heads up, my hosting provider changed some security restrictions, but I got teh images working again.
The iTunes example uses my custom RSS feed, and also uses an image proxy on my server that I set up, so the source of that example wouldn’t be workable for anyone else not running the example on my server with my iTunes feed, which is why I didn’t post it.
February 4th, 2009 at 10:02 am
Hi
great job !!!
can you please help me out how can i display carousel component auto rotate
can you please display some code
THanks,
Nimesh Nanda
February 6th, 2009 at 5:51 pm
I have developed an application with the coverflow contrainer and flex controls (panels, datagrids, accordions, flex google maps, etc.). Some of the panels are not visible when displayed in the back, only the reflection shows which is kind of weird. Anyone can help? I would appreciate any advice and help here. Thanks!
And this is a lovely piece of code by the way.
Janusz
February 10th, 2009 at 10:58 am
Does anyone know where to get the source code for the Papervision version used in Doug’s Cover Flow component.
- Thanks – DL
February 25th, 2009 at 11:03 am
Hi All,
Maybe I’m stupid, but how to add container’ title ?
February 25th, 2009 at 6:19 pm
hi doug,
i currently using your carousel as a menu for my application.then i use click event from each carousel menu to display particular content. i refering the click event to the target content with id from the viewstack.it work fine with 2 menus.but at the next menu i having an error “Error #2007: Parameter child must be non-null.”maybe this is a stupid question but im gladfull if u can tell me what cause the error because im quite new with flex.
Thank you very much.
March 2nd, 2009 at 1:29 am
@DL , you can find the papervision3d in google codes. Here is the URL :
http://code.google.com/p/papervision3d/downloads/list
However , I am facing some different problems, I doubt the example works fine with the current papervision code, the package org.papervision3d.scenes.MovieScene3D is needed to run the application. but I could not find any such class in the latest distribution. Please help.
The errors I am getting are as follows
1061: Call to a possibly undefined method renderCamera through a reference with static type org.papervision3d.scenes:Scene3D. project/src/com/dougmccune/containers BasePV3DContainer.as line 191
1119: Access of possibly undefined property triangleCuller through a reference with static type org.papervision3d.scenes:Scene3D. project/src/com/dougmccune/containers BasePV3DContainer.as line 177
1119: Access of possibly undefined property triangleCuller through a reference with static type org.papervision3d.scenes:Scene3D. project/src/com/dougmccune/containers BasePV3DContainer.as line 400
1119: Access of possibly undefined property triangleCuller through a reference with static type org.papervision3d.scenes:Scene3D. project/src/com/dougmccune/containers BasePV3DContainer.as line 401
1119: Access of possibly undefined property VERBOSE through a reference with static type Class. project/src/com/dougmccune/containers BasePV3DContainer.as line 173
March 2nd, 2009 at 2:13 am
Hi All,
I have just figured out the solution to my problem. It’s the version. This will be compiled successfully with Papervision 1.5. But again I am getting a runtime error
TypeError: Error #1034: Type Coercion failed: cannot convert mx.containers::Panel@785f479 to flash.display.MovieClip.
at org.papervision3d.materials::MovieMaterial/createBitmap()[Z:\eshop_admin\src\org\papervision3d\materials\MovieMaterial.as:138]
at org.papervision3d.materials::BitmapMaterial/set texture()[Z:\eshop_admin\src\org\papervision3d\materials\BitmapMaterial.as:84]
at org.papervision3d.materials::BitmapMaterial()[Z:\eshop_admin\src\org\papervision3d\materials\BitmapMaterial.as:103]
dont know what’s the reason … can anybody help ? thanks in advance.
March 3rd, 2009 at 5:04 am
Is it possible to dynamicaly add elements into the coverflow component with the addchild method behind a loop ?
Is there a method to call when the loop ends in order to update the component ?
Thank you !!
March 17th, 2009 at 3:15 am
Hi, excellent component ..sure !
but i’m getting desperate i don’t manage to remove/add any child dynamically.
My purpose is to allow user interaction that make all coverflow children be deleted and
replaced with new ones (canvas embedding swfloaders items).
If i try to add directly any child, the display doesn’t change, nothing seems to be added whereas debugging the code shows that something is added…and the layoutCoverflow is well called after…
If I removeallChildren, only one of the new items is visible, on top left of coverflow, in 2D mode.
So, like some other people, I would to know if it is really possible with last version of source code you shared without lot of modifications that I couldn’t realize myself at this time (flex beginner)
thanks a lot for any response and sorry for my poor english
++
March 25th, 2009 at 12:11 am
well, this is a great papervision actually i’ve used it in one of my website
March 26th, 2009 at 6:14 pm
I don’t see anything but 3 black boxes. However a month ago i saw everything working correctly. What happened?
March 29th, 2009 at 9:44 am
Looks like Apple changed their crossdomain file and the iTunes RSS feed was getting blocked. I’ve updated the app to work around the issue and now the images should be back, sorry about that!
April 3rd, 2009 at 1:03 pm
Which version of papervision did Doug use? the latest v2 throws dependency errors.
April 5th, 2009 at 5:55 pm
Hi Doug,
Is there any sample for iTunes coverflow?
I just don’t know how to set the below label for image. Could you tell me how to add such label?
April 19th, 2009 at 9:54 am
Doug,
Sorry for the newbie question but with the Carousel how do you get images closer together? I’ve tried to H spacing and almost every other parameter but I’m stuck!!! I can change the regular coverflow component.
Thanks,
DougM
April 24th, 2009 at 1:39 am
Hey Doug!
I’ve been using your code and it’s great, thanks.
Here’s a problem, I can’t see the improvements because every time I click in the link, I get exactly the same code.
Can you help me?
April 24th, 2009 at 1:40 am
Also, the images don’t work, I see only black boxes…
April 27th, 2009 at 1:48 am
Since Friday the examples have not worked for me, also… maybe problems with the XML – Files?
April 30th, 2009 at 10:15 am
Very nice effect!
I’m trying to add a new Child to this coverflow by AciontScript3..
Did you know how can I do this?
With the addChil method the chil doesn’t appear
Thanks
May 6th, 2009 at 6:17 am
Hi,
Nice component from where i will learn a lot.
I tried to modify it a little bit and play around … I’ve seen that the text is not displayed in the reflection, do you know why? Can you send me some directions on how to do the display of text ?
Thanks
June 4th, 2009 at 2:13 am
Is this broken? All the examples in the page just show as an empty black square for me.
June 6th, 2009 at 10:57 am
Doug!!
what a great comp!
just 2 Qs ..
1. any hints on making the selected item enlarged on click ?
2. how hard it is to make the carousel also vertical ?
June 8th, 2009 at 9:53 pm
Hi,
I am getting this cannot find base class moviematerial error. 1017.
Cant get rid of it even after adding the swc files.
HELPPPPPPPPPPPPPPP!!!!!!!!!!
June 12th, 2009 at 8:08 am
all the examples on this page are broken. Any sample code I can see?
June 25th, 2009 at 2:03 pm
This looks great! I am new to Flex but i do not see how you did the cover art, the example I downloaded has the Panels, is there another location i can download the other source files from? I really want to make this load my images dynamically!
Thanx
X
July 3rd, 2009 at 6:42 pm
Doug,
Downloaded the source. Wow, thanks.
Unfortunately, getting an error regarding MovieScene3D. There is no class named that in the latest PV3D download….. Also, Plane.as got moved to objects.primitives.
Help please!
July 14th, 2009 at 12:08 am
Yes, are there any plans to upgrade the Coverflow component to the latest PV3D version?
July 15th, 2009 at 12:14 pm
Can anyone help me with my scrollbar, i managed to make the coverflow dynamic but the scrollbar is dead dead dead-ski… check out my thread… http://www.actionscript.org/forums/showthread.php3?t=210762
X
July 16th, 2009 at 11:22 pm
Hi .. am trying to make a gallery out of ur excellent sample.. i was wondering how to make it such that i can toggle between carousel and coverflow .. plzz suggest .. .i have seen such an implementation elsewhere .. so any inputs plzzz…
thanks in advance …
July 22nd, 2009 at 8:33 am
Hi
nice job
im tring to add and remove childs , and override the addChildAt in the same way like addChild , thats for i want to remove the last chaild of the right an add a child in the first position of the left when the scrollbar is clicked in the left =P, and remove the first child of the left and add child in the last position of the right when go right, but the layout dosen`t show like i said =(
any help pls
Cya
August 6th, 2009 at 6:09 am
We be a nice component if it were usable. The 200×200 limitation cripples it so bad and there are no spacing options that move the inner items from being obscured behind the main panel. =( too bad
August 6th, 2009 at 9:16 am
Is it possible to hide the horizontal scrollbar?
August 6th, 2009 at 11:52 am
doh… there it is!
August 17th, 2009 at 6:59 am
Great components, thank you Doug!
I wanted to combine your Carousel component with another I found that uses Papervision3D — Flipcard (http://code.google.com/p/flipcard/)… my plan was to create a carousel display of Flipcards, with an image on one side and flipping to reveal text info on the back. I got both working in separate projects, but get compile errors when I try to combine them in the same project.
There seems to be a namespace conflict between the PV3D libraries used by the two components. Flipcard uses Papervision3D_2.0.883.swc; including that in the same project with Carousel gives me compile errors in BasePV3DContainer.as, leaving it out gives me errors in the Flipcard code. Any ideas how to resolve this problem?
August 17th, 2009 at 2:25 pm
[...] MuxMaster ?? Flex ????????????????????Doug???overflow ??, papervision 3d ???? [...]
August 19th, 2009 at 12:16 pm
Is there a list of attributes that the Containers use some where???
September 1st, 2009 at 6:17 am
Need a way to remove the nearly 40px border that it appears is being put around the main coverflow window. Cannot find where to do this. It looks like whatever color is in there also has a gradient applied to it, but I cannot find instance of that in your code. Example: if I change the background color of the coverflow container to something really obvious, like bright green, and then change the background color of the containing flex application tag to another color like pink, when I embed the resulting swf in my html page, there is a wide pink border (like 40+ pixels) around the coverflow with a gradient within the green area. Any ideas? Thanks!
September 10th, 2009 at 5:08 pm
This component works great if you know its capabilities and limitations!
Thanks Man!
September 14th, 2009 at 9:04 pm
Once implementing this all my borders went away on every control that I had a defined border including DataGrids, Accordians, and TitleWindows. Any ideas?
September 16th, 2009 at 10:55 pm
Hi Doug,
Looks like a great component. However, I can’t get it to work.
I’ve downloaded your code and I have tried to implement it into my app. However, I have an error message that I can not get rid of. It says renderCamera in BasePV3DContainer is an undefined method through org.papervision3d.scenes:Scene3D.
Does anyone have any idea what’s wrong? I imported the swc files and the class files. I am also running flex 3, so I can’t see why this is happening.
Any help with this would be appreciated.
September 17th, 2009 at 4:01 pm
I found the problem. I had a efflex.swc file causing it to not work.
September 21st, 2009 at 11:27 am
I have the same error as Elissa, I dont see any efflex.swc; Any other thoughts I also get an error on the scene.renderCamera(camera) undefined method bla bla bla.
Thanks
September 21st, 2009 at 8:51 pm
Hi Doug,
How can I update the component to the new version of papervision 2.1, do I need to develop the component from scratch?
Thanks in advance,
sirask
September 22nd, 2009 at 3:58 pm
I want flip current image of cover flow, could you guive-me a hand?
September 28th, 2009 at 9:25 am
Yo Doug love the component, would like to see it updated to the latest 2.1 paper though, also there aint no way i tried all i could to combine EFFLEX effects with this one…
my site is already depending on those effects and i want to add some coverflow.. even if i use a swfloader to load it into a container used by efflex it wont work…
such a pitty
thanks anyways
September 29th, 2009 at 12:31 pm
I am a little late to the party with finding this cool toolset. Not sure if you are still reading the comments but I had one question. At the top it said updated so you didn’t have to hard set the size of the children of coverflow, but rather could let them autosize. When I do that they get stretched to fill the screen and all the 3d flipping stops.
October 12th, 2009 at 7:39 am
Hey guys, I’m not so bright. Can anyone give me real .mxml examples on how to implement to two different containers on this page? How do you feed the images? I saw the example .mxml file with the componenets, but that is not something I would do if I was just loading up images. Any help is approceiated.
thanks
October 13th, 2009 at 3:34 am
To all that my be wondering:
The source doesn’t work because it was built with a version of Papervision that is out-dated by now..
October 15th, 2009 at 9:15 pm
Hi Doug,
I tried running your code but I get the following compilation error in FlexMaterial.as :
“Multiple markers at this line: -1017: The definition of base class MovieMaterial was not found. -
FlexMaterial”.
Could you please shed some light on it?
Thanks in advance.
October 20th, 2009 at 11:13 pm
Hi Doug,
I am trying to implement XRotation in it but i am not getting to know how to implement it in your source code. Can u help me out how i can solve my problem. Thanx in Advance
November 9th, 2009 at 2:35 am
Hi Doug,
I have extended your code to create a cylindrical 3D wall which contains an array of buttons.
The problem that I am facing right now is to make all the buttons interactive.
Can you suggest a way by which I can make all the panels interactive simultaneously (right now the only the front-panel/selected-child is interactive).
Thanks in Advance.
Vaibhav Sawke
November 16th, 2009 at 6:21 am
Hello, I try to put your Carousel component ( as well as you did Doug just in the beginning of your tutorial but y knowledges in Flex are not as good as yours
Is someone know exactly how to get this carousel ? You can answer by mail
Thank you very much !
November 17th, 2009 at 6:27 am
can you show an example of large images say size will be around 475 px by 350 px?
I am working on a project where i have a tryptch screen and i am using the component here. I am facing a problem using the component with large images..i am not able to control the horizontal spacing and the main image covers the side images.
all possible help will be appreciated!
November 17th, 2009 at 9:31 pm
Hi Doug,
Great job! Can you please tell me what would be involved in making the coverflow component loop continuously instead of going from start to end? Surprisingly, I couldn’t find any component like that even after a lot of Google search.
Thanks,
Sumit
December 17th, 2009 at 1:54 pm
Awesome Doug,
Some people have indicated there willingness to rework the coverflow component and sell it on our website http://www.flexdownloads.com. We will put the appropriate licensing text in those articles for sale.
Meanwhile why don’t you visit our website as browse our growing selection of Flex components.
January 7th, 2010 at 8:38 am
Hi,
how to use custom item renderer and a dataprovider with this component?
I tried simply by using “addChild()” but that isnt working.
Any Help is welcome
January 29th, 2010 at 6:10 am
Hello, please help us with adding dynamicly childs on runtime …*please* “addChild()” is working but the slider do not get the right length afterwards ;(
February 5th, 2010 at 9:00 am
Hey Doug
I was trying to use your horizontal coverflow and I’m just using an external xml file to retrieve my images to display. After doing the actionscript to add childs to the coverflow and when I run it, the childs are showing, but the effect of the coverflow is not working. Please help.
You can view the src here:
http://www.swebapps.com/beta/test/test.html
Regards
Sal
February 10th, 2010 at 12:31 pm
Hi
Has anyone figured out how to add the (white) text into the carousel as is done in all three examples above in Doug’s post ?
Thanks!
Steve
February 15th, 2010 at 7:58 am
I have gotten this to work in a dynamic way, but I am unable to get a link in each panel to work. As well as to have a different background image in each. If you would like a copy of the code email I and I will gladly share if you can help with my last two issues.
February 15th, 2010 at 7:59 am
sorry here is my email address : darrin
February 25th, 2010 at 8:29 am
Bonjour,
Je débute en flex et j’ai une question: pour utiliser the overflow d’où est ce que je peux trouver le “com.dougmccune.containers” car G un msg d’erreur me disant que le type CoverFlowContainer est introuvable
Merci d’avance
Amine
March 3rd, 2010 at 11:59 am
i am having issues with release build version. please help. everything works fine in debug or running from flex builder, but when Export > Release Build i lose the coverflow features. The element is still there, but it acts more like a viewstack. (its root) i dont see any other panel other than the active one.
i think it is a library export issue, but adding the swc files into the build path > libraries tab doesnt change anything as far as i can tell.
please help…. ASAP
March 15th, 2010 at 1:04 am
This very cool and like it. And i already try to deploy in my SDK but i find error like this: 1046: Type was not found or was not a compile-time constant: Carousel.
I try to resolving this but i got dead end. I can’t find where the error. How to clear this error Mr. Doug?
March 24th, 2010 at 3:26 am
Hello,
Thank you for making this awesome Flex application, anyone knows how to launch an event when you click somewhere in the carousel? Also how can I know which panel is the panel infront?
Thanks
Regards,
PJ
March 24th, 2010 at 8:44 am
Is it possible to increase the diameter of the circle in this awesome component? When lots of images are added, they get bunched close together, and I would therefore like to make the circle holding the images bigger… I tried playing with the “radius” variable inside CarouselContainer.as with no luck.
Thanks for this great component!
April 26th, 2010 at 2:00 pm
Hi there, great component but I’m having one problem with the vertical coverflow example. The entries within the component start at the bottom, when I want them to start at the top. EX: Scrollbar is at the top, selected item in coverflow container is at the bottom. When I scroll down on the scrollbar, the coverflow scrolls up. Any suggestions?
Also, any chance I could get a look at your vertical coverflow example source?
May 4th, 2010 at 11:30 pm
That is an option: doubleClickEnabled=”true” doubleClick=”onPictureSelect(event)”
May 11th, 2010 at 1:16 pm
Great component!
I have one suggestion – in the CoverFlowContainer.as you should override the removeAllChildren function to reset the maxChildHeight and maxChildWidth internal variables.
I have used this component in an air app where it displays items that can be added to a tree (more complicated than that but you get the idea) and when it is first displayed it is fairly small but as you roll over it, it is resized to a bigger more useful size, then shrinks again when you roll out. But since the only way to pull this off is to remove all the child object whenever it is resized and add them back, the max child height/width remain at the big side and the re-shrunk version now is center almost off screen (below the scroll bar).
thanks again for a really good component.
May 23rd, 2010 at 8:02 am
I´m gettinh error #1009 in line 21 of CarouselContainer.as: Cannot access a property or method of a null object reference.
What’s the problem?
June 10th, 2010 at 10:09 pm
[...] http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component... [...]
June 23rd, 2010 at 2:51 am
How to add a child dynamically via ActionScript. I tried to use the code:
coverflow.addChild(someDisplayObject);
but nothing happens.
Thanks
June 23rd, 2010 at 8:12 am
Hi, I find out how to add children, but now I’m experiecing this problem.
Sometimes, when the flex is loaded, CoverFlow show the first child, then a shadow below it (like all the other components would be in the back one on the other). After some scrolling, everything works perfectly.
Any idea of this behaviour?
PS. I noticed that it happens when the component seems to be loading resources from the net…
July 14th, 2010 at 9:53 am
I have implemented the code for this comp, however I am having issues adding images to it for use? They are local asset files, can anyone help!?
July 17th, 2010 at 10:11 am
where can i dload the swc files required for it
July 29th, 2010 at 7:27 pm
[...] ported over Doug McCune's CoverFlow component as 3D layouts in OpenFlux. You can switch between horizontal, vertical and carousel [...]
August 23rd, 2010 at 7:57 am
Doug, Thank you for this piece of work. Everything is working great. However, my objects seem to pop into position at the end of the transition. I have tried several different transition types. That just makes it worse. The reflection is smooth as silk. But the main object gets close and then pops in. Any suggestions?
September 26th, 2010 at 11:06 am
hey im new on flex but i have some problem whit this component, y make a render whit the framework 3.5.0 on linux, when i do it whit 3.0 i dont have it, but i make a upgrade for problems whit the grid on that framework, so change the framework, but this component dont apear wen i make a search, and i dont understand why only on this scene dont work, i already like so much this component…
can you help me pls?
October 15th, 2010 at 12:34 am
[...] Link: http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component... < from_coolestflex_blogspot_com > « FlexBook – From [...]
November 18th, 2010 at 10:54 pm
Hi the component is great i was wondering how to move the carousel on mouse move the one in this link
http://example.procontent.net/Carousel/carousel_youtube.html
December 14th, 2010 at 1:17 pm
The link to the source code of the first example is broken…
How on earth do i get this to work for just images? and add them at run time?
January 9th, 2011 at 10:39 am
omg dude, this is amazing!!!
January 10th, 2011 at 5:11 pm
Hello Doug,
your component is just amazing… Thank you so much for sharing it.
But as a previous person said, if I’m using the coverflowcontainer with panel of large width (about 400px) then, the previous and next panels are nearly hidden.
How could I had some space between the center panel, the one just before and the one just after?
Thank you very much for your time!
January 16th, 2011 at 8:19 am
Awesome example! Thanks for this! Have you ever thought about using the layout framework in Flex 4 for this? I had to make a 3D carousel for a customer a few days ago (wich is a bit different from yours): http://webverwirklichung.com/en/blog/programming/flex/3d-carousel-layout-flex
It uses the flex 4 layout framework. Maybe you can have a look.
February 12th, 2011 at 12:33 pm
I have something strange and i dont know how to explain it.
Somehow i dont get a full circle in Carousel component layout. Like the circle is cutoff! For example, if i put 6 panels in Carousel, the panels are not equally arranged in circle, but after the 6th panel, its like 2 panels are missing before the first panel starts again! Any idea please?
March 15th, 2011 at 6:39 am
This is great, hope to make it work..
April 20th, 2011 at 12:05 pm
hi i have a error while running mxml as, type was not found or was not a compile time constant:CoverFlowContainer
plz help me as early as possible
April 27th, 2011 at 1:00 am
????????????:-D
April 27th, 2011 at 1:02 am
Very good very strong! This does not support Chinese!!!!!!!!!!!!!!!
May 28th, 2011 at 2:14 pm
yeah this is great, hope to make it work..
May 30th, 2011 at 1:25 am
Has anyone used the carousel component ? I need an example . Can some one post the mxml. Newbie in flex. Dont know jack yet. I gotta add some images to the carousel and dispatch some events from each of those images. Need an example of how one can do it. Need this for the Carousel.
June 8th, 2011 at 4:13 am
Hi Doug,
Thank you for these components, but unfortunately I had the same problem as haozi. I ended up using this coverflow:http://www.flashxml.net/cover-flow.html because their support helped me to use Chinese characters. I recommend you to implement this feature, too.
Have a nice day!
June 30th, 2011 at 9:26 am
Thanks a lot buddy!
October 29th, 2011 at 9:26 am
Fantastic stuff…….
Anyone knows how to set the default “opening child” to be anything else other than the first PANEL?
For example…..if I have 30 panels (images) …when I open the frame I want to see number 15….
just like Doug’s first example on this page….
February 16th, 2012 at 2:12 am
Seriously… that is quite complete, appreciate it.
February 28th, 2012 at 3:32 pm
It’s perfect time to make some plans for the future and it is time to be happy. I have read this post and if I could I want to suggest you few interesting things or advice. Perhaps you can write next articles referring to this article. I want to read more things about it!
March 14th, 2012 at 12:19 am
What i don’t understood is actually how you are not really much more well-liked than you may be right now. You’re so intelligent. You realize thus considerably relating to this subject, produced me personally consider it from numerous varied angles. Its like women and men aren’t fascinated unless it is one thing to do with Lady gaga! Your own stuffs nice. Always maintain it up!
March 14th, 2012 at 6:21 pm
The primary reason to identify if a person is on the database is to ensure safety and security. There are some instances when you will not be able to discover a particular person on the database, but they could end up to be criminals. This is some thing that is beyond our control and we will not be able to address this issue. On the other hand, there are some instances where individuals have been able to make certain that they avoid appointing a criminal for any household work or even for a job in the business because they were able to successfully do a Background Check. So, it is better to be safer than to be sorry by not doing a Background Check. Not doing a right search could permit a criminal to be appointed in a job. So, make certain that whenever you come across a new individual who might be in get in touch with with you or your family very frequently, it is much better to do the Background Check to ascertain the genuineness of the individual.
March 15th, 2012 at 6:18 am
?????????????????viewstack?movieclip????????????
you have done wonderful job.tks.
March 15th, 2012 at 7:41 am
[...] I have downloaded the coverflow code from this page/blog entry: http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-impro vement-flex-carousel-componen… [...]
March 25th, 2012 at 3:45 am
myword…
[...]Flex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlow | Doug McCune[...]…
March 26th, 2012 at 12:09 am
trouty…
[...]Flex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlow | Doug McCune[...]…
May 13th, 2013 at 9:50 pm
Heya i’m for the primary time here. I came across this board and I in finding It really useful & it helped me out much. I hope to offer one thing again and aid others such as you helped me.
May 14th, 2013 at 9:44 pm
Looking For Free Mixtape distribution checkout mixtape-distribution.com to get crazy offers ..
May 22nd, 2013 at 4:54 pm
I’m sure this can be on the list of lots critical information for me personally. And i am happy looking at the write-up. Yet need to paying attention upon several widespread factors, The website type is ideal, the particular content articles is truly wonderful : Deb. Fantastic endeavor, cheers