4 Replies Latest reply on Aug 21, 2006 12:30 PM by brainubmbc

    button fade doesn't fade label

    brainubmbc
      I can do a button fade, but the text inside the button (the label) doesn' t want to fade with the button. Once the button is done fading out, the text then just disappears at the end. Does anyone know if its possible to fade the text inside a button? If not.. then what's the point of even being able to fade a button at all?

      <mx:Style> @font-face {src:local("Verdana");font-family: myVFont;}</mx:Style>
      <mx:Fade id="fadeOut" duration="700" alphaFrom="1.0" alphaTo="0.0"/>
      <mx:Button id="button1" fontFamily="myVFont" hideEffect="{fadeOut}" click="button1.visible=false;" label="test"/>

      This doesn't fade the text above. However... if I use the following label below, the text fades just fine.

      <mx:Label id="label1" fontFamily="myVFont" click="label1.visible=false;" hideEffect="{fadeOut}" text="test"/>

      The button is using an embedded font just like the label. I don't get it. Anyone know anything about this?

      Regards,
      ->B
        • 1. Re: button fade doesn't fade label
          KenichiM Level 1
          You need to use embedded fonts. Typcially the font is embedded in a SWF file and you access via the [Embed] attribute. The Flex development guide has a section devoted to this.
          • 2. button fade doesn't fade label
            brainubmbc Level 1
            I thought I *was* embedding a font. In the "Using embedded fonts with effects" part of the deveoper's guide... the following example code is given for embedding a font:

            <mx:Style>
            @font-face {
            src:url("akbar.ttf");
            font-family: myAkbarFont;
            }
            </mx:Style>
            <mx:Label fontFamily="myAkbarFont" mouseDownEffect="{fadeOut}" mouseUpEffect="{fadeIn}"
            text="This Label control uses the Akbar embedded font and
            the text will fade." />


            Thats exactly what I did.

            Upon further digging I found the "Embed" statement you were talking about. The Flex developer's guide is very misleading when it comes to this subject. Anywhere you search for "Embedded font", the above example shows up.... You have to REALLY dig to find the "[Embed..." attribute.

            I'll mess around.. thanks

            Random question though... The dev guide says to fade text, you need to use embedded fonts. If the first example above doesn't actually EMBED a font... then why does the fade work when I fade a LABEL?
            • 3. Re: button fade doesn't fade label
              brainubmbc Level 1
              Well I tried the EMBED attribute, but the same results... the fade works for the label, but again not the text in the button. There's a clue down below that I noticed which might help figure ou the problem. Here's my code:

              <mx:Script>
              [Embed(mimeType='application/x-font', systemFont='Arial', fontName='myArialFont')]
              // This variable is not used. It exists so that the compiler will link // in the font.
              private var myFontClass:Class;
              </mx:Script>

              Here is the label that fades fine. The font for the label is arial of course:
              <mx:Label id="growme" x="366" y="304" fontFamily="myArialFont" click="mygrow();" hideEffect="{fadeOut}" showEffect="{fadeIn}" text="Larger"/>

              Here is the button that doesn't work. The fade on the button works, but the fade on the label of the button doesn't:
              <mx:Button visible="false" id="shrinkme" x="266" y="404" fontFamily="myArialFont" click="myshrink();" hideEffect="{fadeOut}" showEffect="{fadeIn}" label="Shrink" />

              HOWEVER... When everything compiles and runs.. the label of the buton ISN'T the arial font. the "fontFamily" attribute of the button tag isn't being applied to the label of the button at all. Does anyone know why?

              Any help appreciated:
              ->Brian
              • 4. Re: button fade doesn't fade label
                brainubmbc Level 1
                Found the problem after digging through some old posts here. I was doing everything right... Apparently I just had to make the font-weight = bold. I saw that "font-weight:bold;" line in all the example code of all the pages dealing with embedded fonts, but nowhere do I recall the guide actually mentioning that the bold part was REQUIRED.

                Just thought I'd follow up for anyone that happens to read this in the future.