Publishing System Settings Logout Login Register
Date and Time in Flash
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on December 4th, 2006
16437 views
Adobe Flash
Date and Time in Flash
Ben Fleming

In this tutorial, you'll be learning how to display the date and time in Flash. I have no idea what you'd use it for, but hey it's a neat little gadget.
First, start by creating a dynamic textfield. Select the "A" on the tool's menu (T), open up the properties panel (Ctrl+F#), and switch its text type to Dynamic. Draw the textfield where ever you want on your stage. When you have, select it, and in the properties panel again, change its instance name to dateDisplay.
Alright, now, with the layer you drew your dynamic textbox on, go ahead and rename it to Date Textfield. Then, add another layer, drag it to the top, and rename it Actionscript. Then lock both the layers. This is so that we keep everything neat and tidy. Now, click on the first frame on the Actionscript layer, and open up the Actionscript panel (F9).
In the first few lines, we're going to be creating some variables that hold some things in them. Write the following:

[code=Java]var dayText:String;
var dateText:String;
var monthText:String;
var AmPm:String;[/code]

What we're doing is creating 4 variables that are strings. Strings are variables that contain characters in them, that are encased in quotation marks. I'll explain to you later what these variables will be used for.
Next, we're going to create a looping code called an onEnterFrame loop. What this does is it calles the function over and over again, constantly updating each piece of information within that function, to the speed of your frame rate (FPS). So in the next line, write this:

[code=Java]_root.onEnterFrame = function() {[/code]

Ok, I'll run you through it. _root. is the main area in the movie; the place that holds everything basically. I like to call it the main stage. This means it isnt inside any symbols, just as it is when you open it. onEnterFrame is our loop, as I explained earlier. function() { is telling us that its a function, something that will do something, and then we write an open curly brace to write what exactly the function is.
Next we're going to create an object called myDate to give us access to all the date and time from the computer. So, in the next line, write this:

[code=Java]var myDate:Date = new Date();[/code]

We're creating a new variable, strip typing it to Date, and then assigning it as an object by writing new Date(). Fairly easy to understand. Next we're going to create a whole tonne of variables to hold all of the times and dates in. So, after the last line of code, write this:

[code=Java]var sec:Number = myDate.getSeconds();
var min:Number = myDate.getMinutes();
var hour:Number = myDate.getHours();
var day:Number = myDate.getDay();
var date:Number = myDate.getDate();
var month:Number = myDate.getMonth();
var year:Number = myDate.getFullYear();[/code]

Basically we've created 7 variables, sec, min, hour, day, date, month, and year, and then given them the correct value's. They all have values that are in numbers, but there is a simple way around that. I think the code is self-explanitory. In the next line, we're creating two fairly perculiar if statements. So, now write:

[code=Java]sec = sec<10 ? "0"+sec:sec;
min = min<10 ? "0"+min:min;[/code]

What this is saying, is that (I'll use the first line as the example) if (?) the seconds variable is below (<) then, then add an extra zero before it. This just makes it more clock-looking. The minute variable is saying the exact same thing. Ofcourse in a traditional digital clock, there is no zero before the hours. Next you'll see a work-around 24 hour time, because the getHours line retrieves everything in 24 hour time. If you want to keep it in 24 hour time, then skip this next step. If not, then write the following:

[code=Java]if(hour > 12) {
    hour = hour-12;
    AmPm = "PM";
} else {
    AmPm = "AM";
}[/code]

Here's the traditional if statement, back in action. If the hour variable is above 12, then remove 12 from it, therefor turning it back into normal time. Then, with the AmPm variable we creating earlier, we set it to PM. Then, if it isnt above 12, then set the AmPm variable back to AM. Pretty damn easy.

[code=Java]if(day == 0) {
    dayText = "Sunday";
} else if(day == 1) {
    dayText = "Monday";
} else if(day == 2) {
    dayText = "Tuesday";
} else if(day == 3) {
    dayText = "Wednesday";
} else if(day == 4) {
    dayText = "Thursday";
} else if(day == 5) {
    dayText = "Friday";
} else if(day == 6) {
    dayText = "Saturday";
}[/code]

This is a pretty big if statement. Dont worry, they get bigger ;) The day variable, which we assigned a value of myDate.getDay(), retrives the day only in numbers. It doesnt send us it in a string, only though a number. So, Sunday is 0, Monday is 1... and so on. What we do is make a basic if statement, asking if the number is ... then change the variable of dayText (which we created earlier) to ... I think you can make sense of the rest. The date is slightly different, but the same concept is used:

[code=Java]if(date == 1 || date == 21 || date == 31) {
    dateText = date+"st";
} else if(date == 2 || date == 22) {
    dateText = date+"nd";
} else if(date == 3 || date == 23) {
    dateText = date+"rd";
} else {
    dateText = date+"th";
}[/code]

Another if statement. Well, in this one, we're tring to retrieve the suffixes onto the dates. so like 23rd, or 14th. Unfortunately, Flash again doesnt send us these in a string. So, we have to create an if statement instead. What this one is asking (first line as an example) if the date is 1, or (||) 21, or 31, then change the dateText variable (which we created earlier) to the date number (which is in the date variable) and then add a string, with the value of st (which is what we put onto the end of a number that ends in 1) onto the end of it. Then we do an else if statement, which is basically asking, well, if its not doing that, and if its doing this, then... Finally we end on an else statement. What this basically is that, if none of the above is happening, then do this... And because the majority of numbers end in th, then we might aswell save us some time and do an else statement. Because, again, Flash doesnt retrieve strings in dates, then we have to make one more if statement to get the Month. This is the biggest if statement in here, but not much explaining (as its basically just like the if statement on the days):

[code=Java]if(month == 0) {
    monthText = "January";
} else if(month == 1) {
    monthText = "February";
} else if(month == 2) {
    monthText = "March";
} else if(month == 3) {
    monthText = "April";
} else if(month == 4) {
    monthText = "May";
} else if(month == 5) {
    monthText = "June";
} else if(month == 6) {
    monthText = "July";
} else if(month == 7) {
    monthText = "August";
} else if(month == 8) {
    monthText = "September";
} else if(month == 9) {
    monthText = "October";
} else if(month == 10) {
    monthText = "November";
} else if(month == 11) {
    monthText = "December";
}[/code]

I dont think I need much explaining here. I have my variable monthText which I created earlier, and I assigned it a month name specific to what month the myDate object retrieves. Exactly like the day if statement. I dont think I need to go in depth with this. Now, there is one more thing we gotta do. And that is displaying the date! Finally we're reached the point where we make the date show. So, in the next line, write something like this:

[code=Java]dateDisplay.text = dayText+", the "+dateText+" of "+monthText+", "+year+", at "+hour+":"+min+":"+sec+AmPm;[/code]

This gives the textfield dateDisplay all the variables rolled into one. Go through it slowly with yourseld to see how it works. All I basically do is add variable, add string, add variable, add string... etc until we reach the end. This will give me a result something like this:

[quote]Monday, the 4th of September, 2006, at 4:42:22PM[/quote]

Wait! Theres one more thing. We have to end our onEnterFrame loop, that we made a while back. So simply type in the next line:

[code=Java]}[/code]

Yay, we're done! Remember this is fully customisable, so dont think you need to keep it exactly as it is for it to work :) Also, this is possible, and much easier with arrays, but I didnt want to scare you with the word :P
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
Ben

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top