An Analogue Clock with a clock face made in
Flash MX 2004.
Note: This clock is taking the time off your
local computer and displaying it on the web page through Flash. This is not
perfect as I don't know if your clock is correct. There are
other ways of finding out the time but they are much more complicated and
not necessarily more accurate. So I have gone for a very simple method of
finding out the time. It works and is not too difficult to
create.
Cross Ref: If you would like to create an
Digital Clock: Digital
Clock Tutorial
Digital clocks are much easier to make in Flash because
you haven't all the work of creating the face and hands.
Cross Ref: If you would like to display the date: Date
Tutorial
Step One: Setting Up the Flash Document
Open a new: Flash Movie
Go to: Modify > Document (Ctrl
J)
Set the size to: 150 x 150 pixels
If you wish select a: Background Colour
Click: OK
Step Two: Creating the Clock's Second
Hand
Go to: Insert > New Symbol
Type the Name: Second Hand MC
Select behavior: Movie Clip
Click: OK
If the Tools panel is closed, open it: Window > Tools
Select the Line tool:
Whist holding the Shift Key down drag out a small: Vertical
Line
If the Property Inspector is closed, open it: Window > Properties(Ctrl
F3)
Set the line colour to: Red
Set the line width to: 1
The Line width is not set in the
width box but in the Line attribute area.
Set the X value to: 0
Set the line height to: 57
Set the Y value to: -57
Your red Second Hand should be sitting directly above the centre cross:
Second Hand.
Step Three: Creating the Clock's Minute
Hand
Go to: Insert > New Symbol
Type the Name: Minute Hand MC
Select behavior: Movie Clip
Click: OK
Select the Line tool:
Whist holding the Shift Key down drag out a small: Vertical
Line
Set the line colour to: Black
Set the line width to: 3
Set the X value to: 0
Set the line height to: 40
Set the Y value to: -40
Your Minute Hand should be sitting directly above the centre cross:
Minute Hand settings.
Step Four: Creating the Clock's Hour
Hand
Go to: Insert > New Symbol
Type the Name: Hour Hand MC
Select behavior: Movie Clip
Click: OK
Select the Line tool:
Whist holding the Shift Key down drag out a small: Vertical
Line
Set the line colour to: Black
Set the line width to: 5
Set the X value to: 0
Set the line height to: 30
Set the Y value to: -30
Your Minute Hand should be sitting directly above the centre cross:
Hour Hand settings.
Note: In your Library you should now have three Symbols: Window
> Library(F11)
Three Movie Clips in the Library.
Step Five: Creating the Clock's Face
Go to: Insert > New Symbol
Type the Name: Clock Face
Select behavior: Graphic
Click: OK
You need to use the Oval tool: and
other drawing and text tools to create a clock face. What the clock face
looks like is up to your own artistic ideas
and could be something as simple as a circle or an elaborate design.
The clock face that I drew.
A simpler clock face.
Note: If you wish you could create the Clock face in another
program such as PhotoShop (or
Fireworks or Illustrator or Freehand or CorelDraw etc). You would
then need to import or paste the clock face image into the above Graphic
Symbol.
At this stage do not get too engrossed with the look of the clock face as
it is easy to change the design latter. Just go to the library (F11) and
double click on the Clock Face Symbol.
Remember that your Movie size is 150 x 150. So the clock face should not
be bigger than this. If it is bigger you will need to enlarge the size of
your Movie: : Modify > Document (Ctrl
J)
When you have finished drawing return to the Selection
Tool:
When you have finished creating your design you will need
to make sure that it is centred in the middle of the Stage. TO do this select
all objects either with the Selection Tool or: Edit > Select All(Ctrl
A)
Group all the objects: Modify > Group(Ctrl G)
If the Align
Panel is closed, open it: Window > Design Panels > Align(Ctrl
K)
In the Align Panel select the Align to Stage option:
Click on Align Horizontal Center:
Click on Align Vertical Centre:
The central cross should now be right in the middle of your clock face:
The cross in the centre shows that the face is centred correctly.This
cross is only a guide and does not show up in the final Movie.
Step
Six: Setting up the Clock
It is now time to assemble all of these different clock parts
and put them altogether so that we can create a working clock:
Go to: Insert > New Symbol
Type the Name: Clock MC
Select behavior: Movie Clip
Click: OK
In the Timeline re-name Layer 1 to: Face
In the Timeline right click (Mac: Ctrl click) on frame 2 and
select: Insert Frame
Your Timeline has 2 frames.
Note: We will later use these two frames
to create a loop. It is easier to create the double frame now as subsequent
Layers will automatically have two frames.
If the Library is closed, open it: Window > Library(F11)
From the Library drag out the: Clock Face
If the Align Panel is closed, open it: Window > Design
Panels > Align(Ctrl K)
In the Align Panel select the Align to Stage option:
Click on Align Horizontal Center:
Click on Align Vertical Centre:
Note: Your
clock face should now be in the centre of the Stage.
The Hour Hand
In the Timeline create a new layer by clicking on the Insert
Layer button:
Re-name this Layer to: Hour Hand
Select Frame 1 of the: Hour Hand
Layer
Drag from the Library the: Hour Hand MC
In the Property Inspector give the Hour Hand
MC an Instance Name: myHourHand
Instance Name: myHourHand
With the Hour Hand MC still selected go to the Align
Panel and click Align Horizontal Center:
Then click Align Bottom Edge:
The Hour Hand sits just above the centre cross.
The Minute Hand
In the Timeline create a new layer by clicking on the Insert
Layer button:
Re-name this Layer to: Minute Hand
Select Frame 1 of the: Minute Hand
Layer
Drag from the Library the: Minute Hand MC
In the Property Inspector give the Hour Hand MC an Instance
Name: myMinuteHand
In the Align Panel click Align Horizontal Center:
Then click Align Bottom Edge:
The tip of the Minute Hand is just visible below the 12.
The Second Hand
In the Timeline create a new layer by clicking on the Insert
Layer button:
Re-name this Layer to: Second Hand
Select Frame 1 of the: Second Hand
Layer
Drag from the Library the: Second Hand
MC
In the Property Inspector give the Second Hand MC an Instance
Name: mySecondHand
In the Align Panel click Align Horizontal Center:
Then click Align Bottom Edge:
The Second Hand sits on top of the other hands.
Note the
order of your Layers.
The ActionScript Now for the fun part. It is at this stage that we make the clock tick
and bingo we have a working clock:
In the Timeline create a new layer by clicking on the Insert
Layer button:
Re-name this Layer to: Actions
Select Frame 1 of the: Actions
Layer and place the following ActionScript. You may leave out
the Gray Comments if you wish:
// Gets the date and time from the local computer
myTime = new Date();
// Gets the seconds as a number var seconds = myTime.getSeconds();
/* Uses the above number
to rotate the second hand. The multiplication by 6 is because there
are 60 seconds in a minute but 360° in a circle
ie: 6x60=360 */
mySecondHand._rotation = seconds*6;
//As above but for the Minute hand var minutes = myTime.getMinutes();
myMinuteHand._rotation = minutes*6;
/* As above but for the hour hand. The equation is different because
there are 24 hours in a day. ie: 24x30=720. In other words the hour hand
rotates twice in a day. 360x2=720. */ var hours = myTime.getHours();
myHourHand._rotation = hours*30;
/* The above equation makes
the Hour hand point to the exact hour. This is ok for the minute and
second hands but not the hour hand. At half past you want the hour
hand between the two clock digits. At ten to the hour you want the
hour hand to be nearly at the next number on the clock face. So the
equation below adds a small amount of rotation depending on how many
minutes have past the hour: 1/2° every minute. */
myHourHand._rotation += (minutes/2);
Right click on Frame 2 of the: Actions Layer and
select:
Insert Blank Keyframe(F7)
Place the following Actions on Frame
2:
gotoAndPlay(1);
This script simply sets up a loop so that the Movie goes back to Frame
1 and re-checks the time. As there is no stop in either frame 1 or frame 2 this
loop is continuous. The Clock MC is now complete.
Your Timeline
should now have two small 'a's in the Actions layer.
Step Seven: Testing the Clock
The clock is not actually on the Main Stage but in the Library
so although all the work is done it will not be visible. The last step is to
place the clock onto the Main Stage and check that it works.
If the Edit Bar is not open, open it: Window > Tool
Bars > Edit Bar(Flash MX04 only)
Return to the Main Stage by clicking on the Scene 1 Tab in
the Edit Bar:
From the Library drag out the: Clock MC
Position the clock in the centre of the Stage. If you wish
use the Align Panel to do this: Centre Clock
Save your file: File > Save(Ctrl S)
Test the Movie: Control > Test Movie(Ctrl + Enter)
That's it!! Your clock should now be ticking along nicely!
Free
Flash Tutorial 
Example:
Download the Flash file
Int 031a
and
other drawing and text tools to create a clock face. What the clock face
looks like is up to your own artistic ideas
and could be something as simple as a circle or an elaborate design.
Webwasp Community: