Dynamically Adjust the Frame Rate of a Flash Animation

New to ActionScript 3.0 is the ability to dynamically change the frame rate of an animation via runtime. By having this ability, you can create a slow motion animation without the exact precisiong in keyframe timing. You can also use this to lower the frame rate for slower machines dynamically.  Let’s see it in action.

Getting Started

I’ve created a small example that will demonstrate this new feature. In this example, you can simply use the arrow buttons to increment/decrement the animation’s frame rate by 1. You will noticeable see the difference of how changing its frame rate will have on the animation.

Also, you can thank webtasarim for the animation sample.

Setting a Frame Rate of 60+

If you noticed, I’ve capped the frame rate off at 60 fps. According to a study, the in browser Flash Player will cap out at 60 fps. Basically, if you ever wanted to exceed the frame rate of it will have no effect on the animation…so why bother.

Example

Example of Change Frame Rate

The ActionScript Used in the Example

 

//imports the necessary as events
import flash.events.MouseEvent;
//Define the initial stage frame rate
this.stage.frameRate=1;
rateTxt.text="1 fps";

//attaching mouse events to the buttons on stage
arrowUp.addEventListener(MouseEvent.MOUSE_DOWN,arrowPressUp);
arrowUp.addEventListener(MouseEvent.MOUSE_OUT,arrowOut);
arrowUp.addEventListener(MouseEvent.MOUSE_OVER,arrowOver);

arrowDown.addEventListener(MouseEvent.MOUSE_DOWN,arrowPressDown);
arrowDown.addEventListener(MouseEvent.MOUSE_OUT,arrowOut);
arrowDown.addEventListener(MouseEvent.MOUSE_OVER,arrowOver);

function arrowPressUp(event:MouseEvent):void {
 if (this.stage.frameRate<59) {
 //Incrementing the frame rate
 this.stage.frameRate=this.stage.frameRate+1;
 rateTxt.text=this.stage.frameRate+1+" fps";
 }
}

function arrowPressDown(event:MouseEvent):void {
 if (this.stage.frameRate>1) {
 //Decrementing the frame rate
 this.stage.frameRate=this.stage.frameRate-1;
 rateTxt.text=this.stage.frameRate-1+" fps";
 }
}

//On mouse over function
function arrowOver(event:MouseEvent):void {
 event.target.alpha=1;
}

//On mouse out function
function arrowOut(event:MouseEvent):void {
 event.target.alpha=.7;
}

Download the example .fla

9 thoughts on “Dynamically Adjust the Frame Rate of a Flash Animation

  1. I downloaded the example so I could try to understand the actionscript, but when I publish the animation it doesnt work. is there a diffrence between CS3 and CS4 (I am using CS4) that would cause it not to work?

  2. Hey Brian, I just ran it in CS4 and everything looks fine as should be. Keep in mind that at launch, the animation speed is about 1 fps. In other words, try increasing the animation speed using the arrows so that you can see the animation in more of a real time. Hope this helps!

  3. I need to dynamically change the frame rate of two animations via runtime. I want to control these two animations independently, each will have a different frame rate. Is it possible? How can I do it?
    Thank you

    • Hey Cris, unfortunately, changing the frame rate of a SWF effects the entire SWF and its content. You can try inserting each animation into an external SWF and load them dynamically. Theoretically, that should do it, but you never know. I hope this helps!

  4. Yes, it makes sense!
    I have been trying everything but it always goes back to the stage frame rate. I will try your idea and let’s see if it does the job!
    Thank you for your fast replay.

  5. Thank you very much for your tutorial..I am very happy get this tutorial…aghain thank you (I am a newbe to learn flash)

  6. Endless searching has come to ed with your tutorial! THANK YOU for addressing what I assumed would be a simple issue, but no one but you has laid it out so nicely!

    Good Karma coming your way!

Comments are closed.