Use the video as a complement to the tutorial. If you have any problems with the tutorial, you will find out how it was done in the video.
This tutorial is not just an analog clock animation, but you learn to use some simple Actionscript code by using the Time Function in Flash new Date() to make the clock work.
After designing the clock and hands, and aligning those hands, you open the actions window to add code that will rotate the hands according to the current date on your computer.
Files:
Video:
How to animate an analog clock with Flash
Design a face for your clock, something like you see below. Then make that a movie clip and place it at the center of the document. In my case, it’s X: 250 and Y: 200. Make sure you make the movie clip with center registration.
Now for the hands. Just draw a line and convert it into a movie clip. Name it “hands“. 
You will need to edit the movie clip of the original hand and change its center point to a location a little bit up from the bottom of the clock.
Now make 3 copies of the original instance “hands” and scale them to different sizes just like a clock’s hands. Give an instance name to the largest one “sec_mc“, the medium one “min_mc“, and the shortest one “hour_mc“.
Now place them all to the exact center of your dial. Again I use X: 250 and Y: 200 to each of them. When I change the positions by X and Y, I get the pivot registration point to the center of the dial. That point will be center when the hands rotate.
Now add a new layer for the actionscript code. Write these actions:
time = new Date();
hours = time.getHours();
min = time.getMinutes();
sec = time.getSeconds();
hour_mc._rotation = hours;
min_mc._rotation = min;
sec_mc._rotation = sec;
In the codes, first we set up a handler “new Date()“. With that, we get hours, minutes and seconds from the system. Then we set the rotation of our hand instances with those values.
Now if you test the movie, you won’t get the time going, because the times are not in degrees. We need to convert them to degrees first. So these codes are needed:
hours = hours*30;
min = min*6;
sec = sec*6;
Here we have some mathematical terms. In a clock, there are total 12 hours. But a circle completes with 360 degrees. So if we divide total circle by total hour we get a constant 30. 360/12=30. So we multiply the hours with 30. In the same way, we have 60 minutes and 60 seconds. So for the minutes and seconds, the constant is 6. 360/60 = 6. So we multiply the seconds and minutes by 6.
Still we have some problems. If we are at 12:30, our hour hand will still be in 12. So to fix this, we need this code:
hours = hours + (min/60);
So here we divide the minutes by 60 and add that to hours. So now the hour hand shows us every minute. Below is the final code in the actions window.
Now you can decorate the face of the clock with numbers or lines for the time, and then test your movie. If you have followed the tutorial, you should get correct seconds, minutes and hours in the animation.
Add this page to your Website, Blog, or Forum. Let your friends know about this tutorial. Just copy and paste the html code below:
<a href= "https://www.tutorialboneyard.com/flash-clock-animation/" target="_blank">Animated Clock</a>
Share, Tweet, or give a thumbs up!
Related Posts
