adobe flash professional cs5 简介(十分钟做一个自己的动画)

Adobe Flash Professional CS5 是一个创作工具，设计人员和开发人员可使用它创建出演示文稿、应用程序以 及支持用户交互的其他内容。Flash 项目可以包含简单的动画、视频内容、复杂的演示文稿、应用程序以及 介于这些对象之间的任何事物。总而言之，使用 Flash Professional 制作出的个体内容就称为应用程序（或 SWF 应用程序） ，尽管它们可能只是基本的动画。您可以加入图片、声音、视频和特殊效果，创建出包含丰 富媒体的应用程序。 SWF 格式十分适合通过 Internet 交付，因为它的文件很小。这是因为它大量使用了矢量图形。与位图图形 相比，矢量图形的内存和存储空间要求都要低得多，因为它们是以数学公式而不是大型数据集的形式展示的。 位图图形较大，是因为图像中的每个像素都需要一个单独的数据进行展示。 创建 FLA 文件并添加图形 要在 Flash Professional CS5 中构建应用程序，您使用绘制工具创建矢量图形并设计元素，然后将音频、视 频和图像等其他媒体元素导入文档中。接下来，定义如何及何时使用各个元素创建脑海中的应用程序。 在 Flash Professional 中创作内容时，您使用称为 FLA 文件的文档。FLA 文件的文件扩展名为 .fla (FLA)。 查看 FLA 文件时，您会发现 Flash CS4 Professional 用户界面（请参阅图 1）分为五个主要部分： 您的图形、视频、按钮等在回放过程中显示在舞台中。 时间轴控制影片中的元素出现在舞台中的时间。您也可以使用时间轴指定图形在舞台中的分层顺序。高层图 形显示在低层图形上方。 “工具”面板包含一组常用工具，可使用它们选择舞台中的对象和绘制矢量图形。 “属性”面板显示有关任何选定对象的可编辑信息。 “库”面板用于存储和组织媒体元素和元件。 图 1.Flash Professional CS5 用户界面分为五个主要部分（单击可放大） ActionScript 代码允许您为文档中的媒体元素添加交互性。例如，您可以添加代码，当用户单击某个按钮时 此代码会使按钮显示一个新图像。您也可以使用 ActionScript 为应用程序添加逻辑。逻辑使您的应用程序能 根据用户操作或其他情况表现出不同的行为。创建 ActionScript 3 或 Adobe AIR 文件时，Flash Professional 使用 ActionScript 3，创建 ActionScript 2 文件时，它使用 ActionScript 1 和 2。 Flash 包含许多令它既强大、又简单易用的功能，如预建的拖放式用户界面组件、内建动画效果（可用于为 时间轴上的元素制作动画）以及可添加到媒体对象的特殊效果。 完成 FLA 文件创作后，您可以使用“文件” “发布”命令 (Shift+F12) 发布它。它将创建一个压缩版的 文件并使用扩展名 .swf (SWF)。随后即可使用 Flash Player 在 Web 浏览器中播放这个 SWF 文件，也可以 作为一个独立应用程序播放。 创建一个简单的 FLA 文件 为了说明创建任何 FLA 文档的基本步骤，本教程将指导您逐步完成一个简单教程。这个简短的教程只是您 在 Flash Professional 中进行创作时用到的工作流程的一个范例。第一步是新建一个文档： 选择“文件”“新建” 。 在“新建文档”对话框中，默认选择文件类型 ActionScript 3.0（请参阅图 2） 。如果未选中 ActionScript 3.0，请现在选中它。单击“确定” 。 图 2.“新建文档”对话框显示 Flash Professional 文件类型 单击屏幕右上角的工作区下拉菜单，选择“基本工作区布局选项” （请参阅图 3） 。此步骤将像教程中的屏幕 快照那样配置 Flash Professional 中的面板布局。 图 3.选择“基本选项”以显示教程所使用的工作区布局 单击用户界面右上角的“属性”选项卡，查看该文件的舞台属性。 在属性检查器中，默认情况下靠工作区右侧垂直放置， “大小”按钮显示当前舞台大小设置为 550 x 400 像 素（请参阅图 4） 。背景色板设置为白色。单击色板并选择其他颜色，即可更改舞台颜色。 图 4.属性检查器显示舞台大小和背景色 提示：Flash 影片中的舞台的背景色可使用 “修改”“文档”命令设置，也可以选择舞台，然后在“属性” 面板中修改“舞台颜色”字段。无需绘制一个包含背景色的矩形。当您发布影片时，Flash Professional 会将 HTML 页的背景色设置为与舞台背景色相同的颜色。 选择“文件”“保存” 。 在硬盘上为文件选择一个位置，将文件命名为 SimpleFlash.fla，然后单击“保存” 。请记住这个位置，因为 在本教程最后您需要找到这个目录。 在舞台上绘制一个圆圈 创建文档后，您就可以在其中添加图稿。 Flash 中的一个常见任务是绘制形状。使用绘制工具时，您创建的是可随时编辑的矢量图形。以下步骤说明 如何创建稍后动画中使用的圆圈。 从“工具”面板中选择“椭圆”工具（请参阅图 5） 。 图 5.“工具”面板中的“椭圆”工具 在属性检查器中单击描边色板，并从“描边拾色器”中选择“无颜色”选项（请参阅图 6） 。 图 6.在“描边拾色器”中选择“无颜色”选项 从“描边拾色器”下方的“填充拾色器”中选择一种颜色。确保填充颜色与舞台颜色形成鲜明对比。在本例 中，我们选择蓝色作为填充色，红色作为舞台颜色。 当“椭圆”工具仍处于选中状态时，按住 Shift 键在舞台上拖动以绘制出一个圆圈（请参阅图 7） 。按住 Shift 键使 “椭圆 ”工具只能绘制出圆圈。 图 7.舞台上绘制出的圆圈 提示：如果绘制圆圈时只看到轮廓而看不到填充色，请首先在属性检查器的“椭圆”工具属性中检查描边和 填充选项是否已正确设置。如果属性正确，请检查以确保时间轴的层区域中未选中“显示轮廓”选项。请注 意层名称右侧的三个图标；眼球图标、锁图标和轮廓图标。确保轮廓图标为实色填充而不仅仅是轮廓。单击 图标可切换可视状态。 创建元件和添加动画 您可以通过将新图稿转换为元件，将它转变为可重用资源。元件时一种媒体资源，无需重新创建就可以在文 档的任何位置重用。元件可以包含图像、动画和其他类型的内容。 一开始，您最可能使用元件创建补间动画和存储图形内容（正如以下几个步骤中建议的那样） 。随着 Flash Professional 使用量的增加，您会借助多个时间轴使用元件构造应用程序和交互性： 在“工具”页面中单击“选择”工具（请参阅图 8） 。 图 8.在“工具”面板中选中“选择”工具 单击舞台上的圆圈以选中它。圆圈周围将出现一个定界框。 当圆圈仍处于选中状态时，选择“修改”“转换为元件” （或按 F8）即可调出“转换为元件”对话框（请 参阅图 9） 。 提示：您也可以选中图形并将它拖到“库”面板中，将它转换为元件。 图 9.“转换为元件”对话框 单击“确定” 。圆圈周围将出现一个方形定界框。您已经在文档中创建一个名为 symbol 的可重用资源。在 本例中，您创建的是一个影片剪辑元件。 （有关元件的更多信息，请阅读在线 Flash 文档中的使用元件。 ） 如果“库”面板尚未打开，请选择“窗口”“库” 。 “库”面板中将显示新元件的定义。 （舞台上的元件副本 称为元件的实例。 ） 为圆圈制作动画 现在文档中已有图稿，您可以为它制作动画，使它在舞台上移动，从而增加文档的趣味性： 将圆圈拖到舞台区域的左侧（请参阅图 10） 。 图 10.圆圈移到舞台区域左侧 右键单击舞台上的圆圈实例，从菜单中选择“创建补间动画”选项。请注意，时间轴将自动延伸到第 24 帧 并且红色标记（当前帧指示符或播放头）位于第 24 帧（请参阅图 11） 。这表明时间轴可供编辑 1 秒即， 帧频率为 24 fps 的第 24 帧处。 （有关时间轴的更多信息，请阅读在线 Flash 文档中的使用时间轴。 ） 图 11.延伸的时间轴在第 24 帧处可进行编辑 选择舞台上的圆圈，并将它拖到舞台区域右侧。此步骤创建了补间动画。请注意第 24 帧出现的钻石形状的 点（属性关键帧） 。并且动画参考线表明第 1 帧与第 24 帧之间的动画路径（请参阅图 12） 。 图 12.一个 24 帧的动画，显示动画结束时第 24 帧处的圆圈 在时间轴的第 1 帧和第 24 帧之间来回拖动红色的播放头，通过擦洗时间轴预览动画。 将播放头拖到第 10 帧，然后将圆圈移到屏幕上的另一个位置，在动画中间添加方向变化。请注意动画参考 线中的变化以及时间轴第 10 帧的新点（请参阅图 13） 。时间轴上的点是属性关键帧，它们用于标记对象在 屏幕上的变化位置（哪一帧）以及对象更改的属性。 图 13.补间动画显示第 12 帧方向更改 尝试更改动画参考线路径的形状。单击“工具”面板中的“选择”工具，然后单击某个动画参考线部分，拖 动它使线条弯曲（请参阅图 14） 。弯曲动画路径将使动画沿着一条曲线而不是直线运动。 图 14.补间动画显示添加到动画参考线的曲线 选择“控制”“测试影片”以测试 FLA 文件。 关闭“测试影片”窗口。 使用停止动作阻止时间轴循环 您此时可能已发现播放影片时，动画会反复循环。这是因为 Flash Professional 中的时间轴在最后一帧后将 回到第 1 帧，除非您指示影片执行其他操作。如果要添加一个控制时间轴的命令，可将 ActionScript 代码 添加到时间轴上的关键帧（点） 。提示：可使用关键帧将 ActionScript 和资源放在时间轴的特定帧上。只需 查看关键帧点就可以确定内容的位置。 以下步骤通过使用最常见的时间轴命令之一介绍了 ActionScript 代码；停止动作： 为层命名是个好主意，请将层 1 重命名为 animation。双击时间轴层区域中的层名，并键入新名称。 在 animation 层上添加一个名为 actions 的新层。单击“ 时间轴”面板左下角的“新建层”按钮（页面图标） 。在 ActionScript 3 文件中，必须将 ActionScript 代码添加到时间轴。创建一个专门用于保存 ActionScript 代码的 actions 层是一个好方法。您将关键帧添加到 actions 层中，使 ActionScript 与特定帧关联在一起。 将红色播放头移至第 24 帧，单击第 24 帧的 actions 层（应当刚突出显示 actions 层中的最后一帧） 。选 择“插入”“时间轴” “关键帧”(F6)，在选区中插入一个关键帧。您会发现出现一个空的关键帧（因为 点不是纯色，所以可以判定其中没有图形） 。 使用“选择”工具选择新关键帧，打开“动作”面板（“窗口”“动作” ） 。 “动作”面板是用于在 FLA 文 件中直接编写 ActionScript 代码的工具。将光标放在数字 1（第 1 行）旁的文本区域中，键入以下动作： stop(); 注意：此步骤假设您使用“动作”面板的默认模式。如果“动作”面板处于“脚本助手”模式，请取消选中 “动作”面板右上角的魔术棒图标，恢复默认模式。 您会发现包含该动作的关键帧上方出现一个小小的“a”图标。此时，时间轴应当如图 15。选择“动作”面 板，选择关键帧并再次打开“动作”面板可随时返回并编辑代码。 选择“控制”“测试影片”以测试 FLA 文件。您会发现动画不再循环。 图 15.完成后的时间轴显示应用于 actions 层第 24 帧的停止动作 关闭“测试影片”窗口。 保存您的文件。 发布文件 完成 FLA 文件后即可发布它，以便通过浏览器查看它。发布文件时，Flash Professional 会将它压缩为 SWF 文件格式。这是放入网页中的格式。 “发布”命令可以为您自动生成一个包含正确标签的 HTML 文件。 以下说明如何发布 FLA 文件并在浏览器中查看 SWF： 选择“文件”“发布设置” 。 在“发布设置”对话框中，选择“格式”选项卡并确认只选中了“Flash”和“HTML”选项（请参阅图 16） 。 此操作使 Flash 只发布 SWF 文件和 HTML 文件。HTML 文件用于在 Web 浏览器中显示 SWF 文件。 图 16.“格式”选项卡中的“Flash”和“HTML”选项 在“发布设置”对话框中，选择“HTML”选项卡并确认选中“模板”弹出菜单中的“Flash Only”（请参阅 图 17） 。该模板会创建一个简单的 HTML 文件，它在浏览器窗口中显示时只包含您的 SWF 文件。 图 17.从“模板”菜单中选择“Flash Only” 单击“确定” 。 选择“文件”“发布” ，从 Flash 导出 Web 就绪文件。 打开 Web 浏览器，选择 “文件”“打开” 。导航到保存 FLA 文件的文件夹。可以找到文件 SimpleFlash.swf 和 SimpleFlash.html。选择名为 SimpleFlash.html 的文件。 单击“打开” 。浏览器窗口中此时显示您的应用程序。 祝贺您！您已完成您的第一个 FLA 文件。要进一步了解文档发布，请阅读在线 Flash 文档中的发布和导出 部分。 添加一个重放按钮以重新启动动画 您已使用 stop() 动作停止动画，您可能会问自己如何再次启动它。 （图 18 中显示的示例可以做到。 ）您可 以尝试许多选项，其中包括使用按键重新启动、单击舞台或单击按钮。为了实现其中任何一个选项，您需要 在运行时使用 ActionScript 对用户交互作出回应。本部分比前一部分更进一步，但您还是应当尝试一下，了 解其中的来龙去脉。 按照这些步骤操作，为文件添加一个“重放”按钮和 ActionScript： 为按钮新建一个层。单击“层”面板上的“新建层”按钮，并添加一个名为 Button 的层。 打开“组件”面板（“窗口”“组件” ） ，将一个按钮组件从 UI Components 文件夹拖到舞台上。将按钮放