I'm trying to skin a button with images.
The follo开发者_运维问答wing code is for flex 3, but I need the equivalent in flex 4 code. Not using skin class.
.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');
}
Please post the flex 4 code.
I should say that skinning in Spark framework is a bit different from Halo way.
The best description is here. And its a best and simplest way to solve your problem. Here is 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;
MXML part:
<components:ImageButton buttonMode="true"
imageSkin="{btnGo}" imageSkinDisabled="{btnGoDisabled}"
imageSkinDown="{btnGoOver}" imageSkinOver="{btnGoOver}"
skinClass="assets.skins.ImageButtonSkin"/>
In all other cases you always can skin the states via CSS.
- You should always put your skin:
@namespace s "library://ns.adobe.com/flex/spark";
- You can access component states:
s|Button:down
- You can extend your skin, with image, and override it via CSS, but it will be not a core component.
Here are some useful links:
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
In the skin open a script tag and do:
[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;
delete all the default fills and instead use:
<s:BitmapImage source="{upImg}"
source.over="{overImg}"
source.down="{downImg}"
source.disabled="{disabledImg}"
width="100%"/>
And voila'
精彩评论