在Flex 4中蒙皮按鈕的圖像

以下代碼適用於flex 3，但我需要flex 4代碼中的等效代碼。不使用皮膚類。

.muteVolumeButton 
{ 
    upSkin: Embed(source='images/sound-mute.gif'); 
    overSkin:Embed(source='images/sound-hover.gif'); 
    downSkin: Embed(source='images/sound-on.gif'); 
    disabledSkin: Embed(source='images/sound-mute.gif'); 
}

請發佈flex 4代碼。

來源

2010-09-17 naveen

我應該說，Spark框架中的蒙皮與Halo方式有點不同。

最好的描述是here。它是解決你的問題的最好和最簡單的方法。這裏是代碼：

components.ImageButton.as

package components 
{ 
import spark.components.Button; 

[Style(name="imageSkin",type="*")] 
[Style(name="imageSkinDisabled",type="*")] 
[Style(name="imageSkinDown",type="*")] 
[Style(name="imageSkinOver",type="*")] 

public class ImageButton extends Button 
{ 
    public function ImageButton() 
    { 
    super(); 
    } 
} 
}

腳本：

[Embed('assets/images/btnGoUp.png')] 
[Bindable] 
public var btnGo:Class; 

[Embed('assets/images/btnGoOver.png')] 
[Bindable] 
public var btnGoOver:Class; 

[Embed('assets/images/btnGoDisabled.png')] 
[Bindable] 
public var btnGoDisabled:Class;

MXML部分：

<components:ImageButton buttonMode="true" 
    imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}" 
    imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}" 
    skinClass="assets.skins.ImageButtonSkin"/>

在所有其他情況下，您總是可以通過CSS來清除狀態。

你應該始終把你的皮膚：@namespace s "library://ns.adobe.com/flex/spark";
您可以訪問組件的狀態：s|Button:down
你可以擴展你的皮膚，用圖像，並通過CSS覆蓋它，但它是不是一個核心組成部分。

下面是一些有用的鏈接：

http://blog.flexexamples.com/2009/03/03/styling-an-emphasized-fxbutton-control-in-flex-gumbo/

http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/

http://opensource.adobe.com/wiki/display/flexsdk/CSS+Namespaces+Support

http://cookbooks.adobe.com/post_How_to_use_the_new_CSS_syntax_in_Flex_4-15726.html

來源

2010-09-19 16:53:28 Eugene

感謝information.But爲什麼Adobe公司FLEX4刪除按鈕的最簡單的Flex 3的圖像剝皮通過CSS我面臨的困難是用不同的圖像剝皮多個按鈕。 – naveen 2010-09-20 10:51:53

它在火花框架中更加靈活，只需將圖像擴展爲按鈕，然後通過CSS進行設置即可。像http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ – Eugene 2010-09-20 12:08:58

+1給尤金一個好答案。是的，你必須通過皮膚來做到這一點，但好消息是你可以創建一個通用皮膚，然後通過在CSS中設置圖像，就像你在Flex 3中做的那樣，將它用於任何按鈕。 – 2010-09-20 21:38:02

在皮膚上打開一個腳本標籤，並做到：

 [Embed(source="assets/images/button-up.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "2", scaleGridBottom = "3")] 
     [Bindable] 
     public var upImg:Class; 


     [Embed(source="assets/images/button-over.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "4", scaleGridBottom = "5")] 
     [Bindable] 
     public var overImg:Class; 

     [Embed(source="assets/images/button-disabled-skin.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "2", scaleGridBottom = "3")] 
     [Bindable] 
     public var disabledImg:Class; 

     [Embed(source="assets/images/button-over.png", scaleGridLeft = "4", scaleGridRight = "5", scaleGridTop = "4", scaleGridBottom = "5")] 
     [Bindable] 
     public var downImg:Class;

刪除所有默認填充，而是使用：

<s:BitmapImage source="{upImg}" 
       source.over="{overImg}" 
       source.down="{downImg}" 
       source.disabled="{disabledImg}" 
       width="100%"/>

瞧」

來源

2011-07-11 08:26:40

在Flex 4中蒙皮按鈕的圖像

回答

相關問題