Is there a way to change the frame rate at runtime?

[Paul Darky]

Is there a way to change the frame rate at runtime in Adobe Animate CC?

I have an app to practice reading sheet music and I want to make it possible for the users to change the speed of each exercise to make it faster or slower.

Lets say the normal speed is 24 FPS and I want the users to be able to gradually slow it (22, 20, 18, 16, 14, 12) or make it faster (24, 26, 28, 30, 32, 34, 36).

I will appreciate any help.

[JoãoCésar]

Hi.

Yeah. There is.

In AS3 documents, change the stage.frameRate property.

In HTML5 documents, change the createjs.Ticker.framerate property.

Regards,

JC

[Nick Gioia]

[ClayUUID]

While this is one possible way to accomplish your goal, it's also the worst possible way, because it will slow down the frame rate of everything. Every frame-based animation will become coarse and jumpy.

Anything time-based should be using timers, which can then be sped up or slowed down independent of the frame rate.

[Paul Darky]

Hi JoaoCésar and nickg28,

I´m talking about making it possible for the user to change the frame rate at runtime.

Hi ClayUUID,

I work only with the main timeline (no movie clips). Can you tell me what is THAT possible way?

Best,

[JoãoCésar]

You need to change those properties in order to accomplish what you want.

Say for example you have a button that changes the framerate to 20 fps. You would write:

AS3

import flash.events.MouseEvent;
button20FPS.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void{stage.frameRate = 20;});

HTML5

this.button20FPS.addEventListener("click", function(e){createjs.Ticker.framerate = 20;});

Regards,

JC

[Paul Darky]

I am asking for help once again as I had not been able to solve this issue.

I need to make possible for users of one of my apps to change the Frame Rate at runtime. Let´s say Frame Rate is 12, so I want to make users able to change that Frame Rate to 16, 20, 24, 30.

Any advice?

[JoãoCésar]

Hi.

Do you want the user to do this using buttons or input texts?

Because if you're going to use buttons, one approach will be to have a button for each FPS value you wish to provide.

Let's say you have four buttons named like: fps12, fps24, fps30, fps60.

Your code could be:

import flash.events.MouseEvent;
function changeFPS(e:MouseEvent):void
{
    var fps:uint = uint(e.currentTarget.name.replace("fps", ""));
    stage.frameRate = fps;
}
fps12.addEventListener(MouseEvent.CLICK, changeFPS);
fps24.addEventListener(MouseEvent.CLICK, changeFPS);
fps30.addEventListener(MouseEvent.CLICK, changeFPS);
fps60.addEventListener(MouseEvent.CLICK, changeFPS);

Please let me know if this helps you.

Regards,

JC

[Paul Darky]

Hi JoãoCésar,

Thanks for your reply.

Sorry for being so ignorant on AS3.

- The FPS of my swf is set to 12 in the Properties panel

- I added a button to the stage named: fps24

- I want to make a test changing the original FPS from 12 to 24 when cliking that button at runtime

- Can you please tell me how I need to adjust the following code?

import flash.events.MouseEvent;

function changeFPS(e:MouseEvent):void

{

var fps:uint = uint(e.currentTarget.name.replace("fps", ""));

stage.frameRate = fps;

}

fps24.addEventListener(MouseEvent.CLICK, changeFPS);

I will appreciate your help.

Best,

[JoãoCésar]

Hi, Paul.

Your code is correct and does just what you want to achieve: change the stage frame rate to 12 fps.

Are you facing any problems?

Regards,

JC

[Paul Darky]

Hi João,

Thanks for your reply.

The thing is that I don´t know where should I indicate the 24 FPS. If you see my code, the only part where "24" is written is on the name of the button:

import flash.events.MouseEvent;

function changeFPS(e:MouseEvent):void

{

var fps:uint = uint(e.currentTarget.name.replace("fps", ""));

stage.frameRate = fps;

}

fps24.addEventListener(MouseEvent.CLICK, changeFPS);

I don´t know on which specific part of the code I have to indicate the change to 24 FPS. That´s why nothing seems to happen when I click on the button.

Best,

Paul

[JoãoCésar · Accepted solution]

Hi, Paul.

The code gets de fps value from the button name itself.

It gets the string "24fps", removes the "fps" part and turn the remaining part into a unsigned integer. But this is only a suggestion.

If you prefer, you can create a function for each framerate value. Like this:

import flash.events.MouseEvent;
function changeTo12FPS(e:MouseEvent):void
{
    stage.frameRate = 12;
}
function changeTo24FPS(e:MouseEvent):void
{
    stage.frameRate = 24;
}
function changeTo30FPS(e:MouseEvent):void
{
    stage.frameRate = 30;
}
function changeTo60FPS(e:MouseEvent):void
{
    stage.frameRate = 60;
}
fps12.addEventListener(MouseEvent.CLICK, changeTo12FPS);
fps24.addEventListener(MouseEvent.CLICK, changeTo24FPS);
fps30.addEventListener(MouseEvent.CLICK, changeTo30FPS);
fps60.addEventListener(MouseEvent.CLICK, changeTo60FPS);

You can download a sample from my GitHub repo:

adobe/animate cc/as3/change_fps at master · joao-cesar/adobe · GitHub

Regards,

JC

[Paul Darky]

Hi João,

I already downloaded your sample. Now it´s quite easy for me to achieve what I need!

Thanks a lot for your help and kindness.

Best,

Paul

[JoãoCésar]

This is awesome, Paul!

You're welcome!

Have a nice weekend!