Video Training – Tutorials

For users who prefer to learn Flash visually we have a range of Adobe Flash CS3 video tutorials, this method of training greatly enhances learning and allows beginners to master even the most complex aspects of Adobe Flash with ease.
View the Adobe Flash CS3 Tutorial Video

Actionscript 3 Tutorial – Date and Time

In this short Flash ActionScript tutorial we are going to take a look at using the time and date functions available in ActionScript 3, and to help you gain a practical insight into their usage we have also included a hands-on tutorial along with a finished example in which you will be able to build your own digital clock using Adobe Flash.

At first you might think that retrieving the date and time for a Flash application is pretty irrelevant and pointless task. But, for larger and more complex applications that are more user focussed such as E-commerce sites or interactive games retrieving the date and time becomes an important task.  For example, you’ll need to record the transaction date of a users purchase if you have an E-Commerce site, or record what date a user recorded the top score in the interactive game. So there are many reasons for learning how to use date and time in Actionscript. In this article we’ll first look at the Date class and it’s different methods and properties and then we’ll use methods and properties to create a working clock inside Flash.

The Date Class

In this particular article we’ll be looking closely at the Date class, the Date Class is used to retrieve the date and time information. It uses the information from your operating system to gain the information. The Date class has many methods and properties that allow us access to information such as date, hours, minutes, seconds and even the time zone. Below are just a few of the methods available to the Date class.

Date Class Methods

getSeconds()

Gets the current seconds from the time on your PC.

getFullYear()

Will return the full year subject to local time on your pc in a four digit format, for example “2009”.

getMilliseconds()

Returns the current millisecond from the date on your operating system.

getTime()

Returns the current local time in milliseconds.

Create a Working Clock

We’ll now use what we’ve learned previously to create a working clock in Flash. The clock will use methods of the Date class to get the relevant information.

Example

Finished Download File

Step 1 – Create An Interface

Before we get down to creating the interface itself lets organize everything appropriately. On the timeline we’ll create 3 layers and name them actions, clock and background. With the background layer selected we’ll use the rectangle tool to create a nice black background for the clock. Next with the clock layer selected we’ll create the interface, first we’ll create a white rectangle on top of the black rectangle, this will act as the clocks digital screen.

Step 2 – Dynamic Text Field

Next we’ll create 2 dynamic text fields that’ll be used to hold the time and date data. First, we’ll create the text field that’ll hold the time data. With the text tool selected we drag out a large new text field, give it the instance name time_txt and set its text size to 23px. Next, we drag out a second text field, give it an instance name but this time we’ll call it date_txt, and set its text size to 11px.

Your interface should now look like this.

Step 3 – Create New Keyframe

Now we’ll create some new frames on the timeline, we’ll first create a new keyframe on the actions layer by pressing F6. Finally we insert a new frame into the clock and background layer by pressing F5.

 The timeline should now look like this.

Step – The Code

Lock the clock layer, select the first frame on the actions layer, and press F9 to open up the actions panel.

First thing we need to do is create a new instance of the Date class; we’ll call this instance theDate. This instance will give us access to all the properties, methods and events of the Date class.

var theDate:Date = new Date( );

Next we’ll create 2 variables that’ll have the current date and time stored in them. Each individual variable will store their respective data and will be used to populate the text fields we created in the interface early. The variables are a little different from what you might be used to; first, we name the variable in the usual manner using the var keyword, we then set it equal to the theDate object and finally using dot syntax we select the appropriate method from the Date class. The methods we’ll use for this particular application are toLocalDateString() and toLocalTimeString(), toLocalDateString() will return the day and date and toLocalTimeString() will return the local time including whether it’s am or pm.

var day = theDate.toLocaleDateString()

var time = theDate.toLocaleTimeString()

Finally all that’s left to do is send the information from our methods so that it populates the text fields we created earlier. All this requires is that we set the text property of the text fields equal to the appropriate variable that holds the value we need. So, we set the time_txt to the variable that holds the time data and the date_text to the variable that holds the date data.

time_txt.text = time;

day_txt.text = day;

Press Ctrl and Enter to test the movie and we’ve got a working digital clock.