Today I am going to show and give out a cool component I have built. The component is built to make it easy to use Alex Uhlmann's Distortion Effects in a ViewStack based component to rotate to the sides. I will show an example application and how to use the component, CubeEffect. Hopefully someone out there will find a good use for the component or at least some use of the source provided here.

Well your probably now wondering how does this thing work. The easy answer is by pure magic. The long answer involves the Sandy 3D Engine, Alex Uhlmann's Distortion Effects, and a comment from Alex's Post where someone had created a CubeStack. This gentlemen had the basic idea down but I wanted to expand on his implementation and perhaps increase the usability, you can grab his version from www.charlieszymanski.com. So this led in the right direction.

The component extends the basic functionality of the ViewStack component provided in Flex. I set out to make it so the end user would only have to tell the new component, CubeStack, which side to display and it would take care of the rest. So after some small math magic the component would figure out which side to display and start the effects to get there. I am not going to go over all the boring code behind deciding which side to go to, you can check out the source if you would like to. I will say it may not be completely optimized but there would be minimal performance increase for refactoring the code. All you have to do is set selectedSide on the component.

Now to make things a bit easier I will give a quick overview of how to use the component and what's available. To use the component you simply need to create it in mxml or actionscript and add sides to it, I would suggest 4 or 6 sides. The sides do need to be in a certain order, which is Front, Left, Back, Right, Top, and Bottom. So a simple but not very useful example would be:

Now of course in order for this to be really useful, you would probably want something more than empty canvases. But that gives you the basic idea. There are a couple other items I should mention about using the component. If you decide to use the selectedIndex property everything should still work as planned. There are also a couple events and properties to be aware of outlined below.

Properties

• selectedSide : String - the selected side, changing this will start the transistion to new side, names are pulled from CubeStack.Sides
• flipDuration : Number - the length in time the rotate effect takes

Events

• rotateStart : CubeRotateEvent - event fired when the cube begins to rotate to a new side
• rotateEnd : CubeRotateEvent - event fired when the cube rotation ends
• sideChange : CubeRotateEvent - event fired when side is told to be changed

Constants

• Sides : Array - array with the side values used, they are in order that the sides need to be placed in the container

Well I think that is all I am going to say about the component. I encourage you to look at the source code and modify it or simply let me know what you all think about it. I do plan on actually putting in real documentation for it someday. As always feel free to drop a comment about anything, within limits of course. Also note that the component still probably has a couple bugs in it, especially if you use less than 6 sides. Well I hope someone finds a use for it. If you just want the CubeStack Library .swc click on through.

References

• Alex Uhlmann's Distortion Effects
• ViewStack Documentation
• Another Flex Cube Implementation