使用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/

 

Flex 4 引入了全新的皮肤构架，包括对Flex 4 组件中整个样式构架的重新加工。这样就可以轻松更改CSS 或给组件重新添加皮肤。在本文中，我将带你浏览下Spark 皮肤，看下如何使用CSS ，并对使用Flash Catalyst. 创建主题提供一些指导。

 

Flex 4 和全新的Spark 样式支持

在Flex 2 和Flex 3 中，SDK 仅支持Halo 皮肤。而在Flex 4 中，使用的缺省皮肤是Spark 库，以Halo 为基础构建。我想要带你快速浏览下Spark 样式支持，然后再创建主题。用于Spark 皮肤的Flex 4 SDK 样式的设计是简单，可预测的，并且保持了一致性。实际上，如果你用几个全局样式属性，就能更改一个程序的整个外观。这与Halo 的样式构成对比，在Halo 里，你会要使用很多个旋转按钮以调整外观，而大部分这些旋转按钮都需要设定在单个的组件或类型选择符上。

 

我们来看一个例子。下面的代码为按钮组件设定了全局样式。

 

注意，在Flex 4 中，你可以定义组件的名域，因为大多都是作为现有的MX 组件共享同一个本地名。譬如，按钮Button 。定义名域就可以避免命名冲突。

 

Flex 4 状态

Flex 4 和Spark 库的一个最明显的改进就是，读取状态管理的能力。实际上，在配置有Halo 库的Flex 3 里，Adobe 已经创建了一些样式，以实现次组件或组件状态的风格化，因为你无法读取状态。

 

譬如，为了读取Accordion 次组件，你有headerStyleName, 或ComboBox 上的dropDownStyleName 。

 

有了Spark 中的高级CSS 功能，就无需使用这类样式了。我们来看看一个Spark 样式，它让你有了更为细致的参数调谐，并且可以让你使用按钮组件的over state 。参见图表。

 

 

<s:Application> <fx:Style source="Main.css" /> <s:Panel width="400" height="600" title="Panel title goes here"> <s:TextArea width="200" height="150" x="22" y="47"> <s:text> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, </s:text> </s:TextArea> <s:Button width="100" label="test" x="22" y="10"/> </s:Panel> </s:Application>

@namespace s "library://ns.adobe.com/flex/spark"; s|Panel #titleDisplay { fontSize: 20; font-style: italic; } s|TextArea s|ScrollBar { base-color: #DC03FC; } s|Button:up { color: #0826FF; }

 

CSS 样式VS. 皮肤

作为Flex Developers ，我们经常使用CSS 以定制组件。然而，在有些情况下，你不能获得需要的定制化，这时你就要使用Skinning 。使用CSS 样式，或皮肤的决定与你期待实现的目标有关。

 

对组件的全新构架的告诫就是：你以前在Halo 中习惯使用样式执行的简单和普通的任务，现在在Spark 中，会需要整体的皮肤重做。

 

每个Spark 组件会拓展SkinnableComponent ，而它又会拓展SkinnableComponent 。

SkinnableComponent 是可更换皮肤的组件的基础类。每个皮肤都是子组件，正如其他UIComponent 一样有自己的生命周期。你可以然后定义每个类里面的皮肤，如下所示：

SomeComponent { skinClass: ClassReference("component.SomeComponentSkin") }

 

一旦你定义好了自己的皮肤，新的皮肤将会与组件连接起来，而非缺省皮肤。这类全新的构架让你可以轻松代替Spark 组件的皮肤。

 

使用Flash Catalyst 构建主题

打开Flash Catalyst CS 5 ，选择创建““New Project from Design File” > “From Adobe Illustrator AI File…” 浏览并选择DarkNight.ai 文件。ai 文件由Juan Sanchez. DarkNight.ai 提供。

 

你可以保存所有的缺省选项，点击OK 。在这点上，Catalyst 打开了设计艺术作品。参见图。

 

 

 

 

Catalyst 显示DarkNight 设计 。

 

创建按钮组件

下一步就是将设计艺术作品转换成组件。选择所有与按钮相关的图形，在HUD （抬头数字显示）里，选定“ Convert Artwork to Component menu ”> “Button ” ( 参见图表) 。

 

 

将作品转换成HUD 里的组件菜单。双击按钮，你可以看到状态。参见图。

 

 

 

按钮状态模式

 

在屏幕中，你看到所有的状态。你可以在Catalyst 里对特定属性进行修改。选择Over state ，标识图形（而非文本），在属性中，文件选择Appearance > Blend 模式：Luminosity 。此外，你可以铜鼓选定图形，右击Adobe Illustrator CS5 中的> Edit ，修改illustrator 中的图形。我将修改illustrator 中的文件，一旦我完成，你可以选择illustrator 中的Done 。所有我所做的都改变了，根据菜单项目的不同，颜色会发生变化。

 

属性窗口显示外观选项

 

 

 

 

本文译自：http://insideria.com/2010/08/creating-themes-in-flex-4.html