Recently I had a problem in making fade effect work on text component. After few search in the internet found a solution to this problem, in fact a workaround.
Actually, if we apply Fade and Rotate effects to text component or any controls using text using system font, nothing happens with the text. Instead of fading effect, one will come across with single instant where the text appears and disappears depending upon the nature of fade effect. You can verify this using this simple code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Label id="testLbl" x="114" y="96" text="testing fading effect" showEffect="{fadeIn}" hideEffect="{fadeOut}"/>
<mx:Button x="104" y="137" label="Fade In" click="{testLbl.visible=true}"/>
<mx:Button x="177" y="137" label="Fade Out" click="{testLbl.visible=false}"/>
</mx:Application>
For the fading effect to work with text component, we have to embed the font as shown below:
…………………….
<mx:Style>
@font-face{
src: url("../assets/ARIAL.TTF");
fontFamily:"myFont";
}
</mx:Style>
..........
<mx:Label id="testLbl" x="114" y="96" fontFamily="myFont" text="testing fading effect" showEffect="{fadeIn}" hideEffect="{fadeOut}"/>
..........
Just embed a font as shown above and add a property to the label component “fontFamily” specifying the embedded font. This time you can see that the fading effect works.
Another work around is to apply Blur filter to the text before applying any effects to it. This way you don’t require to embed the font.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
private function applyBlurFilter():void {
var blurfilter:BlurFilter = new BlurFilter(0,0,0);
var filters:Array = new Array();
filters.push(blurfilter);
testLbl.filters = filters;
}
]]>
</mx:Script>
<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>
<mx:Label id="testLbl" x="114" y="96" text="testing fading effect" showEffect="{fadeIn}" hideEffect="{fadeOut}" creationComplete="{this.applyBlurFilter()}"/>
<mx:Button x="104" y="137" label="Fade In" click="{testLbl.visible=true}"/>
<mx:Button x="177" y="137" label="Fade Out" click="{testLbl.visible=false}"/>
</mx:Application>
... comment
