Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks Tutorials
& Resources
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > Digital Clock   

Flash Digital Clock

This tutorial will explain how to create a digital Clock in Flash MX 2004. The 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 must be installed in your system to download the .fla file.

It is very simple to build a digital clock. All you need to do is follow the steps given below.

STEPS TO FOLLOW

  1. Insert 3 layers in your timeline window and name them, "background", "text" and "actions". Similar to the one shown below


  2. Select Frame1 of background layer, Design the framework for your digital clock.
  3. Select frame2 and press F5

  4. Now go to Frame1 of your text layer and insert Dynamic text field in your work area. Select frame2 and press F5

    To insert a Dynamic text field- Select text tool from your tool box,
    Select Dynamic text from Text pop-up menu in the Property inspector.
    Click on your work area wherever you want the digital clock to appear.

  5. Name this Dynamic text field instance as "clock_txt"
  6. Go to frame1 of actions layer. Copy and paste the below mentioned script in the action panel

    time=new Date(); // time object
    var seconds = time.getSeconds()
    var minutes = time.getMinutes()
    var hours = time.getHours()
    if (hours<12) {
    ampm = "AM";
    }
    else{
    ampm = "PM";
    }
    while(hours >12){
    hours = hours - 12;
    }
    if(hours<10)
    {
    hours = "0" + hours;
    }
    if(minutes<10)
    {
    minutes = "0" + minutes;
    }
    if(seconds<10)
    {
    seconds = "0" + seconds;
    }
    clock_txt.text = hours + ":" + minutes + ":" + seconds +" "+ ampm;


  7. Now go to frame2 of actions layer and press F6 to insert a new keyframe.
    Still keeping the play head on the frame2, go to action panel and copy paste the below mentioned script.

    gotoAndPlay(1);

Congratulations!! your digital clock is ready.
Press Ctrl+Enter to view your clock.

Download the .fla file



This resource is part of the Entheos Free Resources section. These resources & tutorials cover Corel Draw Tutorials, CSS Tutorials, Flash Tutorials, Fireworks Tutorials and Effects, Dreamweaver Tutorials, Design Ideas & Inspiration, Photoshop Effects & Web Design Tutorials.

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

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

Join us on Facebook to keep updated with all the latest tutorials and web design freebies from EntheosWeb!


Flash Website Templates

EntheosWeb Blog

Flash Photo Galleries

New Flash CS5 Tutorials

Peeling Sticker Effect in Flash

Cool Lighting Effects in Flash

Static Image Animation in Flash

Checkboard Transition Effect in Flash

Particles in Flash

Using Video in Flash

Creating an Animated Banner in Flash

Featured Template
Template Number: 16474
Type: FULL SITE FLASH 8
Price: $64