Black and white digital flash clock
27.10.2009, 18:59
Submited in: Flash | Total Views: 3528
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
|