Flash 3D Rotation

Firstly I'd like to say that you've got it easy in CS5. This seemed nigh impossible back in AS2 and older versions of flash. When I still used AS2, I remember reading a tutorial about it and thinking, you would have to be some sort of mathematician to work out how to tweak the bitmaps. But now, anyone can make it!

The example below will also introduce you to a new operator (besides the if/else and switch). This new operator is the Ternary Operator, or the "Conditional Expression"! It is not so common but it can be a useful shorthand for certain cases!

Creating a 3D Rotation Loop
First, create an object on the stage. When you create it as a symbol, be sure to align the registration point at the center. This is crucial if you want it spin around the center point.

My instance is called "crab", so the rest of this example uses a crab.

On the timeline's first frame, I enter the following actionscript.

// define the angle of turning and the speed multiplier var angle:Number = 0; var speed:Number = 20; stage.addEventListener(Event.ENTER_FRAME, rotatingThe3DCrab) function rotatingThe3DCrab(e:Event):void { // ternary operator -- condition ? whatHappensIfExpressionIsTrue : whatHappensIfExpressionIsFalse angle<360 ? angle+=speed : angle = 0; crab.rotationY = angle; }

In other words: what this does is to make its rotation on the Y axis increase by the speed number with every successive frame until it reaches 360 and is reset to 0 again. The code says: if the angle is less than 360, lets spin it! and if its 360, make it 0 again so it loops.

http://dreamsyntax.org/patterns/swf/rotatingcrab.swf

'''Tip: Try changing rotationY to rotationX and rotationZ. Also try changing the value for speed to see what changes.'''

http://dreamsyntax.org/patterns/swf/rotatingcrabx.swf

Introducing Ternary Operators
This is a little known but handy shorthand operator to use.

The ?: Ternary Operator (aka Conditional Expression works a bit like the if/else Statement. But they are not the same thing.

condition ? value_if_true : value_if_false 

In some situations, you want to use the if/else statement to do what the ternary operator can already do. That's why you bring it out!

These two following pieces of code work in the same way: if(boxVisibility == true) { box_mc.visible = true; } else { box_mc.visible = false; } 

boxVisibility ? box_mc.visible = true : box_mc.visible = false;


 * the conditional expression requires you to define the value if true and value if false. You cannot omit any parts of the statement.
 * the if/else statement requires you to define if the value is equal what you put inside the bracket. If so then do something. Else do something else. Or nothing. But you can omit the inside function if you like as well. Its more flexible, but thats also cos its longer...

Create a slider control for the rotation
Open up the components panel and create a new slider. Give it an instance name. I've called mine the crabSlider in this example.

import fl.events.SliderEvent; import flash.display.MovieClip;

var angle:Number = 0; var speed:Number = 20; var crabAngle:Number; stage.addEventListener(Event.ENTER_FRAME, rotatingThe3DCrab) function rotatingThe3DCrab(e:Event):void { angle<360 ? angle+=speed : angle = 0; crab.rotationX = angle; }

crabSlider.addEventListener(SliderEvent.CHANGE, sliderRotatesCrab); crabSlider.maximum = 360;

function sliderRotatesCrab(evt:SliderEvent):void { crabAngle = evt.target.value; crab.rotationY = crabAngle; }

http://dreamsyntax.org/patterns/swf/rotatingcrabSlider.swf

Rotate tool


You will notice that when you draw objects on the stage, you can now rotate them in 3D as well. Just like in Illustrator. But you can animate it in a tween. I don't recommend this manual method of animation though - I feel that for real control, you should use actionscript where you can. But if you are just making one animation of a rotating thing, then feel free to use this option.




 * X control is red
 * Y control is green
 * Z control is blue.

Papervision
If you wish to do more complex 3D animations with interaction (and not just a sort of x/y/z plane rotation), I would recommend you look at Papervision3D and pick up more AS3 as this is the way forward!


 * http://code.google.com/p/papervision3d/
 * http://papervision3d.googlecode.com/svn/trunk/as3/trunk/docs/index.html
 * http://blog.papervision3d.org/