Controlling fps with HTML Canvas

Explorer ,
Dec 23, 2020 Dec 23, 2020

Copy link to clipboard

Copied

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.

Views

54

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Dec 23, 2020 Dec 23, 2020

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines