1. Code
  2. ActionScript

Build a Brilliant Binary Clock with Flash

This post is part of a series called GreenSock Tweening Platform.
Build a Slider Microsite with GreenSock's Timeline Lite

In this tutorial we are going to create an unusual, but very cool kind of clock: a binary clock.

Final Result Preview

Let's take a look at the final result we will be working towards:

Step 1: What Does Binary Mean?

Everyone knows how to count, but not everyone knows there are so many different ways to do so. We are used to a special way of counting named the decimal system, but we could also use the hexadecimal, octal or binary system, among others.

In our decimal system, we assign 10 to represent the total number of fingers and thumbs that we each have, and count up and down from there. But in binary, 10 represents just the total number of thumbs -- so 10 in binary is equal to 2 in decimal; 11 in binary is 3 in decimal; 100 in binary is 4 in decimal, and so on. So rather than each column representing units, tens, hundreds, thousands, ... (counting from right to left), they represent units, twos, fours, eights, ..., doubling each time.

So the number 10 we normally see, can be represented in diferent ways:

The binary system is based on the number two, that’s why it is called binary, as opposed to the decimal system which we normally use and which has a base of 10. The binary system is the one used by computers to work, because we can use it to represent any number using a series of switches "on" (1) and "off" (0).

With this knowledge, can you figure out how to read the clock in the SWF?

If you want to learn more about this you can Google binary numeral system and check the info about it =)

Step 2: Create the Flash File

Create a new AS3 Flash file and name it "Binary_Clock.fla".

Step 3: Set up the Stage

Go to the properties and change the size to 550x400 and the background color to #222222.

Step 4: Get TweenMax

Go to the TweenMax project webpage and download the library for AS3.

Step 5: Extract TweenMax

Unrar the file and copy the folder named "com" to the folder where you have your Binary_Clock.fla file.

Step 6: Create a Bit

Now, go to Insert > New Symbol and name it "Bit" with type Movie Clip.

This "Bit"" will represent a single digit of a number. It will have two states, in two different colors: one will represent 0 and the other will represent 1.

Step 7: Draw a Bit

Next, in the symbol you just created, make a new square of 50x50px.

Step 8: Modify the Bit

Change the color of the square to #00CBFF and center it.

Step 9: Create the Columns

Back on the stage, take some bits from the library panel and arrange them to create the columns we will use. You should end with something like this:

Step 10: Add Some Elements

If you want, you can add text labels and lines to make it more understandable:

Step 11: Assign Instance Names

For each bit, change the instance name on its properties panel. Give them the names such as the image below demonstrates:

Step 12: Link the FLA to a Document Class

Go to the properties panel and set the class field to "Main", this is the name of the class we are going to create in the next step.

(Not sure what we're doing here? Read this quick introduction to document classes.)

Step 13: Create the Document Class

With the stage completed, we can now start coding. First create a new ActionScript 3.0 file and save it as "".

Add this code to the file:

Step 14: Add the Imports Needed

We'll begin by importing the necessary classes. Add this below the package declaration:

Step 15: Declare Variables

Next, we'll declare some public variables. Add this below the class declaration:

Creating a new Date object automatically sets it to the current time.

Step 16: Assign Values

OK so now let's add the code that will start the clock. This goes inside the Main() function:

Step 17: Create the setTime() Function

This is the function that will be called every second.

Step 18: Convert Decimal to Binary

This function will change a decimal number to a binary array, which will be used later.

So, dec2bin(13, 4) gives [1,1,0,1].

Step 19: Create the converter() Function

This function takes a decimal number and uses dec2bin() to convert it to the 2-column array we have in the display.

Step 20: Turning Bits On and Off

Now we need to add something that will turn the bits on and off; that’s what this function does:

Step 21: Modify the Functions

A couple of modifications to the Main() and the setTime() Functions: we just need to call the function so the changes are made each second and at the start:

Try it out, and you'll see it correctly display the time. But we can do better...

Step 22: A Little Bit of Style

This is where TweenMax comes in. We will add glow and ease to give a better look to the clock. Modify your turnBits() function like so:

And that’s it! We've finished our tutorial =)


Now we have an attractive clock which we could use as our screensaver or add to a webpage.

This is my first tutorial so I hope you liked it. Thanks for reading!

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