Building an Address Book > Creating the Application Functions > The setGlobalStyles() Function

The setGlobalStyles() Function

The setGlobalStyles() function assigns a color scheme for all Flash UI Components in our address book. If desired, we can override the colors for an individual component via its setStyleProperty() method. We can even define style subsets for groups of components with the FStyleFormat class. More coverage of these topics is available in Customizing Component Colors and Text, under Help > Using Flash.

Global component formats are governed by the globalStyleFormat object, which is always available when components are used in a movie. We set global colors and text formats by assigning values to globalStyleFormat's properties. For example, this line sets the default background color of all components to red (RGB color values are assigned as hexadecimal numbers):

  globalStyleFormat.background = 0xFF0000; 

However, to bring our changes into effect, we must always use the globalStyleFormat.applyChanges() method. The background color set above will not appear until globalStyleFormat.applyChanges() has been invoked. So the complete code required to set a red background color is:

  globalStyleFormat.background = 0xFF0000;
  globalStyleFormat.applyChanges();

Our setGlobalStyles() function is nothing more than a wrapper for globalStyleFormat property assignments. The function performs the following tasks:

	Defines an application color scheme by setting a series of globalStyleFormat properties.
	Activates the color scheme by invoking globalStyleFormat.applyChanges().

The complete listing for setGlobalStyles() is shown below. Read the comments to get a sense of the colors that can be customized. A full list of available colors and text formats can be found under Help > ActionScript Dictionary > FStyleFormat.

/*
 * Function: setGlobalStyles()
 *   Desc: Specifies a color scheme for all FUI Components.
 *   Parameters: None.
 */

function setGlobalStyles () 
{
  // Properties set on the globalStyleFormat object
  // automatically apply to all components. The global
  // settings can be overridden by either a custom 
  // FStyleFormat object or by invoking setStyleProperty
  // on an individual component.

  // Main background and foreground colors.
  globalStyleFormat.background = 0xDBDDF2;
  globalStyleFormat.face = 0x9999FF;

  // Colors of border around component.
  globalStyleFormat.shadow = 0x6666CC;
  globalStyleFormat.darkshadow = 0x000000;
  globalStyleFormat.highlight = 0xEEEEFF;
  globalStyleFormat.highlight3D = 0xCCCCFF;

  // Scrollbar colors
  globalStyleFormat.scrollTrack = 0x322E5A;
  globalStyleFormat.arrow = 0x303192;

  // Selected item color in listbox.
  globalStyleFormat.selection = 0x333399;
  globalStyleFormat.selectionUnfocused = 0x777777;

  // Text colors.
  globalStyleFormat.textColor = 0x000000;
  globalStyleFormat.textSelected = 0xFFFFFF;
  globalStyleFormat.textDisabled = 0x666666;
  

  // Now put the settings into effect.
  globalStyleFormat.applyChanges();
}