Smooth Analog Clock in Flash

You must have seen a lot of Analog Clock in Flash, but they all would be having Jerks in the Needles (i.e. Seconds, Minutes or Hours), but I’m going to tell you some ActionScripts, by using these you can make analog Clock in Flash and all needles would be moving smoothly without any Jerk. I’m also including FLA source files so you may have idea how I made it.

Note:

You can also visit Digital Date and Clock to make Digital Clock in Flash.

[Download Source FLA File]

1. First of all we have to prepare a Dial for Analog Clock. You can use any Designing tool to make it. I’m going to use Photoshop and prepared this Dial for our Analog Clock:

2. Now open Flash and take new file of size 500×500 px and Import this Dial to Stage (By running the command, File >> Import >> Import to Stage or simple press Ctrl+R and select this JPG file).

3. Now we have to prepare 3 Needles, i.e. 1 for Seconds (a bit larger but thinner), then 1 for Minutes (smaller than Seconds but thicker) and then 1 for Hours, (smaller than seconds and minutes, but thicker). So I’m going to take 3 Movie Clips for these 3 needles. Run the command, Insert >> New Symbol and when box came, write any name and select Movie Clip from Type list box and hit ok:

4. Draw a needle for Seconds of your own desire, I’ve made this:

I’ve made this circle only for alignment, I’ll remove this later.

5. Now again take a new Symbol (Insert >> New Symbol), for Minutes Needle and make Minutes Needle:

I’ve made this needle:

6. In the last take another Symbol (Insert >> New Symbol) for Hours Needle:

I’ve made this needle:

7. Now we have to put these three needles in another Movie Clip, take another New Symbol, by running the command, Insert >> New Symbol and put these three needles from Library into newly taken symbol:

After putting all three needles in it, first of all select each needle one by one and give it an instance name by selecting it and going to Property Panel and write name in Instance Name box, I’ve given name to Seconds needle as ndlsc, Minute needle as ndlmn and Hours needle as ndlhr.

Now adjust all these three needles so that the circles should come over each other. Seconds needle must be on top, then Minutes Needle and then Hours Needle in the last:

8. Its time to give ActionScript on it now. While remaining inside all-needle Movie Clip, Take new Layer and click on the first frame and hit F9 to bring Action Panel and write these codes inside it:

abc = new Date();

a = abc.getHours();

b = abc.getMinutes();

c = abc.getSeconds();

d = abc.getMilliseconds();

e = a + (b/60) + (c/3600) + (d/3600000);

f = b + (c/60) + (d/60000);

g = c + (d/1000);

setProperty (ndlhr, _rotation, e*30);

setProperty (ndlmn, _rotation, f*6);

setProperty (ndlsc, _rotation, g*6);

9. Click on the Second Frame and hit F6 to make Keyframe and write these Actions in the ActionScript Panel:

gotoAndPlay(1);

10. Now come back to Scene again and paste this movie clicp (all-needle) on the stage by taking new layer over all other layers. Adjust the Red Circle over the gray circle of the Dial Image, so that needle should be centered. After adjusting it you can remove Red circle by going inside all movie clips one by one. Now press Ctrl+Enter and you will get this animaiton, Enjoy!!!!

[Download Source FLA File]

You can also visit Digital Date and Clock to make Digital Clock in Flash.

5 Responses to “Smooth Analog Clock in Flash”
  1. Alissa Scott

    Thanks for sharing the Tut! Very cool. Bookmarked for laterz.

    Is it possible to add chimes? That would be so cool. How would you do that?

  2. James

    What makes the hand’s shadows? How do they move in relation to the hands so they look realistic…like in the flash file above?

    Great tutorial.

  3. Diego

    That´s wrong. The minute’s needle is moving faster. Could you correct this please?

  4. Brett Widmann

    Very nice tutorial! Thanks for sharing.

  5. Nadia

    Nice explanation for newbies to Flash

    Great work!

Leave a Reply

*