When customizing a Button component, you’ll most likely want to start with changing the label’s text format. Changing the textFormat style allows you to specify a new TextFormat object (flash.text.TextFormat) to use when displaying the label. This allows you to modify the label’s alignment, color, font weight (bold), font emphasis (italics), font face, and font size as well as other properties.
Note: Not all properties of the TextFormat class are supported. For example, setting a TextFormat objects url property has no effect on a Button instance.
When working with text formatting, you’ll often use the following properties and styles:
textFormatstyle – The TextFormat object to use to render the button’s label by setting TextFormat properties such as font, color, size, and so on.disabledTextFormatstyle – The TextFormat object to use to render the button’s label when the button is disabled.embedFontsstyle – Indicates whether embedded font outlines are used to render the text field. For more information, see the Embedding fonts section.textFieldproperty – A reference to the button’s internal text field.
The following example creates a new TextFormat object and sets the button’s text to a red, bold font.
Full code after the jump.
// ActionScript 3.0 // Import the required component classes. import fl.controls.Button; // Create a new TextFormat object which will be used for the button's label. var myTextFormat:TextFormat = new TextFormat(); myTextFormat.bold = true; myTextFormat.color = 0xFF0000; /* Create a new Button component instance and set the textFormat style to the TextFormat object created earlier. */ var myButton:Button = new Button(); myButton.label = "Click me"; myButton.move(10, 10); myButton.setStyle("textFormat", myTextFormat); addChild(myButton);
The following example demonstrates how to set a text format on a disabled Button instance:
// ActionScript 3.0 // Import the required component classes. import fl.controls.Button; // Create a new TextFormat object which will be used when the button is enabled. var enabledTextFormat:TextFormat = new TextFormat(); enabledTextFormat.bold = true; enabledTextFormat.font = "Comic Sans MS"; enabledTextFormat.size = 14; // Create a new TextFormat object which will be used when the button is disabled. var disabledTextFormat:TextFormat = new TextFormat(); disabledTextFormat.color = 0xFF0000; disabledTextFormat.font = "Comic Sans MS"; disabledTextFormat.italic = true; disabledTextFormat.size = 12; /* Create a new Button component instance, set the textFormat style, and add the button to the display list. */ var enabledButton:Button = new Button(); enabledButton.label = "enabled = true"; enabledButton.setStyle("textFormat", enabledTextFormat); enabledButton.setSize(140, 40); enabledButton.move(10, 10); addChild(enabledButton); /* Create a new Button component instance, set the textFormat style, and add the button to the display list. */ var disabledButton:Button = new Button(); disabledButton.enabled = false; disabledButton.label = "enabled = false"; disabledButton.setStyle("disabledTextFormat", disabledTextFormat); disabledButton.setSize(140, 40); disabledButton.move(160, 10); addChild(disabledButton);
For more information on the Flash/ActionScript 3.0 Button component, see the “Using the Button component” Flash Quick Start on Adobe.com.
{ 0 comments… add one now }