mindgraffiti

An Informal Tutorial - Beginner to Intermediate

I’ve been working on two small calculators. One is a gestation calculator, that predicts the due date of a calf. The other is an Average Daily Gain calculator, that allows the user to plug in their animal’s data and see what the animal’s weight gain has been for a specific period in time.

While neither of these calculators have been refined, I’m posting my code in hopes that they will be a useful reference on how to get the DateField and DateChooser components to work for you. I have been unable to find any tutorials on how to use them and was forced to read up on the Date class and the DateField/DateChooser components.

DateChooser Component

I’m using Flash 8 Pro and ActionScript 2.0 in an actions layer.

1. Build three layers: Components, Text, and Actions.
2. On the Components layer, drop the DateChooser component onto the stage. In the properties panel name the instance my_dc.
3. On the Text layer, add a dynamic text field, instance name message_txt.
4. In the Actions layer, add: (line wraps marked with >>)

import mx.controls.*var my_dc:DateChooser;calendar =

>> new Object();calendar.change = function(eventObj){

eventDate = my_dc.selectedDate;

day = eventDate.getDate();

trace day;

month = eventDate.getMonth();

trace month;

year = eventDate.getFullYear();

trace year;

var endDate = new Date(year, month, (day+283));

message_txt.text = "Your lucky date is " +

>>(endDate.getMonth()+1) +"/"+ endDate.getDate()

>> +"/"+ endDate.getFullYear();

}my_dc.addEventListener("change", calendar);

import mx.controls.*

tells Flash that you want to import all the controls to the ActionScript library. I import all of them in case I am using multiple components for a project. If you only want the DateChooser component, you can use

import mx.controls.DateChooser

instead.

var my_dc:DateChooser;

I’m just now grasping the power of ActionScript 2 and strict datatyping. While it’s good practice to use it all the time, most of my projects are fairly simple. I generally only use it when I am bug hunting or have a larger project.

calendar = new Object();calendar.change = function(eventObj){
eventDate = my_dc.selectedDate;
}
my_dc.addEventListener("change", calendar);

This is how I grabbed the date from the DateChooser component. Every time a user picks a date, the event listener stores the info in the variable eventDate for my use. I manipulate the date here:

day = eventDate.getDate();
trace day;
month = eventDate.getMonth();
trace month;

year = eventDate.getFullYear();

trace year;

day, month, and year are there for the sake of brevity. I could leave them out, but then this

var endDate = new Date(year, month, (day+283));

would become this

var endDate = new Date(eventDate.getFullYear(),
>>eventDate.getMonth(), (eventDate.getDate()+283));

which is ugly and looks complicated. Then you take your results and spit them out in a place the user can read:

message_txt.text = "Your lucky date is " +
>>(endDate.getMonth()+1) +"/"+ endDate.getDate()
>> +"/"+ endDate.getFullYear();

I added some traces just so you can see what ActionScript will spit out for each variable. The date format is mm/dd/yyyy, for any non-U.S. visitors, and one is added to the ending date’s month because of standard array conventions - January is zero to ActionScript. [So January 27, 2007 would look like 0/27/2007 in the display, instead of 1/27/2007]. You can download the stripped-down .fla here if you are having trouble building your own.

Questions, corrections and comments are welcomed. I’ll tackle the DateField component next.

Related posts:

• Taking a Crack at Flash Components II: the DateField Component
• Flash Resources
• The Heated Debate Continues…