Image Habillage d'un bouton en Flex 4

J'essaye de peaufiner un bouton avec des images.Image Habillage d'un bouton en Flex 4

Le code suivant est pour flex 3, mais j'ai besoin de l'équivalent en code flex 4. Ne pas utiliser la classe de peau.

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

Veuillez publier le code flex 4.

Source

2010-09-17 naveen

Je dois dire que le skinning dans Spark framework est un peu différent de celui de Halo.

La meilleure description est here. Et c'est un moyen le meilleur et le plus simple pour résoudre votre problème. Voici le code:

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

Script:

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

partie MXML:

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

Dans tous les autres cas, vous pouvez toujours habiller les états via CSS.

Vous devriez toujours mettre votre peau: @namespace s "library://ns.adobe.com/flex/spark";
Vous pouvez accéder à des états de composant: s|Button:down
Vous pouvez étendre votre peau, avec l'image et passer outre via CSS, mais il ne sera pas un élément de base .

Voici quelques liens utiles:

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

Source

2010-09-19 16:53:28 Eugene

merci pour le information.But pourquoi Adobe retiré dans Flex4 le moyen le plus flexible 3 l'image écorcher boutonné css La difficulté à laquelle je fais face est d'écorcher plusieurs boutons avec des images différentes. – naveen

sa manière plus souple dans le cadre de l'étincelle, il suffit d'étendre le bouton avec l'image, puis l'installer via CSS. comme http://blog.flexexamples.com/2010/03/24/using-a-bitmap-image-skin-in-a-spark-button-control-in-flex-4/ – Eugene

+1 à Eugene pour un bonne réponse.Oui, vous devez le faire via des skins, mais la bonne nouvelle est que vous pouvez créer une skin générique une fois et l'utiliser pour n'importe quel bouton par la suite en définissant les images en CSS comme vous le faisiez dans Flex 3. –

Dans la peau d'ouvrir une balise de script et à faire:

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

supprimer tous les remplissages par défaut et au lieu d'utiliser:

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

Et voila »

Source

2011-07-11 08:26:40

Image Habillage d'un bouton en Flex 4

Répondre

Questions connexes