UIPig——有关UI设计，插画，动画的个人站点

交互设计的利器——Flash Catalyst入门介绍

June 8th, 2009 at 03:20am hanyan

交互设计的利器——Flash Catalyst入门介绍

Adobe Flash Catalyst是一款专业的交互设计工具，可以在不编写任何代码的情况下快速创建用户界面。它的出现为开发人员和设计人员建立起了沟通的桥梁，程序开发人员可以导入设计师在Photoshop、Illustrator和 Fireworks中设计的用户界面，并将它们转化成UI组件而不改变它们原先的“皮肤”、外观和整体风格。设计师仍然用Adobe的各种产品来完成自己的大部分工作，但是能通过Catalyst来定义UI组件，这就像开发人员通过编程来完成这一工作一样。

2009年6月1日，Adobe公司给大家送来了儿童节的礼物，发布了Flash Catalyst Beta，大家可以到其官方网站免费下载试用。Flash Catalys的安装过程中一些交互设计不是很好，它首先得让用户解压安装文件到一个目录下，可是用户根本不需要从这些解压文件中选择 “setup”进行安装，安装程序自动运行，如此的结果是这些文件占据了几百兆的空间，用户却很容易就把它遗忘。建议Flash Catalyst开发团队在设计时，安装文件不要解压到某个目录下，直接储存在缓存中，等安装完成后就释放出来。接下来的安装非常简单，按步骤很容易就完成了。

启动Flash Catalyst，出现如下界面：

Flash Catalyst启动界面

从此界面上我们可以多种操作：1.打开一个项目；2.从AI文件中创建新项目；3.从PSD文件中创建新项目；4.从FXG文件中创建新项目；5.创建新项目；6.信息和介绍。

我们选择创建一个新的项目，弹出对话框，默认项目名称为Untitled_1，ArtBoard高、宽分别为800px和600px，背景颜色为白色，用户可以自定义这些选项。

Flash Catalyst 创建项目

点击OK，进行初始界面，如下图：

初始界面

此界面风格简洁，窗口布局一目了然，分别有菜单栏、页面/舞台区、主窗口显示区(ArtBoard)、交互应用区，右侧则列出了常规应用，分别为工具栏、图层、组件/库/数据、属性区。

页面/舞台区放置的是一个个的场景，类似于网站中的一个个页面，我们可以在此区域进复制一个页或新建一个页面，页面跳转的动画可以在交互应用区进行设置。

Flash Catalyst默认的组件有10个，如下图所示：

组件

组件形状

从右边的组件区选择一个组件后，拖动主窗口显示区，一个组件就创建完成，当这个组件为选中状态时（以Data list为例），会弹出一个浮动窗口，如下图：

编辑

从这里我们可以对Data List进行编辑，交互设计，同时在属性窗口上也会显示Data List的基本属性，我们可以对这些属性进行修改。

属性

一些操作上的小技巧：

• 按F4在基本布局与主显示窗口（ArtBoard）间切换
• Ctrl + “+”或Ctrl + “_”进行窗口大小的缩放
• 双击各窗口区上方的深灰色区域，此窗口收缩或展开
• Flash Catalyst可以在设计与代码间进行切换，懂代码的朋友可以进行更丰富的操作

代码页面

总结
Flash Catalyst的入门非常简单，基本的功能和操作很快都能掌握，关键还是要在实例中应用，接下来我会制作实例，用实例来讲解，以此固定知识。

PS，Twitter解封了，我又重新燃起了对生活的激情，please follow me on my twitter：http://twitter.com/hanyan

Tags: UCD, ui design, 交互设计, 用户体验, 用户体验&UCD
原文链接：交互设计的利器——Flash Catalyst入门介绍，转载请留下本文链接！

Entry Filed under: UI design, 用户体验&UCD