Skinning Components - Themes and Styles	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Skinning Components with Style

Free Members Tutorial

Step Three: Changing Style Properties

1. Select the Frame 1 of the: Actions Layer
2. If the Actions Panel is closed, open it: Window > Actions (F9)

   For Flash MX04: Window > Development Panels > Actions (F9)

3. In the Actions Panel, enter the following code:

   _root.sampleButton.setStyle("themeColor", "haloOrange");

   Cross Ref: In you do not know how to input code into the Actions Panel see the tutorial on the Actions Panel

4. Test your Movie: Control > Test Movie

   
   You will have to Hover Over or Click the sampleButton to see the Orange Theme.

The ActionScript Explained:

The following line contains two parameters that change the Component style:

_root.sampleButton.setStyle("themeColor", "haloOrange");
The first parameter "themeColor" refers to the property you are about to change. In this case, you are about to change the overall "halo" theme. This parameter is always a string.

The next parameter "haloOrange" is the value you are going to change the property to. For the halo theme, the default value is "haloGreen", thus the green color you see most Components in. This line of code changes that value to "haloOrange", a preset value in Flash that gives your Components an orange color. This parameter may or may not be a String.

Note: A String is a line of text with "Quote Marks around it". As a rule of thumb, the following are usually not strings:

• Hexadecimal Color Values, such as 0xFFFFFF (although sometimes these will still work as strings)
• Arrays, such as [0x00FFFF, 0x0000FF], which some properties (such as alternatingRowColors) use
• Easing transitions, such as Elastic. easeOut, which are used in easing properties

All other style property values must be set inside quotations.

Each property also has a set type of possible values that it will accept. For example:

• "Color" properties (anything that ends in "Color") will only take hexadecimal values or certain "color string" values such as (but not limited to) "red", "blue", and "green"
• Theme properties will take the same as any color property with the addition of "haloGreen", "haloOrange", and "haloBlue"
• "fontFamily" will take only standard font values, such as "Arial" or "_sans"
• "fontSize" will take any number value
• "fontWeight" will take "bold" or "none"
• "fontStyle" will take "italic" or 'none"
• "textDecoration" will take "underline" or "none"

Those are some of the most common properties and their possible values. To view possible values for other Component properties, along with other important information:

1. If the Help Panel is closed, open it: Help > Flash Help (F1)
2. From the left side Panel, navigate to your desired Component's style properties: Components Language Reference > Desired Component > Customizing the __ Component > Using Styles with the __ Component


Browse to the Component type you want to change. In this case Button Component.

3. On the right side Help Panel you can scroll down until you can see a table of the different style properties for the Component and a description for each. In each description you will see what the style property changes and possible values for the property.

   Example: Using Styles with Button Components