Problem
You want to use a SWF file with a set of own symbols in order to customize Combobox states.
Solution
Use the upSkin, overSkin, downSkin, and disabledSkin style properties of the ComboBox class to apply custom symbols to any combobox. These attributes can be set directly on a ComboBox instance or as part of a CSS style definition.
Detailed explanation
The first thing to do is create a file in Flash and ComboBoxSkins.swf within it to create 4 symbols of type MovieClip with different states of the ComboBox. These symbols should be named: ComboBox_upSkin, ComboBox_downSkin, ComboBox_overSkin, ComboBox_disabledSkin
If we want to put the CSS inline style do the following:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:ComboBox x="196" y="135" upSkin="@Embed(source='ComboBoxSkins.swf', symbol='ComboBox_upSkin')" overSkin="@Embed(source='ComboBoxSkins.swf', symbol='ComboBox_overSkin')" downSkin="@Embed(source='ComboBoxSkins.swf', symbol='ComboBox_downSkin')" disabledSkin="@Embed(source='ComboBoxSkins.swf', symbol='ComboBox_disabledSkin')"> <!-- PUT HERE THE OPTIONS OF COMBOBOX --> </mx:ComboBox> </mx:Application>
If you want to apply the style to some Comboboxes, it's a good idea to create a CSS style and then apply to Comboboxes elected:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> .myComboBox { disabledSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_disabledSkin"); downSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_downSkin"); overSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_overSkin"); upSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_upSkin"); } </mx:Style> <mx:ComboBox x="196" y="135" styleName="myComboBox"> <!-- PUT HERE THE OPTIONS OF COMBOBOX --> </mx:ComboBox> </mx:Application>
If you like, you can apply the style to all comboxes to appear in the application, overriding the default component's styles:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Style> ComboBox { disabledSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_disabledSkin"); downSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_downSkin"); overSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_overSkin"); upSkin: Embed(source="ComboBoxSkins.swf", symbol="ComboBox_upSkin"); } </mx:Style> <mx:ComboBox x="196" y="135"> <!-- PUT HERE THE OPTIONS OF COMBOBOX --> </mx:ComboBox> </mx:Application>
