Catalyst

Adobe Flash Catalyst简介Adobe® Flash® Catalyst™ 是一个专业的交互设计工具，可以让你在不写任何代码的情况下迅速把你的设计转化成带交互的原型。

可以直接把用Photoshop或者Illustrator完成的作品导入Catalyst,然后转换成按钮、滚动条等交互组件，再添加交互转场动画，最终产生一个能交互的SWF。

但是在使用Photoshop等工具的时候，要考虑到你的目标不是生成一个静态的界面图片，而是要能在Catalyst里方便地转化。

另外由于不用写代码，Catalyst能产生的交互相对比较简单，如果我们想添加更复杂的交互或者一些无法实现的逻辑，就需要把你的未完成作品保存为fxp文件，然后程序员再用Flash Builder导入fxp，再添加代码，继续开发。

开始使用CatalystCatalyst界面介绍：PAGES/STATES面板：显示所有的states的预览，其中蓝色背景的是当前被选中的，默认（初始）state右上角会有一个小圆点标记。

HUD(Heads up diaplay)面板：将界面元素转化成交互控件的工具。

Tools面板：提供选中以及一些简单的绘图工具。

Layer面板：显示图层信息。

如果是从Photoshop中导入的文件，这里显示的图层状况会和Photoshop中一致，并且可以编辑。

Interactions面板：添加交互动作。

Properties面板：配置组件的坐标尺寸以及滤镜等。

TIMELINES面板：配置转场效果。

把我们要完成的交互原型看成一个小的程序，一般情况下，我们的程序是由一个个的“屏”组成的，在Catalyst里面称之为state，不同的state里面有不同的内容（同一个组件可以同时出现在不同的state里）,当我们点击或者拖动state里面的按钮等组件时，我们会转入另外的state，不同的state相互切换的时候可以添加转场效果。

例1下面用一个简单的例子来说明如何使用Catalyst。

这个例子完成后的效果见“资源”文件夹里的mainmeinu.swf(用flashplayer 10打开)，点击主菜单上的图标进入各个功能的界面，为了简化，具体的功能界面我们用一张图片来代替。

1.在Photoshop中设计界面，注意在布局图层的时候要考虑到Catalyst的使用需求。

导出为mainmenu.psd（见"资源"文件夹）。

2.打开Catalyst，在欢迎界面时选择“From Adobe Photoshop PSD File...”，找到我们刚刚保存的psd文件，随即会弹出“Import Options”,不作修改，点击OK。

导入完毕后，我们就可以在右上方的Layer面板看到图层结构了，跟在Photoshop中是一样的。

另外，在PAGES/STATES面板中，已经有一个名称为"page1"的默认state生成了。

3.在Tools面板中点击选择工具，选中sms图标，点击悬浮的HUD面板中的“Convert Artwork to Component”,在下拉菜单中选择Button，将其转化为按钮组件，如下图：用同样的方法把另外8个图标转化成按钮。

如果想让你的按钮在鼠标经过或者按下的时候呈现不同的效果，可以双击这个按钮，进入编辑状态，你可以看到有4个state，根据你的需要进行编辑，在这里我们不做调整了。

如下图：4. 因为我们的程序需要有1个主菜单屏和另外9个具体功能的屏，所以我们一共需要10个state，点击PAGES/STATES面板的Duplicate State九次，复制出另外9个相同的state.如下图：我们看到上图中Page1（可以双击state的名称进行重命名）的右上角有一个小圆点，这表示这个state是这个程序的最初始的屏，即默认state。

也可以将别的state设置为默认state，只要右击一个state，选择“Set as Default State“，就可以了。

5. 选中默认state（即Page1），我们想把它作为主菜单的屏，因为主菜单中只有按钮和桌面背景图片，所以我们应该将其他的图层隐藏起来。

可以在Layer面板中点击小眼睛图标来隐藏/显示一个图层，如下图，我们将所有的apps图层隐藏：6. 我们再把Page2作为sms功能的屏，同样，隐藏所有不需要在这个屏里出现的图层，如下图：用相同的方法去配置另外的8个state。

7. 完成上述工作后，我们重新选择Page1，并点击sms这个按钮，来配置点击它以后的交互动作。

在右侧的INTERACTIONS面板点击”Add Interaction“在弹出框中配置如下：配置完后点击ok完成。

我们很容易看出来每个选项的含义，上面的配置表示当我们点击sms这个按钮时，就进入Page2这个state。

最后的”When in Any State“是执行条件。

8. Sms按钮在Page1中，点击它后进入Page2，这就是从一个state转到了另一个state,我们可以添加state转场的动态效果。

在TIMELINES面板左侧点击，右侧呈现出的是配置界面，非常直观，我们可以拖动滑块来调节各个效果的起始点和持续时长，下方的滑动条可以调节总的转场时间。

配置好后如下图：9.上面我们完成了sms这个按钮的点击动作和Page1，Page2间的转场，同样的方法我们可以完成其他的类似的内容。

10.完成所有的这些后，我们就可以按CTRL+ENTER在浏览器里面测试程序了，测试的时候很杯具地发现，点击按钮进入一个app屏以后无法返回主菜单了，这是因为疏忽，我们在用Photoshop设计的时候并没有考虑到返回。

那现在我们需要重新在Photoshop添加返回按钮的图片然后再在Catelyst里面重头再来吗?当然不需要，可以额外导入一个单独的返回按钮，或者干脆用画图工具画一个简单的。

11.选中Page2, 选择File-Import-Image导入一个图片文件作为返回按钮，导入后调整位置并使用HUD面板将其转化成按钮组件，如下图：在Interaction面板配置如下：表示点击这个按钮后就返回Page1主菜单中。

简单起见，返回的动作我们就不添加转场动画了。

12.当前这个按钮只是处在Page2中，但是Page3-Page10中我们都需要这样的一个相同的按钮。

右击这个按钮，选择Share to State-Page3，这样，Page3中就会出现一个相同的按钮。

同样的方法将其分享到Page4-Page10.13.到这里基本上这个程序就算是完成了，可以按CTRL+ENTER在浏览器里面测试，也可以选择File-Publish to SWF发布为swf文件，也可以保存为Catalyst的工程文件fxp，fxp文件可以后续在Flex工具中导入进行进一步的开发。

关于转场：State间的转场效果实际上就是state里各个元素的变化效果，如尺寸缩放，旋转角度，位移，透明度的变化等等。

上面例一中已经说过，Catalyst会根据state间元素的异同来提供对应的效果，我们可以移动滑块调节时间。

打开Catalyst,在欢迎界面导入mainmenu.psd(见“资源”文件夹)，在Layers面板删除掉apps图层和background图层，并且icons图层只保留上面的5个图标，如下：点击Duplication State复制一个state, 并选中刚刚复制出来的这个Page2（以下操作都是在Page2中进行的）。

1.删除掉sms图标：点击选中后直接按DELETE。

2.旋转ebook图标：选中ebook图标，再点击旋转工具（Tools面板的）拖动图标进行旋转，或者在Properties面板点击Rotation选项自己输入角度值。

3.改变clock图标的透明度：点击选择工具，选中这个图标，再在Properties面板Opacity 选项输入透明度的值。

4.放大calendar图标并位移：可以直接用鼠标拖动操作或者在Properties面板直接配置数值。

5.Calculator图标保持不变。

完成后效果如下：点击TIMELINES里的，可以看到右侧如下：sms图标因为在Page2中被删除掉了，所以提供的转场效果是Fade Out,ebook图标被旋转了，所以效果是Rotate，calendar因为我们进行了2种类型的变化，所以有2个转场效果Resize和Move，Calculator因为没有变化所以不能应用任何转场效果。

接下来就是拖动滑块调节时间了。

如果你想添加它没有提供的转场，可以在TIMELINES面板里面选中元素，然后点击下面的“Add Action”添加。

可以在Properties面板为转场设置参数或者添加弹性等效果。

为了测试效果，我们可以在Page1中把Calculator图标转化成按钮组件，再添加动作让其被点击后转入Page2。

组件：Catalyst测试版目前提供了下图的这些组件：可以把它们直接由Wireframe Components面板拖到工作区使用，但由于这些直接拖出来的组件外观比较简陋，更多的时候，我们采用把其他软件里面制作好的比较好看的Artwork转化为组件的办法。

Button（按钮组件）:按钮一般包括一个标签图层和一个背景图片图层，在Photoshop中设计你的按钮，然后导入到Catalyst中（见“资源”文件夹中的button.psd），按Shift键同时选中lable和background，在HUD面板中将这两个元素转化为一个Button组件，完成后双击这个组件，进入进一步编辑状态，如下图：这个按钮组件分为4个子的state, 分别对应着按钮不同的状态。

选择Up，再选中lable图层，在HUD面板中点击“Convert Artwork to Button Part”将其转化成Button组件的子组件Lable, 如下图：双击工作区的空白区域（或者点击工作区左上角的中的button）返回主场景, 在Properties面板的Common区中Lable输入框中输入按钮上要显示的文本如果我们想让这个按钮在鼠标经过时呈现模糊的效果（手机中的按钮似乎没有“鼠标经过”这个状态），双击按钮重新进入编辑状态，选择Over这个state, 然后按shift同时选中标签和背景（或者只选中一个，根据你的需要），在右侧的Properties面板的Filters区中添加一个Blur滤镜。

现在基本上完成了这个按钮，当然还有更多的选项供你调整，比如改变标签的字体等。

最终效果见button.swf(资源文件夹里)Vertical Scrollbar（纵向滚动条组件）:滚动条包含4个元素：背景、滑块以及上下按钮。