Simple Flash Blog

In this tutorial it will be explain how to create a simple flash digital clock. A digital clock may be very useful for the visitors of your website and it is really easy to do. Let’s start!

STEPS TO FOLLOW:

1. Create a new flash document and save it as flashClock.fla. Go to Modify >> Document (Ctrl+J) and set dimensions to 200×50 pixels in the Document Properties window.

2. Insert a new layer and rename the top layer actions and the bottom layer background.

3. In the first frame of the background layer we will draw a rounded rectangle. Select the Rectangle Tool (R) from the Tools panel and then go to the Options panel (just below the Tools panel) and click Set Corner Radius button. In the Rectangle Settings window that appears set Corner Radius to 5 point and then click OK button. Now, while the Rectangle Tool is still selected go to the Properties panel and set Stoke Color: #333333, Fill Color:None, Stroke height: 10. Now draw a rectangle having dimensions W:190.0 and H:40.0 and align it to center both horizontal and vertical.

4. Now click the Text Tool (T) from the Tools panel and then to the Properties panel to set the following values: for Text Type choose Dynamic Text, choose Verdana for font, 25 font size, Text fill color #333333 and also set bold style. Now draw a dynamic text fiels on the Stage having dimensions W: 140.0 and H: 34.4 and arrange it to center on horizontal and vertical. Give to the text field the instance name of flashclock_txt.

5. Go now to the first frame of the actions layer and open the Actions Panel (F9). Put here the next ActionScript code for the flash digital clock:

this.onEnterFrame = function(){
var time:Date = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var displaytime:String=new String();
//the next ActionScript code formates the way the variables are displayed
if(hours > 12){
hours-=12;
}
if(hours < 10){
hours = "0"+hours;
}
if(minutes < 10){
minutes = "0"+minutes;
}
if(seconds <10){
seconds = "0"+seconds;
}
//now bring together the components of time
displaytime = hours+":"+minutes+":"+seconds;
flashclock_txt.text=displaytime;
}
6. Great job!Now just test and publich your movie. This ActionScript digital clock could be used in many parts of your website, such as banners or footnotes.

This entry was posted on Thursday, February 14th, 2008 at 7:30 am and is filed under ActionScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.