How to Create an Analog Clock in Flash


A clock added to a website gives it a more professional look. In order to give accurate time, the system clock needs to be correct as this is what will be pulled and reflected on the flash clock. Flash 8 retrieves the system clock and displays it on a Flash application using ActionScript code. Very few lines of code are needed to make an analog clock. A clock design can be created using the drawing tools or by importing it from another application like Photoshop.

Analog Clock Design

  • Select “New” to start a new Flash page.

  • Right click on right side of the time line located above the stage and select “Insert layer” from the drop-down menu. A new layer labeled “Layer 2” appears.

  • Double click on the first layer and rename it “Actions.” This is the layer where we are going to insert our ActionScript code that will activate the clock.

  • Double click on “Layer 2” and rename it “Interface.”

  • Insert another three layers and name them \"Seconds,\" \"Minutes\" and \"Hours.\" Use the procedure above to create and rename the new layers.

  • Click on frame 1 of the “Interface\" layer and draw the clock interface. This is the shape of the clock. Alternatively, you can copy the background design onto this frame if you have created it elsewhere.

  • Click on frame 1 of the “Seconds\" layer and draw a straight line.

  • Select the line and press F8. Select “Movie Clip” among the options that appear and name it “Seconds” under the “Name” field. Select the bottom center square under the “Registration” section.

  • Press “OK.”

  • Select the line (now “Seconds”) and position it at the center of the clock design.

  • Name “Seconds” to “Sec_mc” under the instance text box located below the stage under the section “Properties.” This is the \"Seconds\" needle.

  • Click on frame 1 of the \"Minutes\" layer.

  • Take “Seconds” out of the Library (Ctrl+L to open the Library) and place it on the clock design. Position it appropriately like the \"Seconds\" needle and reduce it in size, shorter than the \"Seconds\" needle. This is your \"Minutes\" needle.

  • Click on frame 1 of the \"Hours\" layer.

  • Drag the “Seconds” movie clip out of the Library panel. Reduce its size, shorter than the \"Minutes\" needle. This is your \"Hours\" needle.

  • Click on frame 1 of the \"Actions\" layer and press F9.

  • Copy and paste the code below on the page that appears:

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

    hours = hours + (minutes/60)

    seconds = seconds6;
    minutes = minutes
    hours = hours*30;


  • Press \"Ctrl + Enter\" to view the clock.

Related Searches


  • Photo Credit retro alarm clock image by Valentin Mosichev from
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!