Thursday, 15 December 2011

Cogs rotating animation

In this quick post I will create a simple rotating cog animation. The first example rotates a single cog using the rotation property and the enter frame event. The registration point is in the centre of the cog.

var speed:int = 5;

addEventListener(Event.ENTER_FRAME, ef);

function ef(e:Event):void
{
cog.rotation += speed;
}





The second example rotates multiple cogs. This time I have used a function to animate the cogs with three arguments so the individual values can be easily changed. The first argument is the reference to the movie clip, second is the speed of the rotation and the third is the direction of the rotation. The three movie clips have the instance names: cog1, cog2, and cog3 accordingly.

addEventListener(Event.ENTER_FRAME, ef);

function ef(e:Event):void
{
 animCog(cog1,8);
 animCog(cog2,2);
 animCog(cog3,3, 'left');
}

function animCog(mc:MovieClip, speed:Number = 2, dir:String="right"):void
{
 if(dir == "right") mc.rotation += speed;
 if(dir == "left") mc.rotation -= speed;
}




The third example increases then decreases the speed of the cog. I have used a Boolean variable called maxSpeed to set the maxSpeed to true if the speed the greater or equal to 20, and to false if the speed is less than or equal to 0. The cog will increase in speed until the maxSpeed is reached then will decrease in speed until the minSpeed is reached.

var speed:Number = 0;
var increase:Number = 0.2;
var minSpeed:Number = 0;
var maxSpeed:Number = 20;
var maxedSpeed:Boolean = false;

addEventListener(Event.ENTER_FRAME, ef);

function ef(e:Event):void
{
 if(speed >= maxSpeed) maxedSpeed = true;
 if(speed <= minSpeed) maxedSpeed = false;
 
 if(!maxedSpeed){
  speed +=increase;
  cog1.rotation += speed;
 }else{
  speed -=increase;
  cog1.rotation -= speed;
 }
}



1 comments:

Mister Grim 31 August 2012 at 23:04  

This is really neat! Thank you for this great tutorial. =)

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP