Estoy tratando de la piel de un botón con imágenes.

El siguiente código es para flex 3, pero necesito el equivalente en flex 4 código.
No utilizar en la piel de clase.

.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');
}

Por favor enviar el flex 4 código.

InformationsquelleAutor naveen | 2010-09-17

2 Comentarios

  1. 8

    Debo decir que desollado en la Chispa de marco es un poco diferente de Halo manera.

    La mejor descripción es aquí. Y su mejor y más sencilla manera de resolver su problema.
    Aquí está el código:

    componentes.ImageButton.como

    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();  
      }  
     }  
    }  

    Guión:

    [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 parte:

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

    En todos los demás casos, siempre puedes piel de la estados a través de CSS.

    1. Siempre se debe poner la piel: @namespace s "library://ns.adobe.com/flex/spark";
    2. Usted puede tener acceso a los estados del componente: s|Button:down
    3. Puede ampliar su piel, con la imagen, y anular a través de CSS, pero no será un componente central.

    Aquí están algunos enlaces útiles:

    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+espacios de nombres+Soporte

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

    • gracias por la información.Pero, ¿por qué el adobe eliminado en flex4 la forma más fácil de flex 3 imagen desollado de botón a través de css.La dificultad en la que me estoy enfrentando es desollado varios botones con diferentes imágenes.
    • su manera más flexible en la chispa de marco, sólo ampliar el botón con la imagen y, a continuación, la configuración de la misma a través de CSS. como blog.flexexamples.com/2010/03/24/…
    • +1 a Eugene para una buena respuesta. Sí, tienes que hacerlo a través de pieles, pero la buena noticia es que usted puede crear un genérico la piel una vez y usarlo para cualquier botón, posteriormente, mediante la configuración de las imágenes en CSS como se solía hacer en Flex 3.
  2. 2

    En la piel abrir una etiqueta de secuencia de comandos y hacer:

            [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;

    eliminar todos los predeterminada llena y en su lugar utilizar:

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

    Y’ voilà’

Dejar respuesta

Please enter your comment!
Please enter your name here