Flex4 Coverflow Layout
Flex4 has shipped and it comes with a ton of new features that open lots of doors. One of my preferred features in which I see a tremendous potential is the new layout mechanism.
As an exercise to better understand the details of the new layout mechanism I played a couple of days creating some layouts that I’ll be posting during the next days.
The first layout I created was a Coverflow layout. There already exist several implementations out there for Flash and even Flex. The biggest difference in this implementation is that it’s using standard 2.5D APIs and the standard Flex4 layout mechanism. This translates in a 200 lines of code and quite good performance.
Bear in mind that:
- This is not production ready code and might have issues.
- I haven’t optimised the code at all, it’s almost a first pass code.
- The layout is not using any virtualization capabilities, which means that won’t perform nicely with big dataproviders. I’ll implement this in the future.
- I’ve added several configuration parameters and some combinations might not work as good as others.
As an extra, and even though Flex4 is not specifically designed for mobile, see how it works in a Nexus One with FP 10.1 beta. In the video below you can see how the application runs just out of the box, no recompilation, no changes at all. Same content that runs in my laptop runs in Enrique’s phone. The performance is really nice! What the Flash Player team has achieved is amazing!
congratulations guys!!
You can run the application here http://www.rialvalue.com/coverflow
You can get the source code here http://rialvalue.com/coverflow/srcview
Which parameter combination do you like more?
49 Comments to “Flex4 Coverflow Layout”
Leave a Reply
You are a mad man
[...] Beumala ha colgado en su blog un coverflow 3D desarrollado con Flex 4 funcionando en un Nexus One y el rendimiento como se puede ver en el video es muy bueno. Este ejemplo yo ya había tenido la [...]
[...] Flex4 Coverflow Layout | rialvalue.com [...]
This looks amazing. Looking forward to all of these layouts! Thanks so much for posting this.
Thanks alot for this, was in the process of writing my own coverflow, but now I don’t have to, this one is the best Flex 4 coverflow layout I’ve seen so far.
Nice one! You obviously spent more time on your coverflow than I did on my own
(http://www.flexstuff.co.uk/2009/12/23/flex-4-coverflow-layout/).
Hi Gilles I just worked on this a couple of days ツ I’d really like to find the time to implement virtualization so it can work with large dataproviders
Yeah, that’s somewhere in my plans as well but the past 4 months were too hectic for that.
Awesome work! Just wanted to write my own coverflow before I found yours. You saved me tons of time! Thanks a million!
Cool stuff!
Where did you get the FP 10.1 (beta) for the Nexus?
Thx
Hi Jochen, I work for Adobe…
One thing I’ve noticed is that sometimes (especially when changing the dataprovider) the rendering/layering gets confused. Any chance you could look into this?
Thanks.
Found the solution to the above problem (garbled rendering/layering when loading remote images into mx:Image contained in an itemRenderer): manually call invalidateSize() in the complete event of each mx:Image in the itemRenderer.
Thanks again for this great component!
Thanks a lot for sharing your solution Christian
Thanks for sharing Xavi!
Playing with horizontal distance slider, i found that the second item on the right of the selected item does not move ( and the first item on the right moves in the wrong direction ).
A workaround for that is to replace
‘for (j = 0′
with
‘for (j = 2′
in the CoverflowLayout.as class
thanks again for sharing! Elegant code. Salut!
[...] in flex on Apr.14, 2010 This is an experiment I did a while ago when working on the Coverflow layout. I’ve been waiting to find some spare time to fine tune it, to improve it’s [...]
Awesome, Xavi. Great looking layout all around.
I noticed that text remains blurry after transformations, even on the selected element. That’s to be expected with Matrix3D, but I wondered if you or anyone else could recommend a fix.
I tried setting the selected element’s matrix3D to null in animationTimerCompleteHandler, but it wouldn’t break out of its cached bitmap state.
Any help would be appreciated.
thank you very much ! i need this effect
That image renderer is elegant, but I wonder how one would pass metadata along with each image, like a caption or star rating.
Another challenge is coordinating the initial value between the model and the view. The first time the renderer runs, the list index is -1, so it selects the middle image. But the slider is independently initialized to some other value that happens to be the same. Some sort of “after init” event is needed to coordinate the list index and renderer to agree on a starting value. Otherwise one might create a selected cover detail area, which is only updated after the first mouse click onto a new poster, but has trouble getting initialized to the initial poster.
Hi. Great component, I really like it. But as pointed out by JamesLyon, the central element stays a bit blurry when transformations end. I’m looking at your code right now, and will do my best to fix this little bug, but if you have answer for us, that would be fantastic. Thanks a lot!
I just found a workaround.
— Step 1 —
Go at the end of the CoverFlowLayout class. In the animationTimerCompleteHandler function, add this before the only already there:
animationTickHandler(event);
— Step 2 —
In that same class, go to the function named animationTickHandler. Replace this line:
initialMatrix.interpolateTo(finalMatrix, 0.2);
by this block:
if(event.type != TimerEvent.TIMER_COMPLETE)
{
initialMatrix.interpolateTo(finalMatrix, 0.2);
}
else
{
initialMatrix.interpolateTo(finalMatrix, 1);
}
Voilà! I just hope this will be of some use. This little fix makes this component even better.
Hi All, great work! Big part of the functionality saved for me some time. Looks really cool!
One thing, could anybody tell me what to change in CoverflowLayout.as class to provide virtual layout as well as here: http://flexponential.com/2010/03/06/learn-how-to-create-a-simple-virtual-layout-in-flex-4/
I will be very grateful for any help with this.
I very much like this component, but I’ve got myself completely baffled. I want to use the mouseclick on the centre item to launch the item (as in a menu)… but I can’t find any reference to a click event. Where is it? How can I intercept it?
Update: Silly me! Of course it is a list, and so the selection is handled within the list.
But I have another question: All your example graphics are 250px square jpegs. If I use portrait aspect png’s (200×140) I lose the graphic entirely. How can I adjust this?
Excellent component! Based on this code I’m building a Coverflow with other features and fixes suggested in this post comments.
Take a look: http://github.com/brust/Coverflow
This is awesome — anyone here have a carousel..just like it?
Hi Xavi,
I’m trying to modify your code to realize a sort of circular Carousel. In a few words, every selected item has to be always placed at the center of list.
Inside updateDisplayList function I replaced two for cycles with following code:
var numElementBySide:int=Math.floor(numElements/2);
var contiguousElementLeftSide:int = (midElement – 1 + numElements) % numElements;
var endElementLeftSide:int = (midElement – numElementBySide + numElements) % numElements;
for ( i = contiguousElementLeftSide; i != (endElementLeftSide -1 + numElements)% numElements; i–)
{
i = (i + numElements) %numElements;
matrix =positionLateralElement(target.getVirtualElementAt(i), (midElement – i + numElements)%numElements, LEFT_SIDE);
finalMatrixs[i] = matrix;
}
var contiguousElementRightSide:int = (midElement + 1) % numElements;
var endElementRightSide:int = (midElement + numElementBySide) % numElements;
for (j = 0,i = contiguousElementRightSide; i != (endElementRightSide + 1)% numElements; i++,j++)
{
i = i % numElements;
matrix = positionLateralElement(target.getVirtualElementAt(i), j, RIGHT_SIDE);
finalMatrixs[i] = matrix;
Application works but after having selected an item for two/three times it crashes…
Any suggestions?
Thanks in advance ,
Ennio
Dude…
Its really great…
You are mastermind..
Thanks a lot… keep adding new things…
[...] CoverFlow layout [...]
[...] CoverFlow layout [...]
When I add a new item to the List and select it the covers don’t flow. After a few they just disappear off the screen..any help?
Very nice component, my friend!
Thank you for sharing.
But I found a bug too.
Theres a problem when you have only one item in the list.
A quick fix is in the CoverFlowLayout.as in the updateDisplayList function and add this line:
midElement = numElements==1?0:midElement;
after this line:
var midElement:int = _selectedIndex == -1 ? Math.ceil(numElements / 2) : _selectedIndex;
Hope it helped.
thanks to all of you for your comments, contributions and bug fixes to the component. I’ll make sure to add them all to the sorce code and publish it during the next few weeks.
How do you change the background color?
Great work! Really appreciate it!
But I want to add a swipe functionality to this, have you done something in this direction or thoughts on how to do that?
[...] ▼CoverflowLayout – rialvalue.com（サンプル | ブログ） [...]
me again. added some rudimentary swiping but got another question: is it possible to just show X items in the list at the same time and the rest is either fading out or not visible at all? so that items are not cut off by the outside border?
Hi Veeck,
I’m afraid this is not built-in in the component. You’ll have to code it by yourself
How do you change the background color, pls help..
[...] Beumala: This is an experiment I did a while ago when working on the Coverflow layout. I’ve been waiting to find some spare time to fine tune it, to improve it’s performance, clean [...]
Awesome, this is a nice looking little control. Thx for sharing.
You should really put this up on GitHub so people can fork and patch it.
Hi Xavi,
This is a really useful control. Thank you.
I am getting some ActionScript errors with CoverflowLayout.as when I filter the list’s arrayCollection and also sometimes when I add/remove items from the list’s ac.
I think it has something to do with the virtual layout. For example, it gets a null object reference (TypeError #1009) on CoverflowLayout.as line #110 if I refresh() the ac after applying a filter to it.
Nice implementation!
How would you go about making each picture have a unique title and description? Thanks!
Hi,
Thanks for the great layout. I have large dataProviders and need virtualization so that was my first task working with the new custom Spark layout. I have it working however when the target is resized the itemRenerers are not invalidated and only when I exhaust the recycling do I start to get itemRenderers sized properly.
How should I properly handle the resize event and invalidate the ItemRenderers managed in the target.getVirtualElementAt(…)?
Any help much appreciated,
Greg
Please tell me how can I navigate over the list with the mouse and when click on an item execute some action.
Great component. Thanks.
Am faching one issue here. Can’t we use spark image instead of MX image?
If i use spark image it is not working, source as data.
How to change the backgroundColor & backgroundAplha of the layout. Basically i want this layout to be transparent. Please help..
If you want to change the background color, jus change the “contentBackgroundColor”-Attribute of the List. Alpha can be changed using the “contentBackgroundAlpha”.
Greets