利用Adobe Flash Catalyst CS5.5制作Flex组件皮肤（Button）实例

利用Adobe FlashCatalyst CS5.5制作Flex组件皮肤（Button）实例

 

下面是进行button皮肤制作的其中一个方法及步骤

注意事项：1、Catalyst5.5导出的fxp工作文件被Flash Budiler4.6后，提示报错，是因为版本兼容问题，不影响工作作用。

 

操作步骤：

1、  打开CatalystCS5.5，新建一个Catalyst工程，进入主界面。在界面下栏Common LIBRARY标签中将button控件拖入到工作台中，然后在states点击up状态按钮，如图1所示：

图1

 

点击up状态后，在菜单栏下面的STATES栏中将会添加button的四个不同状态，如图2所示：

图2

 

 

2、  通过第1步，我们的准备工作已经完成，接下来，是要设计好button在四种状态下的不同UI形式，然后在四个状态中进行设计。点击sataes中的up状态，然后在工作台中选中button按钮，图3所示

图3

 

然后在界面右下角的properties栏中对up状态进行设计，在这栏中，可以对button的位置、填充颜色、边框及圆角等进行自定义，如图4所示

图4

通过此栏的自定义设置，up状态的ui设计基本完成，利用同样的方法对over、down、disable进行设计，这样，一个button的四种状态都设计完成了。状态设计完成后，在文件菜单中导出fxp文件。

 

3、打开Flash Buider4.6开发工具，将刚才从Catalyst软件中导出的fxp文件导入到工作空间中，但导入后会出现报错，版本问题此处理忽略。如图5所示

图5

 

在项目文件目录中找到我们新建的状态皮肤，图6所示

这个文件就是我们想要得到的button皮肤文件了。在Catalyst软件中设计组件的皮肤，步骤比较简单，但灵活性不强，例如如果想制作一个图button皮肤，就需要借助ai软件或图像处理软件的支持。

 

4、通过以上的步骤，我们已经得到了基本的皮肤需求，但如果想要达到动画的效果，例如鼠标移入移出button，颜色淡入淡出，而不是立即变化，我们也可以通过加入代码达到想要的效果。下面是从catalyst中导出的皮肤源代码

<?xml version="1.0"encoding="utf-8"?><s:Skinxmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"        xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"        width="70" height="24">       <fx:Metadata>        [HostComponent("spark.components.Button")]    </fx:Metadata>       <s:states>        <s:State name="up"/>        <s:State name="over"/>        <s:State name="down"/>        <s:State name="disabled"/>    </s:states>       <!-- background -->    <s:Rect left="0" right="0" top="0" bottom="0" radiusX="2"            alpha.disabled="0.5"radiusY.disabled="2"            radiusX.down="0"            radiusX.over="0"            radiusX.up="0">        <s:stroke>            <s:SolidColorStroke color="#92BBCF"/>        </s:stroke>        <s:fill>            <s:SolidColor color="#BABABA" color.up="#EEEEEE" color.over="#DDDDDD" color.down="#E4EDEF"/>        </s:fill>        <s:fill.up>            <s:LinearGradient rotation="90">                <s:GradientEntry alpha="1.0" color="#F5F8FD" ratio="0"/>                <s:GradientEntry alpha="1.0" color="#DFE9F2" ratio="1"/>            </s:LinearGradient>        </s:fill.up>        <s:fill.over>            <s:LinearGradient rotation="90">                <s:GradientEntry alpha="1.0" color="#EBF5F7" ratio="0"/>                <s:GradientEntry alpha="1.0" color="#B4E6FF" ratio="1"/>            </s:LinearGradient>        </s:fill.over>        <s:fill.down>            <s:SolidColor color="#E4EDEF"/>        </s:fill.down>    </s:Rect>       <!-- shadow (down state only) -->    <s:Rect includeIn="down" y="0" left="0" right="0" height="4" radiusX="2">        <s:fill>            <s:LinearGradient rotation="90">                <s:GradientEntry alpha="0.23" color="#DBF7FF" ratio="0"/>                <s:GradientEntry alpha="0.2" color="#B4E6FF" ratio="0.4"/>                <s:GradientEntry alpha="0.055" color="#CEEFF8" ratio="0.55"/>                <s:GradientEntry alpha="0.0" color="#CEEFF8" ratio="0.8"/>                <s:GradientEntry alpha="0.0" color="#CEEFF8" ratio="0.9254901960784314"/>            </s:LinearGradient>        </s:fill>    </s:Rect>    <s:Rect includeIn="down" x="0" top="0" bottom="0" width="4" radiusX="2">        <s:fill>            <s:LinearGradient rotation="0">                <s:GradientEntry alpha="0.13" color="#CEEFF8" ratio="0"/>                <s:GradientEntry alpha="0.12" color="#CEEFF8" ratio="0.2"/>                <s:GradientEntry alpha="0.0" color="#CEEFF8" ratio="0.55"/>            </s:LinearGradient>        </s:fill>    </s:Rect>       <!-- label -->    <s:RichText id="labelDisplay" horizontalCenter="0"verticalCenter="1" verticalCenter.down="2"  textAlign="center"verticalAlign="middle"alpha.disabled="0.5" fontFamily="Arial"/>   </s:Skin>

 

 

接下来，我们先对background节点下的代码进行一些修改，如下：

