• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Countdown Timer with canvas

Explorer ,
Jul 13, 2018 Jul 13, 2018

Copy link to clipboard

Copied

Hello. i wanted to make a countdown timer in Adobe animate Canvas with minutes and seconds (it takes for example 45 minutes) .when the time will over , my movieclip disapear

(this.mc.visible = false)!
I read all forums but I couldn't succeed .can any one write this shortly plsssss???

Views

8.9K

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

correct answers 1 Correct answer

Community Expert , Jul 14, 2018 Jul 14, 2018

Hi.

Here is my suggestion.

Complete ignore the code for the buttons if you wish. You can just set the initialMinutes variable to 45 and then only call the startTimer function.

Preview:

animate_cc_html5_timer_02.gif

JavaScript code:

var that = this;

this.initialMinutes = 0.2; // set here to 45

this.totalTime = 0;

this.currentTime = 0;

this.interval = 0;

this.start = function()

{

     that.startTimer(that.updateCallBack, that.endCallback);

     that.startButton.on("click", function(e){that.startTimer(that.updateCallBack, that.endCallback)}

...

Votes

Translate

Translate
Community Expert ,
Jul 13, 2018 Jul 13, 2018

Copy link to clipboard

Copied

Try using this ticker class to create a countdown timer, EaselJS v0.8.2 API Documentation : Ticker

This should do the trick.

Votes

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
Explorer ,
Jul 14, 2018 Jul 14, 2018

Copy link to clipboard

Copied

Thanks but as i am new with canvas can you please write the timer code for 45 minutes???

Votes

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
Community Expert ,
Jul 14, 2018 Jul 14, 2018

Copy link to clipboard

Copied

Hi.

Here is my suggestion.

Complete ignore the code for the buttons if you wish. You can just set the initialMinutes variable to 45 and then only call the startTimer function.

Preview:

animate_cc_html5_timer_02.gif

JavaScript code:

var that = this;

this.initialMinutes = 0.2; // set here to 45

this.totalTime = 0;

this.currentTime = 0;

this.interval = 0;

this.start = function()

{

     that.startTimer(that.updateCallBack, that.endCallback);

     that.startButton.on("click", function(e){that.startTimer(that.updateCallBack, that.endCallback)}, this);

     that.stopButton.on("click", function(e){that.stopTimer(that.stopCallback)}, this);

     that.pauseButton.on("click", function(e){that.pauseTimer(that.pauseCallback)}, this);

     that.resumeButton.on("click", function(e){that.resumeTimer(that.resumeCallback, that.updateCallBack, that.endCallback)}, this);

};

this.updateCallBack = function()

{

     that.setText();

};

this.endCallback = function()

{

     that.mc.visible = false

};

this.stopCallback = function()

{

     console.log("stopped");

};

this.pauseCallback = function()

{

     console.log("paused");

};

this.resumeCallback = function()

{

     console.log("resumed");

};

this.startTimer = function(updateCallback, endCallback)

{

     clearInterval(that.interval);

     that.totalTime = that.minutesToMilliseconds(that.initialMinutes);

     that.currentTime = that.totalTime;

     that.setText();

     that.setTime(updateCallback, endCallback);

};

this.stopTimer = function(callback)

{

     clearInterval(that.interval);

     that.totalTime = 0;

     that.currentTime = 0;

     that.setText();

     callback();

};

this.pauseTimer = function(callback)

{

     clearInterval(that.interval);

     that.totalTime = that.currentTime;

     callback();

};

this.resumeTimer = function(resumeCallback, updateCallback, endCallback)

{

     if (that.currentTime == 0)

          return;

     clearInterval(that.interval);

     that.totalTime = that.currentTime;

     that.setTime(updateCallback, endCallback);

     resumeCallback();

};

this.setTime = function(updateCallback, endCallback)

{

     that.interval = setInterval(function()

     {

          that.currentTime -= 1000;

          updateCallback();

          if (that.currentTime == 0)

          {

               clearInterval(that.interval);

               endCallback();

          }

     }, 1000);

};

this.setText = function()

{

     var time = that.timeCode(that.currentTime);

     that.timeText.text = time.minutes + ":" + time.seconds;

};

this.minutesToMilliseconds = function(minutes)

{

     return 1000 * 60 * minutes;

};

this.timeCode = function(milliseconds)

{

     var seconds = Math.floor((milliseconds / 1000) % 60);

     var strSeconds = (seconds < 10) ? ("0" + String(seconds)) : String(seconds);

     var minutes = Math.round(Math.floor((milliseconds / 1000) / 60));

     var strMinutes = (minutes < 10) ? ("0" + String(minutes)) : String(minutes);

     return {seconds: strSeconds, minutes: strMinutes};

};

this.start();

FLA download:

animate_cc_html5_timer_02.zip - Google Drive

Please let me know if there is some concept you don't understand.

I hope this helps.

Regards,

JC

Votes

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
Explorer ,
Jul 14, 2018 Jul 14, 2018

Copy link to clipboard

Copied

woww.thanks alot.its exactly what i need

Votes

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
Community Expert ,
Jul 14, 2018 Jul 14, 2018

Copy link to clipboard

Copied

You're welcome!

Votes

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
Explorer ,
Jun 30, 2022 Jun 30, 2022

Copy link to clipboard

Copied

Finally after getting stuck for a week with a little modification I can create a stopwatch with this script. Thank you so much!

Votes

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
Community Expert ,
Jun 30, 2022 Jun 30, 2022

Copy link to clipboard

Copied

You're welcome!

Votes

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
Explorer ,
Jul 13, 2022 Jul 13, 2022

Copy link to clipboard

Copied

Hi, it's me again, I have a question, could we make the timer in seconds only? thanks in advance.

Votes

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
Explorer ,
Jul 16, 2022 Jul 16, 2022

Copy link to clipboard

Copied

It is solved.

Votes

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
New Here ,
Aug 05, 2022 Aug 05, 2022

Copy link to clipboard

Copied

LATEST

Thank you for this lovely countdown timer.

I tried to use this countdown timer codes for making online tests for our students.
It was working fine but the problem was when the web browser showing the countdown timer was deactivated (when the web browser was not the active window for any reason/s), the web browser PAUSED the javascript from running while the web browser wasn't actively selected in order to save energy, and as a result, some countdown timers on student's laptop finished/stopped later than other students.
Is there a way to overcome this problem by making this lovely count down timer use the web server's clock instead of user's clock (system time in student's computer)?

Votes

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
Community Beginner ,
Dec 17, 2018 Dec 17, 2018

Copy link to clipboard

Copied

Hi.. Thanks for the code for the timer. That works great! Any idea on how to expand this to Days : Hours : Minutes : Seconds? Doing a countdown timer for about a 380 days. Amny help would be super appreciated.. Thanks!

Votes

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
Community Beginner ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

This is working great for me.  Thanks so much.

I am wondering how I might add a gotoAndPlay(1); or some other command when the timer times out?

Again, thanks!

Votes

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
Community Expert ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Hi.

 

I'm glad this is working for you.

 

When the time is out, the endCallback is called. So you only have to place your code in it.

this.endCallback = function()
{
    // your code
};

 

Regards,

JC

Votes

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
Community Beginner ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Hello!

Thanks for the help on this.

 

I added this:

 

//restart

this.endCallback = function()
{
	that.mc.visible = false
	this.gotoAndStop(1);
};

Keeping your code.  I also tried putting it in it's own endCallback function (leaving and removing your endCallback function).  I can't get it to go back to the first frame and stop.

I did a lot of Javascript in the 90's but I'm afraid I've lost it all.  I mostly have no idea what I'm doing.  Sorry.

 

Thank you.

 

Votes

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
Community Expert ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Hi.

 

Please try this.gotoAndStop(0); and tell us if it works.

Votes

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
Community Beginner ,
Aug 18, 2020 Aug 18, 2020

Copy link to clipboard

Copied

Still no return to the first frame (a button that says "Go").

 

var that = this;

this.initialMinutes = .1; // set here to 45
this.totalTime = 0;
this.currentTime = 0;
this.interval = 0;

this.start = function()
{	
	that.startTimer(that.updateCallBack, that.endCallback);

	that.startButton.on("click", function(e){that.startTimer(that.updateCallBack, that.endCallback)}, this);
	that.stopButton.on("click", function(e){that.stopTimer(that.stopCallback)}, this);
	that.pauseButton.on("click", function(e){that.pauseTimer(that.pauseCallback)}, this);
	that.resumeButton.on("click", function(e){that.resumeTimer(that.resumeCallback, that.updateCallBack, that.endCallback)}, this);
};

this.updateCallBack = function()
{
	that.setText();
};


//restart

this.endCallback = function()
{
	that.mc.visible = false
	this.gotoAndStop(0);
};



this.stopCallback = function()
{
	console.log("stopped");
};

this.pauseCallback = function()
{
	console.log("paused");
};

this.resumeCallback = function()
{
	console.log("resumed");
};

this.startTimer = function(updateCallback, endCallback)
{
	clearInterval(that.interval);
	that.totalTime = that.minutesToMilliseconds(that.initialMinutes);
	that.currentTime = that.totalTime;	
	that.setText();
	that.setTime(updateCallback, endCallback);

};

this.stopTimer = function(callback)
{
	clearInterval(that.interval);
	that.totalTime = 0;
	that.currentTime = 0;	
	that.setText();
	callback();
	
};

this.pauseTimer = function(callback)
{
	clearInterval(that.interval);
	that.totalTime = that.currentTime;
	callback();
};

this.resumeTimer = function(resumeCallback, updateCallback, endCallback)
{
	if (that.currentTime == 0)
		return;
	
	clearInterval(that.interval);
	that.totalTime = that.currentTime;
	that.setTime(updateCallback, endCallback);
	resumeCallback();
};

this.setTime = function(updateCallback, endCallback)
{	
	that.interval = setInterval(function()
	{
		that.currentTime -= 1000;
		updateCallback();
		
		if (that.currentTime == 0)
		{			
			clearInterval(that.interval);
			endCallback();
		}			
		
	}, 1000);
};

this.setText = function()
{
	var time = that.timeCode(that.currentTime);
	that.timeText.text = time.minutes + ":" + time.seconds;
};

this.minutesToMilliseconds = function(minutes)
{
	return 1000 * 60 * minutes;
};

this.timeCode = function(milliseconds)
{
	var seconds = Math.floor((milliseconds / 1000) % 60);
	var strSeconds = (seconds < 10) ? ("0" + String(seconds)) : String(seconds);
	var minutes = Math.round(Math.floor((milliseconds / 1000) / 60));
	var strMinutes = (minutes < 10) ? ("0" + String(minutes)) : String(minutes);
	
	return {seconds: strSeconds, minutes: strMinutes};
};


this.start();

Votes

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