Smart Clips are a fantastic time-saving feature of Flash 5 that allow you to create reusable components that you can tailor to different situations. In this article, David Emberton walks you through the creation of a Smart Clip Calendar Control and its implementation as part of a fictional diary.

This article is derived from the book Flash 5 Magic (New Riders, 2001), by David J. Emberton and J. Scott Hamlin.

Like this article? We recommend

Like this article? We recommend

Smart Clips are a fantastic time-saving feature of Flash 5. They allow you to
create what's known as parameterized contentin other words,
reusable components that you can quickly tailor to any number of different
situations. Smart Clips differ from regular movie clips because each instance of
a Smart Clip can be configured differently by setting its parametershence
the term parameterized.

This article deals with the creation of a Smart Clip calendar control and its
implementation as part of a fictional diary (see Figure 1). The Smart Clip has a
fairly generic function: to allow the user to select a particular date so that
it can be inserted into the movie and then customized using a special custom UI
(or user interface) that is actually built in Flash!

Once you've mastered this technique, you'll be able to create any
number of Smart Clips of your own, complete with attractive Flash-based
interfaces. You can then use these at your workplace, distribute them free, or
even sell them to other Flash developers. Because Smart Clips are so flexible,
you'll find that it's easier than ever to build modular, reusable
Flash components.

Scripting the Calendar

The calendar control begins its life as an ordinary movie clip symbol.
It's actually constructed fairly simply, as a grid of text fields that are
filled with numbers depending on the month and year currently being displayed.
The fields and buttons have all been laid out for you, so the following steps
concentrate on the ActionScript code that makes the calendar work:

Download the source file archive, open the
unzipped MegansDiary_start.fla file, and save it to your hard drive. The final
file is MegansDiary_final.fla.

Open the Library window and locate the Calendar Control symbol (see
Figure 2). Double-click to edit it.

The symbol is made up of background graphics, a text field for displaying
the current month and year, a grid of date fields, and two arrow buttons on
either side for scrolling between months. Each of the date fields in the grid is
an instance of the same movie clip, containing a text field for holding its date
number as well as a simple button that allows the user to click the selected
date.

Select the empty keyframe on the ActionScript layer, and then open the
Actions panel.

You do this first to make sure that the Months array is available to the
other functions. ActionScript deals with dates as numbers and expresses months
specifically as a number between 0 (for January) and 11 (for December). This
zero-based counting system works perfectly with the Array object
because its first element is always numbered 0 also. So, by creating an array of
text strings that correspond to each of the 12 months, you have an easy way of
plugging any month number into the Months array to get a text version. For
example, if ActionScript gives you a date number 3, it's a simple matter to
evaluate Months[3] to get the text string April.

Figure 3 Notice that Flash keeps all the data for the Months array on one line.

NOTE

Although ActionScript uses zero-based counting for months, it uses regular
one-based counting for years and days. So, even though month 3 equals April, day
number 15 is just 15there is no day 0.

Insert the ActionScript to initialize the calendar by creating a new
Date object and then setting its basic properties (see Figure
4).

Date is one of the predefined ActionScript objects, so you
don't have to design your own date-handling objects. When the new
Date object, CalendarDate, is created here, it is set by
default to the current time according to the system clock.

Figure 4 Make sure that you have entered the Date object and
initialized its properties correctly.

Part of the Smart Clip customization that will be added later, however, is
the ability to override the default behavior and actually specify what month and
year the calendar will display. So, two if statements check to
determine the value of the Smart Clip parameters ShowYear and
ShowMonth. If they equal Now, nothing is changed; otherwise
the values are used as arguments for the setYear and setMonth
methods of CalendarDate (inherited from the Date object).

The final line in this block invokes the function DrawCalendar(),
which analyzes the current month and displays the correct information in each of
the date fields in the grid. The DrawCalendar() function is added in
step 7.

The calendar, invoked whenever the user clicks an individual date button,
determines what date has been selected. That information is stored in a new
Date object and is passed to a function specified in another of the
Smart Clip parameters, SendDateTo. Even though SendDateTo is a
variable, it can be used in conjunction with eval to point to a
function.

To insert the DrawCalendar() function, which is required to
update the calendar and its grid of date fields, insert this code next:

This first block of statements (see Figure 5) acts to convert numerical
date information into a more readable text string displayed at the top of the
calendar in "Month Year" format. The CurrentMonth variable is
obtained by accessing the element of the Monthsarray corresponding to
the currently displayed month. Calendar.getMonth() returns a number
equal to the current month of the CalendarDate object. This function
call is used to access the corresponding element of the Months array, which is
Months[CalendarDate.getMonth()]. The result is the text name of the
current month.

CurrentYear is slightly easier to determine; you use the
fairly straightforward getFullYear method of CalendarDate.
Then CalendarText, the variable attached to the text field at the top
of the calendar box, is set to the CurrentMonth text concatenated (or
combined) with a space and CurrentYear.

Figure 5 Make sure that the code for enabling the calendar and the DrawCalendar() function are entered correctly.

This block of code (see Figure 6) is designed to figure out what day
of the week the first day of the current month falls on. This is important for
properly displaying the current month of dates because they all need to line up
correctly with the matching Mondays, Tuesdays, and Wednesdays. Because the
setDate() method of CalendarDate sets the current date to 1
(the first of the month), the getDay() method can then be used to get
the corresponding number of the first day in the current month. This number
determines whether the first day falls on a Monday, Tuesday, or whatever. (The
total number of days in the current month, determined by a function that you add
in a later step, makes sure that only the correct number of days is shown in
each month.)

Figure 6 Make sure that the code you inserted for determining the first
day of the month is in the correct position.

Insert this code to create a for loop (see Figure 7) that paves
the way for the fresh date information by looping through all the date field
movie clips and setting their _visible properties to
false:

This hides all the dates in the grid, and only the relevant ones will be
reactivated in the next block of the code. The number 42 appears
because that is the total number of fields in the grid. That's much more
than 31, granted, but, depending on the day of the week that the first of the
month falls on, all the dates following can be displaced farther down the grid
and past the 31st field.

Insert the code for a second for loop that counts through the
TotalDays in the currently selected month, sets their _visible
properties to true, and then sets the value of the DateFieldtext field in each date in the grid. The DateField values are set to
Counter + 1, because Counter starts at 0 even though the first
actual date number is 1.

This function simply takes the Month and Year arguments
passed to it and cycles through a series of if statements to determine
the number of days in the month. The Year value is passed on to the
next and final function, IsLeapYear().

The double pipe, ||, is another way of writing or, which
allows for multiple arguments to be written into the same if statement.
The if statement in this code block is the code equivalent of the old
rhyme "30 days has September, April, June, and November. All the rest have
31, excepting February in a line, which in a leap year has 29."

The return() action is used to send values back to whatever object
called the function. In this case, it returns the number of days in the
specified month.

Insert the last block of code to complete Calendar Control (see Figure 8):

This function uses a lesser-known operator called modulo. You can learn
more about modulo in the ActionScript reference that came with your software. In
a nutshell, it divides one value by another and returns the remainder. This is
the same process taught to schoolchildren as a precursor to short division. If
Year can be divided by 4 and 400 to have no remainder, but when divided
by 100 it does have a remainder, it's considered to be a leap year.
The return action is then used to pass a true or false value
back to the GetDaysInMonth() function from whence it was called.

The Calendar Control symbol is effectively complete, but before you drag an
instance of it onto the Stage, it needs to be set up as a Smart Clip, and part
of that process involves preparing the custom user interface.

Figure 8 Make sure that the code that checks for leap years is inserted
correctly.