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();
}
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
...
Copy link to clipboard
Copied
AS3 always had a thing called setTimeout(). You can read about it here:
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.
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.
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.
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.
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.
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.
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
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.
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.