Laying out a Card Pack in 3-D

App : [http://www.sujitreddyg.com/balakrishnanvijay/LayingOutACardPack/]

This is my first set of 3-D layouts in Flex 4, primarily based on Ryan Campbell’s layouts. In fact I have used his base class LayoutBase3D and built my layout on top of it. The app gives 3 views – sine curve, modulo sine curve and the circular (elliptic) layout. There are 3 triggers to modify the display :-changing the index of the main card, changing the distance between cards and changing the selected card by clicking on any card.

[http://balakrishnanvijay.wordpress.com/2010/07/15/3-d-layouts-using-flex-4/] is a prelude to this post. It contains the basics of laying out objects in 3D using Flex. The remainder of this article will be easier to follow if you have read this.

The basics of the layout remain the same. It is the updateDisplayList() that changes for each layout.

1. Sine Curve – matrix.appendTranslation (x,sin(x),z) – (x,sin(x)) plots a sine curve in the 2-D plane. When we add a z attribute and set the depth of the element in consideration appropriately, we get a sine-curve layout.

2. Mod Sine Curve – matrix.appendTranslation (x,abs(sin(x)),z) – This layout is pretty much the same as the previous layout.

3. Circular Layout – I made the circular layout based on the sine curve layout. The idea was to layout the sine curve in such a way that from angle 0 to 180, there were 26 elements and from angle 180 to 360 there were the remaining 26 elements. If we now limit the x and z co-ordinates, we can make the “negative” part of the sine curve to flip over to the 0 to 180 range.

App : [http://www.sujitreddyg.com/balakrishnanvijay/LayingOutACardPack/]

I am working on a couple of other 3-D layouts as well and shall post them when I am done !!!

Advertisement