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

6.7K

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

correct answers 1 Correct answer

Adobe Community Professional , 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:JavaScript code:var that = this;this.initialMinutes = 0.2; // set here to 45this.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)}...

Likes

Translate

Translate
Adobe Community Professional ,
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.


Multimedia Developer, Character Creator, and Animator.

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
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???

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 ,
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

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

Copy link to clipboard

Copied

woww.thanks alot.its exactly what i need

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

Copy link to clipboard

Copied

You're welcome!

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
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!

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
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!

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 ,
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

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
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.

 

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

Copy link to clipboard

Copied

Hi.

 

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

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

Copy link to clipboard

Copied

LATEST

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();

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