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.
The example below is nice little application to check out the feeds of a couple of popular sites out there. You can select one of the feeds and the cube will rotate to the appropriate side. If you want, you can click through to the entire article by clicking the title of the post. Also on the sides are buttons to go to the top which is a graphic and one button to go to the bottom which has some relevant info about the example. Ok go ahead and take a couple minutes to play around. Source Code.
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:
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:components="com.pfp.components.*"
layout="vertical">
<components:CubeStack selectedSide="Front">
<mx:Canvas name="Front" />
<mx:Canvas name="Left" />
<mx:Canvas name="Back" />
<mx:Canvas name="Right" />
<mx:Canvas name="Top" />
<mx:Canvas name="Bottom" />
</components:CubeStack>
</mx:Application>
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.
04/14/2008 - 08:48
Slick, thanks for the explanation
05/16/2008 - 13:30
I've been working with tutorial today. I created a 'Back' panel as opposed to using the 'Right' one for the back as you did in your tutorial.
The app does not navigate to the 'Back'. It continues to use the 'Right' for the back.
Any ideas? ITMT (in the mean time) I'll look a little deeper.
Marcel
05/16/2008 - 14:21
Oh, I got it. Used the code above. It's called 'getting ahead of yourself.'. Awesome. Great, great tutorial.
Marcel
06/23/2008 - 16:30
Thanks for tutorial and component. I just added it to Ohlair (http://ohloh.net/projects/ohlair) I am hoping to integrate it a little better but for now its a great effect that was ridiculously simple to add.
08/05/2008 - 08:24
someone can help me, please i have some problem adding the efect, someone can explain me how? where i find the library ? thanx
09/02/2008 - 00:22
The libs folder should be added into the project above the src level...then unzip the contents of the CubeStack Library .swc zip file into the folder
09/03/2008 - 21:39
Hello I'm trying to use this control, but I can not find the .swc? am I doing something worng? how can I add this library to my project?
Thanks
Marco
09/03/2008 - 21:44
Just download the .swc (link in last paragraph) and if you're using Flex Builder 3 simply add it to the libs folder of the project. Let me know if you are not using Flex Builder 3.
09/06/2008 - 00:18
Hi The Fattest, yes I'm using Flex 3, thanks for your help, I create a Libs folder later uncompress your zip inside [libs] folder, copy your example to a brand new mxml and nothing happend, could you send me your example mxml?
06/30/2009 - 00:16
hi am new to flex .. i know the basics can you please tell me how to create 3D rotation of images in FLEx
06/30/2009 - 00:18
Am using Flex builder 3
09/06/2008 - 05:35
Hmm cant find the .swc file either. Downloaded the file, but it contains a folder named CubeStack.swc not an actual swc package file.
10/31/2008 - 18:08
Marco, Laurus - I had this issue on a Mac, right click the link and save file as (cubestack.swc) - it will download as cubestack.swc.zip - simply rename and remove the zip, then add to your lib as a SWC. It appears the browser/os is identifying it wrong and being 'helpful'
12/25/2008 - 23:01
Please help me. I have this problem "Design mode: Cannot load CubeStack.swc (reason: ERROR: Load Verify). It may require classes (such as Adobe AIR components) that are not supported by design mode. Check the Eclipse error log for more details."
04/17/2009 - 10:43
Any chance this technique could be used but have say 20 different canvas'? I really just need a way where I can move from one cubeface to another, but I need more than 6 total sides.
Thanks,
Alan
05/15/2009 - 10:28
Hi
I know this tutorial is more than 1 year old, but I have a little question.
I succeeded in implementing your code in my Flex project, but I have 2 problems.
When the cube is loaded, I can't never get a good rotation from any side to the front.
The cube rotation is always brilliant when it rotates from left to back, back to right or in the opposite direction. But when I want to rotate it to the front, it doesn't. I just get the image but there's no effect on it.
Do you have any idea why this could be? One thing I maybe should mention is that I have no top or bottom side.
My second question:
I don't want a cube what's rotating on the outside. I would like to have one rotating on the inside. I should look like you're standing in the cube and the cube rotates around you.
Here http://www.alex-uhlmann.de/flash/adobe/blog/distortionEffects/effectCube/ you can accomplish that by setting the distortion on a negative value. I just can't find it in your code where I could set the distortion negative.
Please help, it's kind of important.
Best wishes
Femke
05/18/2009 - 21:30
I will take a look at this in the next couple days, been really busy lately.
05/20/2009 - 05:42
Hi
I've finally solved the 2 problems.
The problem with the rotation was that on the front side I had a map component from google maps. The map seem to delay the loading of the front and the effect passes a tick faster.
With a lot of searching I also solved that distortionlevel, I had to change it at a specific place in one of the classes.
Now I'm searching how I could possibly pase a variable from the component with the cubestack to the component on the front..
07/11/2009 - 15:38
Does not work here.
CubeStack does not respect selectedSide property =/
If I specify it, or change it, nothing happens
07/12/2009 - 13:18
I need a little more info if you are looking for help to get it working.
07/13/2009 - 00:03
Hey could u pls tel me how to use google search api s to build a custom search engine.. purely for my learning and i dont have a web site url to obtain an api key and also my app doesnt have a server side
08/14/2009 - 14:08
This is a great component. All I had to do was reference it in my library path, and it worked perfectly. Thanks for the awesome work... keep it up!
09/09/2009 - 10:23
I did not understand the meaning of the selectedSide property.
In my application, if set it or not, it's the same. For example, if I set selectedSide="Left", at the beginning the cube appear always with front side visible, and not with the left side, as I aspected.
09/09/2009 - 11:07
I tried the example above with empty canvaves, but I obtain a index out of range exception.
I think that the problem is in the comand selectedSide="Front".
Please, help me. Thanks
10/09/2009 - 00:23
I've got a situation where I want to have several rotating cubes (don't ask why) that are controlled independently, but the (excellent) code presented here is written for only one cube. If you try to have multiple cubes, there's no way to rotate only one of them. Here's my fix. The gist of it is that you need to somehow communicate to CubeStack.as which CubeStack you want to manipulate, and I do that by passing both the CubeStack name AND the side to the appropriate function. I hope it isn't too hard to follow:
1. I modified the button click action that was previously defined, for example, as:
click="model.cubeSide='Front'
to:
click='model.cubeSide='x.Front'
where x is the name of one of the CubeStacks.
2. You now have to modify the "set selectedSide" function in CubeStack.as. Insert the following lines at the beginning of the function:
var valueArray:Array = value.split('.');
var valueCubeStack:String = valueArray[valueArray.length-2];
var valueValue:String = valueArray[valueArray.length-1];
Wrap the existing code with the following condition:
if (this.parent.toString().split('.').pop() == valueCubeStack) {
}
Then change the line:
var index:int = CubeStack.Sides.indexOf(value);
to:
var index:int = CubeStack.Sides.indexOf(valueValue);
3. Finally, in MainModel.as, you need to initialize cubeSide to 'something.Front' instead of just 'Front'
HTH, Chuck Han