使用Flash Catalyst创建Flex 4主题(二)

使用Flash Catalyst创建Flex 4主题(二)
2010年10月20日
　　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% 。
　　参见下面 原始代码; 我们还更改了RichText 标签（来自于将位于中心的硬代码值）。如下所示：
　　原始代码： table.MsoNormalTable { font-size: 10.5pt; font-family: "Calibri","sans-serif"; } 新代码： 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"链接。
　　
　　table.MsoNormalTable { font-size: 10.5pt; font-family: "Calibri","sans-serif"; } 点击 "Import Theme…" > browse 到项目和CSS 文件位置，设定主题名称，点击OK 。
　　
　　table.MsoNormalTable { font-size: 10.5pt; font-family: "Calibri","sans-serif"; }
　　一旦你创建了一个新项目，你可以转换到你刚创建的主题，CSS 和组件会自动复制。你还可以删除一个主题或与社区共享主题。
　　首先，我讨论了Spark 样式支持，和CSS 与Spark 皮肤之间的区别。
　　此后，我们创建了主题。我向你们展示了如何将主题加入Flash Builder 和Flex 插件。我希望本文可以帮助你创建你自己的Spark Skins ，并将他们加入到你的项目中，这样你可以重新使用这些皮肤，或与Flex 社区共享。