timerevent in html5 canvas

New Here ,
Oct 24, 2020

Copy link to clipboard

Copied

Good day, 

I am trying to do dynamic text. When I press button, it will start to increase or decrease, or implement function according to value?   

I used to do this AS3 but I can not do it in html5 canvas document.

How can I use a timer event in html5 canvas document?

Is there a list of all these functions in html5 canvas? 

 

some example in AS3, I need in html5 canvas

 

import fl.motion.MotionEvent;

var sayacTimer:Timer=new Timer(100);
sayacTimer.addEventListener(TimerEvent.TIMER,colsayac);

var sayac:Number=4;
function colsayac(evt:TimerEvent):void {
sayac-=.08;
sayac=(Math.round(sayac*100))/100;
sayac_txt.text=String(sayac);
if(sayac==-30)
{
sayacTimer.stop();
}
}

play_btn.addEventListener(MouseEvent.CLICK,startTimer);
stop_btn.addEventListener(MouseEvent.CLICK,stopTimer);

function startTimer(evt:MouseEvent):void {
sayacTimer.start();
}

function stopTimer(evt:MouseEvent):void {
sayacTimer.stop();
}

 

Views

120

Likes

Translate

Translate

Report

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

1 Correct Answer

Adobe Community Professional , Oct 26, 2020
ClayUUID Adobe Community Professional , Oct 26, 2020
Nothing in the code you posted checks the value of the timer. You're just checking and modifying a local variable. This canvas code is functionally identical to what you posted: var sayacTimer = 0; var sayac = 4; var _this = this; function colsayac() { sayac -= .08; _this.sayac_txt.text = Math.round(sayac * 100) / 100; if (sayac <= -30) { clearInterval(sayacTimer); sayacTimer = 0; } } this.play_btn.addEventListener("click", startTimer); this.stop_btn.addEventListener("click", stopTimer...

Likes

Translate

Translate
Jump to answer Jump to answer
Adobe Community Professional ,
Oct 24, 2020

Copy link to clipboard

Copied

AS3 always had a thing called setTimeout(). You can read about it here:

https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/utils/package.html#setTime...

If you can rethink things so that you do the next action after some amount of time, and while doing that you set up the next action, the same tehnique will work in HTML5 Canvas.

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Oct 25, 2020

Copy link to clipboard

Copied

Thanks but I do not need a delay. 

I need a timer ( on dynamic text) which counts from the defined value (+ or -). So I can set different functions( like play movie clips) to different values.

It`s an engineering animation that contains different math values.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 25, 2020

Copy link to clipboard

Copied

Are you really going to make us explain to you that a timer and a delay are the same thing?

 

If you need a delay that repeats automatically, I suppose you could use setInterval() instead.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Oct 26, 2020

Copy link to clipboard

Copied

I tried to use setTimeout and setinterval but "addEventListener(TimerEvent. in Action script 3.0" is additionally check value of timer and implement function according to its value like in the example. 

setinterval() and setTimeout() does not do that.

Important part for me is not timer, it is "listening its value and implementing other functions according to its value."

I think right answer will be with tweenCount and tween get. I'll try.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 26, 2020

Copy link to clipboard

Copied

Nothing in the code you posted checks the value of the timer. You're just checking and modifying a local variable. This canvas code is functionally identical to what you posted:

var sayacTimer = 0;
var sayac = 4;
var _this = this;

function colsayac() {
	sayac -= .08;
	_this.sayac_txt.text = Math.round(sayac * 100) / 100;
	if (sayac <= -30) {
		clearInterval(sayacTimer);
		sayacTimer = 0;
	}
}

this.play_btn.addEventListener("click", startTimer);
this.stop_btn.addEventListener("click", stopTimer);

function startTimer() {
	if (!sayacTimer) {
		sayacTimer = setInterval(colsayac, 100);
	}
}

function stopTimer() {
	clearInterval(sayacTimer);
	sayacTimer = 0;
}

Using tweens for timer functionality would be nuts.

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 24, 2020

Copy link to clipboard

Copied

"Is there a list of all these functions in html5 canvas?"

Yes. Animate in HTML5 Canvas mode uses the CreateJS library for everything.

https://www.createjs.com/docs

 

But doing something after a set amount of time is just vanilla JavaScript functionality.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Oct 25, 2020

Copy link to clipboard

Copied

It seems createjs does not have something like ".addEventListener(TimerEvent.`"

I need a timer ( on dynamic text) which counts from the defined value ( and increase or decrease as I set). So I can set different functions( like play movie clips) to different values of timer.

It`s an engineering animation that contains different math values.

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Oct 25, 2020

Copy link to clipboard

Copied

https://community.adobe.com/t5/animate/countdown-timer-with-canvas/m-p/9994653?page=1#M183701

There is a sample countdown here but I can't set different functions of different values of this timer.

Likes

Translate

Translate

Report

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