Изображение Скиннинг кнопки в Flex 4 - PullRequest
Новая
       0

Изображение Скиннинг кнопки в Flex 4

3 голосов
/ 17 сентября 2010

Я пытаюсь создать оболочку для кнопки с изображениями.

Следующий код предназначен для 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.

Ответы [ 2 ]

8 голосов
/ 19 сентября 2010

Должен сказать, что скиннинг в рамках Spark немного отличается от способа Halo.

Лучшее описание здесь . И это лучший и самый простой способ решить вашу проблему. Вот код:

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

2 голосов
/ 11 июля 2011

В скине откройте тег script и сделайте: 

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

И вуаля '

...