actionscript-3 - Flex 4 中的图像蒙皮按钮

Question

我正在尝试为带有图像的按钮设置外观。

以下代码适用于 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 代码。

Answer 1

我应该说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 为状态设置外观。

1. 你应该总是把你的皮肤:@namespace s "library://ns.adobe.com/flex/spark";
2. 您可以访问组件状态:s|Button:down
3. 您可以使用图像扩展皮肤，并通过 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