Flash Analog Clock

This tutorial will teach you how to create an Analog Clock in Flash MX 2004. The free download .fla file is also included at the end of the tutorial. Please note: 1. You need to have Flash Player 7.0 installed to view the Flash animation. 2. Flash MX 2004 or higher must be installed in your system to download the .fla file. Are you ready? Just follow the steps below.

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.

Download the .fla file

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!