Macromedia Flash - Create analog clock in Flash

This tutorial will show you how to create a real working clock using Flash effects.

1. Create a clock to your liking. You can draw it in Photoshop and import it into flash or paint directly on the flash. You can get the following clock:

Macromedia Flash - Create analog clock in Flash Picture 1

2. Create 5 layers on the Timeline section, their names respectively: sec (seconds), min (minutes), hour (hour) and actions . You can see the image below as a Timeline template.

Macromedia Flash - Create analog clock in Flash Picture 2

3. Insert the background clock design that you have created

4. Draw a vertical line in the sec layer. Select the line and press F8 to convert it to Symbol. Name this Symbol sec_mc , select Movie clip and select the bottom middle box in the Registration section.

5. Click OK

6. In the sec layer, place sec_mc in the position corresponding to the clock background image you have designed. Name the layer sec in the Instance section of the Properties properties window to ' sec '.

7. Drag sec_mc from the Library window to layer min . If the Library window does not open, press Ctrl + L. Reduce the length of sec_mc in this section (to correspond to the minute hand). Place it in the position corresponding to the clock background image. Name this layer ' min ' in the Instance section of the properties window.

8. Continue dragging sec_mc to the layer hour from the opened Library window. Reduce the length of the needle again to correspond to the hour hand. Put it in place relative to the clock background image. Name it ' hour ' in the Instance box.

9. Select layer actions , go to Action Script ( F9 ) and enter the following code:

time = new Date (); // time object
seconds = time.getSeconds ()
minutes = time.getMinutes ()
hours = time.getHours ()

hours = hours + (minutes / 60);

seconds = seconds * 6; // calculation seconds
minutes = minutes * 6; // calculated minutes
hours = hours * 30; // calculation hours

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

10. Go to the second frame of each layer and press F5 key.

If your clock does not work, try pressing Ctrl + Enter . In addition, you can make your own needles so that they don't necessarily have to take needles from sec_mc.

Download the source file here .