Written by: John Wundes, , www.wundes.com
Difficulty Level: beginner
Requirements: Flash MX
Topics Covered: variables, functions, Date object, toString, setinterval
Download FLA

This program introduces us to many useful concepts such as functions, intervals, and of course the built in Time object.
Let's begin by looking at the code in it's entirety.

createTextField("myText", 1, 5, 5, 90, 60);
function getTime() {
        myDate = new Date();
        var h = myDate.getHours().toString(2), m = myDate.getMinutes().toString(2), s = myDate.getSeconds().toString(2);
        myText.text = (pad(h)+"
"
+pad(m)+"
"
+pad(s));
} //end of getTime
function pad(n) {
        while (n.length<6) {
                n = "0"+n;
        }// end of while
        return (n);
} // end of pad
setinterval(getTime, 10);

What? That's it?
I know it doesn't look very big, but it's probably got a few stumpers, so let's go through it line by line.

createTextField("myText", 1, 5, 5, 90, 60);

AS is full of built in objects, one of which is called createTextField Guess what it does?
Yes, the above line creates a text field on the current level (which is _root if you've placed the code on the first frame of a blank movie.)
The createTextField function takes the following parameters in this fixed order (name,depth,xposition,yposition,width,height) so in the above example I have created a new textfiled instance named "myText"

The textField was instantiated at depth/level 1, at 5 px from the left and 5 px from the right. It is 90 px wide, and 60 px high.
In case you're feeling overwhelmed by having to remember all the parameters for every function in AS, you will be relieved to know that the parameters pop up automatically as code-hints when you type in a (built-in) function name followed by an open parenthesis such as "createTextField("
If you do that now in the editor, you should see the hint pop up with something like this:

Handy eh?
Now let's look at creating a custom function.

function getTime() {

Here I've told Flash that I am creating my own function called getTime(). A function is a snippet of code that you are planning to use more than once, so you wrap it up in a function declaration and give it a name. I gave it the name "getTime" since that describes what it is supposed to do. There are only two custom functions in this program, but if you were writing something larger, you might get confused if you didn't name your functions in ways that described their purpose. With that said, let's give getTime() some code to execute.

myDate = new Date();

Here I am accessing the built in Date object to get a date. (If only it were this simple in the real world... Har har, but I digress) I am creating an instance of the Date object by using the new keyword. I could have called my new date object "today" or "Linda" but I wanted to name it appropriately so it just gets the boring name myDate. (Notice the convention that the first letter of the Date object is capitalized but my instantiated object myDate begins with a lowercase letter.)
So now I have a new Date object. What does that mean?
It means that myDate now contains some data regarding the moment it was created.
Lets access some of it now.

var h = myDate.getHours().toString(2), m = myDate.getMinutes().toString(2), s = myDate.getSeconds().toString(2);

Gad that's a long line! The above line is declaring three variables "h", "m", and "s." The "var" is used only at the beginning of the line, the variable declarations are separated by commas. All are essentially the same thing, so let's look closer at variable "h".
h = myDate.getHours().toString(2)
The first part myDate.getHours() just retrieves the current hour from the myDate object created in the previous line. But what is that.toString(2) stuff? Well the "hour" variable is still in decimal numbers and we want to see it in binary, so I am using the little know ability of the built in toString function to return binary values (base 2) instead of the normal decimal (base 10) ones. Neat huh? Change the 2's to 8's and you get an octal clock, or to 16's and you'll get a hexidecimal clock!

myText.text = (pad(h)+"
"
+pad(m)+"
"
+pad(s));

Remember myText, the textField we created in line 1? Well, now is it's moment of glory! We assign it's ".text" value to binary hours, minutes and seconds separated by which is the unicode symbol for "return". (I believe which is unicode for "newline" also works.)
Now what's that "pad()" thingy? Glad you asked!
I will describe how it works in a moment, but meanwhile just know that it adds zeros to the beginning of the numbers so that each line is always six digits long. (It will format 10 look like 000010.)

} //end of getTime

This line is simple, but the program doesn't run without it. This is the close bracket for the function getTime() that I created in line 2.

The only real code here is the "}" everything after // is ignored, so I could have written //Alles ist verganglich and the code wouldn't care, but documenting code makes things easier to understand, so there you go.

function pad(n) {

Here we define our second function which I named pad. Unlike the first function getTime(), pad takes a variable "n" and also returns a variable... But we'll get to that in a minute.

As I mentioned above, when it is finished, pad will add zeros to each line until "10" looks like "000010." The variable "n" represents whatever gets fed to pad. In this program, pad gets called three times in line 5, once for the hours once for the minutes and once for the seconds.

while (n.length<6) {

This is a "while" control structure very common in programming. Translated to English, the line says, "While the length of "n" is shorter than six..."
"n" is whatever gets fed to the pad function.

n = "0"+n;

Here we assign the value of "n" to itself with a zero in front of it. If "n" was the word "zone" it would become "0zone" In this case we are feeding it binary numbers so "0" becomes "00" or "1" becomes "01". Since this line is in the "while" loop, it repeats until the while loop is satisfied... (Until "n" has a total of six digits...)

}// end of while

This ends the while loop. The while loop contains only one line of code, but it can execute up to 5 times (depending on the starting length of "n") before it lets go and moves on to...

return (n);

This line sends the answer back to the place where the pad function was called. In this case it returns to line 5

myText.text = (pad(h)+"
"
+pad(m)+"
"
+pad(s));

replacing pad(h), pad(m), pad(s) with an appropriately formatted numbers.

} // end of pad

...should be obvious at this point...

setinterval(getTime, 10);

The last line is what tells it all to "GO!"
The built-in function setinterval takes two (or more, but not in this case) values. The first is the name of the function that is to be repeated. In this case we are sending it my getTime function. The 10 means 10 milliseconds, which is how often the program calls the getTime function. (10 times a second.) I could have set it to 50 and still been OK, but I prefer the faster update. Rarely will you see a setinterval used like this without a clearInterval somewhere too, but here we just want to start the clock and keep it running so all we need to do is set it in motion once. Normally at the end of a script, the code stops, but setinterval makes sure that the getTime function is called ten times a second from this point on.

Conclusion: We have a clock that displays the time in binary. The neat part for me is that it is totally code. There are no assets to load, no movieclips to place, although you could certainly implement this code on a movieclip if you wanted to.

You might notice that this clock displays the 24 hour time rather than AM and PM. You can add a %12 to the code to fix this, but then you also have to add a special case because 12%12 is 0 not 12...

Also if you are a sharp binary code geek, you will probably have already shot me an email saying that you only need 5 digits to represent the hours.
I know, but for simplicity and aesthetics I decided to keep all the lines the same length.

If you feel up to it, try adapting the code so it displays a graphic interface instead of using a textField, like this