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
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;
}
676
71
7 Comments
Brian
07.24.2009
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?
Angel
07.25.2009
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!
Cris
08.24.2009
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
Angel
08.24.2009
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!
Cris
08.24.2009
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.
bun-yan
01.14.2010
Thank you very much for your tutorial..I am very happy get this tutorial…aghain thank you (I am a newbe to learn flash)
8Sfitz
06.27.2011
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!
Smart SWF Optimization with Custom Framerates | Flash Speaks Actionscript
08.25.2010
[...] change the framerate of your SWF movie. In an earlier tutorial, I demonstrated how you can change the framerate of your SWF and how it will effect a frame by frame [...]
Moving From AS2 to AS3: A Handy List of Resources | Flash Speaks Actionscript
09.28.2010
[...] Dynamically Adjust the Frame Rate of a Flash Animation [...]
There are no trackbacks to display at this time.