Advertisement
  1. Code
  2. ActionScript
Code

Create an Attractive Digital Clock in Flash

by
Difficulty:IntermediateLanguages:

ActionScript 3.0 is a very powerful language, capable of creating anything from simple and light utilities to full-featured desktop applications.

In this tut, we're going to create something simple, a basic and good looking digital clock in Flash.


Step 1: Brief Overview

Using the Date object and its properties, we'll get the day, hours, minutes and seconds and use TextFields on stage to display the obtained data. The updates will be handled by a Timer.


Step 2: Starting

Open Flash and create a new Flash File (ActionScript 3).

flash clock

Set the stage size to 600x300 and add a blue to black radial background (#003030, #000000).

”flash

Step 3: Glowing Text

We're going to add two Dynamic Textfields for every element, we'll place the ones with the glow first to get the lines effect.

Select the Text Tool and create a 342x104px textfield, use the color #00FAFF, click the Center option in the Paragraph panel and choose a font you like. I used DS-Digital italic, 100pt.

Name it "clockGlow", add some numbers, center it to use it as a guide and add a Glow Filter with the following values:

flash clock

You should have something like this:

flash clock

Repeat the process with a smaller font size for the days and the am/pm indicator. The instance names are the name of the day plus the "Glow" word, this will be "monGlow", "tueGlow" and so on, "ampmGlow" for the AM/PM indicator.

flash clock

Step 4: Lines Screen

We'll draw a series of lines that will cover the stage to get the LCD screen effect.

Select the Rectangle Tool and create a 600x1px black line, duplicate it (Cmd+D) and place it below leaving a 1px space.

Repeat the process until it matches the stage height. You will end with something like this:

flash clock

Convert the lines screen to a group (Cmd+G) and center it in the stage.

flash clock

Step 5: Sharp Text

As you can see in the last image, the line effect is all over the text. We only want it to apply to the glow, so let's add a new layer of text.

As this text is exactly the same we created before (without the Glow Filter) we can just copy the textfields and remove the Glow Filter. We'll also remove the "Glow" word from the instance names.

This will complete the interface.

flash clock

Step 6: ActionScript Time

Create a new ActionScript Document and save it as "Main.as".

flash clock

Step 7: Required Classes

This time we'll need just a few classes.


Step 8: Extending the Class

We're going to use MovieClip specific methods and properties so we extend using the MovieClip Class. Extending using the Sprite Class won't work.


Step 9: Variables

These are the variables we will use, explained in the comments.


Step 10: Main Function

This function is executed when the class is loaded.


Step 11: Clock Function

This is the function that handles the Clock. It is called once in the main function, then every second in the startClock function.


Step 12: Hide Function

This is a function to make objects invisible, we use the ...rest parameter to pass any number of parameters.


Step 13: Current Day

This Switch statement will check the day variable to get the day and unhide it.


Step 14: The Start Function

This function updates the Date object to get the actual date and calls the updateClock function to update the textfields.


Step 15: Document Class

Go back to the .Fla file and in the Properties Panel add "Main" in the Class field to make this the Document Class.

flash clock

Conclusion

As you can see, it's pretty easy to create and modify this Digital Clock. Experiment with the Date Class, change the interface and maybe add more functionality!

Thanks for reading.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.