flex 文字淡入淡出效果

flex之 Text Effect 问题
关键字: flex text effect
通常Flex中的文字是不会有渐变效果的, 除非...

嵌入字体: 即在编译时嵌入字体文件(eg: simhei.ttf  黑体).

Xml代码 
    
 

Java代码

1. [Embed("assets/simhei.ttf", fontName="simhei")]      
2.      
3. public var simhei_font:Class;      
4.      
5. <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>     
6.      
7. <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>     
8.      
9. <mx:Label id="label1" text="Hello World"       
10. fontFamily="simhei" fontSize="24"     
11. hideEffect="{fadeOut}" showEffect="{fadeIn}"/>     
12.   
13.     
14.   
15. [Embed("assets/simhei.ttf", fontName="simhei")]   
16.   
17. public var simhei_font:Class;   
18.   
19. <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/>   
20.   
21. <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>   
22.   
23. <mx:Label id="label1" text="Hello World"    
24. fontFamily="simhei" fontSize="24"  
25. hideEffect="{fadeOut}" showEffect="{fadeIn}"/>  

[Embed("assets/simhei.ttf", fontName="simhei")]   
  
public var simhei_font:Class;   
  
<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="label1" text="Hello World"    
fontFamily="simhei" fontSize="24"  
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>  

 

[Embed("assets/simhei.ttf", fontName="simhei")]

public var simhei_font:Class;

<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="label1" text="Hello World" 
fontFamily="simhei" fontSize="24"
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

缺点就是会增大程序文件的大小.虽然Character Range能够起一定的作用,还是会很大(尤其是中文).

还好,有个比较简单的方式,既不增加程序文件大小,又能够实现效果.那就是加一个Blur Filter.



Java代码

Java代码

1. private function addBlurFilter():void {      
2.      
3.  var bf:BlurFilter = new BlurFilter(0,0,0);      
4.      
5.  var myFilters:Array = new Array();      
6.      
7.  myFilters.push(bf);      
8.      
9.  label3.filters = myFilters;     

private function addBlurFilter():void {   
  
 var bf:BlurFilter = new BlurFilter(0,0,0);   
  
 var myFilters:Array = new Array();   
  
 myFilters.push(bf);   
  
 label3.filters = myFilters;   

Xml代码
 

Java代码

1. <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" lphaTo="0.0"/>     
2.      
3. <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>     
4.      
5. <mx:Label id="label3" text="Hello World" fontSize="24"       
6. hideEffect="{fadeOut}" showEffect="{fadeIn}"/>  

<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" lphaTo="0.0"/>  
  
<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>  
  
<mx:Label id="label3" text="Hello World" fontSize="24"    
hideEffect="{fadeOut}" showEffect="{fadeIn}"/>

在初始化的时候调用addBlurFilter, 文字会被转成图(Blur Filter的缘故).这样就很好的解决了文字效果的问题。