Flex4的spark组件的皮肤制作方法 -
Flex - CSDN新闻
标签　Flex
已登录：Guest
您的位置：&&gt&&gt正文
Flex4的spark组件的皮肤制作方法
Adobe Flash Builder 4 简体中文正式版 下载:
Adobe平台技术峰会课程视频：
&闪创未来&-Adobe Flash 平台应用开发大赛：
原来看了很多flex3的书，提到皮肤时举例子基本上都是用图片或swf内含的矢量图，来分别替换控件的upskin、downskin、overskin&&等等。弄得我一直有一个错觉，好像皮肤就是这么回事，用图片替换。也就无法动态更改颜色大小等属性了。
到了想定义spark控件皮肤的时候，才猛然发现，一个skin样式也没有了，这该怎么替换图片啊？唯独有一个skinclass的属性。
经 过摸索，原来是这么一回事啊：据官方文档的描述是，spark组件的出现大部分是为了围绕全面兼容&flash
catalyst&的使用。spark组件就是跟mx平行的一套，功能既然都一样，那为什么要再写一套呢？这正是为了让spark组件能直接使用FC导出 的皮肤文件！刚开始看网上的评论，一直说flex4的皮肤机制改进了，多好多好。然后给了个例子，发现完全是代码的。感觉靠想象力根本就写不出来嘛，哪有 改进？具体的关于spark的skin是如何使用的，请看，别人说过的我就不多说了，里面很明白的说了，spark组件的skinclass是怎么用的。后来又看了一个非常棒的FC视频教程，顿时明白了，sparkskin原来根本不是用手写的，是直接画出来生成的。。。。。。
看 完那个视频教程，你就会明白spark皮肤制作原来是这么的简单！我之后就开始深入AI的矢量图绘画了，把原来图片格式的皮肤都画了一遍，导入FC，再导 出就都变代码化皮肤了。因为是代码化的，导出文件变得非常的小，而且由于代码化的好处，属性完全就在你的掌控之中了，可以运行时任意修改皮肤颜色等外观， 完全可以做自定义皮肤了。（另外小小提示一下：AI里有些效果，比如说径向的渐变在FC里不能被很好的导入，会发生外观差别，我的技巧是，把矢量栅格化 了，变成位图，导入FC后，一样可以使用。即使无法完全代码化，也依然推荐这么制作皮肤，因为位图的话是可以半透明的，你还是可以动态更改皮肤的背景颜 色，也可以动态设置位图的透明度，控制力 还是很大滴。导出的皮肤会混合代码图和位图，不用担心，这些FC都为你编写好啦）
以上是学会了 如何制作代码化的sparkskin，我后来更进了一步，琢磨怎么把代码化的皮肤用在MX组件上（嘿嘿，很邪恶吧？这样以后只要想要的外观都可以直接画 了，导入FC转换就行啦，没办法，FC制作皮肤太简单了！）说这个之前，还是请大家回到前面提到的那篇文章吧，弄清楚mxskin和sparkskin的 关系了，下面的问题就明朗了。
先来看下sparkskin是在css里是怎么定义的
s|Button {&&&&&& skinClass: ClassReference(&com.rianote.flex.skin.KButton&); }
看着跟mx的定义是不是很像？那就对了。我们只需要这么改：
mx|Button {&&&&&& upSkin: ClassReference(&com.rianote.flex.skin.KButton&); }
这里只定义了upskin,跟用图片没什么区别的，然后你再分别定义downSkin、overskin&&就可以了。这只解决了 一半，关键是要修改那个com.rianote.flex.skin.KButton皮肤类文件，因为它是为spark生成的，我们修改一下，才能让mx 也能用。打开文件代码如下：
&?xml&version=&1.0&&encoding=&utf-8&?&&&&
&s:Skin&xmlns:s=&library:///flex/spark&&xmlns:fx=&/mxml/2009&&xmlns:ai=&/ai/2009&&&&&
&fx:Metadata&[HostComponent(&ponents.Button&)]&/fx:Metadata&&&&
&s:states&&&&&s:State&name=&up&/&&&&&s:State&name=&over&/&&&&
&s:State&name=&down&/&&&&&s:State&name=&disabled&/&&&&
&/s:states&&&&
&s:Path&alpha=&0.95&&data=&M&99.502&35.5&L&0.5&35.5&L&0.5&9.68&C&0.5&4.61&5.566&0.5&11.815&0.5&L&88.187&0.5&C&94.435&0.5&99.502&4.61&99.502&9.68&L&99.502&35.5&Z&&ai:objID=&4c09c580&&winding=&nonZero&&x=&0&&y=&0&&&&&
&s:fill&&&&&&s:LinearGradient&scaleX=&99.0015&&x=&0.5&&y=&18&&&&&
&s:GradientEntry&color=&0x4E4E4E&&ratio=&0.5&/&&&&
&s:GradientEntry&color=&0x545454&&ratio=&0.745455&/&&&&
&&&&&s:GradientEntry&color=&0x5B5B5B&&ratio=&1&/&&&&
&&&&&/s:LinearGradient&&&&&/s:fill&&&&&s:stroke&&&&
&&&&&s:SolidColorStroke&caps=&none&&color=&0x6A6A6A&&joints=&miter&&miterLimit=&4&&scaleMode=&normal&&weight=&1&/&&&&
&&&/s:stroke&&&&/s:Path&&&&
&&s:Path&alpha=&0.95&&data=&M&0&23.187&L&0&4.229&C&0&4.229&22.572&-4.313&50&2.771&C&77.427&9.854&100&1.312&100&1.312&L&100&23.187&L&0&23.187&Z&&ai:objID=&4c177400&&winding=&nonZero&&x=&0&&y=&13&&&&&
&&&s:fill&&&&
&&&&s:LinearGradient&rotation=&270&&scaleX=&23.2266&&x=&50.0005&&y=&23.2266&&&&&
&&&&&s:GradientEntry&ratio=&0&/&&&&
&&&&&s:GradientEntry&color=&0x333333&&ratio=&1&/&&&&
&&&&/s:LinearGradient&&&&&/s:fill&&&&/s:Path&&&/s:Skin&&&&
version=&1.0& encoding=&utf-8&?&
&s:Skin xmlns:s=&library:///flex/spark&
xmlns:fx=&/mxml/2009&
xmlns:ai=&/ai/2009&&
&fx:Metadata&[HostComponent(&ponents.Button&)]&/fx:Metadata&
&s:states&
&s:State name=&up&/&
name=&over&/&
&s:State name=&down&/&
&s:State name=&disabled&/&
&/s:states&
&s:Path alpha=&0.95& data=&M 99.502 35.5 L 0.5 35.5 L 0.5 9.68 C 0.5
4.61 5.566 0.5 11.815 0.5 L 88.187 0.5 C 94.435 0.5 99.502 4.61 99.502
9.68 L 99.502 35.5 Z& ai:objID=&4c09c580& winding=&nonZero& x=&0&
&s:LinearGradient scaleX=&99.0015& x=&0.5&
&s:GradientEntry color=&0x4E4E4E& ratio=&0.5&/&
&s:GradientEntry color=&0x545454& ratio=&0.745455&/&
&s:GradientEntry color=&0x5B5B5B& ratio=&1&/&
&/s:LinearGradient&
&s:stroke&
&s:SolidColorStroke caps=&none& color=&0x6A6A6A& joints=&miter&
miterLimit=&4& scaleMode=&normal& weight=&1&/&
&/s:stroke&
&s:Path alpha=&0.95& data=&M 0 23.187 L 0 4.229 C 0 4.229 22.572
-4.313 50 2.771 C 77.427 9.854 100 1.312 100 1.312 L 100 23.187 L 0
23.187 Z& ai:objID=&4c177400& winding=&nonZero& x=&0& y=&13&&
&s:LinearGradient rotation=&270& scaleX=&23.2266& x=&50.0005&
y=&23.2266&&
&s:GradientEntry ratio=&0&/&
&s:GradientEntry color=&0x333333& ratio=&1&/&
&/s:LinearGradient&
观察了一下，FC现在导出的皮肤根标签已经就直接是skin了，而不是sparkSkin，那么当然就可以直接给mx用了啊。
只要删去这几个部分：1、&fx:Metadata&&&&/fx:Metadata&
& & & & & & & & & & & & & &2、&s:states& &&&s:states&这样保留下来的就只有绘图函数代码了。
& & & & & & & & & & & & & &3、如果你也是用AI画的皮肤，你就也会有xmlns:ai=这个命名空间，删掉它，同时把代码部分里出现ai属性的地方都删除，如：ai:objID=&4c177400&这种。
OK！现在就能完美把FC导出的代码化皮肤加给mx用啦。你看我说的麻烦，你操作一下就会发现，这其实很简单的。
最 后再说一下，怎么在运行时动态设置皮肤的颜色等外观。运行时皮肤只能通过一种途径跟调用它的控件通信，就是getStyle（）方法。用这个方法获取当前 控件的一个style属性值。例如&s:GradientEntry color=&0x333333& ratio=&1&/&
这句就可以改成&s:GradientEntry color=&{getStyle('color')}& ratio=&1&/&
然后运行时去设置那个Button的color属性就可以了。
本文来自：
CSDN有奖阅读2009第七期中奖名单()
用户名公司奖品
mfkpgfsbihc北京宇信易诚U盘激光笔
qiepingguo2000新蛋信息技术(中国)有限公司U盘激光笔
a1985ok77华为敏捷软件开发
barcelona5清华大学敏捷软件开发
lin0shyi1汇高网讯科技有限公司敏捷软件开发
wlc_sddz北京银河金星CSDN精美T恤
aswater333北京天下商机国际传媒广告有限公司CSDN精美T恤
zpy1092上海华腾软件系统有限公司CSDN精美T恤
googolmao北京中软国际信息技术有限公司CSDN精美T恤
请查收中奖通知并邮件告知详细地址及详细信息
以便我们及时寄送奖品，谢谢！
联系人邮箱:2952人阅读
下面以Button组件为例，开始FLEX皮肤制作的入门。
我们先在Flex Builder 3中新建一个项目FlexSkinTest
新建文件夹style，并在style文件夹下新建style.css文件：
双击打开style.css，切换到Design面板并新建一个样式：
选择Button组件：
按下OK后可以看到按钮的8种状态。便于测试，我们把背景色调整为0&333333：
切换到Source面板调整字体样式：
color:#AAAAAA;/*Color*/
textRollOverColor:#FFFFFF; /*text rolling over color*/
textSelectedColor:#FFFFFF; /*SelectedColor*/
disabledColor:#5A5A5A; /* disabledColor */
fontWeight:normal; /*fontweight*/
结果如下图：
接下来的工作就是把按钮的8种状态用自定义的皮肤替换掉。
常用的实现方法有4种，我们将逐步介绍。
我们先学习KingnareStyle中Button组件皮肤的实现方法：将外部swf文件里的皮肤元件嵌入到组件样式文件中。
嵌入swf文件中的元件
首先在style文件夹下新建文件skin.fla，背景色同样设置为#333333。
CTRL+F8新建影片剪辑Button_upSkin，属性设置如下:
这里最好启用9切片，以后嵌入FLEX样式时就不用进行9切片设置了。
关于9切片，可以参考下面图示（引自Flex Developer Center）：
将舞台放大至400%，使用矩形工具画一个空心矩形，坐标为（0，0），厚度为1像素，高宽均为23像素，填充色为#FFFFFF，透明度10%
再新建一个层，用同样的方法在内部画一个空心矩形，坐标为（1，1），厚度1像素，高宽均为21像素，填充色为#000000，透明度60%
下面填充空白区。
新建一个层，画实心矩形，坐标为（2，2），高宽均为19像素，填充线性渐变色白色，透明度由10%至0%：
最后再加高亮框。新建一个层，画空心矩形，坐标为（2，2），厚度为1，高宽均为19像素，填充线性渐变色白色，透明度由8%至3%
至此，图形部分完成，再把9切片的线重新定位：
CTRL+ENTER发布程序。
Flash部分告一段落，回到FLEX的style.css中。切换到Source面板，在Button样式中加入下面语句：
upSkin(source=&skin.swf&, symbol=&Button_upSkin&);
解释一下，upSkin，Button弹起状态皮肤。Embed语句，用于将外部资源嵌入程序中使用，本例中将skin.swf中的Button_upSkin元件嵌入到样式中。
保存后切换到Design面板，会发现up状态已经更新为我们刚才制作的元件了：
使用同样的方法来制作其他状态皮肤，要注意给元件赋合适的名字。最后CCS如下：
Application
backgroundGradientAlphas: 1.0, 1.0;
backgroundGradientColors: #333333, #333333;
color: #AAAAAA;
textRollOverColor: #FFFFFF;
textSelectedColor:#FFFFFF;
disabledColor:#5A5A5A;
fontWeight:normal;
upSkin: Embed(source=&skin.swf&, symbol=&Button_upSkin&);
overSkin: Embed(source=&skin.swf&, symbol=&Button_overSkin&);
downSkin: Embed(source=&skin.swf&, symbol=&Button_downSkin&);
disabledSkin: Embed(source=&skin.swf&, symbol=&Button_disabledSkin&);
selectedUpSkin: Embed(source=&skin.swf&, symbol=&Button_selectedUpSkin&);
selectedOverSkin: Embed(source=&skin.swf&, symbol=&Button_selectedOverSkin&);
selectedDownSkin: Embed(source=&skin.swf&, symbol=&Button_selectedDownSkin&);
selectedDisabledSkin: Embed(source=&skin.swf&, symbol=&Button_selectedDisabledSkin&);
接下来我们打开FlexSkinTest.mxml文件，切换到Source面板，
添加 &mx:Style source="style/style.css"/&
&mx:Button x="10" y="10" label="Button"/&
换到Design面板，可以看到新加的Button组件已经应用我们的样式了，也可以多拖几个Button到程序中并设置不同的大小，可以发现边缘并未因形变发生模糊，这是我们使用了9切片的结果。
可以说，我们的Button组件皮肤已经完工了。
使用Flex Skin Design Extensions for Flash CS3
我们再开始第二种皮肤制作方法。
先做准备活动：
从/go/flex3_cs3_swfkit下载Flex Component Kit for Flash CS3。
从/go/flex3_skinning下载Flex Skin Design Extensions for Flash CS3.安装后重启Flash CS3.
到/flex/3/skinning_extensions_flex3.pdf下载操作手册。
从上面地址中还可以看到有For Fireworks,For Photoshop等FLEX皮肤制作插件，我们可能在后续文章中介绍实现方法。
首先打开Flash CS3,CTRL+N新建文件，切换&新建文档&到&模板&面板，选择Flex Skins-&Button,如下图：
将文件命名为skintemplate.fla,背景色调整#333333。
新建成功后，可以看到舞台上的按钮元件。双击按钮元件进入编辑状态，或者在库中双击Button_skin元件。可看到如下图所示的时间轴：
简略的介绍一下这些层的用途。
States：定义对应组件的每种状态时间线上的关键帧，如上图所示中的关键帧帧名
Transitions:定义组件状态切换时的过渡动画，默认为每种状态的最后两个关键帧为起始帧和终止帧，以up状态切换到over状态举例，Transitions层的up-over:start帧为起始帧，up-over:end帧为终止帧，可在art层中制作相应的过渡动画
Art：组件的图形部分
你会发现程序只生成了4种状态，通过前面的学习知道Button组件可以有8种状态，没关系，我们在disabled后面再加入4个状态(注意区分大小写)：
以selectedUp状态为例：
States层关键帧名为selectedUp.
Transitions层，在最后两帧增加down-selectedOver:start, down-selectedOver:start两个关键帧作为过渡动画的起始与终止帧.
将前面制作的skin.fla中的Button组件皮肤移植过来。
例如up状态的：
所有状态完成后，CTRL+ENTER发布程序，这时会生成skintemplate.swf和skintemplate.swc两个文件。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：30610次
排名：千里之外
原创：32篇
评论：10条
(1)(2)(1)(1)(11)(23)(2)flex css样式问题_百度知道
flex css样式问题
？是不是Label没有over这个状态。为什么s|Button，但是s|Label:over{}是可以的。。怎么在css中定义label鼠标经过是的样式啊？但是label有和button一样的mouseover这个事件啊:over就不行了啊。。求高人帮忙啊。
提问者采纳
你也只能自己写这个个人很负责的告诉你label还真没over这个状态， button有皮肤类里面可以看到 不同的state。你可以看下 labe是没有skinClas的属性的？ 你如果要实现的话，可label难道有皮肤类吗。 flex4是通过state来控制这些显示的
提问者评价
唉。。只能这样了。呵呵，谢谢你啊！
其他类似问题
为您推荐：
其他3条回答
styles.css&如果fx.css是放在src下的css文件夹中;css&#47，注意source是css的相对（src）的路径.css实在src文件下的&lt:Style source=&quot.css&&gt,要这样引用才行&lt:Style source=&&gt，下面的描述表示styles你在主mxml文件中写入; /环境; &#47
这个我懂啊，button已经可以了label 不行啊！
lable没有外观。可以有事件。
有外观啊！我想要不同状态的外观啊！
状态是在外观里面写的。
那如何简洁的定义label鼠标移入时的外观啊？
你不是已经定义外观了吗。你在上api上查查。label有几种状态。在外观里面定义&s:states&&/s:states&
是label:hover
试了不行啊。。。求正解
您可能关注的推广
css样式的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁安全检查中...
请打开游览器的javascript，然后刷新游览器
浏览器安全检查中… .
还剩 5 秒&}