Custom Flex layout. Safari-like Top Sites

Maybe you are asking yourself "Why am I here?" Well the simple answer is here:


So what is this? It's a custom flex 4 layout that displays elements as in cylinder. The idea for it I got a long time ago when I saw Safari's Top Sites. Back then I managed to achieve this look and feel with flex using Papervision3D. But I didn't like the way I made it at all. So year later I have decided to try again. This time with the native 3D support of Flash Player 10 and the new layouting in Flex 4 it was quite intuitive and the most proper solution.


Enough talking lets see the real thing. So this is the Safari Top Sites that inspired me

And this is the result

You can see the Flex Top Sites application here and the source code here.

The logic of implementing a custom 3d layout I got from these posts of Ryan Campbell and Evtim Georgiev

The basic things are

1. Create a class that extends LayoutBase
2. On updateDisplayList position and transform the images
3. Transforming elements(images) to look like they are in cylinder
   The idea here is to move the element in the back (translate over Z) and then rotate over the Y Axis
4. Do the same for the other elements but rotate them by different angle and/or translate over Y
5. Bring the images more in front (because the current look would be if we are in the center of cylinder)

The code for the last 3 is

var matrix:Matrix3D = new Matrix3D();
matrix.appendTranslation(-_columnWidth/2, 0, radius);
matrix.appendRotation(startDegree + degreesMove*j, Vector3D.Y_AXIS);
matrix.appendTranslation(width/2, (_rowHeight + _horizontalGap) * i ,-cameraPosition);
element.setLayoutMatrix3D(matrix, false);

Important thing here is

var pp:PerspectiveProjection = new PerspectiveProjection();
pp.projectionCenter = new Point(width/2, height/2);

element["transform"].perspectiveProjection = pp;

In short words when providing this when we rotate the element the point of the rotation will be the center of the screen (container).

The other things are just plain geometry calculations, like finding the radius, chord, arc of a circle. Really important thing is to imagine both 3D cylinder, 2D circle from top and 2D rectangle from front.

The TopSiteLayout.as provides also options to specify number of rows, columns, width of columns, height of columns, vertical and horizontal gap, although it works just fine if you let it calculate these values itself

And to finish with, I have added this reflection for the 4 images at the bottom. I am using WetFloorFilter from Gonta. It is really good and it is for Flex 4

var filter:WetFloorFilter = new WetFloorFilter();
filter.height = 100;
filter.alpha = 0.5;

BindingUtils.bindProperty(filter, "y", thumbnail, "height");

thumbnail.filters = [filter];

And basically that's all. You can download the custom layout from here.
Would really like to hear what you think