<s:Rectleft="0"            right="0"            top="0"            bottom="0"            radiusX="2"            alpha.disabled="0.5"            radiusY.disabled="2"            radiusX.down="0"            radiusX.over="0"            radiusX.up="0">        <s:stroke>            <s:SolidColorStroke color="#92BBCF"/>        </s:stroke>        <s:fill>            <s:LinearGradient rotation="90">                <s:GradientEntry id="ge1"                                 alpha="1.0"                                 color.up="#F5F8FD"                                 color.over="#EBF5F7"                                 ratio="0"/>                <s:GradientEntry id="ge2"                                 alpha="1.0"                                 color.up="#DFE9F2"                                 color.over="#B4E6FF"                                 ratio="1"/>            </s:LinearGradient>        </s:fill>        <s:fill.down>            <s:SolidColor color="#E4EDEF"/>        </s:fill.down>    </s:Rect>

 

修改部分为fill.up及fill.down，将状态代码合并到fill中，然后在GradientEntry中添加ID。然后添加动画代码如下：

<!-- Transition -->    <s:transitions>         <s:Transition fromState="up"                      toState="over">            <s:AnimateColor duration="500"                            targets="{[ ge1, ge2]}"/>        </s:Transition>         <s:Transition fromState="over"                      toState="up">            <s:AnimateColor duration="500"                            targets="{[ ge1, ge2]}"/>        </s:Transition>     </s:transitions>

 

 

 

修改后完整的代码如下

ButtonSkin.mxml

 

<?xml version="1.0"encoding="utf-8"?> <!--     ADOBESYSTEMS INCORPORATED    Copyright2008 Adobe Systems Incorporated    AllRights Reserved.     NOTICE:Adobe permits you to use, modify, and distribute this file    inaccordance with the terms of the license agreement accompanying it. --> <!--- The default skin classfor the Spark Button component.        @see spark.components.Button       @langversion 3.0      @playerversion Flash 10      @playerversion AIR 1.5      @productversion Flex 4--><s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"                  xmlns:s="library://ns.adobe.com/flex/spark"                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"                   minWidth="70"                   minHeight="24"                   alpha.disabled="0.5">     <fx:Metadata>        <![CDATA[        /**         * @copyspark.skins.spark.ApplicationSkin#hostComponent         */        [HostComponent("spark.components.Button")]        ]]>    </fx:Metadata>     <!-- states -->    <s:states>        <s:State name="up"/>        <s:State name="over"/>        <s:State name="down"/>        <s:State name="disabled"/>    </s:states>     <!-- Transition -->    <s:transitions>         <s:Transition fromState="up"                      toState="over">            <s:AnimateColor duration="500"                            targets="{[ ge1, ge2]}"/>        </s:Transition>         <s:Transition fromState="over"                      toState="up">            <s:AnimateColor duration="500"                            targets="{[ ge1, ge2]}"/>        </s:Transition>         <!--<s:Transition fromState="over"                      toState="down">            <s:AnimateColorduration="500"                            targets="{[ge1, ge2, ge3, ge4 ]}"/>        </s:Transition>         <s:TransitionfromState="down"                      toState="up">            <s:AnimateColorduration="500"                            targets="{[ge1, ge2, ge3, ge4 ]}"/>        </s:Transition>-->     </s:transitions>     <!-- background -->    <s:Rect left="0"            right="0"            top="0"            bottom="0"            radiusX="2"            alpha.disabled="0.5"            radiusY.disabled="2"            radiusX.down="0"            radiusX.over="0"            radiusX.up="0">        <s:stroke>            <s:SolidColorStroke color="#92BBCF"/>        </s:stroke>        <s:fill>            <s:LinearGradient rotation="90">                <s:GradientEntry id="ge1"                                 alpha="1.0"                                 color.up="#F5F8FD"                                 color.over="#EBF5F7"                                 ratio="0"/>                <s:GradientEntry id="ge2"                                 alpha="1.0"                                 color.up="#DFE9F2"                                 color.over="#B4E6FF"                                 ratio="1"/>            </s:LinearGradient>        </s:fill>        <s:fill.down>            <s:SolidColor color="#E4EDEF"/>        </s:fill.down>    </s:Rect>     <!-- shadow (down state only) -->    <s:Rect includeIn="down"            y="0"            left="0"            right="0"            height="4"            radiusX="2">        <s:fill>            <s:LinearGradient rotation="90">                <s:GradientEntry alpha="0.23"                                 color="#DBF7FF"                                 ratio="0"/>                <s:GradientEntry alpha="0.2"                                 color="#B4E6FF"                                 ratio="0.4"/>                <s:GradientEntry alpha="0.055"                                 color="#CEEFF8"                                 ratio="0.55"/>                <s:GradientEntry alpha="0.0"                                 color="#CEEFF8"                                 ratio="0.8"/>                <s:GradientEntry alpha="0.0"                                 color="#CEEFF8"                                 ratio="0.9254901960784314"/>            </s:LinearGradient>        </s:fill>    </s:Rect>    <s:Rect includeIn="down"            x="0"            top="0"            bottom="0"            width="4"            radiusX="2">        <s:fill>            <s:LinearGradient rotation="0">                <s:GradientEntry alpha="0.13"                                 color="#CEEFF8"                                 ratio="0"/>                <s:GradientEntry alpha="0.12"                                 color="#CEEFF8"                                 ratio="0.2"/>                <s:GradientEntry alpha="0.0"                                 color="#CEEFF8"                                 ratio="0.55"/>            </s:LinearGradient>        </s:fill>    </s:Rect>     <!-- layer 8: text -->    <!--- @copyspark.components.supportClasses.ButtonBase#labelDisplay  -->    <s:Label id="labelDisplay"             textAlign="center"             maxDisplayedLines="1"             horizontalCenter="0"             verticalCenter="1"             verticalAlign="middle"             left="10"             right="10"             top="2"             bottom="2">    </s:Label> </s:SparkButtonSkin>

 

运行测试，效果是不是相分强烈呢？