Skinning Tutorial

The movie clip named "Day", which is located in the library, contains movie clips with the different states that each date button can have.

The movie clips for each state have the following labels (values):

_up - button's normal state
_over - when themouse is over the button
selected - when the button is selected (it is also where the playhead stays when the button is toggled)
disabled - when the button is disabled

Every date button in the calendar can have different states and values. This means that you can easily add any number of different 'skins' for it.

Here are the step-by-step instructions:

Locate the day movie clip in the Assets folder from the library:

Double-click on it to edit it. Its timeline by default looks like this:

By default, there is one (default) state defined. We can change the appearance of the component by either editing the default state or by adding new states; in most of the cases you will want to do both.

The default state will normally be used for the default 'look' (when another state is not specified) of the date button in the calendar. You will be adding new states for new kinds of events that you want to mark in a different way.

Let's say that we want to use the calendar to mark birthdays. We want to show birthdays differently from ordinary days so we will have to make a new 'birthday' state.

First, we will make a copy of the default state and change the appearance of the copy to be shown as birthday. Right-click on the default_state movie clip in the library and select "Duplicate" from the menu:

Rename the newly created movie clip to 'birthday_state'. Double-click on the Day movie clip in the library and create a 'birthday' label in the main timeline of the 'day' movie clip:

Select the empty keyframe under the 'birthday' label and drag the 'birthday_state' movie clip that you have just created in the previous step. Set its coordinates to 0,0 and name the instance "_btn" (Note: Every new state added needs to have the same instance name _btn). Double-click on the 'birthday_state' movie clip on the stage to edit it.

For this example, we have a birthday-cake icon that looks like this:

We will create a new layer under the 3 existing layers, called 'bitmap', and drag the icon from the library into this layer (at coordinates 0,0). Next we will edit the rectangles on the 'gfx' layer, changing their size and transparency to create the visual appearance that we need. In the end we will have a button that looks like this:

The timeline should now look like this:

Because we changed the size of the button and because all the calendar buttons should be the same size, we will resize the rectangles on the 'gfx' layer of the default_state to be the same size.

We also want to change the font used to display the days, months and year to 'Georgia', so we will edit the textfields inside the 'day_name' and 'month_year' movie clips in the library.

In the end, our calendar should look like this:

The XML used in the above example is:

<?xml version="1.0" encoding="utf-8"?>
  <events init="0" from="1/7/2003" to="0">
  <day date="0" value="selected">Today!</day>
  <recurrent type="year" pattern="1" month="7" monthday="4" state="birthday"/>
</events>

For more information about using XML to setup the calendar please read Using XML.