3-D Layouts using Flex 4

Laying out stuff in 3-D is a very simple task and a very rewarding one too, as it bolsters the look and the feel of your application by a great extent. As is the case with any learner, I looked up example 3-D layouts and found Ryan Campbell’s post on 3-D layouts very helpful. I based my learning of creating 3-D layouts on his app and created a few layouts of my own. [http://www.ryancampbell.com/2009/06/16/heres-5-3d-layouts-for-flex-4/]

Heres a quick guide to laying out stuff in 3-D. (I generally display list items in 3-D; I am looking into how data from other containers can also be laid out)

1. UpdateDisplayList() – This is a member function of the UIComponent Class. This is a function automatically invoked when the current display list is invalidated either manually or automatically by events like addition of a new container etc. We override this function to suit our needs. It is inside this function that we set the layout 3d-matrix as per our requirements.

2. Projection Center – [Excerpt from Ryan's Blog - This one gave me some troubles initially until i stumbled upon this !]

” FP10 adds a perspectiveProjection property to the Transform class which works similar to a camera in Away3D. By default, the prespectiveProjection is set to the top left but for my layouts I need it to be the center of the container. This is easily done with the following code:

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

Since wanting center projection is so common though, Flex 4 made this even easier by adding a maintainProjectionCenter flag to UIComponent. When the layout is attached to a container, I simply override the setter and set this property to true. “

Either we override the setter function of the target property or we simply execute this code in a separate method and call it while updating the display list.

3. Matrix3D – We create a matrix of type flash.geom.Matrix3D and add the translations and rotations required to produce output. After the necessary changes to the Matrix3D object, we set the layout matrix of the element in consideration the matrix that we have created and modified. {We set depths for each element manually as the “z” attribute of a visual element has no correlation with the depth at which it is rendered by Flash Player}

3. Append Translation – The append translation function takes 3 parameters, one each for the x, y and z offsets. (0,0,0) is the top left corner of your container.

4. Append Rotation – The append rotation function takes 2 parameters, the first specifying the angle of rotation and the second denoting the axis of rotation. Make sure that you identify the axis of rotation properly, the rotation of an object say ‘n’ units from the axis is different from an object at ‘m’ units. (As simple as that !!!). It also takes a third parameter (i don’t use it) – the pivotPoint, which determines the center of its rotation.

5. getVirtualElementAt() / getElementAt() and IVisualElement.depth / IVisualElement.layer – I use virtual element and depth although it is the other two that are given in Ryan’s source code. They did not work for me though !

Thats about it ! These are the basics needed to create 3-D layouts. I shall post some of the layouts that I have created in a few days.

Laying out a Card Pack in 3-D

Post : http://balakrishnanvijay.wordpress.com/2010/07/15/laying-out-a-card-pack-in-3-d/

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

Advertisement