Flash makes very cool clock animations

Final Preview

Let's look at the final preview effect

The first step: what does the binary mean?

Everyone knows how to count, but not everyone knows how many different methods there are. Now we're going to use a very special method called the decimal method. We can also use the 16 method, the Octal method, the binary method or the other.

In decimal notation, we use 10来 to represent us to carry the cardinality, in order to add and subtract. But in binary, 10 and 2 in decimal are equal, 11 is equal to 3 in decimal, 100 is equal to 4 in decimal, and so on. So our common 10 can also represent different numbers.

The binary method is based on 2, which is why it is called binary, and is different from a decimal in 10. Computers work in binary systems.

With this knowledge, can you see the table in the SWF above?

Step two: Create a flash document

Create a new As3flash document named "Binary_clock.fla"

Step three: Set the stage

Enter the property panel to set the stage size to 550*400 and the background color to #222222.

Fourth step: Get Tweenmax

Libraries needed to download AS3 to the http://www.greensock.com/tweenmax/Web site

Fifth Step: Extract Tweenmax

Unzip the file and copy the folder named "com" to the directory where you are storing the BINARY_CLOCK.FLA.

Sixth step: Create a square (Bit)

Now execute Insert > New component and build a movie clip symbol named bit.

This "Bit" will represent a unit of a number. It has two states, which are expressed in two colours: one represents 01 representatives of 1.

Seventh step: Draw a square

Next, draw a 50*50 square in your newly created component.

Eighth Step: Modify the Box

Change the color of the square to #00cbff and place it in the middle.

Nineth Step: Create column of columns

Go back to the stage, pick some squares from the library and put them in the way we want them to be. Can be placed in the following manner.

Step Tenth: Add some elements

You can add text labels and lines as you want to make them easier to understand.

11th Step: Set Instance Name

In the Properties panel, set instance names for each square, and their names are as follows:

Step 12th: Connect the FLA to a document class

Go to the Properties panel and set the class name to "Main", which is the class we want to create in the next step.

13th step: Create a document class

After completing the stage section, we can now start writing code. First create a new ActionScript3.0 file, save as "main.as"

Add the following code to the file:

Package {

Import Flash.display.MovieClip;

public class Main extends MovieClip

{

Public Function Main ()

{

}

}

}

Step 14th: Add the classes you want to import

We begin by importing some of the necessary classes and adding the following to the package's reputation.

Import Flash.display.MovieClip;

Import Flash.utils.Timer;

Import flash.events.TimerEvent;

Import com.greensock.*;

Import com.greensock.easing.*;

Step 15th: Define Variables

Below we will define some public variables, add the following to the class reputation:

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;

A new Date object is automatically created to set it to the current time.

Step 16th: Assigning values to variables

Okay, now to add the code that starts the clock. These are in the main function.

To assign an initial value to each variable

Sec=date.getseconds ();

Min=date.getminutes ();

Hr=date.gethours ();

Clock.start ();

Clock.addeventlistener (Timerevent.timer, settime);

Step 17th: Create the SetTime () function

This function will be called every second

Private Function SetTime (e:timerevent): void

{

Date=new Date ();

Sec=date.getseconds ();

Min=date.getminutes ();

Hr=date.gethours ();

}

The 18th step: Converts the decimal number to a binary number.

This function converts the decimal number into a binary number, which will be used.

Private Function Dec2bin (Dec:int, length:int): Array

{

var bin:array = new Array ();

while ((DEC/2) >0)//Note that this is the same as the "while (DEC/2) >=1" effect

{

Bin.push (dec%2); Dec%2 is the remainder of Dec divided by 2. 3%2=1; 4%2=0; 5%2=1; 6%2=0; Wait a minute

Which is to see if the number is even or odd.

DEC=DEC/2; Because Dec is the number of plastic, you get an approximate number

}

while (bin.length

return bin;

}

So, the Call function Dec2bin (13, 4) Gets the [1,1,0,1].

Step 19th: Create the converter () function

This function will pass a decimal number and use the Dec2bin () function to convert it to the two-dimensional array we're going to use.

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;

}