使用Flash Catalyst创建Flex 4主题（二）

Adobe Flash Builder 4 简体中文正式版 Windows版点击下载:http://g.csdn.net/5134151

Adobe Flash Builder 4 简体中文正式版 Mac版点击下载：http://g.csdn.net/5134152

Adobe 在线课堂：http://adobev.csdn.net/zx/index.html
Adobe平台技术峰会课程视频：http://adobev.csdn.net/

Adobe Illustrator 显示选项，保存文件。

选定Down 状态，标识图形（而非文本），这样用户能注意到差异。在这个点上，你可以使用File > Run Project 运行项目，浏览器打开，你可以看到按钮的不同状态。

浏览器显示项目

创建文本输入组件

选择文本输入图形，在HUD 里，转换艺术作品到Component > Text Input 。

将艺术作品转换成文本输出（Text Input ）

创建水平滚动条组件

选定图形，在HUD 里，转换艺术作品到Component > Horizontal Scrollbar

HUD 菜单显示编辑水平滚动条外观的选项，点击 Edit Parts 。

下一步是设定Thumb 和Track 。在HUD 里，你可以看到Group 菜单，设定Thumb 和Track ，可通过选定制作这些组件的图形，然后点击check box. 获取。

编辑，并运行项目，你可以看到我们在浏览器中创建的程序，并使用组件选定File > Save as DarkNight.fxp 保存项目。

输入FXP 到Flash Builder 。

项目作为FXP 保存，Flash Builder 4 识别，并允许输入FXP 项目。打开Flash Builder 4 ，选定File > Import Flex Project (FXP) 。浏览，并选定DarkNight.fxp, 然后选择Finish 。

调整Flash Catalyst 生成代码

我们在使用Flash Catalyst 代码前，常需要进行一些调整。Flash Catalyst 生成代码，用硬代码X, Y ，宽度或高度定位元素。然而，它没有考虑组件的其他使用，这就要求重新确定大小。监狱我们正在构建主题，我们需要能够重新确定组件的大小。我们需要做的就是找到有硬代码X, Y ，宽度和高度的位置，进行转换，以使用基于un-constraints 的值。例如，在我们的代码里，我们需要调整按钮组件，这样它可以被恰当重新确定尺寸。我们需要做的就是，将长方形的宽度从112 像素调整到基于un-constraints 的值，在我们的案例里就是100% 。

参见下面原始代码;

<s:Rect height="24" d:id="4" radiusX="3.00067" radiusY="3.00067" width="112" x="1" y="0">
 


新代码：

<s:Rect height="24" d:id="4" radiusX="3.00067" radiusY="3.00067" width="100%" x="1" y="0">

我们还更改了RichText 标签（来自于将位于中心的硬代码值）。如下所示：

原始代码：

<s:RichText ai:aa="2" color="#212121" columnCount="1" fontFamily="Myriad Pro Semibold" fontSize="14" d:id="5" kerning="on" d:label="ATE Text To TLF Text" text="Button" textAlign="center" d:userLabel="Button" flm:variant="1" whiteSpaceCollapse="preserve" x="36" y="6" buttonMode.over="true">

table.MsoNormalTable { font-size: 10.5pt; font-family: "Calibri","sans-serif"; }

新代码：

<s:RichText color="#212121" textAlign="center" maxDisplayedLines="1" horizontalCenter="0" left="10" right="10" top="0" bottom="2" fontFamily="Myriad Pro Semibold" fontSize="14" kerning="on" verticalAlign="middle" text="Button" flm:variant="1" whiteSpaceCollapse="preserve" buttonMode.over="true">

table.MsoNormalTable { font-size: 10.5pt; font-family: "Calibri","sans-serif"; }

创建CSS 文件

最后一步就是创建一个CSS 文件，用来定义所有Spark 或MX 里的皮肤。Flash Catalyst 已经为我们自动创建了CSS ，Main.css 。但是，这个类没有被执行。你应该做的就是定义CSS 文件中的skinClass 和focusColor 。看下被执行的代码：

/* Dark Night - Flex 4 Theme by Elad Elrom. */ @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; @namespace d "http://ns.adobe.com/fxg/2008/dt"; @namespace fc "http://ns.adobe.com/flashcatalyst/2009"; @namespace components "components.*"; s|Button { focusColor: #0d103f; skinClass: ClassReference("components.Button1"); } s|HScrollBar { skinClass: ClassReference("components.HorizontalScrollbar1"); } s|TextInput { skinClass: ClassReference("components.TextInput1"); }

table.MsoNormalTable { font-size: 10.5pt; font-family: "Calibri","sans-serif"; }

将主题加入Flash Builder / Flex Plugin

在这点上，你已经创新了第一个主题，你想使用Flex 4 SDK plugin 将它添加到Flash Builder 或Eclipse 的主题列表中。下面的指令在Flash Builder 4 或有Flex 4 的插件的Eclipse 以同样的方式运行。

在Flash Builder 4 里，转换到设计视图，在外观（Appearance ）窗口下，点击“ Current theme: Spark ”链接。