Build a Brilliant Binary Clock with Flash

Tutorial Details
• Difficulty: Intermediate
• Program: Flash
• Estimated Completion Time: 30 mins
This entry is part 3 of 11 in the GreenSock Tweening Platform Session
« PreviousNext »

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?

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 550×400 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:

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

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 “Main.as”.

Add this code to the file:

package{
import flash.display.MovieClip;

public class Main extends MovieClip
{
public function Main()
{

}
}
}


Step 14: Add the Imports Needed

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

import flash.display.MovieClip;
import flash.utils.Timer;
import flash.events.TimerEvent;
import com.greensock.*;
import com.greensock.easing.*;


Step 15: Declare Variables

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

public var clock:Timer=new Timer(1000);
public var date:Date=new Date();
public var hr:int;
public var min:int;
public var sec:int;
public var bits:Array;


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:

//With this we assign the actual values for the clock to each variable
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
clock.start();


Step 17: Create the setTime() Function

This is the function that will be called every second.

private function setTime(e:TimerEvent):void
{
date=new Date();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
}


Step 18: Convert Decimal to Binary

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

private function dec2bin(dec:int, length:int):Array
{
var bin:Array = new Array();
while((dec/2)>0)	//note this has the same effect as "while((dec/2)>=1)"
{
bin.push(dec%2);	//dec%2 is the *remainder* when dec is divided by two. 3%2=1; 4%2=0; 5%2=1; 6%2=0; etc.
//in other words, dec%2 is 1 if dec is odd and 0 if dec is even.
dec=dec/2;			//because dec is an int, it will be rounded
}
while(bin.length<length) bin.push(0);	//this is just padding the array with extra zeroes
return bin;
}


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.

private function converter(num:int):Array
{
var st:String=String(num);
if (st.length==1) st='0'+st;
var fDigit:int=int(st.charAt(1));
var sDigit:int=int(st.charAt(0));
var fColumn:Array=dec2bin(fDigit,4);
var sColumn:Array=dec2bin(sDigit,3);
var result:Array=fColumn.concat(sColumn);
return result;
}


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:

//newBits is the 2-column array we get from converter(), target is "H" "M" or "S" to indicate which column to use
private function turnBits(newBits:Array, target:String):void
{
//Loops through the 2-column array to change the state of the bit
for(var a:int=0; a<newBits.length; a++)
{
//This checks if you are now trying to access element 6 of the hour columns; remember that the H col only has 5 bits
if((a!=6)||(target!="H"))
{
//if it is 0, get the instance named for example "S0" which will be the first bit then "S1" and so on
if(newBits[a]==0) this.getChildByName(target+String(a)).alpha=.2;
//it it is 1, change the alpha to 1 (Turn it on)
else this.getChildByName(target+String(a)).alpha=1;
}
}
}


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:

public function Main()
{
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
turnBits(converter(sec),'S');
turnBits(converter(min),'M');
turnBits(converter(hr),'H');
clock.start();
}

private function setTime(e:TimerEvent):void
{
date=new Date();
sec=date.getSeconds();
min=date.getMinutes();
hr=date.getHours();
turnBits(converter(sec),'S');
turnBits(converter(min),'M');
turnBits(converter(hr),'H');
}


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:

private function turnBits(newBits:Array, target:String):void
{
for(var a:int=0;a<newBits.length;a++)
{
if((a!=6)||(target!="H"))
{
if(newBits[a]==0) TweenMax.to(this.getChildByName(target+String(a)), 1, {glowFilter:{color:0x00cbff, alpha:0, blurX:15, blurY:15,strength:1},alpha:.1});
else TweenMax.to(this.getChildByName(target+String(a)), 1, {glowFilter:{color:0x00cbff, alpha:1, blurX:20, blurY:20,strength:.8},alpha:1});
}
}
}


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

Conclusion

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!

• Ozren

Great !!!!!!

Looks really interesting!

• Andrea

You have to be half-geniuos just read the clock :D!

• http://www.duvieusart.net/portfolio/2009 Nicolas Duvieusart Déry

Thats is so true ! It took me like 10 minutes to understand it..

• Peter

Hi Nicolas,

And with ’10′ you actually mean 2?? You’re a real genius!

• http://www.medienrummel.de Sven

Cool Idea Eduardo !
“There are only 10 types of people in the world: Those who can read binary clocks, and those who don’t.” ;)
Bye,
Sven

• http://snaptin.com Ian Yates
Staff

:D a while since I’ve heard that one..

Haha, best comment I ever read here so far ;)

• http://www.webguide4u.com WebGuide4u

i must admit that it’s a nice one. Well i want to ask that can i make a image banner from it and embeeded it on my site. like 125*125 ad banner?

• André

100101101001011100110101110010010010011000

hehehe

I mean, great post!!

• harshit

that’s wonderful work…

• http://flash-clocks.com Flash Clocks

Impressive flash clock, i always wanted to try to create a binary flash clock but never actually tried because at first, i did not know where to begin, now i know thanks to your tutorial well written.

• http://www.clippingimages.com/ Clippingimages

I tried this one…man…it took me 1 hour..

• _artem_

I’ve added normal clock under the binary one (for non-geeks :-P )

to do so add 3 dynamic TextFields under the columns. instance names: hrs_txt, min_txt, sec_txt
in properties set align center (it’s in Paragraph)

import flash.text.TextField;

public var hrs_txt: TextField;
public var min_txt: TextField;
public var sec_txt: TextField;

then add before turnBits().. in Main() and setTime() functions this:
setLabel(hrs.toString(), min.toString(), sec.toString());

private function setLabel(hrs_t: String, min_t: String, sec_t: String): void
{
if (int(hrs_t) < 10) hrs_txt.text = '0'+hrs_t;
else hrs_txt.text = hrs_t;
if (int(min_t) < 10) min_txt.text = '0'+min_t;
else min_txt.text = min_t;
if (int(sec_t) < 10) sec_txt.text = '0'+sec_t;
else sec_txt.text = sec_t;
}

• http://www.brin.com Lance

Very cool..

• David

It looks really cool and interesting but you need to mix decimal and binary systems to read it, not good.