How to Create an Analog Clock in Flash

Save

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)
    GO

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

    sec._rotation=seconds
    GO
    min._rotation=minutes
    GO
    hour._rotation=hours;

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

References

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

Comments

Resources

You May Also Like

  • What Is an 8 Day Clock?

    Before batteries and household electricity were used to power clocks, most clocks had to be wound by hand to keep operating. Eight-day...

  • HPM Seven-Day Digital Timer Instructions

    If you would like an appliance to automatically turn on or off at a specific time, you can use a timer. For...

  • How to Draw an Analog Clock Face

    An analog clock face starts with a freehand or compass-drawn circle. Create a clock face with this free video tutorial presented by...

Related Searches

Check It Out

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

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