9.14.从SWF文件中嵌入皮肤

9.14.1.问题
你想在SWF 文件中保存一堆图像,以便用来为组件嵌入皮肤。
9.14.2.解决办法
生成一个SWF 文件, 用多个记号标记表示组件多个状态的输出。
9.14.3.讨论
在SWF 文件中生成一堆图像皮肤是将设计展现给其它开发人员的方便方法。另外它实现了将矢量图形做为皮肤的可能性。

使用来自Flash IDE 库的元件的属性面板,你能选择用于引用图形元件的类名和超类链接。

由于你在Flash IDE 中仅使用基于ActionScript 的项目所提供的类库,所以不能选择Flex 框架中提供的基础类。那样很好,因为在嵌入到程序中时那些元件被转换成它们的Flex 副本。

例如,代表SWF 文件库输出的MovieClip 实例被转换成MovieClipAsset 对象,这些对象随后被添加到Flex 程序的显示界面中。

创造用来扩展MovieClip 的资料对有多个状态的图像很有用,但如果使用静态图像,将元件的基础类设置为flash.display.Sprite 类就足够了。当被嵌入到Flex 程序中时,Sprite 对象将被转换成SpriteAsset 对象。

若要在Flash IDE 中生成静态图像皮肤,首先打开一个新的FLA 同时从类库中生成一个新的MovieClip 元件。将一个图像文件导入至MovieClip 实例的舞台上或者利用Flash IDE 绘图工具创造应用于程序的基于矢量的皮肤。为使元件能嵌入到Flex 程序中,右击库中的元件,从背景菜单中选择访问元件属性面板, 然后选择输出为ActionScript 的复选框。基础类域的默认值为flash.display.MovieClip。你可以保持那个值,同样可以将它变为flash.display.Sprite ,因为图像被当作静态,或者没有很多依赖时间线的状态。

图9-2 展示了设置元件属性面板的高级功能来生成应用于多个状态和滚动条元素的皮肤。

从高级功能中,你可以选择嵌入的属性(也可从链接面板中访问)同时有机会利用选择允许使用9 切片缩放向导在元件中显示可拖拽的9 切片缩放网格线。如果你手动地设置元件的scale-9 guides ,Flex 编译器自动地设置缩放网格属性(scaleGridLeft, scaleGridRight,scaleGridTop, scaleGridBottom)的样式值。


图9-2.在SWF文件中生成并导出矢量图像

生成这些皮肤,并且给每个皮肤唯一的链接标识符同时勾选输出,以一个适合你项目的名称(本例中名称为scrollbar_skins.fla)保存FLA 文件,然后发布剪辑。

从SWF 文件中嵌入图像元件与嵌入单一的图像文件相似。你在Embed 指令中将源属性设置为SWF 文件,然后将元件属性值设置为你要嵌入的库元件的链接标识符的内容。例如:
thumbUpSkin: Embed(source="styles/scrollbar_skins.swf", symbol="thumb_upSkin");
你同样可以在源定义中利用英镑符(#)界定SWF 位置和元件链接标识符的方法来设定元件属性值,如下:
thumbUpSkin: Embed(source="styles/scrollbar_skins.swf#thumb_upSkin");
下面的例子使用生成的样式SWF (scrollbar_skins.swf,可在本章代码中找到) 为ScrollBar 类的实例应用皮肤。Flex 组件架构的mx.controls.scrollClasses.ScrollBar 类由多个状态可变的元素组成。滚动条组件的每个元素都有表示当前状态的视觉表示。状态能传递当前用户动作和激活信息。例如,当一个用户用鼠标在滚动条子件上盘旋时,组件输入一个"over" 状态。

利用ScrollBar 类提供的相应的样式属性,将元件皮肤应用于每个元素的每个状态阶段是可行的。
+展开
-XML
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">

<mx:Style>
ScrollBar
{
trackColors: #0099CC, #0099CC;
borderColor: #99FFFF;
thumbUpSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="thumb_upSkin");
thumbOverSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="thumb_overSkin");
thumbDownSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="thumb_downSkin");
upArrowUpSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowUp_upSkin");
upArrowOverSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowUp_overSkin");
upArrowDownSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowUp_downSkin");
upArrowDisabledSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowUp_disabledSkin");
downArrowUpSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowDown_upSkin");
downArrowOverSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowDown_overSkin");
downArrowDownSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowDown_downSkin");
downArrowDisabledSkin:
Embed(source="assets/styles/scrollbar_skins.swf",
symbol="arrowDown_disabledSkin");
}

</mx:Style>
<mx:Label text="Keep typing to see the scroll!"
color="0xFFFFFF" />

<mx:TextArea width="200height="150"
text="Lorem ipsum dolor sit amet..."
borderColor="0x0099CC" />

<mx:HScrollBar width="200enabled="false" />
</mx:Application>

ScrollBar 实例的类型选择器在<mx:Style>标记中为程序进行了本地地声明。在声明中定义了三个子元素的状态皮肤:压下,向上箭头和向下箭头。

mx.controls.TextArea 组件显示基于文本长度的滚动条。想要看到利用样式SWF 应用了皮肤的垂直滚动条,在文本域中键入更多内容。mx.controls.HScrollBar 的实例也被加入到显示界面中,不能说明皮肤对两种滚动条实例(VscrollBar 和HScrollBar)应用结果相同而且样式属性不依赖于方向。

加支付宝好友偷能量挖...


评论(0)网络
阅读(108)喜欢(0)flash/flex/fcs/AIR