Creating analog clock in FlashMX 2004

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

flash timeline

Import your background design into your interface Layer if you created it in photohop or fireworks.
Draw a line in the sec Layer. Choose the line and press F8 to convert it to Symbol. Name this Symbol sec_mc, choose Movie clip behavior and select the bottom center square in registration. Same like the below Symbol window shows.

movie clip

Click on OK.

In the sec Layer, place sec_mc excatly at the center of the clock background. Name it "sec" in instance text box of the property window. This will be the seconds needle.
From the library, drag sec_mc into the min Layer. Press (Ctrl+L) to open Library window. Reduce approx. by 3pix height of sec_mc. and place it exactly at the center of the clock background design. Name it "min" in instance text box in property window.
This will be the minutes needle.
Drag sec_mc into your hour Layer from library. Reduce its height, by 6pix.
Place it exactly at the center of the clock background design. Name it "hour" in instance text box in property window. This will be the Hours needle.
Then you can copy and paste the code given below to the 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

Then go to the second frame of each layer and press F5 to insert new frame.

You are done! The clock is ready to start now! Press Ctrl+Enter to view the clock.

Back to Tutorials Home Page

Maa Design Services
MAA offers high-quality website design services at affordable prices and fast turnaround time. We provide ready-made & custom website design solutions to global clients from London, UK. Take a look at our client testimonials from clients all over the world. Contact us today to get started on your website!

Client Testimonials

"If you want the QUICKEST service, the BEST web design, Logo and the FRIENDLIEST communication, DezineHub is the ONLY business to turn to. They far exceeded my expectations! I give them the HIGHEST recommendation! "
Dilip, Chemmen Ltd UK

Maa Web Design
-Brochure Website
-E-Commerce Website
-Flash Website more>