Create Analog Clock - SWiSHMax Tutorials

Home | Help Forums | Web Design Tutorials | Free Swishmax Downloads | All Downloads



Company
Home
Nework Details
Tutorials
SWiSH 2
SWiSHMax
Flash MX
PHP & MySQL
HTML / JScript
Adobe Photoshop
Corel Draw
Gimp
Miscellaneous
Downloads
Templates
Plugins
Fonts
Wallpapers
Free Images
Scripts and Codes
Products
E-Books
SWiSH BB
SWiSH Templates

SWiSH-DB Newsletter

Subscribe to our newsletter : GO

Partners / Affiliates

Swish Templates

SWiSH Climax

GimpTalk

Idea Designs

Sposatoettore

Try Acai Berry Diet

Download Free Ringtones

Swishzone

Manage your site with Flax Article Content Management System

After giving it some consideration and thought after the clocks in my house went forward an hour, I wondered how to create an analogue clock that would work on a website....

I can see now, but many of you don't dry run your code on a piece of paper like me and many other SWiSH and Flash mates I know!

I know it sounds sad but it can save you hours of reworking if you already know the outcome of your actions...if we only had something to rewind the time (another project of mine)

Here's where I come in....
I spent quite a long time without looking through any of the forums mentioned here for a solution to my very own problem, how do I get the clocks' hands to rotate? Also through the need for perfection of my project I also answered another question while at it...how do I get it to imitate the "real" time (so that it reflects the time displayed by Windows)?
(1)
First of all I knew there would be a problem rotating the hands since the _rotate property rotates an object around a centre point (unless specified). To combat this I drew a black line of appropriate length for the clock (from centre to near the edge) horizontally, called it secondhand and then copy pasted it so that there was another next to it. I then moved the line (zooming helps) EXACTLY to the LEFT of the first line and joined them up end to end. I seleted the one on the left and selected NO LINE from the properties menu, bascially creating a vector without any body. Then I grouped them as a shape and then a SPRITE whose diameter was now the diameter of the clock. This eliminated the problem of a central rotation point and allowed me to continue.
(2)
Getting the time was relatively easy, using the code:

QUOTE

onFrame (1) {
theDate = new Date();
}
onFrame (1) {
hours = theDate.getHours();
minutes = theDate.getMinutes();
seconds = theDate.getSeconds();
if (minutes < 10) {
minutes = "0" + minutes;
}
}
onFrame (2) {
gotoSceneAndPlay("<current scene>",1);
}

(the hours and minutes are in there for you to complete later on your own)
The "minutes < 10" bit allows you to also put it in a dynamic box to check your project works and also goes well with a digital clock, eliminating the space it usually leaves when displaying the minutes (frustrating!)

This code goes into the first frame of your scene conataining your clock.
I have left the other code hours and minutes for you to work on yourself <see later on in the project>
Now insert this code into the first frame of your sprite (called "secondhand" here) NOTE- you need to set your movie/sprite at 1 fps for this code to work:

QUOTE

// this sorts the 90° problem when you created your sprtie object horizontally
onFrame (1) {
_root.secondhand._rotation = -90;
}
// this sorts the initial secondhand position according to the current time
onFrame (2) {
inithandpos = (_root.seconds * 6);
_root.secondhand._rotation = (-90 + inithandpos);
}
// this tell the sprite to rotate by one increment of a second
onFrame (3) {
_root.secondhand._rotation += 6;
}
// this repeats the increment without messing up the time base
onFrame (4) {
gotoAndPlay(3);
trace(_root.seconds)
}
// end trace is so that you can follow its progress as the hand moves round

That should get you your very own second hand for a clock!
Of course I finished my very own clock, but this wouldn't be much of a tutorial if I didn't leave you something to do. So I left the uncomplete file there for you to finish witht the hour and minute hands to be implemented using the methods above!
Any questions on any of the code/design can come to one of the forums, earmark it VOLODORS-CLOCK so I can find it fast and get back to you. I'm on this thing 3 times a day for more than 5 hours total so I'll give you a garunteed reply within 24 hours.

download example
http://www.swish-db.com/forum/index.php?showtopic=9457