flex 文字淡入淡出效果

flex之 Text Effect 問題
關鍵字: flex text effect
通常Flex中的文字是不會有漸變效果的, 除非...

嵌入字體: 即在編譯時嵌入字體文件(eg: simhei.ttf  黑體).

Xml代碼 
    
 

[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}"/>

[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代碼

private function addBlurFilter():void {

 var bf:BlurFilter = new BlurFilter(0,0,0);

 var myFilters:Array = new Array();

 myFilters.push(bf);

 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代碼
 

<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}"/>

<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的緣故).這樣就很好的解決了文字效果的問題。