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

Skinning Components with Style

Free Members Tutorial

Changing Style Properties for Components

Skinning or Styling refers to the user's option to change some of the appearance aspects of the Components in the Flash Movie using ActionScript. With the example in this tutorial you will be able to take almost any graphical Flash 8 or MX04 Component and quickly transform its many properties to fit any theme on any website.

Below is an example file setup to let you view real-time how the Button, CheckBox, ComboBox, List, RadioButton, and TextArea Components behave when their style Halo Theme properties are changed:

Example: Download the Flash file Com 608a

• The Component that is being changed is called the: Target
• The aspect of the target to be changed is called the: Property
• The property is going to be changed to is called the: Value

There are many levels upon which you can set a Style property, including the Class, Theme, and Component type levels. The lowest level would be styling an individual Component, and the highest would be styling all Components of all types in a Flash Movie. These are the two levels that will be discussed in this tutorial: Individual and Global Skinning.

Example: Download the Flash file Com 608b

Halo orange theme with a single Component.

Note: For a complete listing of all the properties associated with each Component, refer to this pdf file: Component Style Properties.pdf

Styling Individual Components

If you have only one Component in your Flash Movie and you would like to change its Style properties, or if you have many but only want to change one specific Component's properties, then it's most practical to use code to skin your Components individually.

Note: Styling for both the Halo and Sample Theme Components is the same except both have certain differences in what properties they will accept. For example, the property themeColor is exclusive to the Halo theme, and symbolColor is exclusive to the Sample theme. Look in the Help file to verify that the property you are about to change is supported by that Theme (how to do this is discussed below).

Cross Ref: Sample Theme

Step One: Setting up the Flash Document

1. Open a New Flash Document: File > New > General Tab > Flash Document > OK (Ctrl N)
2. Go to: Modify > Document (Ctrl J)
3. Set the size to: 300 x 100 pixels
4. If you wish select a: Background Color
5. Click: OK

Step Two: Setting up the Button Component

1. If the Components Panel is closed, open it: Window > Components (Ctrl F7)

   For Flash MX04: Window > Development Panels > Components (Ctrl F7)

2. From the Components Panel navigate to: User Interface > Button



3. Double click the Component: Button

Note: A Button Component is now on the Stage. It maybe under the Components Panel!

4. Drag the Button Component to the: Center of the Stage
5. If the Properties Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)

For Flash MX04: Window > Properties (Ctrl F3)

6. Select the: Button Component
7. In the Instance Name field, enter: sampleButton
   
   
   Instance Name: sampleButton
   
   
8. If the Timeline is closed, open it: Window > Timeline (Ctrl Alt T)
9. Insert a new Layer by clicking on the Insert Layer button:
10. Rename it: Actions


New Layer called: Actions.

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

Global Styling All Components

If you have more than one Component and you would like to change a specific style property for all of them at once, then it is more efficient to set a global style change so that all the Components in your Flash Movie will look the same.

Example: Download the Flash file Com 608c

Halo Orange theme with multiple Components

Step Four: Setting up the Flash Document

1. Open a New Flash Document: File > New > General Tab > Flash Document > OK (Ctrl N)
2. Go to: Modify > Document (Ctrl J)
3. Set the size to: 400 x 200 pixels
4. If you wish select a: Background Color
5. Click: OK
   
   
6. If the Components Panel is closed, open it: Window > Components (Ctrl F7)

   For Flash MX04: Window > Development Panels > Components (Ctrl F7)

7. From the Components Panel, double-click: Button Component


A Button Component is now on the Stage.

Note: It maybe under the Component Panel!

8. From the Components Panel, double-click: CheckBox Component


A CheckBox Component is now on the Stage.

9. From the Components Panel, double-click: ComboBox Component


A ComboBox Component is now on the Stage.

10. From the Components Panel, double-click: RadioButton Component


A RadioButton Component is now on the Stage.

11. Reposition the Components so you can see them all.
12. If the Timeline is closed, open it: Window > Timeline (Ctrl Alt T)
13. Insert a new Layer by clicking on the Insert Layer button:
14. Rename it: Actions


New Layer called: Actions.

Step Five: Changing Style Properties

1. Select the Frame one of: 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:

   _global.style.setStyle("themeColor", "haloOrange")

4. Test your Movie: Control > Test Movie (Ctrl Enter)

   Example: Download the Flash file Com 608c

   
   All four Components now have an orange theme

The ActionScript Explained:

For an explanation on the two parameters refer back to Styling Individual Halo Theme Components: Step Three

_global.style.setStyle("themeColor", "haloOrange")
This time we have replaced the reference to the Component's instance name with "_global.style". This in effect makes a global statement that any Components inside the Movie will have its themeColor property changed to haloOrange. This can be overridden if another style property comes afterwards. To see this in action:

Step Six: Overriding the Global Style

1. If the Properties Inspector is closed, open it: Window > Property (Ctrl F3)
2. Select the: Button Component
3. In the Instance Name field, enter: sampleButton
4. Select the first frame of the Actions layer and add the following code after the line previously entered:

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

5. Test your Movie: Control > Test Movie (Ctrl Enter)

   Example: Download the Flash file Com 608d

   
   Click the button to see the Blue Halo and the rest still have an Orange Halo.

Now all your Components have the orange theme except the button Component, which now has the Blue theme.