Wednesday, 9 December 2009

Display date in Actionscript 3

In this tutorial you will learn how to display the date in Actionscript 3. This is an update from the display date tutorial in AS2. To display the date you need to use the Date class which will retrieve all date details such as the months, the years and the days. If you have completed the AS2 tutorial all the code below should look familiar to you.


Display date in Actionscript 3

Step 1

Open a new Flash AS3 file.
Select the Text tool (T) with dynamic text and create a small rectangle shape on the stage like below.



You may need to embed the following glyphs by selecting the ‘Character Embedding’ button: Uppercase, Lowercase, Numerals and Punctuation.


Step 2

Give your dynamic text field the following instance name shown below:




Step 3

On the timeline create a new layer called ‘Actions’, and open up actions panel (F9) and enter the following code.

//Array to hold a list of the weekdays.
var weekdays:Array = new Array ("Sunday","Monday","Tuesday","Wednesday",
"Thursday","Friday","Saturday");

//Array to hold a list of the months.
var months:Array = new Array ("Jan","Feb","Mar","Apr","May","Jun","Jul",
"Aug", "Sep", "Oct","Nov","Dec");

//Adds an event listener to the dymanic text field.
the_date.addEventListener(Event.ENTER_FRAME,showDate);

function showDate(event:Event):void {
//Create a new instance of the date class.
var myDate:Date = new Date();

//Retrieve the day, month and year from the date class.
var theDay=weekdays[myDate.getDay()];
var theMonth=months[myDate.getMonth()];
var theDate=myDate.getDate();
var theYear=myDate.getFullYear();

//Display the date in the dynamic text field.
the_date.text=theDay+", "+theMonth+" "+theDate+", "+theYear;
}

Step 4

Test your movie clip Ctrl + Enter.



You should now be able to display the date in Actionscript 3.0.

11 comments:

h3lLx0x 10 December 2009 at 09:49  

what flash version are you using ? nice tutorial though.

iliketo 11 December 2009 at 06:01  

@h3lLx0x

You can use either CS3 or CS4, if you choose the Actionscript 3 file.

AradiaDawn 7 February 2010 at 09:58  

Thanks for the great tutorial!

I'm curious, though, how would I alter this to display the date for exactly one week from today?

iliketo 12 February 2010 at 09:41  

@AradiaDawn

Use the following.

var theDate=myDate.getDate()+ 7;

Vlad 24 February 2012 at 23:47  

Hey great Tutorial seems to be the only one that works for me. I am trying to create a typography screensaver for my Mac and I've done the Time tutorial and the Date tutorial but I was wondering is there a way to seperate the "Day" and "Date" so it displays on separate lines instead of a single one separated with a comma, eg:

Monday
12 February 2012

iliketo 25 February 2012 at 04:34  

@vlad

Put the date and time on different dynamic text fields.

Vlad 25 February 2012 at 05:04  

Yeah Date and Time are on separate dynamic fields Im just trying to separate

"Saturday, 12th Jan" to

Saturday
12 Jan

So Day of week is separate from Date

iliketo 26 February 2012 at 01:01  

@vlad

You obviously need to tweak the code. You can’t have two separate dynamic text fields and expect it to work. Try this.

txt1_txt = theDay;
txt2_txt = theDate+" "+theMonth;

TomasM 14 April 2012 at 06:47  

Hi, i made everything by the tutorial, but when i run test movie, the output says:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Untitled_fla::MainTimeline/showDate()

i am a beginner with AS3, pls can you help me eith this kind of error?

THX Tomas

iliketo 14 April 2012 at 09:19  

@TomasM

May sure you don’t have a typo. You’re getting an Error 1009 because you are trying to access something that isn’t instantiated yet.

Unknown 16 August 2012 at 11:28  

That's an efficient script. Just what I needed. I used Flash 6 for the file, works fine.

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP