What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

How to Customize Components in Flash

Customizing Components

Using styles to customize component color and text

Setting styles

Setting styles on a component instance

Setting global styles

Setting custom styles for groups of components

Setting styles for a component class

Setting inheriting styles on a container

Using global, custom, and class styles in the same document

About color style properties

Customizing component animations

Getting style property values

About skinning components

Editing component skins in a document

Creating new component skins

Linking skin color to styles

Applying new skins to a component

Applying new skins to a subcomponent

Changing skin properties in a subcomponent

About themes

Switching themes

Creating a new theme

Modifying default style property values in a theme

Applying a new theme to a document

Combining skinning and styles to customize a component

 
Customizing Components

TOP

You might want to change the appearance of components as you use them in different applications. You can customize component appearance using the following three approaches, individually or in combination:

Styles User interface (UI) components have style properties that set the appearance of some aspects of a component. Each component has its own set of modifiable style properties, and not all visual aspects of a component can be changed by setting a style. For more information, see Using styles to customize component color and text.

Skins A skin comprises the collection of symbols that make up the graphical display of a component. Skinning is the process of changing the appearance of a component by modifying or replacing its source graphics. A skin can be a small piece, like a border's edge or corner, or a composite piece like the entire picture of a button in its up state (the state in which it hasn't been pressed). A skin can also be a symbol without a graphic, which contains code that draws a piece of the component. Some aspects of a component that cannot be set through its style properties can be set by modifying the skin. For more information, see About skinning components.

Themes A theme is a collection of both styles and skins that you can save as a FLA file and apply to another document. For more information, see About themes.

This chapter contains the following sections:

  • Using styles to customize component color and text

  • About skinning components

  • About themes

  • Combining skinning and styles to customize a component

 

Using styles to customize component color and text

TOP

Flash provides style properties that you can edit for every UI component. Within the documentation for each specific component, you'll see a table that lists the modifiable styles for that component (for example, you can see a table of styles for the Accordion component in Using styles with the Accordion component in the Components Language Reference). Additionally, UI components inherit the setStyle() and getStyle() methods from the UIObject class (see UIObject.setStyle() and UIObject.getStyle()). For a component instance, you can use the setStyle() and getStyle() methods to set and get style property values, as shown later inSetting styles on a component instance.

NOTE : You cannot set styles for the media components.

Using style declarations and themes
In a broader scope, styles are organized within style declarations where you can control style property values across multiple component instances. A style declaration is an object created by the CSSStyleDeclaration class, and its properties are the style settings you can assign to components. Style declarations in ActionScript are modeled after the way "cascading style sheets" (CSS) affect HTML pages. For HTML pages, you can create a style sheet file that defines style properties for the content in a group of HTML pages. With components, you can create a style declaration object and add style properties to that style declaration object to control the appearance of components in a Flash document.

Furthermore, style declarations are organized within themes. Flash provides two visual themes for components: Halo (HaloTheme.fla) and Sample (SampleTheme.fla). A theme is a set of styles and graphics that controls the appearance of components in a document. Each theme provides styles to the components. The styles used by each component depend in part on what theme the document uses. Some styles, such as defaultIcon, are used by the associated components regardless of the theme applied to the document. Other styles, such as themeColor and symbolBackgroundColor, are used only by components if the corresponding theme is in use. For example, themeColor is used only if the Halo theme is in use, and symbolBackgroundColor is used only if the Sample theme is in use. To determine what style properties you can set for a component, you must know which theme is assigned to that component. The style tables for each component in Components Language Reference indicate whether each style property applies to one or both of the supplied themes. (For more information, see About themes.)

Understanding style settings

As you use styles and style declarations, you'll notice that you can set styles in various ways (at the global, theme, class, style declaration, or style property levels). And, some style properties may be inherited from a parent component (for example, an Accordion child panel may inherit a font treatment from the Accordion component). Here are a few key points about style behavior:

Theme dependence The style properties you can set on a particular component are determined by the current theme. By default, Flash components are designed to use the Halo theme, but Flash also provides a Sample theme. So, when you read a style properties table, like the one for the Button component in Using styles with the Button component in the Components Language Reference, notice which theme supports the style you want. The table indicates Halo, Sample, or Both (meaning both themes support the style property). To change the current theme, see Switching themes.

Inheritance You cannot set inheritance within ActionScript. A component child is designed either to inherit a style from the parent component, or not.

Global style sheets Style declarations in Flash don't support "cascading" for Flash documents the way CSS does for HTML documents. All style sheet declaration objects are defined at the application (global) level.

Precedence If a component style is set in more than one way (for example, if textColor is set at the global level and at the component instance level), Flash uses the first style it encounters according to the order listed in Using global, custom, and class styles in the same document.


 
Setting styles

TOP

The existence of style properties, their organization within style declarations, and the broader organization of style declarations and graphics into themes enables you to customize a component in the following ways:

  • Set styles on a component instance.

You can change color and text properties of a single component instance. This is effective in some situations, but it can be time consuming if you need to set individual properties on all the components in a document.

  • Adjust the global style declaration that sets styles for all components in a document.

If you want to apply a consistent look to an entire document, you can create styles on the global style declaration.

  • Create custom style declarations and apply them to several component instances.

You may want to have groups of components in a document share a style. To do this, you can create custom style declarations to apply to the components you specify.

  • Create default class style declarations.

You can define a default class style declaration so that every instance of a class shares a default appearance.

  • Use inheriting styles to set styles for components in a portion of a document.

The values of style properties set on containers are inherited by contained components.

Flash does not display changes made to style properties when you view components on the Stage using the Live Preview feature. For more information, see Components in Live Preview.

In addition to the topics mentioned above, this section contains the following topics:

  • Using global, custom, and class styles in the same document

  • About color style properties

  • Customizing component animations

  • Getting style property values
     

Setting styles on a component instance

TOP

You can write ActionScript code to set and get style properties on any component instance. The UIObject.setStyle() and UIObject.getStyle() methods can be called directly from any UI component. The following syntax specifies a property and value for a component instance:

instanceName.setStyle("propertyName", value);

For example, the following code sets the accent colors on a Button instance called myButton that uses the Halo theme:

myButton.setStyle("themeColor", "haloBlue");

NOTE : If the value is a string, it must be enclosed in quotation marks.

You can also access the styles directly as properties (for example, myButton.color = 0xFF00FF).

Style properties set on a component instance through setStyle() have the highest priority and override all other style settings based on style declaration or theme. However, the more properties you set using setStyle() on a single component instance, the slower the component will render at runtime. You can speed the rendering of a customized component with ActionScript that defines the style properties during the creation of the component instance using UIObject.createClassObject() in the Components Language Reference, and placing the style settings in the initObject parameter. For example, with a ComboBox component in the current document library, the following code creates a combo box instance named my_cb, and sets the

text in the combo box to italic and aligned right:

createClassObject(mx.controls.ComboBox, "my_cb", 1, {fontStyle:"italic", textAlign:"right"});

my_cb.addItem({data:1, label:"One"});

NOTE : If you want to change multiple properties, or change properties for multiple component instances, you can create a custom style. A component instance that uses a custom style for multiple properties will render faster than a component instance with several setStyle() calls. For more information, see Setting custom styles for groups of components.

To set or change a property for a single component instance that uses the Halo theme:

  1. Select the component instance on the Stage.

  2. In the Property inspector, give it the instance name myComponent.

  3. Open the Actions panel and select Scene 1, then select Layer 1: Frame 1.

  4. Enter the following code to change the instance to orange:

    myComponent.setStyle("themeColor", "haloOrange");

  5. Select Control > Test Movie to view the changes.

For a list of styles supported by a particular component, see the component's entry in the Components Language Reference.

To create a component instance and set multiple properties simultaneously using ActionScript:

  1. Drag a component to the library.

  2. Open the Actions panel and select Scene 1, then select Layer 1: Frame 1.

  3. Enter the following syntax to create an instance of the component and set its properties:

    createClassObject(className, "instance_name", depth, {style:"setting", style:"setting"});

    So, for example, with a Button component in the library, the following ActionScript creates a button instance my_button at depth 1 with the text styles set to purple and italicized:

    createClassObject(mx.controls.Button, "my_button", 1, {label:"Hello", color:"0x9900CC", fontStyle:"italic"});

  4. Select Control > Test Movie to view the changes.

     

Setting global styles

TOP

By default, all components adhere to a global style declaration until another style declaration is attached to the component (as in Setting custom styles for groups of components). The global style declaration is assigned to all Flash components built with version 2 of the Macromedia Component Architecture. The _global object has a style property (_global.style) that is an instance of CSSStyleDeclaration, and acts as the global style declaration. If you change a style property's value on the global style declaration, the change is applied to all components in your Flash document.

CAUTION : Some styles are set on a component class's CSSStyleDeclaration instance (for example, the backgroundColor style of the TextArea and TextInput components). Because the class style declaration takes precedence over the global style declaration when style values are determined, setting backgroundColor on the global style declaration would have no effect on the TextArea and TextInput components. For more information about style precedence, see Using global, custom, and class styles in the same document. For more information about editing a component class's CSSStyleDeclaration, see Setting styles for a component class.

To change one or more properties in the global style declaration:

  1. Make sure the document contains at least one component instance.

  2. Select a frame in the Timeline on which (or before which) the components appear.

  3. In the Actions panel, use code like the following to change properties on the global style declaration. You need to list only the properties whose values you want to change, as shown here:

    _global.style.setStyle("color", 0xCC6699);

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

    _global.style.setStyle("fontSize",16);

    _global.style.setStyle("fontFamily" , "_serif");

  4. Select Control > Test Movie to see the changes.
     

Setting custom styles for groups of components

TOP

You can create custom style declarations to specify a unique set of properties for groups of components in your Flash document. In addition to the _global object's style property (discussed in Setting global styles), which determines the default style declaration for an entire Flash document, the _global object also has a styles property, which is a list of available custom style declarations. So, you can create a style declaration as a new instance of the CSSStyleDeclaration object, assign it a custom style name, and place it in the _global.styles list. Then, you specify the properties and values for the style, and assign the style name to component instances that should share the same look.

Keep in mind that when you assign the style name to a component instance, the component responds only to style properties that component supports. For a list of the style properties each component supports, see the individual component entries in the Components Language Reference.

To make changes to a custom style format, use the following syntax:

_global.styles.CustomStyleName.setStyle(propertyName, propertyValue);

Custom style settings have priority over class, inherited, and global style settings. For a list of style precedence, see Using global, custom, and class styles in the same document.

To create a custom style declaration for a group of components:

  1. Add at least one component to the Stage.

    This example uses three button components with the instance names a, b, and c. If you use different components, give them instance names in the Property inspector and use those instance names in step 8.

  2. Select a frame in the Timeline on which (or before which) the component appears.

  3. Open the Actions panel.

  4. Add the following import statement so you will have access to the constructor function for creating a new style declaration from within the CSSStyleDeclaration class:

    import mx.styles.CSSStyleDeclaration;

  5. Use the following syntax to create an instance of the CSSStyleDeclaration object to define the new custom style format:

    var new_style:Object = new CSSStyleDeclaration();

  6. Give your style declaration a name, like "myStyle," in the _global.styles list of custom style declarations, and identify the object containing all the properties for your new style declaration.

    _global.styles.myStyle = new_style;

  7. Use the setStyle() method (inherited from the UIObject class) to add properties to the new_style object, which are in turn associated with the custom style declaration myStyle:

    new_style.setStyle("fontFamily", "_serif");

    new_style.setStyle("fontSize", 14);

    new_style.setStyle("fontWeight", "bold");

    new_style.setStyle("textDecoration", "underline");

    new_style.setStyle("color", 0x666699);]

  8. In the same Script pane, use the following syntax to set the styleName property of three specific components to the custom style declaration name:

a.setStyle("styleName", "myStyle");

b.setStyle("styleName", "myStyle");

c.setStyle("styleName", "myStyle");

You can also access styles on the custom style declaration using the setStyle() and getStyle() methods through the declaration's global styleName property. For example, the following code sets the backgroundColor style on the myStyle style declaration:

_global.styles.myStyle.setStyle("themeColor", "haloOrange");

However, steps 5 and 6 associated the new_style instance with the style declaration so you can use the shorter syntax, like new_style.setStyle("themeColor", "haloOrange").
 

Setting styles for a component class

TOP

You can define a class style declaration for any class of component (Button, CheckBox, and so on) that sets default styles for each instance of that class. You must create the style declaration before you create the instances. Some components, such as TextArea and TextInput, have class style declarations predefined by default because their borderStyle and backgroundColor properties must be customized.

CAUTION : If you replace a class style sheet, make sure to add any styles that you want from the old style sheet; otherwise, they will be overwritten.

The following code first checks to see if the current theme already has a style declaration for CheckBox, and, if not, creates a new one. Then the code uses the setStyle() method to define a style property for the CheckBox style declaration (in this case, "color" sets the color for all check box label text to blue):

if (_global.styles.CheckBox == undefined) {

_global.styles.CheckBox = new mx.styles.CSSStyleDeclaration();

}

_global.styles.CheckBox.setStyle("color", 0x0000FF);

For a table of the style properties you can set on the CheckBox component, see Using styles with the CheckBox component in the Components Language Reference.

Custom style settings have priority over inherited and global style settings. For a list of style precedence, see Using global, custom, and class styles in the same document.

 

Setting inheriting styles on a container

TOP

An inherited style is a style that inherits its value from parent components in the document's MovieClip hierarchy. If a text or color style is not set at an instance, custom, or class level, Flash searches the MovieClip hierarchy for the style value. Thus, if you set styles on a container component, the contained components inherit these style settings.

The following styles are inheriting styles:

  • fontFamily

  • fontSize

  • fontStyle

  • fontWeight

  • textAlign

  • textIndent

  • All single-value color styles (for example, themeColor is an inheriting style, but alternatingRowColors is not)

The Style Manager tells Flash whether a style inherits its value. Additional styles can also be added at runtime as inheriting styles. For more information, see StyleManager class in the Components Language Reference.

NOTE : One major difference between the implementation of styles for Flash components, and cascading style sheets for HTML pages, is that the CSS inherit value is not supported for Flash components. Styles are either inherited or not by component design.

Inherited styles take priority over global styles. For a list of style precedence, see Using global, custom, and class styles in the same document.

The following example demonstrates how inheriting styles can be used with an Accordion component, which is available with Flash Professional 8. (The inheriting styles feature is supported by both Flash Basic 8 and Flash Professional 8.)

To create an Accordion component with styles that are inherited by the components in the individual Accordion panes:

  1. Open a new FLA file.

  2. Drag an Accordion component from the Components panel to the Stage.

  3. Use the Property inspector to name and size the Accordion component. For this example, give the component the instance name accordion.

  4. Drag a TextInput component and a Button component from the Components panel to the library.

    By dragging the components to the library, you make them available to your script at runtime.

  5. Add the following ActionScript to the first frame of the Timeline:

    var section1 = accordion.createChild(mx.core.View, "section1", {label: "First Section"});

    var section2 = accordion.createChild(mx.core.View, "section2", {label: "Second Section"});

    var input1 = section1.createChild(mx.controls.TextInput, "input1");

    var button1 = section1.createChild(mx.controls.Button, "button1");

    input1.text = "Text Input";

    button1.label = "Button";

    button1.move(0, input1.height + 10);

    var input2 = section2.createChild(mx.controls.TextInput, "input2");

    var button2 = section2.createChild(mx.controls.Button, "button2");

    input2.text = "Text Input";

    button2.label = "Button";

    button2.move(0, input2.height + 10);

    The above code adds two children to the Accordion component and loads each with a TextInput and Button control, which this example uses to demonstrate style inheritance.

  6. Select Control > Test Movie to see the document before adding style inheritance.

  7. Add the following ActionScript to the end of the script in the first frame:

    accordion.setStyle("fontStyle", "italic");

  8. Select Control > Test Movie to see the changes.

Notice that the fontStyle setting on the Accordion component affects not only the Accordion text itself but also the text associated with the TextInput and Button components inside the Accordion component.

 

Using global, custom, and class styles in the same document

TOP

 
If you define a style in only one place in a document, Flash uses that definition when it needs to know a property's value. However, one Flash document can have a variety of style settings--style properties set directly on component instances, custom style declarations, default class style declarations, inheriting styles, and a global style declaration. In such a situation, Flash determines the value of a property by looking for its definition in all these places in a specific order.

Flash looks for styles in the following order until a value is found:

  1. Flash looks for a style property on the component instance.
  2. Flash looks at the styleName property of the instance to see if a custom style declaration is assigned to it.
  3. Flash looks for the property on a default class style declaration.
  4. If the style is one of the inheriting styles, Flash looks through the parent hierarchy for an inherited value.
  5. Flash looks for the style in the global style declaration.
  6. If the property is still not defined, the property has the value undefined.

 

About color style properties

TOP

Color style properties behave differently than noncolor properties. All color properties have a name that ends in "Color"--for example, backgroundColor, disabledColor, and color. When color style properties are changed, the color is immediately changed on the instance and in all of the appropriate child instances. All other style property changes simply mark the object as needing to be redrawn, and changes don't occur until the next frame.

The value of a color style property can be a number, a string, or an object. If it is a number, it represents the RGB value of the color as a hexadecimal number (0xRRGGBB). If the value is a string, it must be a color name.

Color names are strings that map to commonly used colors. You can add new color names by using the Style Manager (see StyleManager class in the Components Language Reference). The following table lists the default color names:

 

Color name

Value

black

0x000000

white

0xFFFFFF

red

0xFF0000

green

0x00FF00

blue

0x0000FF

magenta

0xFF00FF

yellow

0xFFFF00

cyan

0x00FFFF

haloGreen

0x80FF4D

haloBlue

0x2BF5F5

haloOrange

0xFFC200

NOTE : If the color name is not defined, the component may not draw correctly.

You can use any valid ActionScript identifier to create your own color names (for example, "WindowText" or "ButtonText"). Use the Style Manager to define new colors, as shown here:
mx.styles.StyleManager.registerColorName("special_blue", 0x0066ff);

Most components cannot handle an object as a color style property value. However, certain components can handle color objects that represent gradients or other color combinations. For more information, see the "Using styles" section of each component's entry in the Components Language Reference.

You can use class style declarations and color names to easily control the colors of text and symbols on the screen. For example, if you want to provide a display configuration screen that looks like Microsoft Windows, you would define color names like ButtonText and WindowText and class style declarations like Button, CheckBox, and Window.

NOTE : Some components provide style properties that are an array of colors, such as alternatingRowColors. You must set these styles only as an array of numeric RGB values, not color names.
 

Customizing component animations

TOP

Several components, such as the Accordion, ComboBox, and Tree components, provide animation to demonstrate the transition between component states--for example, when switching between Accordion children, expanding the ComboBox drop-down list, and expanding or collapsing Tree folders. Additionally, components provide animation related to the selection and deselection of an item, such as rows in a list.

You can control aspects of these animations through the following styles:
 

Animation style

Description

openDuration

The duration of the transition for open easing in Accordion, ComboBox, and Tree components, in milliseconds. The default value is 250.

openEasing

A reference to a tweening function that controls the state animation in the Accordion, ComboBox, and Tree components. The default equation uses a sine in/out formula.

popupDuration

The duration of the transition as a menu opens in the Menu component, in milliseconds. The default value is 150. Note, however, that the animation always uses the default sine in/out equation.

selectionDuration

The duration of the transition in ComboBox, DataGrid, List, and Tree components from a normal to selected state or back from selected to normal, in milliseconds. The default value is 200.

selectionEasing

A reference to a tweening function that controls the selection animation in ComboBox, DataGrid, List, and Tree components. This style applies only for the transition from a normal to a selected state. The default equation uses a sine in/out formula.


The mx.transitions.easing package provides six classes to control easing:
 

Easing class

Description

Back

Extends beyond the transition range at one or both ends one time to provide a slight overflow effect.

Bounce

Provides a bouncing effect entirely within the transition range at one or both ends. The number of bounces is related to the duration: longer durations produce more bounces.

Elastic

Provides an elastic effect that falls outside the transition range at one or both ends. The amount of elasticity is unaffected by the duration.

None

Provides an equal movement from start to end with no effects, slowing, or speeding. This transition is also commonly referred to as a linear transition.

Regular

Provides for slower movement at one or both ends for a speeding-up effect, a slowing-down effect, or both.

Strong

Provides for much slower movement at one or both ends. This effect is similar to Regular but is more pronounced.


Each of the classes in the mx.transitions.easing package provides the following three easing methods:
 

Easing method

Description

easeIn

Provides the easing effect at the beginning of the transition.

easeOut

Provides the easing effect at the end of the transition.

easeInOut

Provides the easing effect at the beginning and end of the transition.

 

The following animation demonstrates the different easing classes and methods. As you use the radio buttons to choose a class, method, and duration, the ball jumps from left to right in response to your settings. You can also click the Animate button to reanimate the ball using the current selection.

Because the easing methods are static methods of the easing classes, you never need to instantiate the easing classes. The methods are used in calls to setStyle(), as in the following example.

import mx.transitions.easing.*;

trace("_global.styles.Accordion = " + _global.styles.Accordion);

_global.styles.Accordion.setStyle("openDuration", 1500);

_global.styles.Accordion.setStyle("openEasing", Bounce.easeOut);

NOTE : The default equation used by all transitions is not available in the easing classes listed above. To specify that a component should use the default easing method after another easing method has been specified, call setStyle("openEasing", null).
 

Getting style property values

TOP

To retrieve a style property value, use UIObject.getStyle(). Every component that is a subclass of UIObject (which includes all version 2 components except the Media components) inherits the getStyle() method. This means you can call getStyle() from any component instance, just as you can call setStyle() from any component instance.

The following code gets the value of the themeColor style and assigns it to the variable oldStyle:

var myCheckBox:mx.controls.CheckBox;

var oldFontSize:Number

oldFontSize = myCheckBox.getStyle("fontSize");

trace(oldFontSize);

 

About skinning components

TOP

Skins are movie clip symbols a component uses to display its appearance. Most skins contain shapes that represent the component's appearance. Some skins contain only ActionScript code that draws the component in the document.

Version 2 components are compiled clips--you cannot see their assets in the library. However, the Flash installation includes FLA files that contain all the component skins. These FLA files are called themes. Each theme has a different appearance and behavior, but contains skins with the same symbol names and linkage identifiers. This lets you drag a theme onto the Stage in a document to change its appearance. You also use the theme FLA files to edit component skins. The skins are located in the Themes folder in the Library panel of each theme FLA file. (For more information about themes, see About themes.)

Each component comprises many skins. For example, the down arrow of the ScrollBar subcomponent consists of four skins: ScrollDownArrowDisabled, ScrollDownArrowDown, ScrollDownArrowOver, and ScrollDownArrowUp. The entire ScrollBar uses 13 different skin symbols.

Some components share skins; for example, components that use scroll bars--such as ComboBox, List, and ScrollPane--share the skins in the ScrollBar Skins folder. You can edit existing skins and create new skins to change the appearance of components.

The AS file that defines each component class contains code that loads specific skins for the component. Each component skin corresponds to a skin property that is assigned to a skin symbol's linkage identifier. For example, the pressed (down) state of the down arrow of the ScrollBar component has the skin property name downArrowDownName. The default value of the downArrowDownName property is "ScrollDownArrowDown", which is the linkage identifier of the skin symbol in the theme FLA file. You can edit existing skins and apply them to all components that use the skin by editing the skin symbol and leaving the existing linkage identifier. You can create new skins and apply them to specific component instances by setting the skin properties for a component instance. You do not need to edit the component's AS file to change its skin properties; you can pass skin property values to the component's constructor function when the component is created in your document.

The skin properties for each component are listed in each component's entry in the Components Dictionary. For example, the skin properties for the Button component are located here:

Components Language Reference > Button component > Customizing the Button component > Using skins with the Button component.

Choose one of the following ways to skin a component according to what you want to do. These approaches are listed from easiest to most difficult.

  • To change the skins associated with all instances of a particular component in a single document, copy and modify individual skin elements. (See Editing component skins in a document).

    This method of skinning is recommended for beginners, because it doesn't require any scripting.

  • To replace all the skins in a document with a new set (with each kind of component sharing the same appearance), apply a theme. (See About themes.)

    This method of skinning is recommended for applying a consistent look and feel across all components and across several documents.

  • To link the color of a skin element to a style property, add ActionScript code to the skin to register it as a colored skin element. (See Linking skin color to styles).

  • To use different skins for multiple instances of the same component, create new skins and set skin properties. (See Creating new component skins and Applying new skins to a component.)

  • To change skins in a subcomponent (such as a scroll bar in a List component), subclass the component. (See Applying new skins to a subcomponent.)

  • To change skins of a subcomponent that aren't directly accessible from the main component (such as a List component in a ComboBox component), replace skin properties in the prototype. (See Changing skin properties in a subcomponent.)

This section contains the following topics:

  • Editing component skins in a document

  • Creating new component skins

  • Linking skin color to styles

  • Applying new skins to a component

  • Applying new skins to a subcomponent

  • Changing skin properties in a subcomponent

 

Editing component skins in a document

TOP

To edit the skins associated with all instances of a particular component in a single document, copy the skin symbols from the theme to the document and edit the graphics as desired.
The procedure described below is very similar to creating and applying a new theme (see About themes). The primary difference is that this procedure describes copying symbols directly from the theme already in use to a single document and editing only a small number of all skins available. This is appropriate when your modifications are all in a single document and when you are modifying skins for only a few components. If the edited skins will be shared in multiple documents or encompass changes in several components, you may find editing the skins easier if you create a new theme.

An article on advanced skinning can be found online in the Macromedia Developer Center at www.macromedia.com/devnet/mx/flash/articles/skinning_2004.html.

To edit component skins in a document:

  1. If you already applied the Sample theme to a document, skip to step 5.

  2. Select File > Import > Open External Library, and select the SampleTheme.fla file.

    This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes.

  3. In the theme's Library panel, select Flash UI Components 2/Themes/MMDefault and drag the Assets folder of any components in your document to the library for your document.

    For example, drag the RadioButton Assets folder to the ThemeApply.fla library.

  4. If you dragged individual component Assets folders to the library, make sure the Assets symbol for each component is set to Export in First Frame.

    For example, the Assets folder for the RadioButton component is called RadioButton Assets; it has a symbol called RadioButtonAssets, which contains all of the individual asset symbols. If you set Export in First Frame on the RadioButtonAssets symbol, all individual asset symbols will also export in the first frame.

  5. Double-click any skin symbol you want to modify to open it in symbol-editing mode.

    For example, open the States/RadioFalseDisabled symbol.

  6. Modify the symbol or delete the graphics and create new graphics.

    You may need to select View > Zoom In to increase the magnification. When you edit a skin, you must maintain the registration point in order for the skin to be displayed correctly. The upper-left corner of all edited symbols must be at (0,0).

    For example, change the inner circle to a light gray.

  7. When you finish editing the skin symbol, click the Back button at the left side of the information bar at the top of the Stage to return to document-editing mode.

  8. Repeat steps 5-7 until you've edited all the skins you want to change.

    NOTE : The live preview of the components on the Stage will not reflect the edited skins.

  9. Select Control > Test Movie.

In this example, make sure you have a RadioButton instance on the Stage and set its enabled property to false in the Actions panel in order to see the new disabled RadioButton appearance.
 

Creating new component skins

TOP

If you want to use a particular skin for one instance of a component, but another skin for another instance of the component, you must open a theme FLA file and create a new skin symbol. Components are designed to make it easy to use different skins for different instances.

To create a new skin:

  1. Select File > Open and open the theme FLA file that you want to use as a template.

  2. Select File > Save As and select a unique name, such as MyTheme.fla.

  3. Select the skins that you want to edit (in this example, RadioTrueUp).

    The skins are located in the Themes/MMDefault/Component Assets folder (in this example, Themes/MMDefault/RadioButton Assets/States).

  4. Select Duplicate from the Library options menu (or by right-clicking the symbol), and give the symbol a unique name, such as MyRadioTrueUp.

  5. Click Advanced in the Symbol Properties dialog box, and select Export for ActionScript.

    A linkage identifier that matches the symbol name is entered automatically.

  6. Double-click the new skin in the library to open it in symbol-editing mode.

  7. Modify the movie clip, or delete it and create a new one.

    You may need to select View > Zoom In to increase the magnification. When you edit a skin, you must maintain the registration point in order for the skin to be displayed correctly. The upper-left corner of all edited symbols must be at (0,0).

  8. When you finish editing the skin symbol, click the Back button at the left side of the information bar at the top of the Stage to return to document-editing mode.

  9. Select File > Save but don't close MyTheme.fla. Now you must create a new document in which to apply the edited skin to a component.

NOTE : Flash does not display changes made to component skins when you view components on the Stage using Live Preview.
 

Linking skin color to styles

TOP

The version 2 component framework makes it easy to link a visual asset in a skin element to a style set on the component using the skin. To register a movie clip instance to a style, or an entire skin element to a style, add ActionScript code in the timeline of the skin to call mx.skins.ColoredSkinElement.setColorStyle(targetMovieClip, styleName).

To link a skin to a style property:

  1. If you already applied the Sample theme to a document, skip to step 5.

  2. Select File > Import > Open External Library, and select the SampleTheme.fla file.

    This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes.

  3. In the theme's Library panel, select Flash UI Components 2/Themes/MMDefault, and drag the Assets folder of any components in your document to the library for your document.

    For example, drag the RadioButton Assets folder to the target library.

  4. If you dragged individual component assets folders to the library, make sure the Assets symbol for each component is set to Export in First Frame.

    For example, the Assets folder for the RadioButton component is called RadioButton Assets; it has a symbol called RadioButtonAssets, which contains all of the individual asset symbols. If you set Export in First Frame on the RadioButtonAssets symbol, all individual asset symbols will also export in the first frame.

  5. Double-click any skin symbol you want to modify to open it in symbol-editing mode.

    For example, open the States/RadioFalseDisabled symbol.

  6. If the element to be colored is a graphic symbol and not a movie clip instance, use Modify > Convert to Symbol to covert it to a movie clip instance.

    For this example, change the center graphic, which is an instance of the graphic symbol RadioShape1, to a movie clip symbol; then name it Inner Circle. You do not need to select Export for ActionScript.

    It would be good practice, but it is not required, to move the newly created movie clip symbol to the Elements folder of the component assets being edited.

  7. If you converted a graphic symbol to a movie clip instance in the previous step, give that instance a name so it can be targeted in ActionScript.

    For this example, name the instance innerCircle.

  8. Add ActionScript code to register the skin element or a movie clip instance it contains as a colored skin element.

    For example, add the following code to the skin element's Timeline.

    mx.skins.ColoredSkinElement.setColorStyle(innerCircle, "symbolBackgroundDisabledColor");

    In this example you're using a color that already corresponds to an existing style name in the Sample style. Wherever possible, it's best to use style names corresponding to official

    Cascading Style Sheet standards or styles provided by the Halo and Sample themes.

  9. Repeat steps 5-8 until you've edited all the skins you want to change.

    For this example, repeat these steps for the RadioTrueDisabled skin, but instead of converting the existing graphic to a movie clip, delete the graphic and drag the existing Inner Circle symbol to the RadioTrueDisabled skin element.

  10. When you finish editing the skin symbol, click the Back button at the left side of the information bar at the top of the Stage to return to document-editing mode.

  11. Drag an instance of the component to the Stage.

    For this example, drag two RadioButton components to the Stage, set one to selected, and use ActionScript to set both to disabled in order to see the changes.

  12. Add ActionScript code to the document to set the new style property on the component instances or at the global level.

    For this example, set the property at the global level as follows:

    _global.style.setStyle("symbolBackgroundDisabledColor", 0xD9D9D9);

  13. Select Control > Test Movie.

 

Applying new skins to a component

TOP

Once you have created a new skin, you must apply it to a component in a document. You can use the createClassObject() method to dynamically create the component instances, or you can manually place the component instances on the Stage. There are two different ways to apply skins to component instances, depending on how you add the components to a document.

To dynamically create a component and apply a new skin:

  1. Select File > New to create a new Flash document.

  2. Select File > Save and give the file a unique name, such as DynamicSkinning.fla.

  3. Drag any components from the Components panel to the library, including the component whose skin you edited (in this example, RadioButton).

    This adds the symbols to the document's library, but doesn't make them visible in the document.

  4. Drag MyRadioTrueUp and any other symbols you customized from MyTheme.fla to the library of DynamicSkinning.fla.

    This adds the symbols to the document's library, but doesn't make them visible in the document.

  5. Open the Actions panel and enter the following on Frame 1:

    import mx.controls.RadioButton;

    createClassObject(RadioButton, "myRadio", 0, {trueUpIcon:"MyRadioTrueUp", label: "My Radio Button"});

  6. Select Control > Test Movie.

To manually add a component to the Stage and apply a new skin:

  1. Select File > New to create a new Flash document.

  2. Select File > Save and give the file a unique name, such as ManualSkinning.fla.

  3. Drag components from the Components panel to the Stage, including the component whose skin you edited (in this example, RadioButton).

  4. Drag MyRadioTrueUp and any other symbols you customized from MyTheme.fla to the library of ManualSkinning.fla.

    This adds the symbols to the document's library, but doesn't make them visible in the document.

  5. Select the RadioButton component on the Stage and open the Actions panel.

  6. Attach the following code to the RadioButton instance:

    onClipEvent(initialize){

    trueUpIcon = "MyRadioTrueUp";

    }

  7. Select Control > Test Movie.

 

Applying new skins to a subcomponent

TOP

In certain situations you may want to modify the skins of a subcomponent in a component, but the skin properties are not directly available (for example, there is no direct way to alter the skins of the scroll bar in a List component). The following code lets you access the scroll bar skins. All the scroll bars that are created after this code runs will also have the new skins.

If a component is composed of subcomponents, the subcomponents are identified in the component's entry in the Components Language Reference.

To apply a new skin to a subcomponent:

  1. Follow the steps in Creating new component skins, but edit a scroll bar skin. For this example, edit the ScrollDownArrowDown skin and give it the new name MyScrollDownArrowDown.

  2. Select File > New to create a new Flash document.

  3. Select File > Save and give the file a unique name, such as SubcomponentProject.fla.

  4. Drag the List component in the Components panel to the library.

    This adds the component to the Library panel, but doesn't make the component visible in the document.

  5. Drag MyScrollDownArrowDown and any other symbols you edited from MyTheme.fla to the library of SubcomponentProject.fla.

    This adds the symbol to the Library panel, but doesn't make it visible in the document.

  6. Do one of the following:

    • If you want to change all scroll bars in a document, enter the following code in the Actions panel on Frame 1 of the Timeline:

    import mx.controls.List;

    import mx.controls.scrollClasses.ScrollBar;

    ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";

    You can then enter the following code on Frame 1 to create a list dynamically:

    createClassObject(List, "myListBox", 0, {dataProvider: ["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});

    Or, you can drag a List component from the library to the Stage.

    • If you want to change a specific scroll bar in a document, enter the following code in the Actions panel on Frame 1 of the Timeline:

    import mx.controls.List

    import mx.controls.scrollClasses.ScrollBar

    var oldName = ScrollBar.prototype.downArrowDownName;

    ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";

    createClassObject(List, "myList1", 0, {dataProvider: ["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});

    myList1.redraw(true);

    ScrollBar.prototype.downArrowDownName = oldName;

    NOTE : Set enough data so that the scroll bars appear, or set the vScrollPolicy property to true.

  7. Select Control > Test Movie.

You can also set subcomponent skins for all components in a document by setting the skin property on the subcomponent's prototype object in the #initclip section of a skin symbol.

To use #initclip to apply an edited skin to all components in a document:

  1. Follow the steps in Creating new component skins, but edit a scroll bar skin. For this example, edit the ScrollDownArrowDown skin and give it the new name MyScrollDownArrowDown.

  2. Select File > New and create a new Flash document. Save it with a unique name, such as SkinsInitExample.fla.

  3. Select the MyScrollDownArrowDown symbol from the library of the edited theme library example, drag it to the library of SkinsInitExample.fla.

    This adds the symbol to the library without making it visible on the Stage.

  4. Select MyScrollDownArrowDown in the SkinsInitExample.fla library, and select Linkage from the Library options menu.

  5. Select the Export for ActionScript check box. Click OK.

    Export in First Frame should be automatically selected; if it is not, select it.

  6. Double-click MyScrollDownArrowDown in the library to open it in symbol-editing mode.

  7. Enter the following code on Frame 1 of the MyScrollDownArrowDown symbol:

    #initclip 10

    import mx.controls.scrollClasses.ScrollBar;

    ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";

    #endinitclip

  8. Do one of the following to add a List component to the document:

  • Drag a List component from the Components panel to the Stage. Enter enough label parameters so that the vertical scroll bar will appear.

  • Drag a List component from the Components panel to the library. Enter the following code on Frame 1 of the main Timeline of SkinsInitExample.fla:

createClassObject(mx.controls.List, "myListBox1", 0, {dataProvider: ["AL","AR","AZ", "CA","HI","ID", "KA","LA","MA"]});

NOTE : Add enough data so that the vertical scroll bar appears, or set vScrollPolicy to true.

The following example explains how to skin something that's already on the Stage. This example skins only List scroll bars; any TextArea or ScrollPane scroll bars would not be skinned.

To use #initclip to apply an edited skin to specific components in a document:

  1. Follow the steps in Editing component skins in a document, but edit a scroll bar skin. For this example, edit the ScrollDownArrowDown skin and give it the new name

  2. MyScrollDownArrowDown.

  3. Select File > New and create a Flash document.

  4. Select File > Save and give the file a unique name, such as MyVScrollTest.fla.

  5. Drag MyScrollDownArrowDown from the theme library to the MyVScrollTest.fla library.

    Select Insert > New Symbol and give the symbol a unique name, such as MyVScrollBar.

    Select the Export for ActionScript check box. Click OK.

  6. Export in First Frame should be automatically selected; if it is not, select it.

  7. Enter the following code on Frame 1 of the MyVScrollBar symbol:

    #initclip 10

    import MyVScrollBar

    Object.registerClass("VScrollBar", MyVScrollBar);

    #endinitclip

  8. Drag a List component from the Components panel to the Stage.

  9. In the Property inspector, enter as many Label parameters as necessary for the vertical scroll bar to appear.

  10. Select File > Save.

  11. Select File > New and create a new ActionScript file.

  12. Enter the following code:

    import mx.controls.VScrollBar

    import mx.controls.List

    class MyVScrollBar extends VScrollBar{

    function init():Void{

    if (_parent instanceof List){

    downArrowDownName = "MyScrollDownArrowDown";

    }

    super.init();

    }

    }

  13. Select File > Save and save this file as MyVScrollBar.as.

  14. Click a blank area on the Stage and, in the Property inspector, click the Publish Settings button.

  15. Click the ActionScript Version Settings button.

  16. Click the Add New Path (+) button to add a new classpath, and select the Target button to browse to the location of the MyVScrollBar.as file on your hard disk.

  17. Select Control > Test Movie.

 

Changing skin properties in a subcomponent

TOP

If a component does not directly support skin variables, you can create a subclass of the component and replace its skins. For example, the ComboBox component doesn't directly support skinning its drop-down list, because the ComboBox component uses a List component as its drop-down list.

If a component is composed of subcomponents, the subcomponents are identified in the component's entry in the Components Language Reference.

To skin a subcomponent:

  1. Follow the steps in Editing component skins in a document, but edit a scroll bar skin. For this example, edit the ScrollDownArrowDown skin and give it the new name MyScrollDownArrowDown.

  2. Select File > New and create a Flash document.

  3. Select File > Save and give the file a unique name, such as MyComboTest.fla.

  4. Drag MyScrollDownArrowDown from the theme library above to the library of MyComboTest.fla.

    This adds the symbol to the library, but doesn't make it visible on the Stage.

  5. Select Insert > New Symbol and give the symbol a unique name, such as MyComboBox.

  6. Select the Export for ActionScript check box and click OK.

    Export in First Frame should be automatically selected; if it is not, select it.

  7. Enter the following code in the Actions panel on Frame 1 of the MyComboBox symbol:

    #initclip 10

    import MyComboBox

    Object.registerClass("ComboBox", MyComboBox);

    #endinitclip

  8. When you finish editing the symbol, click the Back button at the left side of the information bar at the top of the Stage to return to document-editing mode.

  9. Drag a ComboBox component to the Stage.

  10. In the Property inspector, enter as many Label parameters as necessary for the vertical scroll bar to appear.

  11. Select File > Save.

  12. Select File > New and create a new ActionScript file.

  13. Enter the following code:

    import mx.controls.ComboBox

    import mx.controls.scrollClasses.ScrollBar

    class MyComboBox extends ComboBox{

    function getDropdown():Object{

    var oldName = ScrollBar.prototype.downArrowDownName;

    ScrollBar.prototype.downArrowDownName = "MyScrollDownArrowDown";

    var r = super.getDropdown();

    ScrollBar.prototype.downArrowDownName = oldName;

    return r;

    }

    }

  14. Select File > Save and save this file as MyComboBox.as.

  15. Return to the file MyComboTest.fla.

  16. Click a blank area on the Stage and, in the Property inspector, click the Publish Settings button.

  17. Click the ActionScript Version Settings button.

  18. Click the Add New Path (+) button to add a new classpath, and select the Target button to browse to the location of the MyComboBox.as file on your hard disk.

  19. Select Control > Test Movie.

 

About themes

TOP

Themes are collections of styles and skins. The default theme for Flash is called Halo (HaloTheme.fla). The Halo theme lets you provide a responsive, expressive experience for your users. Flash includes additional themes, like Sample (SampleTheme.fla). The Sample theme provides an example of how you can use more styles for customization. (The Halo theme does not use all styles included in the Sample theme.) The theme files are located in the following folders in a default installation:

You can create new themes and apply them to an application to change the look and feel of all the components. For example, you could create themes that mimic the native operating system appearance.

Components use skins (graphic or movie clip symbols) to display their appearances. The AS file that defines each component contains code that loads specific skins for the component. You can easily create a new theme by making a copy of the Halo or Sample theme and altering the graphics in the skins.

A theme can also contain a new set of style default values. You must write ActionScript code to create a global style declaration and any additional style declarations. For more information, see Modifying default style property values in a theme.

This section contains the following topics:

  • Switching themes

  • Creating a new theme

  • Applying a new theme to a document

  • Modifying default style property values in a theme

Switching themes

TOP

Flash installs two themes: Halo and Sample. You'll notice that the component reference information for each component contains a table of style properties you can set for either (or both) themes. So, when you read a style properties table, like the one for the Button component in Using styles with the Button component in the Components Language Reference, notice which theme supports the style you want. The table indicates Halo, Sample, or Both (meaning both themes support the style property).

The Halo theme is the default theme for components. So, if you want to use the Sample theme, you need to switch the current theme from Halo to Sample.

To switch to the Sample theme:

  1. Select File > Open and open the document that uses version 2 components in Flash, or select File > New and create a new document that uses version 2 components.

  2. Select File > Import > Open External Library, and select SampleTheme.fla to apply to your document.

    This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes.

  3. In the SampleTheme.fla theme's Library panel, select Flash UI Components 2/Themes/MMDefault and drag the Assets folders of any components in your document to the Library panel of your Flash document.

    For example, drag the RadioButton Assets folder to your library.

    If you're unsure about which components are in the document, drag the entire Sample Theme movie clip to the Stage. The skins are automatically assigned to components in the document.

    NOTE : The Live Preview of the components on the Stage will not reflect the new theme.

  4. If you drag individual component Assets folders to the Library panel of your document, make sure the Assets symbol for each component is set to Export in First Frame.

    For example, the Assets folder for the RadioButton component is called RadioButton Assets. Open the RadioButtonAssets folder, and you'll see a movie clip symbol called RadioButtonAssets.

    The RadioButtonAssets symbol contains all of the individual asset symbols within it.

    Right-click (Windows) or Control-click (Macintosh) the RadioButtonAssets symbol in the library of your document, and select the Linkage menu option. Check Export in First Frame, so all individual asset symbols will also export in the first frame. Then, click OK to save the settings.

  5. Select Control > Test Movie to see the document with the new theme applied.
     

Creating a new theme

TOP

If you don't want to use the Halo theme or the Sample theme, you can modify one of them to create a new theme.

Some skins in the themes have a fixed size. You can make them larger or smaller and the components will automatically resize to match them. Other skins are composed of multiple pieces, some static and some that stretch.

Some skins (for example, RectBorder and ButtonSkin) use the ActionScript drawing API to draw their graphics, because it is more efficient in terms of size and performance. You can use the ActionScript code in those skins as a template to adjust the skins to your needs.

For a list of the skins supported by each component and their properties, see the Components Language Reference.

To create a new theme:

  1. Select the theme FLA file that you want to use as a template, and make a copy.

    Give the copy a unique name such as MyTheme.fla.

  2. Select File > Open MyTheme.fla in Flash.

  3. Select Window > Library to open the library if it isn't open already.

  4. Double-click any skin symbol you want to modify to open it in symbol-editing mode.

    The skins are located in the Flash UI Components 2/Themes/MMDefault/Component Assets folder (this example uses RadioButton Assets).

  5. Modify the symbol or delete the graphics and create new graphics.

    You may need to select View > Zoom In to increase the magnification. When you edit a skin, you must maintain the registration point in order for the skin to be displayed correctly.

    Theupper-left corner of all edited symbols must be at (0,0).

    For example, open the States/RadioFalseDisabled asset and change the inner circle to a light gray.

  6. When you finish editing the skin symbol, click the Back button at the left side of the information bar at the top of the Stage to return to document-editing mode.

  7. Repeat steps 4-6 until you've edited all the skins you want to change.

  8. Apply MyTheme.fla to a document by following the steps shown later in this chapter. (See Applying a new theme to a document.)
     

Modifying default style property values in a theme

TOP

The default style property values are provided by each theme in a class named Default. To change the defaults for a custom theme, create a new ActionScript class called Default in a package appropriate for your theme, and change the default settings as desired.

To modify default style values in a theme:

  1. Create a new folder for your theme in First Run/Classes/mx/skins.

    For example, create a folder called myTheme.

  2. Copy an existing Defaults class to your new theme folder.

    For example, copy mx/skins/halo/Defaults.as to mx/skins/myTheme/Defaults.as.

  3. Open the new Defaults class in an ActionScript editor.

    Flash Professional 8 users can open the file within Flash. Or, you can open the file in Notepad in Windows or SimpleText on the Macintosh.

  4. Modify the class declaration to reflect the new package.

    For example, our new class declaration is class mx.skins.myTheme.Defaults.

  5. Modify the style settings as desired.

    For example, change the default disabled color to a dark red.

    o.disabledColor = 0x663333;

  6. Save the changed Defaults class file.

  7. Copy an existing FocusRect class from the source theme to your custom theme.

    For example, copy mx/skins/halo/FocusRect.as to mx/skins/myTheme/FocusRect.as.

  8. Open the new FocusRect class in an ActionScript editor.

  9. Modify all references to the source theme's package to the new theme's package.

    For example, change all occurrences of "halo" to "myTheme."

  10. Save the changed FocusRect class file.

  11. Open the FLA file for your custom theme.

    This example uses MyTheme.fla.

  12. Open the library (Window > Library) and locate the Defaults symbol.

    In this example, it's in Flash UI Components 2/Themes/MMDefault/Defaults.

  13. Edit the symbol properties for the Default symbol.

  14. Change the AS 2.0 Class setting to reflect your new package.

    The example class is mx.skins.myTheme.Defaults.

  15. Click OK.

  16. Locate the FocusRect symbol.

    In this example, it's in Flash UI Components 2/Themes/MMDefault/FocusRect.

  17. Edit the symbol properties for the FocusRect symbol.

  18. Change the AS 2.0 Class setting to reflect your new package.

    The example class is mx.skins.myTheme.FocusRect.

  19. Click OK.

  20. Apply the custom theme to a document by following the steps in the next section. (See Applying a new theme to a document.)

Remember to include the Defaults and FocusRect symbols when dragging assets from your custom theme to the target document.

In this example you used a new theme to customize the text color of disabled components. This particular customization, changing a single default style property value, would have been accomplished more easily through styling as explained in Using styles to customize component color and text. Using a new theme to customize defaults is appropriate when customizing many style properties or when already creating a new theme to customize component graphics.

 

Applying a new theme to a document

TOP

To apply a new theme to a document, open a theme FLA file as an external library, and drag the theme folder from the external library to the document library. The following steps explain the process in detail, assuming you already have a new theme (for more information, see Creating a new theme).

To apply a theme to a document:

  1. Select File > Open and open the document that uses version 2 components in Flash, or select File > New and create a new document that uses version 2 components.

  2. Select File > Import > Open External Library, and select the FLA file of the theme you want to apply to your document.

  3. In the theme's Library panel, select Flash UI Components 2/Themes/MMDefault and drag the Assets folders for any components you want to use to your document's library.

    For example, drag the RadioButton Assets folder to your library.

    If you're unsure which components are in the document, drag the entire theme movie clip (for example, for the SampleTheme.fla, the main theme movie clip is Flash UI Components 2 > SampleTheme) to the Stage. The skins are automatically assigned to components in the document.

    NOTE : The Live Preview of the components on the Stage will not reflect the new theme.

  4. If you dragged individual component Assets folders to the ThemeApply.fla library, make sure the Assets symbol for each component is set to Export in First Frame.

    For example, the Assets folder for the RadioButton component is called RadioButton Assets; it has a symbol called RadioButtonAssets, which contains all of the individual asset symbols. If you set Export in First Frame on the RadioButtonAssets symbol, all individual asset symbols will also export in the first frame.

  5. Select Control > Test Movie to see the new theme applied.

Changing export settings

When you apply the Sample or Halo theme to your document, many of the skin assets are set to export in the first frame in order to make them immediately available to the components during playback. However, if you change the publishing export setting (File > Publish Settings > Flash tab > ActionScript Version Settings button > Export Frame for Classes) of your FLA file to a frame after the first frame, you must also change the export settings for the assets in the Sample and Halo themes. To do this, you must open the following component assets in your document's library and deselect the Export in First Frame check box (right-click > Linkage > Export in First Frame):

Sample theme

  • Flash UI Components 2/Base Classes/UIObject

  • Flash UI Components 2/Themes/MMDefault/Defaults

  • Flash UI Components 2/Base Classes/UIObjectExtensions

  • Flash UI Components 2/Border Classes/BoundingBox

  • Flash UI Components 2/SampleTheme

  • Flash UI Components 2/Themes/MMDefault/Button Assets/Elements/ButtonIcon

  • Flash UI Components 2/Themes/MMDefault/DateChooser Assets/ Elements/Arrows/cal_disabledArrow

  • Flash UI Components 2/Themes/MMDefault/FocusRect

  • Flash UI Components 2/Themes/MMDefault/Window Assets/ States/CloseButtonOver

  • Flash UI Components 2/Themes/MMDefault/Accordion Assets/AccordionHeaderSkin

  • Flash UI Components 2/Themes/MMDefault/Alert Assets/AlertAssets

  • Flash UI Components 2/Themes/MMDefault/Border Classes/Border

  • Flash UI Components 2/Themes/MMDefault/Border Classes/CustomBorder

  • Flash UI Components 2/Themes/MMDefault/Border Classes/RectBorder

  • Flash UI Components 2/Themes/MMDefault/Button Assets/ActivatorSkin

  • Flash UI Components 2/Themes/MMDefault/Button Assets/ButtonSkin

Halo theme

  • Flash UI Components 2/Base Classes/UIObject

  • Flash UI Components 2/Themes/MMDefault/Defaults

  • Flash UI Components 2/Base Classes/UIObjectExtensions

  • Flash UI Components 2/Component Assets/BoundingBox

  • Flash UI Components 2/HaloTheme

  • Flash UI Components 2/Themes/MMDefault/Accordion Assets/AccordionHeaderSkin

  • Flash UI Components 2/Themes/MMDefault/Alert Assets/AlertAssets

  • Flash UI Components 2/Themes/MMDefault/Border Classes/Border

  • Flash UI Components 2/Themes/MMDefault/Border Classes/CustomBorder

  • Flash UI Components 2/Themes/MMDefault/Border Classes/RectBorder

  • Flash UI Components 2/Themes/MMDefault/Button Assets/ActivatorSkin

  • Flash UI Components 2/Themes/MMDefault/Button Assets/ButtonSkin

  • Flash UI Components 2/Themes/MMDefault/Button Assets/Elements/ButtonIcon

  • Flash UI Components 2/Themes/MMDefault/CheckBox Assets/Elements/CheckThemeColor1

  • Flash UI Components 2/Themes/MMDefault/CheckBox Assets/CheckBoxAssets

  • Flash UI Components 2/Themes/MMDefault/ComboBox Assets/ComboBoxAssets

  • Flash UI Components 2/Themes/MMDefault/DataGrid Assets/DataGridAssets

  • Flash UI Components 2/Themes/MMDefault/DateChooser Assets/DateChooserAssets

  • Flash UI Components 2/Themes/MMDefault/FocusRect

  • Flash UI Components 2/Themes/MMDefault/Menu Assets/MenuAssets

  • Flash UI Components 2/Themes/MMDefault/MenuBar Assets/MenuBarAssets

  • Flash UI Components 2/Themes/MMDefault/ProgressBar Assets/ProgressBarAssets

  • Flash UI Components 2/Themes/MMDefault/RadioButton Assets/Elements/RadioThemeColor1

  • Flash UI Components 2/Themes/MMDefault/RadioButton Assets/Elements/RadioThemeColor2

  • Flash UI Components 2/Themes/MMDefault/RadioButton Assets/RadioButtonAssets

  • Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/HScrollBarAssets

  • Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/ScrollBarAssets

  • Flash UI Components 2/Themes/MMDefault/ScrollBar Assets/VScrollBarAssets

  • Flash UI Components 2/Themes/MMDefault/Stepper Assets/Elements/StepThemeColor1

  • Flash UI Components 2/Themes/MMDefault/Stepper Assets/NumericStepperAssets

  • Flash UI Components 2/Themes/MMDefault/Tree Assets/TreeAssets

  • Flash UI Components 2/Themes/MMDefault/Window Assets/Window Assets

 

Combining skinning and styles to customize a component

TOP

In this section, you will customize a combo box component instance using styles, themes, and skinning settings. The procedures demonstrate how to combine skinning with style settings to create a unique presentation for a component.

Creating a component instance on the Stage

The first part of this exercise requires you to create a ComboBox instance for customizing.

To create the ComboBox instance:

  1. Drag a ComboBox component to the Stage.

  2. In the Properties panel, name the instance my_cb.

  3. In the first frame of the main Timeline, add the following ActionScript (make sure you are adding it to the frame and not the component, itself; the Actions panel should say "Actions - Frame"in the title bar):

    my_cb.addItem({data:1, label:"One"});

    my_cb.addItem({data:2, label:"Two"});

  4. Select Control > Test Movie to see the combo box with the default style and skinning from the Halo theme.

Creating the new style declaration

Now, you need to create a new style declaration and assign styles to the style declaration. After you have all the styles you want in the style declaration, you can assign the new style name to the combo box instance.

To create a new style declaration and give it a name:

  1. In the first frame of the main Timeline, add the following line at the beginning of your ActionScript (as a coding convention, you should place all import statements at the beginning of your ActionScript):

    import mx.styles.CSSStyleDeclaration;

  2. On the next line, name the new style declaration and add it to the global style definitions:

    var new_style:Object = new CSSStyleDeclaration();

    _global.styles.myStyle = new_style;

    After you assign a new style declaration to the _global style sheet, you can attach individual style settings to the new_style style declaration. For more information about creating a style sheet for groups for components, instead of style definitions for a single instance, see Setting custom styles for groups of components).

  3. Attach some style settings to the new_style style declaration. The following style settings include style definitions available to the ComboBox component (see Using styles with the ComboBox component in the Components Language Reference for more a complete list) as well as styles from the RectBorder class, since the ComboBox component uses the RectBorder class:

new_style.setStyle("textAlign", "right");

new_style.setStyle("selectionColor", "white");

new_style.setStyle("useRollOver", false);

// borderStyle from RectBorder class

new_style.setStyle("borderStyle", "none");

Assigning style definitions to the combo box

At this point, you have a style declaration containing a variety of styles, but you need to explicitly assign the style name to the component instance. You can assign this new style declaration to any component instance within your document in the following manner. Add the following line after the addItem() statements for my_cb (as a coding convention, you should keep all your combo box construction statements together):

my_cb.setStyle("styleName", "myStyle");

The ActionScript code attached to the first frame of the main Timeline should be as follows:

import mx.styles.CSSStyleDeclaration;

var new_style:Object = new CSSStyleDeclaration();

_global.styles.myStyle = new_style;

new_style.setStyle("textAlign", "right");

new_style.setStyle("selectionColor", "white");

new_style.setStyle("useRollOver", false);

// borderStyle from RectBorder class

new_style.setStyle("borderStyle", "none");

my_cb.addItem({data:1, label:"One"});

my_cb.addItem({data:2, label:"Two"});

my_cb.setStyle("styleName", "myStyle");

Select Control > Test Movie to see the styled combo box:

Changing the combo box theme

Every user interface component lists the style properties you can set for that component (for example, all the style properties you can set for a ComboBox component are listed in Customizing the ComboBox component in the Components Language Reference). Within the table of style properties, a column titled "Theme" shows which installed theme supports each style property. Not all the style properties are supported by all the installed themes. The default theme for all user interface components is the Halo theme. When you change the theme to the Sample theme, you can use a different set of style properties (some properties may no longer be available if they are listed as Halo only).

To change the theme for the styled component:

  1. Select File > Import > Open External Library, and select SampleTheme.fla to open the Sample theme library in Flash.

    This file is located in the application-level configuration folder:

  2. Drag the main SampleTheme (Flash UI Components 2 > SampleTheme) movie clip from the SampleTheme library to your document's library.

    The ComboBox component is a combination of several components and classes, and requires assets from those other components and assets, including the Border and ScrollBar assets. The simplest way to ensure that you have all the assets from a theme that you need is to drag all the theme's assets to your library.

  3. Select Control > Test Movie to see the styled combo box:

Editing the combo box skin assets

To edit the appearance of a component, edit the skins that comprise the component, graphically. To edit the skins, you open the component's graphic assets from within the current theme, and edit the symbols for that component. Macromedia recommends this approach because it doesn't remove or add symbols that other components might need; this approach edits the appearance of an existing component skin symbol.

NOTE : It is possible, but not recommended, to edit the source class files for a component so it uses symbols with different names as skins, and you can programmatically alter the ActionScript within a skin symbol (for an example of customized ActionScript and skin symbols, see Customizing the Accordion component (Flash Professional only) in the Components Language Reference). However, because several components, including the ComboBox component, share assets with other components, editing the source files or changing the skin symbol names can have unexpected results.

When you edit a component skin symbol:

  • All instances of that component will use new skins (but not custom styles unless you explicitly attach the styles to the instances), and some components dependent on that component will use the new skins.

  • If you assign a new theme after you've edited your component skins, make sure you don't overwrite the existing "edited" skins (a dialog box asks if you want to overwrite the skins and gives you an opportunity to stop Flash from overwriting the skins).

In this section, you will continue to use the combo box from the previous section (see Changing the combo box theme). The following steps change the appearance of the down arrow that opens the combo box menu from an arrow to a circle.

To edit the combo box down arrow symbol:

  1. In your document's library, open the ComboBox assets to see the movie clips that are the skins for the button that opens and closes the combo box instance at runtime. Specifically, open the Themes > MMDefault > ComboBox Assets > States folder in your document's library.

    The States folder contains four movie clips: ComboDownArrowDisabled, ComboDownArrowDown, ComboDownArrowOver, and ComboDownArrowUp. All four of these symbols are made up of other symbols. And all four use the same symbol for the down arrow (triangle), called SymDownArrow.

  2. Double-click the ComboDownArrowDown symbol to edit it.

    You may need to zoom in, up to 800%, to see the details for the button.

  3. Double-click the down arrow (black triangle) to edit it.

    NOTE : Make sure you have the symbol SymDownArrow selected, so you are deleting only the shape inside the movie clip and not the movie clip symbol, itself.

  4. Delete the selected down arrow (the black triangle shape, not the whole movie clip) on the Stage.

  5. While still editing SymDownArrow, draw a circle in the place where the down arrow had been.

    To make the change more noticeable, consider drawing a circle that is a bright color, like blue, approximately 4 pixels x 4 pixels, and with an x coordinate of 0 and a y coordinate of -1 so it is centered.

  6. Select Control > Test Movie to see the skinned combo box:

In your document's library, if you select ComboDownArrowOver and ComboDownArrowUp, you'll see that they also have the blue circle instead of the black triangle, because they also use SymDownArrow for the down arrow symbol.


Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash