Welcome!

Adobe Flex Authors: Liz McMillan, RealWire News Distribution, Maureen O'Gara, Yakov Fain, Keith Swenson

Related Topics: Adobe Flex

Adobe Flex: Article

Skinning the V2 ProgressBar Component, Part 2

Skinning SimpleButton instead of Button

Normally you would be able to find more information in the Macromedia Flash documentation, but neither the CustomButton class nor the SimpleButton class are included in the current Macromedia Flash MX 2004 documentation. See also Nigel Pegg's blog post (In the preceding steps, we created the SimpleButton instance with code (via createClassObject()) because there is no SimpleButton visual component included in the Flash MX 2004 Components panel. It is theoretically possible to subclass SimpleButton and use the subclass to create a component that could be added to the Components panel, but doing so is outside the scope of this article. For information on creating components, see "Further Study," below.

The SimpleButton class is not the only alternative to the Button component. The CustomButton class can also be skinned with graphical movie clips. CustomButton offers the additional features of resizability and a text label. Note, however, that a CustomButton instance can be resized along one axis only - either horizontally or vertically. Accordingly, the CustomButton skin is structured much like the ProgressBar skin; it has two end caps for the edges of the button and a middle section that is stretched between the caps. You can use the SimpleButton skinning technique described above to skin a CustomButton instance. Of course, you'll have to use the CustomButton skin properties instead of the SimpleButton skin properties. For reference, here is a list of CustomButton's skin properties:

  • falseUpSkinL
  • falseUpSkinM
  • falseUpSkinR
  • falseDownSkinL
  • falseDownSkinM
  • falseDownSkinR
  • falseOverSkinL
  • falseOverSkinM
  • falseOverSkinR
  • trueUpSkinL
  • trueUpSkinM
  • trueUpSkinR
  • trueDownSkinL
  • trueDownSkinM
  • trueDownSkinR
  • trueOverSkinL
  • trueOverSkinM
  • trueOverSkinR
  • falseDisabledSkinL
  • falseDisabledSkinM
  • falseDisabledSkinR
  • trueDisabledSkinL
  • trueDisabledSkinM
  • trueDisabledSkinR
In the preceding property names, "false" means that the button is not in a "toggled on" state, while "true" means that the button is in a "toggled on" state. Non-toggle buttons (i.e., normal buttons) use the "false" skins only. The letter "L" means left cap, "M" means middle, stretching section, and "R" means right cap.

Note, however, that rather than relying on the above list of CustomButton skin properties you should always consult the actual source code for the CustomButton class to verify which skin properties it supports. Different versions of the class may support different properties. The source code also contains a brief description for each skin element. The source file for CustomButton is located here:

  • Windows: \Program Files\Macromedia\Flash MX 2004\[LANGUAGE_CODE]\First Run\Classes\mx\controls\CustomButton.as
  • Macintosh: HD/Applications/Macromedia Flash MX 2004/First Run/Classes/mx/controls/CustomButton.as
Normally you would be able to find more information in the Macromedia Flash documentation, but neither the CustomButton class nor the SimpleButton class are included in the current Macromedia Flash MX 2004 documentation. See also Nigel Pegg's blog post (In the preceding steps, we created the SimpleButton instance with code (via createClassObject()) because there is no SimpleButton visual component included in the Flash MX 2004 Components panel. It is theoretically possible to subclass SimpleButton and use the subclass to create a component that could be added to the Components panel, but doing so is outside the scope of this article. For information on creating components, see Further Study, below.

The SimpleButton class is not the only alternative to the Button component. The CustomButton class can also be skinned with graphical movie clips. CustomButton offers the additional features of resizability and a text label. Note, however, that a CustomButton instance can be resized along one axis only--either horizontally or vertically. Accordingly, the CustomButton skin is structured much like the ProgressBar skin; it has two end caps for the edges of the button and a middle section that is stretched between the caps. You can use the SimpleButton skinning technique described above to skin a CustomButton instance. Of course, you'll have to use the CustomButton skin properties instead of the SimpleButton skin properties. For reference, here is a list of CustomButton's skin properties:

  • falseUpSkinL
  • falseUpSkinM
  • falseUpSkinR
  • falseDownSkinL
  • falseDownSkinM
  • falseDownSkinR
  • falseOverSkinL
  • falseOverSkinM
  • falseOverSkinR
  • trueUpSkinL
  • trueUpSkinM
  • trueUpSkinR
  • trueDownSkinL
  • trueDownSkinM
  • trueDownSkinR
  • trueOverSkinL
  • trueOverSkinM
  • trueOverSkinR
  • falseDisabledSkinL
  • falseDisabledSkinM
  • falseDisabledSkinR
  • trueDisabledSkinL
  • trueDisabledSkinM
  • trueDisabledSkinR

More Stories By Colin Moock

Colin Moock is an independent web guru with a passion for networked
creativity and expression. He is author of the world-renowned guides to
Flash programming, "ActionScript for Flash MX: The Definitive Guide" (O'Reilly
& Associates, 2003, 2001) and "Essential ActionScript 2.0" (O'Reilly &
Associates, 2004). A web professional since 1995, Moock runs one of the web's most venerable Flash developer sites, www.moock.org. He spends most of his
time pursuing his cardinal interest, multiuser application development, and
working on Unity, moock.org's complete commercial framework for creating and
deploying multiuser applications for Macromedia Flash.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.