A Cylindrical Layout Viewer to view images

App : [http://sujitreddyg.com/balakrishnanvijay/CylindricalView]

This is my second 3-D layout using Flex 4. After doing the previous set of layouts [http://balakrishnanvijay.wordpress.com/2010/07/15/laying-out-a-card-pack-in-3-d/], I decided to layout something that looks even better. I have now created a layout that takes a set of photos and lays them out in a cylindrical(basically curved) pattern. After building the convex curve, I also later included the concave curve layout.

Once again, as in the case of my previous examples, to get an idea of the basics of 3-D layouts, please refer to my post [http://balakrishnanvijay.wordpress.com/2010/07/15/3-d-layouts-using-flex-4/].

The pattern is pretty much the same. I first laid out all the pictures in a 2-D tile format and then tried appending rotations to each of the elements. There is a tricky part here though. The axis of rotation for elements with index less than the selectedIndex needs to be adjusted so as to maintain symmetry with the elements with index greater than selectedIndex. To adjust axis of rotation, I had to do

appendTranslation(-elementWidth/2,0,0) ; appendRotation(<angle>,Vector3D.Y_Axis) ; appendTranslation(elementWidth/2,0,0);

This reason for this will be clearer if you omit this portion in the code (which i shall upload later after some more changes !)

Based on the total curvature required (as set by the user), I assign a curvature for each element and rotate it by that amount about the Y-Axis.

anglePerElement = fullAngle / (total number of columns)

I am working on making the curvature possible upto 180 degrees. (Right now, I have limited it !). I am also working on configuring click events.

Will update/upgrade soon !!!

App : [http://sujitreddyg.com/balakrishnanvijay/CylindricalView]

Advertisement