Tips

Digital clock in flash

Using this little tutorial, you will see how to create simple digital clock in flash using a little action script code.You can use this digital clock for any web site if you like.You will also learn how to design a area for clock, how to create dynamic text field and more.Let's go!


Step 1

Create a new flash doucment.Take the Rectangle Tool (R). In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line. For Fill color choose #19A3CB color and draw a "rectangle" about 180x55px.

Step 2

While the rectangle is still selected, go to the Align Panel (Ctrl+K) and set the following options:

1.Make sure that the Align/Distribute to Stage button is turned on,
2.Click on the Align horizontal center button and
3.Click the Align vertical center button.



Step 3

Take agian the Rectangle Tool (R) and repeat step 1, but for this time, for Fill Color choose #2379CF. Then, draw the another rectangle within the first rectangle about 140x30px. See the picture below.



After you have drawn the second rectangle within the first rectangle, repeat step 2 to align also the second rectangle with the background.

Step 4

Double click on layer 1 to rename its name in background.

Step 5

Then, click on the seconda frame of layer background and press F5 key. After that, create a new layer above the backround layer and name it dynamic text. See the picture below.



Step 6

Select the dynamic text layer and take the Text Tool (A).Then, create a dynamic text field over the white rectangle. See the picture below.



Step 7

While the dynamic text field that we just created is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this dynamic field Clock_text.



Step 8

Create a new layer above the dynamic text layer and name it action.

Step 9

Click on the first frame of layer action and open the Action Script Panel (F9). Then, enter the following code inside the actions panel:

time=new Date(); // time object
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
if (hours<12) ampm = "AM" ampm = "PM">12){
hours = hours - 12;
}
if(hours<10) hours = "0" minutes = "0" seconds = "0" text =" hours" Download source file (.fla)

Source: http://www.flashfridge.com/tutorial.asp?ID=49