Scribd
Upload
551 views

Analog Clock Tutorial

1. Create a background and add 5 layers named interface, sec, min, hour, and actions. 2. Import the background and create symbols for the seconds, minutes, and hours needles. 3. Place the needles in the center of each layer and name them. 4. Copy code to the actions layer that gets the current time and calculates rotations for the needles based on seconds, minutes, and hours.

Uploaded by

api-3723959
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
551 views

Analog Clock Tutorial

1. Create a background and add 5 layers named interface, sec, min, hour, and actions. 2. Import the background and create symbols for the seconds, minutes, and hours needles. 3. Place the needles in the center of each layer and name them. 4. Copy code to the actions layer that gets the current time and calculates rotations for the needles based on seconds, minutes, and hours.

Uploaded by

api-3723959
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 2

STEPS TO FOLLOW

1. Create a background for your clock, You can either draw it in fireworks or photoshop and import it
onto your stage or draw it in flash itself.
2. Add 5 Layers in your Timeline window.
Name them - interface, sec, min, hour and actions. Similar to the Timeline window shown below.

3. Import your clock background design into your interface Layer if you had created it else where.
4. Draw a line in your sec Layer. Select the line and press F8 to convert it to Symbol. Call this Symbol
sec_mc, choose Movie clip behavior and select the bottom center square in registration. Similar to
the Symbol window shown below.

Press OK.

5. In your sec Layer, place sec_mc right at the center of your clock background design. Name it "sec"
in instance text box of your property window. This is going to be your seconds needle.
6. Drag sec_mc into your min Layer from your library. If your library window is not open, press
(Ctrl+L) to open it. Reduce sec_mc's height, may be by 3pix. Place it right at the center of your
clock background design. Name it "min" in instance text box of your property window. This is going
to be your minutes needle.
7. Drag sec_mc into your hour Layer from your library. Reduce its height, may be by 5 to 6pix. Place it
right at the center of your clock background design. Name it "hour" in instance text box of your
property window. This is going to be your Hours needle.
8. Copy and Paste the code given below in your actions window of actions Layer.

time=new Date(); // time object


seconds = time.getSeconds()
minutes = time.getMinutes()
hours = time.getHours()

hours = hours + (minutes/60);

seconds = seconds*6; // calculating seconds


minutes = minutes*6; // calculating minutes
hours = hours*30; // calculating hours

sec._rotation=seconds; // giving rotation property


min._rotation=minutes; // giving rotation property
hour._rotation=hours; // giving rotation property

9. Now go to second frame of each layer and press F5 to insert new frame.
Your clock is ready. Press Ctrl+Enter to view your clock.

You might also like