Using ActionScript to draw the Accordion header

The default headers in both the Halo and Sample themes use the same skin element for all states and draw the actual graphics through ActionScript. The Halo implementation uses an extension of the RectBorder class and custom drawing API code to draw the states. The Sample implementation uses the same skin and the same ActionScript class as the Button skin.

To create an ActionScript class to use as the skin and provide different states, the skin can read the borderStyle style property of the skin to determine the state. The following table shows the border style that is set for each skin:

Property	Border style
`falseUpSkin`	`falseup`
`falseDownSkin`	`falsedown`
`falseOverSkin`	`falserollover`
`falseDisabled`	`falsedisabled`
`trueUpSkin`	`trueup`
`trueDownSkin`	`truedown`
`trueOverSkin`	`truerollover`
`trueDisabledSkin`	`truedisabled`

To create an ActionScript-customized Accordion header skin:

Select File > New and choose ActionScript File.

Copy the following ActionScript to the file:

import mx.skins.RectBorder;
import mx.core.ext.UIObjectExtensions;

class RedGreenBlueHeader extends RectBorder
{
 static var symbolName_str:String = "RedGreenBlueHeader";
 static var symbolOwner_obj:Object = RedGreenBlueHeader;
 
 function size():Void
 {
  var color_num:Number; // Color
  var borderStyle_str:String = getStyle("borderStyle"); // Attribute of Accordion

  // Define the colors of each tab in the Accordion for each tab state.
  switch (borderStyle_str) {
   case "falseup":
   case "falserollover":
   case "falsedisabled":
    color_num = 0x7777FF;
    break;
   case "falsedown":
    color_num = 0x77FF77;    
    break;
   case "trueup":
   case "truedown":
   case "truerollover":
   case "truedisabled":
    color_num = 0xFF7777;
    break;
  }

  // Clear default style and draw custom style.
  clear();
  lineStyle(0, 0, 100);
  beginFill(color_num, 100);
  drawRect(0, 0, __width, __height);
  endFill();
 }
 
 // required for skins
 static function classConstruct():Boolean
 {
  UIObjectExtensions.Extensions();
  _global.skinRegistry["AccordionHeaderSkin"] = true;
  return true;
 }
 static var classConstructed_bl:Boolean = classConstruct();
 static var UIObjectExtensionsDependency_obj:Object = UIObjectExtensions;
}

This class creates a square box based on the border style: a blue box for the false up, rollover, and disabled states; a green box for the normal pressed state; and a red box for the expanded child.

Save the file.
For this example, name the file RedGreenBlueHeader.as.
Select File > New and choose Flash File (ActionScript 2.0).
Save the file in the same folder as the AS file.
Select Insert > New Symbol and name it AccordionHeaderSkin.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript.
The identifier is automatically filled out with AccordionHeaderSkin.
Set the Class to RedGreenBlueHeader.
Make sure that Export in First Frame is already selected, and click OK.
In Scene 1, drag an Accordion component to the Stage.
Set the Accordion properties so that they display several children.
For example, set the childLabels to an array of [One,Two,Three] and childNames to an array of [one,two,three].
Select Control > Test Movie.