9.13.嵌入图像的皮肤
9.13.1. 问题
你想用自定义的图像为组件的视觉元素应用皮肤。
9.13.2. 解决办法
利用组件的样式属性提供自定义的JPEG、GIF 或者PNG 图像。这些属性能在组件实例中嵌入地通过MXML 或者作为CSS 样式定义的部分而直接设定。
9.13.3. 讨论
内置的Flex 主题默认地为组件应用计划好的皮肤类。你能创造自定义编程实现皮肤类或者指定图形元素为皮肤，以修改组件的视觉组成。能应用皮肤的组件通常含有一系列能在用户交互时展现出来的皮肤状态或者阶段。这样当生成自定义图形皮肤时，这将有助于牢记组件的不同交互状态。
下面例子中，自定义图像应用于一个Button 组件多个背景状态。代码很明确地在Button 实例上嵌入地直接设定upSkin、overSkin、downSkin 和disabledSkin 样式属性：
注意@Embed 编译指令强制地将图像资源绑定进最终程序的SWF 文件中。通过这种方法嵌入图像很重要，因为这样当按钮从一种状态转换为另一种时不会产生加载延迟。
由于例子中标签属性设置为空字符串('')值，文本将不会显示在图形元素上面。本招所用的图像文件, 存放在随书的代码例子中，它们本身就绘有标签。
如果你想在Button 实例上面显示文本并调整图像大小以适应标签文本的长度变化，你能利用Flex 框架的scale-9 功能在你的皮肤属性中包含缩放网格信息。缩放网格值取决于图形元素的大小和设计。下面例子在CSS 样式定义中设置了皮肤属性同时通过styleName 属性将样式应用于多个Button 实例。在CSS 中使用Embed 指令时不使用前缀@ 符合， 和在脚本中嵌入地方法一致。
利用Flex 框架的scale-9 功能，你定义图像的九个部分以便互相独立地调整尺寸。被嵌图像的四角，由四个缩放网格属性推导而来， 不能调整而且放置的位置基于其它格子元素的水平和垂直比例大小。通过为缩放网格属性赋值而使用scale-9 的方法，对于嵌入带有明显的完整边框的图像时很有效果，正如本例中按钮图形的圆角。
你想用自定义的图像为组件的视觉元素应用皮肤。
9.13.2. 解决办法
利用组件的样式属性提供自定义的JPEG、GIF 或者PNG 图像。这些属性能在组件实例中嵌入地通过MXML 或者作为CSS 样式定义的部分而直接设定。
9.13.3. 讨论
内置的Flex 主题默认地为组件应用计划好的皮肤类。你能创造自定义编程实现皮肤类或者指定图形元素为皮肤，以修改组件的视觉组成。能应用皮肤的组件通常含有一系列能在用户交互时展现出来的皮肤状态或者阶段。这样当生成自定义图形皮肤时，这将有助于牢记组件的不同交互状态。
下面例子中，自定义图像应用于一个Button 组件多个背景状态。代码很明确地在Button 实例上嵌入地直接设定upSkin、overSkin、downSkin 和disabledSkin 样式属性：
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="#FFFFFF">
<mx:Button label=""
upSkin="@Embed('assets/images/text_button_up.png')"
overSkin="@Embed('assets/images/text_button_over.png')"
downSkin="@Embed('assets/images/text_button_down.png')"
disabledSkin="@Embed('assets/images/text_button_disabled.png')" />
</mx:Application>
layout="horizontal" backgroundColor="#FFFFFF">
<mx:Button label=""
upSkin="@Embed('assets/images/text_button_up.png')"
overSkin="@Embed('assets/images/text_button_over.png')"
downSkin="@Embed('assets/images/text_button_down.png')"
disabledSkin="@Embed('assets/images/text_button_disabled.png')" />
</mx:Application>
注意@Embed 编译指令强制地将图像资源绑定进最终程序的SWF 文件中。通过这种方法嵌入图像很重要，因为这样当按钮从一种状态转换为另一种时不会产生加载延迟。
由于例子中标签属性设置为空字符串('')值，文本将不会显示在图形元素上面。本招所用的图像文件, 存放在随书的代码例子中，它们本身就绘有标签。
如果你想在Button 实例上面显示文本并调整图像大小以适应标签文本的长度变化，你能利用Flex 框架的scale-9 功能在你的皮肤属性中包含缩放网格信息。缩放网格值取决于图形元素的大小和设计。下面例子在CSS 样式定义中设置了皮肤属性同时通过styleName 属性将样式应用于多个Button 实例。在CSS 中使用Embed 指令时不使用前缀@ 符合， 和在脚本中嵌入地方法一致。
+展开
-XML
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" backgroundColor="#FFFFFF">
<mx:Style>
.customButton {
color: #FFFFFF;
text-roll-over-color: #FFFFBB;
text-selected-color: #9999FF;
disabled-color: #333333;
up-skin: Embed(
source="assets/images/button_up.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
over-skin: Embed(
source="assets/images/button_over.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
down-skin: Embed(
source="assets/images/button_down.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
disabled-skin: Embed(
source="assets/images/button_disabled.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
}
</mx:Style>
<mx:Button label="This button is enabled" styleName="customButton" />
<mx:Button label="This button is disabled" styleName="customButton"
enabled="false"/>
</mx:Application>
layout="horizontal" backgroundColor="#FFFFFF">
<mx:Style>
.customButton {
color: #FFFFFF;
text-roll-over-color: #FFFFBB;
text-selected-color: #9999FF;
disabled-color: #333333;
up-skin: Embed(
source="assets/images/button_up.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
over-skin: Embed(
source="assets/images/button_over.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
down-skin: Embed(
source="assets/images/button_down.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
disabled-skin: Embed(
source="assets/images/button_disabled.png",
scaleGridTop="15",
scaleGridBottom="20",
scaleGridLeft="15",
scaleGridRight="28");
}
</mx:Style>
<mx:Button label="This button is enabled" styleName="customButton" />
<mx:Button label="This button is disabled" styleName="customButton"
enabled="false"/>
</mx:Application>
利用Flex 框架的scale-9 功能，你定义图像的九个部分以便互相独立地调整尺寸。被嵌图像的四角，由四个缩放网格属性推导而来， 不能调整而且放置的位置基于其它格子元素的水平和垂直比例大小。通过为缩放网格属性赋值而使用scale-9 的方法，对于嵌入带有明显的完整边框的图像时很有效果，正如本例中按钮图形的圆角。
加支付宝好友偷能量挖...
