View comments | RSS feed
--------------------------------------------------------------------------------
Customizing the ComboBox component
You can transform a ComboBox component horizontally and vertically while authoring. While authoring, select the component on the Stage and use the Free Transform tool or any of the Modify > Transform commands.
If text is too long to fit in the combo box, the text is clipped to fit. You must resize the combo box while authoring to fit the label text.
In editable combo boxes, only the button is the hit area--not the text box. For static combo boxes, the button and the text box constitute the hit area. The hit area responds by opening or closing the drop-down list.
Related topics
Using styles with the ComboBox component
Using skins with the ComboBox component
Using styles with the ComboBox component
You can set style properties to change the appearance of a ComboBox component. If the name of a style property ends in "Color", it is a color style property and behaves differently than noncolor style properties. For more information, see Using styles to customize component color and text.
The combo box has two unique styles: openDuration and openEasing. Other styles are passed to the button, text box, and drop-down list of the combo box through those individual components, as follows:
The button is a Button instance and uses its styles. (See Using styles with the Button component.)
The text is a TextInput instance and uses its styles. (See Using styles with the TextInput component.)
The drop-down list is an List instance and uses its styles. (See Using styles with the List component.)
A ComboBox component uses the following styles:
Style Theme Description
themeColor
Halo
The base color scheme of a component. Possible values are "haloGreen", "haloBlue", and "haloOrange". The default value is "haloGreen".
backgroundColor
Both
The background color. The default color is white.
border styles
Both
The Button subcomponent uses two RectBorder instances for its borders and responds to the styles defined on that class. See RectBorder class.
In the Halo theme, the ComboBox component uses a custom rounded border for the collapsed portion of the ComboBox. The colors of this portion of the ComboBox can be modified only through skinning. See Using skins with the ComboBox component.
color
Both
The text color. The default value is 0x0B333C for the Halo theme and blank for the Sample theme.
disabledColor
Both
The color for text when the component is disabled. The default color is 0x848384 (dark gray).
embedFonts
Both
Boolean value that indicates whether the font specified in fontFamily is an embedded font. This style must be set to true if fontFamily refers to an embedded font. Otherwise, the embedded font will not be used. If this style is set to true and fontFamily does not refer to an embedded font, no text will be displayed. The default value is false.
fontFamily
Both
The font name for text. The default value is "_sans".
fontSize
Both
The point size for the font. The default value is 10.
fontStyle
Both
The font style: either "normal" or "italic". The default value is "normal".
fontWeight
Both
The font weight: either "none" or "bold". The default value is "none". All components can also accept the value "normal" in place of "none" during a setStyle() call, but subsequent calls to getStyle() will return "none".
textAlign
Both
The text alignment: either "left", "right", or "center". The default value is "left".
textDecoration
Both
The text decoration: either "none" or "underline". The default value is "none".
openDuration
Both
The duration, in milliseconds, of the transition animation. The default value is 250.
openEasing
Both
A reference to a tweening function that controls the animation. Defaults to sine in/out. For more information, see Customizing component animations.
The following example demonstrates how to use List styles to control the behavior of the drop-down portion of a ComboBox component.
// comboBox is an instance of the ComboBox component on Stage
comboBox.setStyle("alternatingRowColors", [0xFFFFFF, 0xBFBFBF]);
Using skins with the ComboBox component
The ComboBox component uses symbols in the library to represent the button states and has skin variables for the down arrow. These skins are located in the Flash UI Components 2/Themes/MMDefault/ComboBox Assets/States folder of the HaloTheme.fla and SampleTheme.fla files. The information below describes these skins and provides steps for customizing them.
The ComboBox component also uses scroll bar skins for the drop-down list's scroll bar and two RectBorder class instances for the border around the text input and drop-down list. For information on customizing these skins, see Using skins with the UIScrollBar component and RectBorder class. For more information on the methods available to skin components, see About skinning components.
A ComboBox component uses the following skin properties:
Property Description
ComboDownArrowDisabledName
The down arrow's disabled state. The default is ComboDownArrowDisabled.
ComboDownArrowDownName
The down arrow's down state. The default is ComboDownArrowDown.
ComboDownArrowUpName
The down arrow's up state. The default is ComboDownArrowOver.
ComboDownArrowOverName
The down arrow's over state. The default is ComboDownArrowUp.
To create movie clip symbols for ComboBox skins:
Create a new FLA file.
Select File > Import > Open External Library, and select the HaloTheme.fla file.
This file is located in the application-level configuration folder. For the exact location on your operating system, see About themes.
In the theme's Library panel, expand the Flash UI Components 2/Themes/MMDefault folder and drag the ComboBox Assets folder to the library for your document.
Expand the ComboBox Assets/States folder in the library of your document.
Open the symbols you want to customize for editing.
For example, open the ComboDownArrowDisabled symbol.
Customize the symbol as desired.
For example, change the inner white square to a light gray.
Repeat steps 5-6 for all symbols you want to customize.
Click the Back button to return to the main Timeline.
Drag a ComboBox component to the Stage.
Set the ComboBox instance properties as desired.
For this example, use ActionScript to set the ComboBox to disabled.
Select Control > Test Movie.
Related Topics
Popup
Popup
--------------------------------------------------------------------------------
recoveredfromflashMX2004 said on Jul 20, 2004 at 1:53 PM :
jayfour000 said on Feb 3, 2004 at 2:48 PM :
The documentations is not clear on three point here.
1: changing the border color of the 'off' state of the comboBox preferable to an OFF state where it is not visible. There is no MovieClip for the border in the HaloTheme.fla-->Themes-->MMDefaultBomboBox Assets folder. The borderColor property does not work component.
2: changing the line height of the items in the list.
3: adjusting the top and bottom margins of the text
Will you please clarify these points. Dozens of people are posting these questions in the news groups, and no one has any answers.
Cytek said on Mar 2, 2004 at 9:03 PM :
Please specify how to change the vertical postion of the text that is displayed in the combobox... when using very small combobox and small font... the font apears to low and is cut off .... there is a lot of white space at the top almost like there is a "top Margin" ... if that space wasn't there or could be manipulated ... small text could be moved up and made to appear whole and complete
-sks- said on Nov 2, 2004 at 6:14 AM :
sometimes when disabling the combobox results in a square being displayed on top of the down arrow.
jepo said on Nov 8, 2004 at 2:46 PM :
Hi sks,
I can't replicate this in a basic FLA, however if you have discovered a reproducable issue, please file it using the following page:
http://www.macromedia.com/support/email/wishform/ because LiveDocs is monitored by Technical writers only.
Thanks!
Jen.
RSS feed| Send me an e-mail when comments are added to this page | Comment Report
Current page:
http://livedocs.macromedia.com/flash/mx2004/main_7_2/00002145.html
Ny bruger
Nybegynder
Opret
Preview
