在这篇文章中，让我们来了解一下Flash Catalyst这个产品。

从根本上说，Flash Catalyst是一个专业的交互设计工具，它的前身是Thermo（听到这个名字大家可能会有一些印象，这是Flash Catalyst正式推出之前的开发代号，在之前Adobe的很多非常酷的视频中介绍过如何使用这个工具快速制作同样非常酷的应用）。

概述

这里我们对Flash Catalyst的功能做一个简单的概述。刚才我们也说到，Flash Catalyst是一个全新的专业的交互设计工具，就是说，这是一个非常适用于UI设计人员以及交互设计人员的工具，你可以用它快速完成一个界面原型，或者说是包含交互行为的界面原型。

通常完成交互行为的构建需要编写大量的代码，这也是UI设计人员以及交互设计人员在完成设计工作时非常头疼的事情，而这些工作通常情况下也会移交给开发人员来完成，这中间会有交流的成本在里面，而且增加了开发人员的负担。

而Flash Catalyst则可以让设计人员在不写代码的情况下，创建应用程序的界面以及交互内容。我们可以看到，它提供了完全可视化的编辑界面，让我们构建界面，绑定行为。它能根据你的设计方案快速创建出非常酷的UI界面。

然后你就可以把包含交互的原型移交给Flex开发人员，完成后续的逻辑代码编写工作。Flash Catalyst可以和Flex很好的协同工作，稍后我们会详细介绍。

导入功能是Flash Catalyst中非常重要的功能，虽然Flash Catalyst本身也具备绘图的功能，但实际上你可以使用更专业的绘图工具（比如Photoshop，Illustrator）来绘制界面，然后把这些工具制作的包含图层的素材文件（注意是源文件，比如PSD，AI文件），导入到Flash Catalyst中，完成界面加工以及交互操作。

背景

我们来了解一下Flash Catalyst是在什么样的背景下产生的。在以往的Flex开发中，开发人员和设计人员的协作是一个难题，开发人员没有设计背景，设计人员没有开发背景，这样很难有一个好的工作流来协调两者的工作。

在之前的开发过程中，设计人员使用Illustrator或Photoshop来绘制界面，还需要了解一些Flex皮肤机制和CSS的使用方法，而同样开发人员也需要和设计人员协同完成UI界面的工作。这些中间环节的工作将耗费很多的时间。

而Flash Catalyst则提供了一个全新的工作流程。我们看到，设计人员制作UI界面，并设计用户交互；然后可以将项目原型导出为FXP文件，这是一种可被Flex导入的资源包格式，在稍后我们会介绍；然后这个资源包可以移交给开发人员，来完成后续的编码，以及逻辑的实现。

界面预览

我们可以看到，界面大致可分为6个部分：首先是Pages/States，也就是页面和状态，这个用于让你在Flash Catalyst中创建不同的显示状态； HUD面板，它提供了一种快捷的交互方式，用于完成你在场景中选择的元件或组件的相关联的工作；工具栏，包含了一些常用的绘图工具；图层面板，和其它绘图工具（比如Photoshop和Illustrator）中的图层的功能基本是一样的；属性面板，当你选中一个元件或组件，可以在这里更改它的属性；时间轴面板，类似于Flash中的时间轴，它用于完成动画或特效的制作。

HUD面板是使用率非常高的面板，当你在场景中选中某个元件或组件，HUD面板就会显示相关的操作，比如“转换为Flex组件”，“自定义交互行为”等等。

这里显示的是代码视图，你可以在编辑界面的时候，实时切换到代码视图，查看生成的MXML代码，注意这些代码是Flex直接可用的。

主要概念

这里我们来了解一下Flash Catalyst中几个主要的概念。

首先是导入文件，刚才我们也说到，你可以使用Photoshop和Illustrator来绘制用户界面，并导入到Flash Catalyst中，原有的图层结构将被保留；

然后是状态，在Flash Catalyst中，不同显示界面之间的切换可以通过视图状态的改变来完成，比如第一个状态是表单，第二个状态是列表。你可以将这些状态绑定到一些交互事件（比如按钮点击事件），实现各个状态之间的切换；

这个是特效，用来实现状态切换之间的动画显示，动画可以避免状态之间的生硬过度，增强用户体验，可用的特效包括：透明度，移动，缩放，旋转，3D旋转等等；

最后一个是发布，你可以将Flash Catalyst的项目发布为最终的SWF文件，用于演示和部署，当然更多的情况是我们使用Flex完成后续的开发工作。

Flash Catalyst 与 Flash Builder 4的协作

刚才我们也谈到，Flash Catalyst可以和Flash Builder 4（即Flex Builder的最新版本）协同工作。这个工作依赖于FXP文件来完成，你可以把Flash Catalyst生成的FXP文件导入到Flash Builder 4 中，完成后续的编码工作。

这里我们可以看一下FXP文件的结构，通过将FXP文件的扩展名改为ZIP，你可以看到，FXP本质上就是一个资源的集合包，而且基本保持了Flex项目的特征，所以很容易被Flash Builder 4导入。

下载

你可以从下面的地址获得Flash Catalyst

http://labs.adobe.com/technologies/flashcatalyst/

你也可以从下面的地址下载Flash Builder 4

http://labs.adobe.com/technologies/flashbuilder4/

RIAMeeting关于Flash Catalyst的视频讲解

http://www.riameeting.com/node/256