Toxiclab.org

Black and white digital flash clock

27.10.2009, 18:59
Submited in: Flash | Total Views: 9248

Using this thoroughly explained, detailed flash lesson, I will explain to you how to create black and white digital clock in flash using the AS code. You can use this clock for any web sites. Let's start!

Example:



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select black color as background color and click ok!

Step 2

Call the current layer digital clock. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 3

Select the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage. Then, choose the following options:

1. Select a Dynamic Text field,
2. Select white as color,
3. As the rendering option, select Use Anti-alias for animation.
4. For var type datee.



After that, draw dynamic text area on the stage like it is shown on the picture below!



Step 4

While the dynamic text area is still selected, hit F8 key (Convert to Symbol) to convert it into a movie clip symbol.



Step 5

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.



Step 6

Call the current layer date. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 7

Click now on frame 2 and hit F5 key

Step 8

Create a new layer above the layer date and name it AS.

Step 9

Select the first frame of layer AS and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

myDate = new Date();
m = myDate.getUTCMonth()+1;
switch (m) {
case 1 :
 mm = "01";
 break;
case 2 :
 mm = "02";
 break;
case 3 :
 mm = "03";
 break;
case 4 :
 mm = "04";
 break;
case 5 :
 mm = "05";
 break;
case 6 :
 mm = "06";
 break;
case 7 :
 mm = "07";
 break;
case 8 :
 mm = "08";
 break;
case 9 :
 mm = "09";
 break;
case 10 :
 mm = "10";
 break;
case 11 :
 mm = "11";
 break;
case 12 :
 mm = "12";
 break;
}
min = myDate.getMinutes();
if (min<10) {
 min = "0"+min;
}
t = myDate.getHours()+":"+min;
datee = (mm+"."+myDate.getUTCDate()+"."+myDate.getUTCFullYear());

Step 10

It's time for time, so go back on the main stage (Scene 1).

Step 11

Repat step 3, but for var type timee.

Step 12

After that, draw dynamic text area on the stage below the date area. See the picture below!



Step 13

While the time area is still selected, hit F8 key (Convert to Symbol) to convert it into a movie clip symbol.



Step 14

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.

Step 14

Call the current layer time. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 15

Click now on frame 2 and hit F5 key.

Step 15

Create a new layer above the layer time and name it AS.

Step 16

Select the first frame of layer AS and go to the Action Script Panel (F9). Then, enter this code inside the actions panel:

myDate = new Date();
min = myDate.getMinutes();
if (min<10) {
 min = "0"+min;
}
sec = myDate.getSeconds();
if (sec<10) {
 sec = "0"+sec;
}
t = myDate.getHours()+":"+min+":"+sec;
timee = (t);

We're done!

Test your movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials