Flash_Catalyst_入门指南

《Flash_Catalyst_入门指南》由会员分享，可在线阅读，更多相关《Flash_Catalyst_入门指南（9页珍藏版）》请在装配图网上搜索。

1、Adobe Flash Catalyst 简介 Adobe Flash Catalyst 是一个专业的交互设计工具，可以让你在不写任何代码的情况下迅速把你的设计转化成带交互的原型。 可以直接把用Photoshop或者Illustrator完成的作品导入Catalyst,然后转换成按钮、滚动条等交互组件，再添加交互转场动画，最终产生一个能交互的SWF。但是在使用Photoshop等工具的时候，要考虑到你的目标不是生成一个静态的界面图片，而是要能在Catalyst里方便地转化。 另外由于不用写代码，Catalyst能产生的交互相对比较简单，如果我们想添加更复杂的交互或者一些无法实现的逻辑，就需要把

2、你的未完成作品保存为fxp文件，然后程序员再用Flash Builder导入fxp，再添加代码，继续开发。Flash Catalyst入门指南fromxxdjanexu本指南中我们将按步骤建立一个模拟登山运动服务平台的微型网络。在使用Flash Catalyst MAX Release时所需要的操作都将在此指南中得到说明展示。要开始这个程序，电脑必须安装Flash Catalyst,Photoshop CS4，并需要点击此处（PSD file here）下载PSD文件。作为screencast，此教程也可有一些小的变动（感谢screencast之父，李布莱姆洛）。导入图片可以先浏览PSD文件。

3、为优化Flash Catalyst操作程序，一些无需使用的图层已被合并。注意图层与文件夹结构。接着打开Flash Catalyst,在“从设计文档中建立新项目”栏中选择“从Adobe Photoshop PSD文档-”，并选择将要下载的文档：Expendition_Simple.psd.在此导入界面上有一系列的选项。目前可以将其保留为定值，但Flash Catalyst提供个性化设计制作功能。其中所有的图层都可编辑，并允许导入隐藏图层。而且在左下角有一个高级设置目录，可以通过它逐层指定操作导入文档，编辑或者使其平面化。Flash Catalyst界面介绍一旦导入库加载完毕，导入对象将得到显示，

4、与在Photoshop中的显示别无差别。图层都被罗列在左边的图层面板中，在页面底部有一个“时间轴”，而且在“页面状态”面板中单独呈现“页面一”的状态。此时界面会给出提示：“自动效果不可用”。Flash Catalyst会根据操作者处理对象和内容的方式自动转换状态。如果一次处理很多图层或对象，会使操作速度变慢，因而操作者往往会将其默认关闭。Flash Catalyst文档相当简单易操作，只需要在“时间轴”下拉栏中选择“自动转换效果”，就可以实现状态间的自动转换功能。现在一切就绪。首先双击“时间轴”，使其最小化，移出操作界面。接着需要创建一个新状态。在页面上部的“页面状态”面板中，点击“复制状态”

5、，便会使页面一中所有的信息复制到页面二中去。在此过程中，界面会产生一些变化。首先“时间轴”会弹回，为页面一与页面二间的转换腾出空间。在图层面板中，所有图层旁边有两个图框，传统面板中只有一个图框。有色图框是分辨哪个图层属于哪个页面或是状态的视觉线索。注意建立的两个页面的边框颜色与图层面板框的颜色一致。接着将页面一重命名为“Main”，而页面二命名为“Most_Popular”(在页面名中不允许存在空格)。保证“Most_Popular”被选择，然后点击图层面板中Popular Detail旁边的视窗框，而Popular Detail可以隐藏或者显示文件夹中的所有内容。此过程中，注意时间轴为我们创

6、建了一整套转换，因为Flash Catalyst检测到“Main”和“Most_Popular”之间的差别是我们使那些图层可见。现在我们要做一些自定义制作，所以双击标签隐藏时间轴面板，然后点击Popular Detail文件夹旁边的箭头以显示其内容。创建自定义通用组件首先我们要在Mont Blanc目录项中创建一个自定义组件。我们有一个拥有悬浮状态和正常状态的文件夹。点击Mont Blanc Hover旁边的箭头，并选择所有的子层。点击Control+G（或者Option+G）键组合它们。点击这个组合旁边的箭头之后，所有的图层仍然存在，这只是让它们更容易操作。也可以双击组合文本并将其重命名。可

7、以称其为“Mont Blanc Hover”。现在可以创建自定义组件了。选择刚刚创建的组合以及Mont Blanc文件夹中的图层。它该如下图所示。一旦这些被选中，就可以用平视显示器创建一个自定义组件。平视显示器是一个黑色浮动框，它会根据操作者的选择而变化，所以在处理对象时就会得到正确的文本背景。在这种情况下，我们有两个选择对象，并（正确地）假定来处理属性。使用平视显示器可以点击“将图片转换为组件”，并在列表底部选择“自定义通用组件”。此时Mont Blanc Hover文件夹应该显示一个图层“自定义组件一”。双击文本，并将其名改为“Mont Blanc”。为确实编辑组件，需要在主要设计区域内双

8、击组件。此过程中，设计视频产生变化，因而我们只需要处理组件中的内容。此时其他部分无法运作，在页面状态面板中只有一个状态栏，而图层面板发生了细微的变化现在在自定义组件一的标题下，有两个图层（Mont Blanc Hover组合和原先的Mont Blanc图片）。以前处理一个固有的元件，比如按钮的时候，在状态面板里会有向上、覆盖、向下和无效等状态，因为这些是按钮的固有状态。但是在自定义通用组件中可以创建自己的状态。现在让我们使用复制状态按钮复制状态一，将其重命名为“正常”，并将状态二命名为“悬浮”。用时间轴切换现在我们需要对状态进行操作。在“正常”状态中，我们打算显示一些常规图像，所以务必选中“正

9、常”状态，并点击Mont Blanc悬浮图层旁边的视窗。然后双击时间轴标签，就会看到Flash Catalyst自动创建出隐退效果。如果点击播放按钮，就会看到转换效果。但目前还不是非常好的或是有趣的程序，现在让我们更深入一些吧。我们想要达到的效果是放大常规图像，并在它变大的时候渐渐现出更多细节性的信息。选择“悬浮”状态，然后使用图层面板选择常规Mont Blanc图像（因为它隐藏在更大的悬浮图像后面，所以主要的设计区域是不能使用的。）现在锁定左下角的蓝色矩形，并将其拖长到与Mont Blanc悬浮对象相同的尺寸。正确操作后，Flash Catalyst会自动产生移动和调整大小的功能，与先前在时

10、间轴面板中的隐退功能共同起作用。然后播放一下看看效果。可以在“正常”与“悬浮”之间的进行切换以检查两者间的转换。而正如你所见，这些并不完美。但幸运的事，我们可以在时间轴中进行处理以改变效果。我现在在移动和调整效果结束前，将隐退功能框缩短，并将其移至右边。但如果你想，可以改变它，只要确保“正常悬浮”与“悬浮正常”两个状态都得到改变。恭喜！你已经在Flash Catalyst中创建了你的第一个自定义Flex组件。现在点击在设计区域之上黑色条框内的Expidition_Simple文本，以回到主要应用区间。创建互动我们已经创建了自定义组件，现在需要为它创建互动，因而当使用者滚动它的时候，就能转到悬浮

11、状态。此时你的自定义组件理应已被选中，如果没有的话，在主要设计区域选择它，或是在图层面板里点击“Mont Blanc”。现在选择平视显示器中的互动标签，你将会看到一个编辑组件的按钮，但因为这个步骤已完成，所以我们将要做的是创建一个自定义互动，可以通过点击加号完成它。我们将为“鼠标位于按钮上”创建一个新的自定义互动。创建后列表中会增加一个“鼠标位于按钮上”互动项。现在可以点击“内部活动”目录，并选择“播放切换状态”。这能调出状态框，因而能更方便的选择需要转换的状态。在状态框目录中，有两个主要应用状态：“Main”和“Most_Popular”,另外还有刚刚创建的组件所处的状态。接着选择Mont

12、Blanc下的悬浮状态。我们也需要创建“鼠标滑出按钮”的效果，所以只需要复制以上步骤，但是状态必须转换为“正常”状态，而不是“悬浮”状态。您可能会注意在互动目录下可以处理动作顺序。我暂时不会涉及这个问题，但如果你想环绕组件外周不断变化的对象，就可以使用动作序列功能。这会使应用程序的其他部分更灵活地对互动事件产生反映。页面间操作既然我们已经创建了自定义组件，那么现在可以开始创建两个页面间的转换程序了。切换到“Main”状态，会发现现在创建自定义组件是可见的，那么继续使用图层面板将剩下的通俗图像处理为可视。使瑞尼尔和沃丁顿图像可视，但通俗图像的介绍信息一暂时保持为不可见，待会再做处理。我们想要达到

13、的效果是那三个图框从页面的右边跳入。在主要设计区域内或图层面板中选中这三个图框，然后只需用箭头或鼠标将它们移出屏幕即可。正如自定义组件一样，Flash Catalyst能自动为我们生成切换，可以用播放按钮进行测试。我对有趣的切换很感兴趣，决定对它们做一点改变，使得顶端的瑞尼尔能第一个跳入，其他的紧随其后。如果你想就可以创建它，但我们的时间轴如下图所示（切记要改变两个状态的切换）：绘图工具的操作我们已经创建了页面和切换，现在使用者需要一条通往页面和切换功能的途径。在右上方有一些文本链接，那么来将“Most_Popular”文本链接转变成一个按钮吧。当带有光标的文本被导入进Flash Cataly

14、st时，产生了文本对象和光标对象，所以先使用图层面板选中它们，然后再用平视显示器将两者转换成按钮组件。操作时显示器工作，使得我们可以自动编辑任何状态。在显示器中点击“覆盖”状态，就可以开始编辑该按钮了。现在我们可以使用内置的绘图工具来创建一个图框，因而当我们停留在文本上时，该图框就会出现在文本旁边。选择矩形工具，在文本旁边画出一个矩形。此时平视显示器会弹出，您可以改变一些属性。将填充色改为黑色，光标颜色改为“d0d1d9”，并将不透明度设为70。但那些看起来似乎不太对劲。正如使用所有的Adobe设计工具可以操纵图层面板改变深度一样，使用Flash Catalyst中的图层面板，可以将文本下的“

15、Rect1”拖到底部。我们也需要改变“下状态”以包括矩形框，或许把它变得更透明一些。使用页面状态目录选择“下状态”。你可能已经注意到“Rect1”在图层面板中淡出，而唯一带色的是蓝色框，在下状态中只会用到它。跟自定义组件操作一样，我们也可以通过点击视窗栏将它添加到状态中去。务必保证矩形被选中，然后将不透明度改为60，并增加光标宽度为2。现在回到主要应用程序，使用平视显示器创建一个点击互动，操作与先前创建Most_Popular按钮的操作一样。我们只需要创建一个点击互动和转换到Most_Popular状态的切换。组件和皮肤操作只要再设置让人们搜索的功能后，就可以完成应用了。在界面中有一个矩形框，

16、框中有“搜索旅游”几个字，可以用来创建搜索框。使用图层面板，选择一下三个图层：搜索旅游图层，图层21，图层21的外光标图层；然后使用平视显示器将图像转换成文本输入组件。这时平视显示器会产生一些变化，编辑组件按钮不见了。接着点击平视显示器。然后进入先前经常看到的组件编辑模式。使用图层面板选中“搜索旅游”图层，这个图层是真正的文本图层。当点击它时，平视显示器又一次发生变化，并出现“指定部件”对话框，该对话框可以将图像转化成文本输入部件。在Flex4中出现了皮肤组件这个概念。例如，在可卷起的横条部件中可以看到不同的皮肤组件：记录按钮，向上按钮和向下按钮。当处理复杂一些的组件时，Flash Catal

17、yst允许指定图像与某个特殊的皮肤部件相联系。文本输入控制有一个皮肤部件和实际文本，而Flash Catalyst能够分析出当你选择了一个矩形图框和文本图框时，文本必须是“文本视窗”部件。如果想突出这个特征的话，务必保证仍然选中“旅游搜索”图层，并使用“将图框转换成文本输入部件”将文本指定为“文本视窗”部件。完成使用文档运行项目目录去看看效果。“最受欢迎”按钮可以互动，停在“蒙特布朗克”图像上可以显示细节信息，并且在输入文字后可以进入搜索框。注意Flash Catalyst准确保存了Photoshop中的字体信息。从这里出发现在你有几个不同的选择。我们一直在处理一个Flex项目。你可以切换到代

18、码视图，看看这些部件和状态是怎样创建起来的。完成之后，可以使用文档目录将效果输出为SWF格式并部署进网页。因为Flash Catalyst项目多，所以需要增加一些逻辑操作与数据。为此，可先以FXP文档形式保存这个项目。该FXP文档只是一个包含了所有操作Flex Builder时需要的信息和代码的zip文档。使用Flex Builder的“Gumbo”可以打开完全一样的项目，并对其做一些改进。注意到了吗？当我们停留在Mont Blanc图像上时，那个小的Goole地图呈现为方形。嗯，使用Flex Builder Gumbo创建互动的话，将会是件有趣的事。我会在以后的教程中讲到。一下文档可供下载：lPhotoshop PSDl最终FXP项目lPSD Zip文档和FXPlMOV格式的screencast