So when I got a couple of days off from work, I decided to imitate a flex app that I had seen a long time back.

The basic working of the app is this : You drag any tile (I’d be using some images I guess) over some other tile and the tiles between the hovered tile and the selected tile re-arrange (with animation) in such a way that the the tile that is being dragged has a vacant space onto which it can be dropped and the original location of that tile would now be occupied by a neighbouring tile (left / right) depending on which tile is being hovered over.

I have done the basic working of the app. I intend to complicate it a bit more by using a large number of tiles, the view of which can be zoomed into / zoomed out by using a scroll.

I shall probably post the basic app first and then post updates later.

(Also pending is uploading source for the previous 2 applications .. )

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

For some background details and references, for those who are new, please have a look my

1. cylindrical layout without animation
2. card pack layout
3. introduction to 3-d layouts in Flex 4

What I plan to do now is give a detailed account of my experience as I created these layouts ! (will do it soon ! )

Feel free to comment on my posts as I am sure it would be a good chance to learn for me as well.

Ideas/suggestions for any future work are welcome.

Criticism/Comments are most welcome !

Cheers !!

In the mean time, you can have a look at whatever I have done till now….

Cylindrical Layout for a photo-viewer

http://balakrishnanvijay.wordpress.com/2010/07/15/a-cylindrical-layout-to-view-photos/

3-D Layout of Cards

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

I shall also blog about the creation of 3-D layouts in detail in my next post …

Cheers !!

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]

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 !!!

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/

<helloworld>

As we wander through the infinite vector space that the internet is, we come across (more frequently these days !!) very rich-looking applications that truly give users a different experience. Welcome to the world of RIAs – the way I feel and hope every internet application goes.

Adobe Flex is the most amazing SDK that has been created to develop RIAs and more recently RDAs (Rich Desktop Applications ) and this small space here is an account of my journey and experiences as I get to learn and work on developing RIAs.

</helloworld>