Monday, 1 March 2010

3D Rotation in Actionscript 3

The Flash Player 10 added support for 3D which adds an additional axis (z axis) instead of the x and y axis for 2D. The z axis gives you the ability to move objects further into the screen or further away from the screen. As well as the extra axis, you get 3D rotation. The new properties are: rotationZ, rotationX, and rotationY. An important thing to note for 3D rotation is that the angles are in degrees and not radians. Here are some examples.



var speed:uint = 3;
var angle1, angle2, angle3:uint = 0;

addEventListener(Event.ENTER_FRAME, enterHandler);

function enterHandler (e:Event):void{
 mc1.rotationY = (angle1 < 360) ? angle1+=speed: angle1 = 0;
 mc2.rotationX = (angle2 < 360) ? angle2+=speed: angle2 = 0;
 mc3.rotationZ = (angle3 < 360) ? angle3+=speed: angle3 = 0;
}  

This code rotates three movieclips using the rotationZ, rotationX, and rotationY properties. All the movie clips have there registration points in the centre. The next example creates a rotating card effect. This requires the tweenLite class from greensocks.com, an image of a back card and an image of a front card. The images have been converted into movie clips with instance names: front_mc and back_mc. The two movie clips are placed on top of each other and then converted into another movie clip with the registration points in the centre and the instance name: cardholder_mc.



import com.greensock.TweenLite;

container_mc.front_mc.visible = false;

TweenLite.to(container_mc,2, {rotationY:180, onUpdate:upHandler})

function upHandler():void
{ 
  if(container_mc.rotationY > 80){
  container_mc.front_mc.visible = true;
  container_mc.back_mc.visible = false;
 
}

You can also reverse the card rotating effect using the TimelineLite reverse() method like this.
import com.greensock.TweenLite;
import com.greensock.TimelineLite;

var tl:TimelineLite = new TimelineLite({onComplete:completeHandler});
tl.append( TweenLite.to(container_mc,2, {rotationY:180, onUpdate:upHandler}) );

function upHandler():void
{ 
 if(container_mc.rotationY > 80){
  container_mc.front_mc.visible = true;
  container_mc.back_mc.visible = false;
 }else{
  container_mc.front_mc.visible = false;
  container_mc.back_mc.visible = true;
 }
}

function completeHandler():void
{
 tl.reverse();
}

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP