zoukankan      html  css  js  c++  java
  • 下面以Button组件为例,开始FLEX皮肤制作的入门。

    下面以Button组件为例,开始FLEX皮肤制作的入门。

     

    我们先在Flex Builder 3中新建一个项目FlexSkinTest

    新建文件夹style,并在style文件夹下新建style.css文件:

    双击打开style.css,切换到Design面板并新建一个样式:

    选择Button组件:

    按下OK后可以看到按钮的8种状态。便于测试,我们把背景色调整为0×333333:

    切换到Source面板调整字体样式:

    1. Button
    2. {
    3. color:#AAAAAA;/*Color*/
    4. textRollOverColor:#FFFFFF; /*text rolling over color*/
    5. textSelectedColor:#FFFFFF; /*SelectedColor*/
    6. disabledColor:#5A5A5A; /* disabledColor */
    7. fontWeight:normal; /*fontweight*/
    8. }

    结果如下图:

    接下来的工作就是把按钮的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样式中加入下面语句:

    1. upSkin:Embed(source=”skin.swf”, symbol=”Button_upSkin”);

    解释一下,upSkin,Button弹起状态皮肤。Embed语句,用于将外部资源嵌入程序中使用,本例中将skin.swf中的Button_upSkin元件嵌入到样式中。

    保存后切换到Design面板,会发现up状态已经更新为我们刚才制作的元件了:

    使用同样的方法来制作其他状态皮肤,要注意给元件赋合适的名字。最后CCS如下:

    1. Application
    2. {
    3. backgroundGradientAlphas: 1.0, 1.0;
    4. backgroundGradientColors: #333333, #333333;
    5. }
    6.  
    7. Button
    8. {
    9. color: #AAAAAA;
    10. textRollOverColor: #FFFFFF;
    11. textSelectedColor:#FFFFFF;
    12. disabledColor:#5A5A5A;
    13. fontWeight:normal;
    14. upSkin: Embed(source=”skin.swf”, symbol=”Button_upSkin”);
    15. overSkin: Embed(source=”skin.swf”, symbol=”Button_overSkin”);
    16. downSkin: Embed(source=”skin.swf”, symbol=”Button_downSkin”);
    17. disabledSkin: Embed(source=”skin.swf”, symbol=”Button_disabledSkin”);
    18. selectedUpSkin: Embed(source=’skin.swf’, symbol=’Button_selectedUpSkin’);
    19. selectedOverSkin: Embed(source=’skin.swf’, symbol=’Button_selectedOverSkin’);
    20. selectedDownSkin: Embed(source=’skin.swf’, symbol=’Button_selectedDownSkin’);
    21. selectedDisabledSkin: Embed(source=’skin.swf’, symbol=’Button_selectedDisabledSkin’);
    22. }

    效果图:

    接下来我们打开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

    我们再开始第二种皮肤制作方法。

    先做准备活动:

    从http://www.adobe.com/go/flex3_cs3_swfkit下载Flex Component Kit for Flash CS3。

    从http://www.adobe.com/go/flex3_skinning下载Flex Skin Design Extensions for Flash CS3.安装后重启Flash CS3.

    到http://livedocs.adobe.com/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两个文件。

  • 相关阅读:
    vue 跨域访问http
    vue 生命周期小结
    koa的教程
    spoj104 HIGH
    loj2026 「JLOI / SHOI2016」成绩比较
    loj2024「JLOI / SHOI2016」侦查守卫
    loj2016 「SCOI2016」美味
    loj2014 「SCOI2016」萌萌哒
    loj2013 「SCOI2016」幸运数字
    loj2012 「SCOI2016」背单词
  • 原文地址:https://www.cnblogs.com/jiahuafu/p/1584349.html
Copyright © 2011-2022 走看看