Controlling fps with HTML Canvas

Question

I'm trying to incorporate buttons into HTML Canvas, that will allow users to speed up or slow down my animated lesson. I was able to do this with Adobe Animate using the following code. Obviously Action Script won't work with HTML Canvas; I'm just including it here to demonstrate where I'm starting and hopefully make it clearer what I want to do.

var togSLOW:Number = 10;

BTN_sButtonLabel.addEventListener(MouseEvent.CLICK, sButtonLabel);
function sButtonLabel(event:MouseEvent):void
{ togRATE = !togRATE;
stage.frameRate = togSLOW;
}

I've searched this Community Forum using various search terms such as "frame rate" and "fps," but I didn't find any conversations that answered my question. I'm probably just not using the correct search terms. Anyway, if someone could provide guidance I would really appreciate it.

JoãoCésar17023019 · Answer

Hi.

In the HTML5 Canvas document, each Movie Clip instance can have a different FPS. So, for example, you could code something like this:

var root = this;
var anim = root.anim; // the anim can be the main timeline itself
var button = root.button;
var slowFPS = 10;

button.on("click", function(e)
{
	e.currentTarget.toggled = !e.currentTarget.toggled;
	anim.framerate = e.currentTarget.toggled ? slowFPS : lib.properties.fps;
});

I hope it helps.

Regards,

JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.