Simple Analog clock

Explorer ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

Hi - I wonder if someone can help me. I am trying to create a simple analog clock (with real time) for a static scene that I am creating. I am totally new to Adobe Animate (Canvas) so I have no clue how to write code for a real analog clocks that appears in a scene. I have searched the Internet for many weeks now to no avail. Please help Many thanks.

Views

383

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 3 Correct answers

Participant , Mar 12, 2021 Mar 12, 2021

Likes

Translate

Translate
Adobe Community Professional , Mar 14, 2021 Mar 14, 2021
Hi. Here is a sample of an analog clock for Adobe Animate using the HTML5 Canvas document. Preview: Try it: http://bit.ly/3bNp4qi Javscript / JS code: var root = this; root.main = function() { document.body.style.backgroundColor = lib.properties.color; root.stop(); root.analogClock = new root.AnalogClock(root.clock.seconds, root.clock.minutes, root.clock.hours); }; root.AnalogClock = function(secondsHand, minutesHand, hoursHand, stop) { this.secondsHand = secondsHand; this.minute...

Likes

Translate

Translate
Explorer , Mar 15, 2021 Mar 15, 2021
Good afternoon JC - just wanted to let you know your're a diamond! I simply upgraded my Adobe Animate to 2021 and your file opened (and is working) like a charm!!! Thanks you so much for your help have a great day!

Likes

Translate

Translate
Participant ,
Mar 12, 2021 Mar 12, 2021

Copy link to clipboard

Copied

https://www.w3schools.com/graphics/canvas_clock.asp

 

 

- Vlad: UX and graphic design, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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 ,
Mar 13, 2021 Mar 13, 2021

Copy link to clipboard

Copied

Hi Vladin M Mitove- many thanks for your reply. I am new to this so I am not sure what I must do with the information you have sent me and how it relates to Adobe Animate 2020?

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 ,
Mar 14, 2021 Mar 14, 2021

Copy link to clipboard

Copied

Hi.

 

Here is a sample of an analog clock for Adobe Animate using the HTML5 Canvas document.

 

Preview:

adobe_animate_html5_canvas_analog_clock.gif

 

Try it:

http://bit.ly/3bNp4qi

 

Javscript / JS code:

var root = this;

root.main = function()
{
	document.body.style.backgroundColor = lib.properties.color;
	root.stop();
	root.analogClock = new root.AnalogClock(root.clock.seconds, root.clock.minutes, root.clock.hours);
};

root.AnalogClock = function(secondsHand, minutesHand, hoursHand, stop)
{
	this.secondsHand = secondsHand;
	this.minutesHand = minutesHand;
	this.hoursHand = hoursHand;
	
	if (!stop)
		this.start();
};

root.AnalogClock.prototype.start = function()
{
	this.update();
	this.stop();
	this.interval = setInterval(this.update.bind(this), 1000);
};

root.AnalogClock.prototype.stop = function()
{
	clearInterval(this.interval);
};

root.AnalogClock.prototype.update = function()
{
	var now = new Date();
	
    // seconds
	this.second = now.getSeconds();
    this.second = (this.second * Math.PI / 30);
	this.secondsHand.rotation = this.second * 180 / Math.PI;
	
	// minutes
	this.minute = now.getMinutes();
    this.minute = (this.minute * Math.PI / 30) + (this.second * Math.PI / (30 * 60));
	this.minutesHand.rotation = this.minute * 180 / Math.PI;
	
	// hours
	this.hour = now.getHours();
    this.hour = this.hour % 12;
    this.hour = (this.hour * Math.PI / 6) + (this.minute * Math.PI / (6 * 60)) + (this.second * Math.PI / (360 * 60));
	this.hoursHand.rotation = this.hour * 180 / Math.PI;
};

root.main();

 

Source / files / download:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/analog_clock

 

Please let us know if you need something else.

 

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 ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

Good morning JC - thank you so much for your "SPOT ON" resolve. It's exactly what I need!!! However when I try to open with Adobe Animate 2020 I get IMAGE 1. When I try to test movie from Adobe Animate 2020 I get image 2...what am I doing wrong 😩

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 ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

Hi!

 

You're welcome!

 

The first message is telling you that my FLA has been created in a newer version of Animate. You can just click OK.

 

The second message is shown because I set the FLA to output to a folder called dist. You can either create a folder called dist where your FLA is located or you can just go to the Publish Settings (Ctrl/Cmd + Shift + F12) and change the output to index or another name/path of your choice.

image.png

 

Please let me know if you are still unable to publish the document.

 

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 ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

Good afternoon JC - just wanted to let you know your're a diamond! I simply upgraded my Adobe Animate to 2021 and your file opened (and is working) like a charm!!! Thanks you so much for your help have a great day!

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 ,
Mar 15, 2021 Mar 15, 2021

Copy link to clipboard

Copied

Awesome!

 

You're welcome and have a great day you too!

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
New Here ,
Oct 13, 2021 Oct 13, 2021

Copy link to clipboard

Copied

Hi JC,

I am trying to animate an analog watch also. I have used your code you suggested to Kaye above though does not animate when publishing.

Is there any way I can send you the design in An so you can verify that I have it all assigned correctly.

 

Jas

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 ,
Oct 14, 2021 Oct 14, 2021

Copy link to clipboard

Copied

LATEST

Hi.

 

Sure. Please send the file to joaocesar.design@gmail.com or via private message.

 

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