Rotating in 3D Space

Rotating in 3D Space

Flash CS4 ActionScript 3.0 Tutorial


How to Add 3D Movement to Flash Movie Symbols with ActionScript



The 3D feature was added to Flash in CS4. To make 3D work you must save your swf files to display in Flash Player 10. For more information, see topic in Flash CS4 section titled, Saving a swf Movie. For information 3D movement, see topic, Moving in 3D Space.

As you rotate in Flash's 3D environment, the rotation is limited to X, Y and Z axis. To rotate in 3D space, the object must be a Movie Symbol.

Once you understand how the object rotates in 3D space, you can rotate an object with ActionScript on the stage. In this example we will demonstrate both ways to rotate an object in 3D.


Step One

Open a new Flash document and add a second layer.

Step Two

Name the upper layer Actions and the lower one Content.

Step Three

Click frame one of the Content layer and using the Rectangle tool, add a rectangle to the stage.

Step Four

Select the rectangle and convert it to a Movie Symbol (F8).

Step Five

Select the rectangle assign it an instance name of box_mc in the Properties panel.

Step Six

Select the 3D Rotation tool (w key) and drag the small white circle to reposition the pivot point.

Step Seven

You can drag the red, green or blue lines to rotate on the X, Y or Z axis.

Step Eight

Option double-click (PC - Alt double-click) frame one of the Actions layer.

Step Nine

Copy/Paste the following code to the ActionScript panel.


addEventListener(Event.ENTER_FRAME, onYRotate);

function onYRotate(e:Event):void{



Step Ten

Publish your movie by pressing Cmd/Return (PC - Ctrl/Enter). The box rotates around it's Y axis.

Dissecting the Code

The first line of the code at Step Nine sets the box_mc starting rotation position.

An event listener is added to make the function onYRotate fire at the project's current frame rate. If the fla file was set to 20 frames per second, the function would run 20 times per second.

Each time the function runs, the box rotates 2 units along the Y axis.

Changing the Pivot Point

To change the pivot point while using the 3D Rotation tool, follow the directions in Step Six.

When you rotate an object with ActionScript, the rotation is about the object's Registration Point. For information on moving the Registration Point, see topic, Moving Object Pivot Point.

Try a New Lens

If the rotation is too distorted, try adjusting the Perspective Angle value in the Properties panel. Wide angle lenses can give you some strange results.

Rotating Around the Other Axis

In this example we showed how to rotate around the Y axis with ActionScript. If you substitute rotationY with rotationX or rotationZ, your object rotates around the a different axis.