Animating the hands of a traditional analogue clock raises some new issues in Flash graphics. The hands could be animated using Motion Tween and the Rotation setting in the Properties panel but a more elegant and easier way is possible through ActionScript.
Set the frames per second to 1.
Add a new layer to the Timeline and select it. Draw a vertical line on the stage. Be consistent with your vertical lines in this project, draw them from the top downwards.
Select the line and convert it to a symbol of type Movie Clip with name 'second_hand_mc'.
Select the line, now a movie clip, and press F9 to open the ActionScript window. Add this code:
onClipEvent (enterFrame) {
this._rotation += 6;
}
The code does not need explicit reference to the second_hand_mc object because it is attached directly to it. This approach may not be the best for long-term development of your Flash skills because it may leave code scattered around a project rather than concentrated in one place, the Script layer of the Timeline. The Movie Explorer is a tool (Windows/Other Panels/Movie Explorer) that helps you to track down the pieces of code in a project (not all script, the project may use code in external files).
Press Ctrl/Enter to test the movie. The code says that with each frame in the Timeline the hand object will be rotated 6 degrees. 360/6=60 so the hand moves 1 second on the clock each second
If we were to leave the frames per second at 12 we would have to rotate the hand at 6/12 = 0.5 degrees per frame; at 12 seconds per frame the hand is rotating 12 x 0.5 = 6 degrees. We'll stick at 1 fps where we need a rotation of 6 degrees.
The difference between these two possible arrangements is that a rate of 1 frame per second gives a sudden movement while a rate of 12 frames per second gives much smaller movements of the hand so the effect is much smoother. Experiment!
Add a new layer and call it 'minute_hand'. Draw a line from the same starting position as the second hand but slightly shorter and in a different colour. Select the new line and press F8 to convert it to a symbol of type movie clip with name 'minute_hand_mc'.
We need the minute hand to go through 6 degrees every minute so that it goes through 360 degrees every 60 minutes. At 1 fps the number of degrees the minute hand must move in one second is 6/60 = 1/10. At this speed it rotates 0.1 degrees every second so in 60 seconds it rotates 6 degrees and in 3,600 seconds it rotates 360 degrees.
Press F9 to activate the ActionScript window and add this code:
onClipEvent (enterFrame) {
this._rotation += 1/10;
}
At 1 fps the second hand moves 6 degrees per second so it takes 60 seconds to go through 360 degrees. The minute hand takes 60 times longer than the second hand to rotate through 360 degrees so the speed is 6/60=1/10 degrees per frame.
Add a new layer and call it 'hour_hand'. Draw a line from the same starting position as the second hand but slightly shorter than the minute hand. Select the new line and press F8 to convert it to a symbol of type movie clip with name 'hour_hand_mc'.
We need the hour hand to go through 360 degrees every 12 hours, or 30 degrees every hour. The number of seconds in 12 hours is 60 x 60 x 12 = 43,200 so the number of degrees of rotation per second is 360/43,200 = 1/120. This equates to 0.5 degrees per minute or 30 degrees per hour, which is just right as there are 12 hours on a clock and 12 x 30 = 360.
Presss F9 to activate the ActionScript window and add this code:
onClipEvent (enterFrame) {
this._rotation += 1/120;
}
(1/120 = 360/43,200)
At a standard 12 fps the calculations above need to be divided by 12. Thus the second hand rotates at 6/12 = 0.5, the minute hand at 1/120 and the hour hand at 1/1440. The higher frame speed results in smoother hand movements, most visible on the second hand, but takes up more processor time when it is not really necessary.
Place a circular face over the hands and add numbers at 12, 3, 6 and 9 o'clock - the other numbers may be more tricky to place exactly. Use the rulers to help place the numbers.
The clock hands used the _rotation property and there are other properties available for manipulation. For example, set up a simple animation as follows:
Add a star shape to the left side of the stage (use the square tool in polygon mode and select Star from the Options button.
Select the star's outline and fill, press Ctrl/G to group them and then press F8 to make it into a movie clip called 'star_mc'. Select the star and enter the name 'star_mc' into the Instance Name box underneath the type 'Movie clip' in the Properties box.
Add a new layer for the script and enter the following:
star_mc.onEnterFrame = function() {
this._rotation += 5;
this._x += 10;
};
Test the movie and you should see the star move across the screen and rotate as it goes.
The star does not stop so extend the code as follows:
star_mc.onEnterFrame = function() {
this._rotation += 5;
this._x += 10;
if (this._x > 550) {
this._x = -100;
}
};
The movie now restarts because the if statement tests whether the star has passed vertical pixel 550 and if it has the _x value is set back to -100, just off-screen.