Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
Flash & Swish  Home Flash & Swish Swish Tutorials Simple Digital Clock
rss

Simple Digital Clock

Author: Craig Lowe More by this author


In this tutorial all we are going to learn is how to do the digital display.

And not the graphics, if you wish to use the graphics download them here. You will also need to download the Quartz Font from www.fonts101.com.

Ok lets start by opening up Swishmax the movie size i have used is 200 x 150.

Create a dynamic text box name it clock and give it a variable name of time.

Group it as a sprite and name it digital, Now add the following code to the sprite.

onFrame (1,afterPlacedObjectEvents) {
time = new Date();
hours = time.getHours();
minutes = time.getMinutes();
if (hours<10) {
hours = "0"+hours;
}
if (minutes<10) {
minutes = "0"+minutes;
}
time = hours+":"+minutes;
}
onFrame (2,afterPlacedObjectEvents) {
gotoAndPlay(1);
}

This will give you the hours and minutes now displaying in the dynamic text box when the movie is played. To test it press Ctrl+T to view it working in player.

Now lets create the seconds these need to be smaller than the hours and minutes. Again create a dynamic text box and name it seconds and give it a variable name of secs. Group it as a sprite and name it seconds now add the following code to the sprite.

onFrame (1,afterPlacedObjectEvents) {
secs = new Date();
seconds = secs.getSeconds();
if (seconds<10) {
seconds = "0"+seconds;
}
secs = seconds;
}
onFrame (2,afterPlacedObjectEvents) {
gotoAndPlay(1);
}

Place the sprite at the side of the hours and minutes, press Ctrl+T and you will see the digital clock working.

If you wish to add the day and date to your digital clock then follow the next steps. If all you wanted to create was a digital clock then you have completed your task.

Create another dynamic text box name it day group as a sprite and also name it day.

Now add the following code to the sprite.

onEnterFrame() {
CurrentDate = new Date();
CURR_DAY_OF_WEEK = CurrentDate.getDay();
CURR_DAY = CurrentDate.getDate();
CURR_YEAR = CurrentDate.getFullYear();
day.text = WEEKDAY[CURR_DAY_OF_WEEK] + " " + CURR_DAY;}

All that is left to do now is the date, so create a dynamic text box name it date.

Now group the day sprite and the date dynamic text box both together as a sprite.

Name the new sprite as day and add the following code to the sprite.

onEnterFrame() {
WEEKDAY = new array;
WEEKDAY[0] = "SUN";
WEEKDAY[1] = "MON";
WEEKDAY[2] = "TUE";
WEEKDAY[3] = "WED";
WEEKDAY[4] = "THU";
WEEKDAY[5] = "FRI";
WEEKDAY[6] = "SAT";
CurrentDate = new Date();
CURR_DAY_OF_WEEK = CurrentDate.getDay();
date.text = WEEKDAY[CURR_DAY_OF_WEEK] + " " + CURR_DAY;
}

Make sure everything is placed where you want it and all the text sizes are how you wish them to display.

When your happy press Ctrl+T to view what you have in the player.

Thats it your finished.




Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Simple Digital Clock"