利用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"