How To Get Label Of Combobox to Fade In Flex

Question

I've got a combobox that sits inside of a panel in Flex 3. Basically I want to fade the panel using a Fade effect in Actionscript. I can get the fade to work fine, however the label of the combobox does not fade. I had this same issue with buttons and found that their fonts needed to be embedded. No problem. I embedded the font that I was using and the buttons' labels faded correctly. I've tried a similar approach to the combobox, but it does not fade the selected item label.

Here is what I've done so far: Embed code for the font at the top of my MXML in script:

[Embed("assets/trebuc.ttf", fontName="TrebuchetMS")]
public var trebuchetMSFont:Class;

In my init function

//register the font.
Font.registerFont(trebuchetMSFont);

The combobox's mxml:

<mx:ComboBox id="FilterFields" styleName="FilterDropdown" 
  left="10" right="10" top="10"
  fontSize="14">
  <mx:itemRenderer>
    <mx:Component>
      <mx:Label fontSize="10" />
    </mx:Component>
  </mx:itemRenderer>
</mx:ComboBox>

And a style that I wrote to get the fonts applied to the combobox:

.FilterDropdown
{
  embedFonts: true;
  fontFamily: TrebuchetMS;
  fontWeight: normal;
  fontSize: 12; 
}

The reason I had to write a style instead of placing it in the "FontFamily" attribute was that the style made all the text on the combobox the correct font where the "FontFamily" attribute only made the items in the dropdown use the correct font.

Answer 1

Hmm, I am not sure why that isn't working for you. Here is an example of how I got it to work:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="fx.play([panel])">
    <mx:Style>
     @font-face {
         src: local("Arial");
         fontFamily: ArialEm;
     }

     @font-face {
         src: local("Arial");
         fontFamily: ArialEm;
         fontWeight: bold;
     }

     @font-face {
         src: local("Arial");
         fontFamily: ArialEm;
         font-style: italic;
     }
    </mx:Style>
    <mx:XML id="items" xmlns="">
     <items>
      <item label="Item 1" />
      <item label="Item 2" />
      <item label="Item 3" />
     </items>
    </mx:XML>
    <mx:Panel id="panel" x="10" y="10" width="250" height="200" layout="absolute">
     <mx:ComboBox fontFamily="ArialEm" x="35" y="10" dataProvider="{items.item}" labelField="@label"></mx:ComboBox>
    </mx:Panel>
    <mx:Fade id="fx" alphaFrom="0" alphaTo="1" duration="5000" />
</mx:Application>

Hope this helps you out.

Answer 2

You can often use <mx:Dissolve> instead of <mx:Fade>, it looks nearly identical and doesn't require embedded fonts.

Answer 3

Thanks for your help. Had exactly the same problem. The trick is in the embedding the "bold" version of the font you are using. Even though the font in your ComboBox isn't set to Bold ...

Answer 4

Dissolve works by fading a solid color rectangle in and out instead of fading the actual component. This works fine, especially when you wish to control the color to which the component should fade. However, sometimes you need transparency and thus must use Fade. There is a little trick to get Fade to work neatly with both device fonts and embedded fonts: use a blur filter with no blur.

Basically, when you set a bitmap filter the player internally creates a bitmap copy of your object to which it then applies the filter. If the blur is set to not blur, so to speak, it will still look good and be able to fade perfectly fine. This breaks the zoom feature of the player though since the text is now rasterized.

<mx:Label id="percentage" text="{progress} %" truncateToFit="false">
    <mx:filters>
     <mx:BlurFilter blurX="0" blurY="0" />
    </mx:filters>
</mx:Label>

Answer 5

macke: your solution worked like a charm!

Answer 6

var htm = $('#comboboxId').find('option:selected').html();