Create an Attractive Digital Clock in Flash

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

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

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:

You should have something like this:

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.

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:

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

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.

Step 6: ActionScript Time

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

Step 7: Required Classes

This time we’ll need just a few classes.

package 
{
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.TimerEvent;

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.

public class Main extends MovieClip
{

Step 9: Variables

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

/* A Date object used to get the day, and time */

var date:Date = new Date();

var day:int = date.day; //The day

/* The time */

var hours:int = date.hours;
var minutes:* = date.minutes;
var seconds:* = date.seconds;

/* A Timer object that will handle the updates, executed every second */

var timer:Timer = new Timer(1000);

Step 10: Main Function

This function is executed when the class is loaded.

public function Main():void
{
	/* Prevents lag, since the timer is not executed until 1 second after starting the movie */

	updateClock();
			
	/* Hides all days text, these functions are explained later */

	hideObjects(mon, monGlow, tue, tueGlow, wed, wedGlow, thu, thuGlow, fri, friGlow, sat, satGlow, sun, sunGlow);
			
	/* Unhides the current day */
			
	showCurrentDay();
			
	/* Starts the timer */

	timer.addEventListener(TimerEvent.TIMER, startClock);
	timer.start();
}

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.

private function updateClock():void
{
	/* AM PM, if hours is greater than 11, that is 12 and 12 is PM */

	if (hours>11)
	{
		ampm.text="PM";
		ampmGlow.text="PM";
	}
	else
	{
		ampm.text="AM";
		ampmGlow.text="AM";
	}

	/* Avoids 24 hour clock, if hours is greater than 12 (like 13) substracts 12 (so it is 1) */

	if (hours>12)
	{
		hours-=12;
	}

	/* If number is just one digit, add a 0 to the left */

	if (String(minutes).length<2)
	{
		minutes="0"+minutes;
	}

	if (String(seconds).length<2)
	{
		seconds="0"+seconds;
	}

	/* Set TextFields */

	clock.text=hours+":"+minutes+":"+seconds;
	clockGlow.text=hours+":"+minutes+":"+seconds;
}

Step 12: Hide Function

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

private function hideObjects(...targets)
{
	for (var i:int = 0; i < targets.length; i++)
	{
		targets[i].visible=false;
	}
}

Step 13: Current Day

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

private function showCurrentDay():void
{
	switch (day)
	{
		case 0 :
			sun.visible=true;
			sunGlow.visible=true;
			break;
		case 1 :
			mon.visible=true;
			monGlow.visible=true;
			break;
		case 2 :
			tue.visible=true;
			tueGlow.visible=true;
			break;
		case 3 :
			wed.visible=true;
			wedGlow.visible=true;
			break;
		case 4 :
			thu.visible=true;
			thuGlow.visible=true;
			break;
		case 5 :
			fri.visible=true;
			friGlow.visible=true;
			break;
		case 6 :
			sat.visible=true;
			satGlow.visible=true;
			break;
		default :
			trace("Week day error");
	}
}       

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.

private function startClock(e:TimerEvent):void
{
	date = new Date();

	hours=date.hours;
	minutes=date.minutes;
	seconds=date.seconds;
			
	updateClock();
}

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.

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.