I have updated the CoverFlow library a bit and added support for adding children without explicitly setting the width and height of the children (ie using the normal Flex auto-sizing validation stuff). Grab the latest source code here.
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@dougmccune.com.
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.)
Awesome! Thanks for the sources, Doug!
wow!
So Coooooooooooooooooooooooooooooooooool!
Thanks, Doug!
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()
great job.
I wondered if you could contact me via email bud
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
I can’t see anything with player 9,0,60,235, I just see the black background, while is working with older players.
sloooooOOOoooow……
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!
The vertical layout kicks ass.
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
Nice! I did think Ely’s DisplayShelf was a little contrived with the faux-faux-3D mask effect. This looks alot better.
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 ! 🙂
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
well sorry its truncated 🙂
here :
http://pastebin.sekati.com/?id=Anonymous@32388-73e5df17-t
@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.
@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
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
@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.
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
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
Pingback: CoverFlow en Flex | cédric
Pingback: Charles Freedman » Blog Archive » PaperVision3D has bitten me
Great work Doug…
Reading your articles as far away as Slovenia 🙂
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?
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.
Pingback: Flexair » Cover Flow Performance Improvement
Papervision3D 2.0 alpha is out. A few blogs say it’s faster. Perhaps it would improve the performance of this component even more.
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.
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/
@jwb I wish he had source for that. BBC thing
Odd…
The first version worked fine but with this version it loads and all I can see are scroll bars.
Doesn’t work for me on the new Flash 9 update player (9,0,115,0)… would love to check it out, though!
We did the BBC thing ;). It was actually done in AS 2.0 using Sandy not Papervision.
@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.
@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.
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
Thanks Tink – but I think the code got cut off at the bottom – could you re-post the missing code.
Oops Sorry – just notice – you noted that this was not the full class…
@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.
@Doug – Can you implement removeChild and also addChildAt? I get invisible components that error out when I removeChildAt and then addChildAt. Plzzz.
@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!
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()
on the rotation one. the whole thing bounces when you click the arrow keys. Does anyone know how to fix that?
Cheers
cool
Happy new year guys! Its snowing like crazy!
P.S. I am typing on my iPod touch.
Thanks for the sources, Doug!
so great!!!
@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.
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
@ 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.
Hello, I want to hide a panel in the coverflow but the propriety visible=”false” doesn’t seem to work. Is there a solution?
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?
Pingback: a canadian startup » Blog Archive » How to Get to an Interview at a Web 2.0 Startup
Pingback: iTunes Style Image Gallery at Flex And Flash UI Components
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.
Pingback: 3D Carousel Image Gallery at Flex And Flash UI Components
Pingback: dougmccune.com » Blog Archive » Examples from my 360|Flex session - Using Open Source Community Projects
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
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!
i must precise that this happens only when the ViewStack’s creationPolicy is set to “all”
thanks for your help
Hi Doug,
this looks very cool. Under which license do you release the source code?
Best,
Ronald
@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.
Hey ho, doug.
Very nice component. How can I add a dataProvider or something like one?
Regards,
Tom
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
Pingback: James Ward - RIA Cowboy » Blog Archive » New Flex Screencast and VideoCoverFlow Component
Very cool stuff!
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
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
Pingback: A Coffee Break… » Flex DisplayShelf Component
Pingback: Flex Community Blog » Blog Archive » FlexPal CoverFlow Store
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 😛
Nice! I did think Ely’s DisplayShelf was a little contrived with the faux-faux-3D mask effect. This looks alot better.
Pingback: Ryan Campbell » Blog Archive » PlexiGlass (OpenFlux 3D) Example
You Rock man!!!
very nice =)
thanks for release the source code
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
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
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.
Any plans for a GreatWhite version?
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 🙁
Pingback: Nice data visualization video tutorial at justRIA
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 🙂
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
Very good sources. Thanks a lot, Doug.
very nice component, thank you!
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!
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
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
@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).
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?
Pingback: Doug McCune » Blog Archive » Introducing MuxMaster - a kickass open-source Muxtape player/downloader built with Flex and AIR
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.
Pingback: Flex CoverFlow « Papervision3D - Developers
Awesome job. That is a very nice component and very popular these days. Glad to see it implemented in Flex.
Pingback: Appcelerator Plus Flex
I only see black. Why doesn’t it work?
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
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
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
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 …………………
Pingback: Doug McCune » Blog Archive » Screenshot step-by-step instructions of how to use the Flex CoverFlow component
Pingback: Software By Richard » Create a Photobucket Image Gallery
Pingback: Flex ConverFlow ?? | ???Blog
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.
seriously – this is absolutely brilliant = much kudos!!!
Great work… brilliant… is there anyone who has posted next level of coverflow… if not contact us.
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:
my bad. I didnt have the “com” folder under the “src” folder
Pingback: BEA Dev2Dev TechDays - An Experience | Techtracer
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.
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!
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
yay!! awsome components!Great work
do you still have the carousel component for flex 2? If so where is it posted thanks.
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;
}
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.
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?
Pingback: PTM - Flash, Flash Lite and Flex Developer
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.)
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.
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?
Pingback: GANCHIKU.com » CoverFlow?????????
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
Pingback: Dr. Danguer y Mr. Daniel » Blog Archive » Componente de Carrusel para Flex
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??
AWESOME! Thanks so much!!!!
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.
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
?????????
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}”
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.
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
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
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
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.
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!
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!
What an awesome component – you absolutely rock!
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.
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 .
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
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
sxxxGO:
You need to add papervision_phunky.swc and tweener.swc.
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
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
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@web.de
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
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.
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
@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.
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
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
Does anyone know where to get the source code for the Papervision version used in Doug’s Cover Flow component.
– Thanks – DL
Hi All,
Maybe I’m stupid, but how to add container’ title ?
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.
@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
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.
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 !!
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
++
well, this is a great papervision actually i’ve used it in one of my website 🙂
I don’t see anything but 3 black boxes. However a month ago i saw everything working correctly. What happened?
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!
Which version of papervision did Doug use? the latest v2 throws dependency errors.
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?
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
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?
Also, the images don’t work, I see only black boxes…
Since Friday the examples have not worked for me, also… maybe problems with the XML – Files?
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
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
Is this broken? All the examples in the page just show as an empty black square for me.
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 ?
Hi,
I am getting this cannot find base class moviematerial error. 1017.
Cant get rid of it even after adding the swc files.
HELPPPPPPPPPPPPPPP!!!!!!!!!!
all the examples on this page are broken. Any sample code I can see?
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
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!
Yes, are there any plans to upgrade the Coverflow component to the latest PV3D version?
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
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 …
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
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
Is it possible to hide the horizontal scrollbar?
doh… there it is!
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?
Pingback: 100?Adobe AIR???? | ????
Is there a list of attributes that the Containers use some where???
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!
This component works great if you know its capabilities and limitations!
Thanks Man!
Once implementing this all my borders went away on every control that I had a defined border including DataGrids, Accordians, and TitleWindows. Any ideas?
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.
I found the problem. I had a efflex.swc file causing it to not work.
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
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
I want flip current image of cover flow, could you guive-me a hand?
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
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.
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
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..
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.
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
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
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 !
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!
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
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.
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 🙂
Hello, please help us with adding dynamicly childs on runtime …*please* “addChild()” is working but the slider do not get the right length afterwards ;(
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
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
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.
sorry here is my email address : darrin@stop-ing.com
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
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
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?
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
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!
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?
That is an option: doubleClickEnabled=”true” doubleClick=”onPictureSelect(event)”
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.
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?
Pingback: CoverFlow | Sewonist.com
How to add a child dynamically via ActionScript. I tried to use the code:
coverflow.addChild(someDisplayObject);
but nothing happens.
Thanks
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…
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!?
where can i dload the swc files required for it
Pingback: PlexiGlass (OpenFlux 3D) Example | Ryan Campbell
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?
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?
Pingback: CoverFlow – From Dougmccune.com
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
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!
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.
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?
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
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.
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!
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….