Return to Kroll Design home page

Flash Tutorials (with .FLA files included)

 
« Return

ActionScript 3

Timer animation relatively independent of frame rate

If an artist provides you with artwork that is meant to be shown at 30 frames per second, but you'd like the rest of your Flash movie to run at a different frame rate than that, you may want to use a Timer event to simulate a 30 frames per second speed for the supplied artwork. This way, the artwork will be relatively unaffected when the frame rate varies. As you'll see in this example by clicking on the buttons, you can alter the frame rate, which has a direct effect on the yellow ball's rate of motion. But the rate of motion of the man is relatively unaffected. It's not perfect -- it slows down a bit at 40 frames per second for some reason, and at speeds lower than 30 frames per second the animation gets a bit choppy. But at least the animation proceeds at pretty much the intended speed, regardless of the frame rate used for the rest of the movie. This example also demonstrates that frame rate can be dynamically changed.

Download the FLA file



// Define constants:
const startPositionX:int = -50;
const endPositionX:int = 650;
const movementX:int = 5;
const animationCycleEnd:int = 19;
const largerSize:Number = 1.4;


// Since the movie initially has a frame rate of 30, make that button larger:
myBtn30_btn.scaleX = largerSize; myBtn30_btn.scaleY = largerSize;


// Draw a mostly transparent black rectangle for the floor that the man walks on:
var floor:Sprite = new Sprite();
floor.graphics.beginFill(0x000000, .1); // parms: color, alpha
floor.graphics.drawRect(0,130,600,350);
addChild(floor);


// Modify frame rate, based on what button user clicks:
myBtn10_btn.addEventListener(MouseEvent.CLICK, changeFrameRate);
myBtn20_btn.addEventListener(MouseEvent.CLICK, changeFrameRate);
myBtn30_btn.addEventListener(MouseEvent.CLICK, changeFrameRate);
myBtn40_btn.addEventListener(MouseEvent.CLICK, changeFrameRate);
myBtn50_btn.addEventListener(MouseEvent.CLICK, changeFrameRate);
myBtn60_btn.addEventListener(MouseEvent.CLICK, changeFrameRate);

function changeFrameRate(myEvent:MouseEvent)
{
	if (myEvent.currentTarget == myBtn10_btn)
	{ stage.frameRate = 10;
	  resetButtonSizes();
	  myBtn10_btn.scaleX = largerSize; myBtn10_btn.scaleY = largerSize;
	}
	else if (myEvent.currentTarget == myBtn20_btn)
	{ stage.frameRate = 20;
	  resetButtonSizes();
	  myBtn20_btn.scaleX = largerSize; myBtn20_btn.scaleY = largerSize;
	}
	else if (myEvent.currentTarget == myBtn30_btn)
	{ stage.frameRate = 30;
	  resetButtonSizes();
	  myBtn30_btn.scaleX = largerSize; myBtn30_btn.scaleY = largerSize;
	}
	else if (myEvent.currentTarget == myBtn40_btn)
	{ stage.frameRate = 40;
	  resetButtonSizes();
	  myBtn40_btn.scaleX = largerSize; myBtn40_btn.scaleY = largerSize;
	}
	else if (myEvent.currentTarget == myBtn50_btn)
	{ stage.frameRate = 50;
	  resetButtonSizes();
	  myBtn50_btn.scaleX = largerSize; myBtn50_btn.scaleY = largerSize;
	}
	else if (myEvent.currentTarget == myBtn60_btn)
	{ stage.frameRate = 60;
	  resetButtonSizes();
	  myBtn60_btn.scaleX = largerSize; myBtn60_btn.scaleY = largerSize;
	};	
}

function resetButtonSizes()
{
	myBtn10_btn.scaleX = 1;	myBtn10_btn.scaleY = 1;
	myBtn20_btn.scaleX = 1;	myBtn20_btn.scaleY = 1;
	myBtn30_btn.scaleX = 1;	myBtn30_btn.scaleY = 1;
	myBtn40_btn.scaleX = 1;	myBtn40_btn.scaleY = 1;
	myBtn50_btn.scaleX = 1;	myBtn50_btn.scaleY = 1;
	myBtn60_btn.scaleX = 1;	myBtn60_btn.scaleY = 1;	
}


// Draw a dot that will move at the frame rate:
var dot:Sprite = new Sprite();
dot.graphics.beginFill(0xfffd58); 
dot.graphics.drawCircle(0,0,5);
dot.x = startPositionX + 100;
dot.y = 100;
addChild(dot);
dot.addEventListener(Event.ENTER_FRAME, moveDot);

function moveDot(myEvent:Event):void
{
	if (dot.x > endPositionX)
	{
		dot.x = startPositionX;
	}
	else
	{
		dot.x += movementX;
	}	
}


// Define the walker (the male cartoon character):
var walker_mc:Walker = new Walker();
walker_mc.scaleX = .5;
walker_mc.scaleY = .5;
walker_mc.x = startPositionX;
walker_mc.y = 100;
addChild(walker_mc);


// Define the man's reflection, which is a clone of the man, flipped and lower opacity:
var walkerShadow_mc:Walker = new Walker();
walkerShadow_mc.scaleX = .5;
walkerShadow_mc.scaleY = -.5;
walkerShadow_mc.x = startPositionX;
walkerShadow_mc.y = 255;


// set blendMode of man's reflection to LAYER so that lowering his opacity does 
// not reveal portions of layers underneath that are meant to remain hidden:
walkerShadow_mc.blendMode = flash.display.BlendMode.LAYER; 
walkerShadow_mc.alpha = .3;
addChild(walkerShadow_mc);


// start a timer which we'll use instead of an EnterFrame event:
var myTimer:Timer = new Timer(33);
myTimer.addEventListener(TimerEvent.TIMER, animateMan);
myTimer.start();


// function that moves the man each time the function is called:
function animateMan(myEvent:TimerEvent)
{
	if (walker_mc.x > endPositionX)
	{
	walker_mc.x = startPositionX;
	walkerShadow_mc.x = startPositionX;
	}
	else	
	{
	walker_mc.x += movementX;
	walkerShadow_mc.x += movementX;
	}
		
	if (walker_mc.currentFrame == animationCycleEnd)
	{ walker_mc.gotoAndStop(1);
	  walkerShadow_mc.gotoAndStop(1);
	}
	else 
	{ walker_mc.gotoAndStop(walker_mc.currentFrame+1);
	  walkerShadow_mc.gotoAndStop(walker_mc.currentFrame+1)
	}	
}


 
« Return


©2012 Kroll Design    info@KrollDesign.net    781.910.3694
Last modified: 12/31/1969 7:00 PM