Flash学习(一)
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)分为五个主要部分:
- 您的图形、视频、按钮等在回放过程中显示在舞台中。
- 时间轴控制影片中的元素出现在舞台中的时间。您也可以使用时间轴指定图形在舞台中的分层顺序。高层图形显示在低层图形上方。
- “工具”面板包含一组常用工具,可使用它们选择舞台中的对象和绘制矢量图形。
- “属性”面板显示有关任何选定对象的可编辑信息。
- “库”面板用于存储和组织媒体元素和元件。
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,请现在选中它。单击“确定”。
![“新建文档”对话框显示 Flash Professional 文件类型 “新建文档”对话框显示 Flash Professional 文件类型](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_0.img.jpg/1291171978734.jpg)
- 单击屏幕右上角的工作区下拉菜单,选择“基本工作区布局选项”(请参阅图 3)。此步骤将像教程中的屏幕快照那样配置 Flash Professional 中的面板布局。
![选择“基本选项”以显示教程所使用的工作区布局 选择“基本选项”以显示教程所使用的工作区布局](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_1.img.jpg/1291172030099.jpg)
- 单击用户界面右上角的“属性”选项卡,查看该文件的舞台属性。
- 在属性检查器中,默认情况下靠工作区右侧垂直放置,“大小”按钮显示当前舞台大小设置为 550 x 400 像素(请参阅图 4)。背景色板设置为白色。单击色板并选择其他颜色,即可更改舞台颜色。
![属性检查器显示舞台大小和背景色 属性检查器显示舞台大小和背景色](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_2.img.jpg/1291172561417.jpg)
提示:Flash 影片中的舞台的背景色可使用“修改”>“文档”命令设置,也可以选择舞台,然后在“属性”面板中修改“舞台颜色”字段。无需绘制一个包含背景色的矩形。当您发布影片时,Flash Professional 会将 HTML 页的背景色设置为与舞台背景色相同的颜色。
- 选择“文件”>“保存”。
- 在硬盘上为文件选择一个位置,将文件命名为 SimpleFlash.fla,然后单击“保存”。请记住这个位置,因为在本教程最后您需要找到这个目录。
在舞台上绘制一个圆圈
创建文档后,您就可以在其中添加图稿。
Flash 中的一个常见任务是绘制形状。使用绘制工具时,您创建的是可随时编辑的矢量图形。以下步骤说明如何创建稍后动画中使用的圆圈。
- 从“工具”面板中选择“椭圆”工具(请参阅图 5)。
![“工具”面板中的“椭圆”工具 “工具”面板中的“椭圆”工具](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_3.img.jpg/1291172620331.jpg)
- 在属性检查器中单击描边色板,并从“描边拾色器”中选择“无颜色”选项(请参阅图 6)。
![在“描边拾色器”中选择“无颜色”选项 在“描边拾色器”中选择“无颜色”选项](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_4.adimg.mw.318.jpg/1291172659599.jpg)
- 从“描边拾色器”下方的“填充拾色器”中选择一种颜色。确保填充颜色与舞台颜色形成鲜明对比。在本例中,我们选择蓝色作为填充色,红色作为舞台颜色。
- 当“椭圆”工具仍处于选中状态时,按住 Shift 键在舞台上拖动以绘制出一个圆圈(请参阅图 7)。按住 Shift 键使“椭圆”工具只能绘制出圆圈。
![舞台上绘制出的圆圈 舞台上绘制出的圆圈](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_5.img.jpg/1291172700008.jpg)
提示:如果绘制圆圈时只看到轮廓而看不到填充色,请首先在属性检查器的“椭圆”工具属性中检查描边和填充选项是否已正确设置。如果属性正确,请检查以确保时间轴的层区域中未选中“显示轮廓”选项。请注意层名称右侧的三个图标;眼球图标、锁图标和轮廓图标。确保轮廓图标为实色填充而不仅仅是轮廓。单击图标可切换可视状态。
创建元件和添加动画
您可以通过将新图稿转换为元件,将它转变为可重用资源。元件时一种媒体资源,无需重新创建就可以在文档的任何位置重用。元件可以包含图像、动画和其他类型的内容。
一开始,您最可能使用元件创建补间动画和存储图形内容(正如以下几个步骤中建议的那样)。随着 Flash Professional 使用量的增加,您会借助多个时间轴使用元件构造应用程序和交互性:
- 在“工具”页面中单击“选择”工具(请参阅图 8)。
![在“工具”面板中选中“选择”工具 在“工具”面板中选中“选择”工具](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_6.adimg.mw.100.jpg/1291172778237.jpg)
- 单击舞台上的圆圈以选中它。圆圈周围将出现一个定界框。
- 当圆圈仍处于选中状态时,选择“修改”>“转换为元件”(或按 F8)即可调出“转换为元件”对话框(请参阅图 9)。
提示:您也可以选中图形并将它拖到“库”面板中,将它转换为元件。
![“转换为元件”对话框 “转换为元件”对话框](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_7.adimg.mw.430.jpg/1291172846214.jpg)
- 单击“确定”。圆圈周围将出现一个方形定界框。您已经在文档中创建一个名为 symbol 的可重用资源。在本例中,您创建的是一个影片剪辑元件。(有关元件的更多信息,请阅读在线 Flash 文档中的使用元件。)
如果“库”面板尚未打开,请选择“窗口”>“库”。“库”面板中将显示新元件的定义。(舞台上的元件副本称为元件的实例。)
为圆圈制作动画
现在文档中已有图稿,您可以为它制作动画,使它在舞台上移动,从而增加文档的趣味性:
- 将圆圈拖到舞台区域的左侧(请参阅图 10)。
![圆圈移到舞台区域左侧 圆圈移到舞台区域左侧](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_8.adimg.mw.600.jpg/1291172908901.jpg)
- 右键单击舞台上的圆圈实例,从菜单中选择“创建补间动画”选项。请注意,时间轴将自动延伸到第 24 帧并且红色标记(当前帧指示符或播放头)位于第 24 帧(请参阅图 11)。这表明时间轴可供编辑 1 秒-即,帧频率为 24 fps 的第 24 帧处。(有关时间轴的更多信息,请阅读在线 Flash 文档中的使用时间轴。)
![延伸的时间轴在第 24 帧处可进行编辑 延伸的时间轴在第 24 帧处可进行编辑](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_9.adimg.mw.432.jpg/1291172958802.jpg)
- 选择舞台上的圆圈,并将它拖到舞台区域右侧。此步骤创建了补间动画。请注意第 24 帧出现的钻石形状的点(属性关键帧)。并且动画参考线表明第 1 帧与第 24 帧之间的动画路径(请参阅图 12)。
![一个 24 帧的动画,显示动画结束时第 24 帧处的圆圈 一个 24 帧的动画,显示动画结束时第 24 帧处的圆圈](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_10.adimg.mw.600.jpg/1291172999763.jpg)
- 在时间轴的第 1 帧和第 24 帧之间来回拖动红色的播放头,通过擦洗时间轴预览动画。
- 将播放头拖到第 10 帧,然后将圆圈移到屏幕上的另一个位置,在动画中间添加方向变化。请注意动画参考线中的变化以及时间轴第 10 帧的新点(请参阅图 13)。时间轴上的点是属性关键帧,它们用于标记对象在屏幕上的变化位置(哪一帧)以及对象更改的属性。
![补间动画显示第 12 帧方向更改 补间动画显示第 12 帧方向更改](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_11.adimg.mw.600.jpg/1291173054973.jpg)
- 尝试更改动画参考线路径的形状。单击“工具”面板中的“选择”工具,然后单击某个动画参考线部分,拖动它使线条弯曲(请参阅图 14)。弯曲动画路径将使动画沿着一条曲线而不是直线运动。
![补间动画显示添加到动画参考线的曲线 补间动画显示添加到动画参考线的曲线](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_12.adimg.mw.600.jpg/1291173103404.jpg)
- 选择“控制”>“测试影片”以测试 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 文件。您会发现动画不再循环。
![完成后的时间轴显示应用于 actions 层第 24 帧的停止动作 完成后的时间轴显示应用于 actions 层第 24 帧的停止动作](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_13.adimg.mw.477.jpg/1291173221723.jpg)
- 关闭“测试影片”窗口。
- 保存您的文件。
发布文件
完成 FLA 文件后即可发布它,以便通过浏览器查看它。发布文件时,Flash Professional 会将它压缩为 SWF 文件格式。这是放入网页中的格式。“发布”命令可以为您自动生成一个包含正确标签的 HTML 文件。
以下说明如何发布 FLA 文件并在浏览器中查看 SWF:
- 选择“文件”>“发布设置”。
- 在“发布设置”对话框中,选择“格式”选项卡并确认只选中了“Flash”和“HTML”选项(请参阅图 16)。此操作使 Flash 只发布 SWF 文件和 HTML 文件。HTML 文件用于在 Web 浏览器中显示 SWF 文件。
![“格式”选项卡中的“Flash”和“HTML”选项 “格式”选项卡中的“Flash”和“HTML”选项](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_14.adimg.mw.425.jpg/1291173278265.jpg)
- 在“发布设置”对话框中,选择“HTML”选项卡并确认选中“模板”弹出菜单中的“Flash Only”(请参阅图 17)。该模板会创建一个简单的 HTML 文件,它在浏览器窗口中显示时只包含您的 SWF 文件。
![从“模板”菜单中选择“Flash Only” 从“模板”菜单中选择“Flash Only”](http://www.adobe.com/content/dotcom/cn/devnet/flash/articles/flash_cs5_createfla/_jcr_content/articlecontentAdobe/image_15.adimg.mw.425.jpg/1291173341321.jpg)
- 单击“确定”。
- 选择“文件”>“发布”,从 Flash 导出 Web 就绪文件。
- 打开 Web 浏览器,选择“文件”>“打开”。导航到保存 FLA 文件的文件夹。可以找到文件 SimpleFlash.swf 和 SimpleFlash.html。选择名为 SimpleFlash.html 的文件。
- 单击“打开”。浏览器窗口中此时显示您的应用程序(请参阅图 18)。
图 18.发布文件后,浏览器中将显示一个 SimpleFlash.swf 动画示例(单击按钮可重放)
祝贺您!您已完成您的第一个 FLA 文件。要进一步了解文档发布,请阅读在线 Flash 文档中的发布和导出部分。
添加一个重放按钮以重新启动动画
您已使用 stop()
动作停止动画,您可能会问自己如何再次启动它。(图 18 中显示的示例可以做到。)您可以尝试许多选项,其中包括使用按键重新启动、单击舞台或单击按钮。为了实现其中任何一个选项,您需要在运行时使用 ActionScript 对用户交互作出回应。本部分比前一部分更进一步,但您还是应当尝试一下,了解其中的来龙去脉。
按照这些步骤操作,为文件添加一个“重放”按钮和 ActionScript:
- 为按钮新建一个层。单击“层”面板上的“新建层”按钮,并添加一个名为 Button 的层。
- 打开“组件”面板(“窗口”>“组件”),将一个按钮组件从 UI Components 文件夹拖到舞台上。将按钮放在舞台区域的中下部或任何期望位置。
- 当按钮组件依然处于选中状态时,在“属性”面板顶部的“<Instance Name>”字段中键入名称,将按钮实例命名为 replay_btn。这是一个重要步骤。通过命名按钮实例,您之后即可使用 ActionScript 按名称操作它。
- 在“属性”面板的“组件参数”区域的“标签”字段中输入文本 Replay。
- 单击 actions 层的第 1 帧的关键帧,然后返回“动作”面板。将以下代码复制并粘贴到面板中:
import flash.events.MouseEvent; function onClick(event:MouseEvent):void { gotoAndPlay(1); } replay_btn.addEventListener(MouseEvent.CLICK, onClick);
- 您会发现新代码包含一个函数段和
addEventListener
方法,此方法将函数注册为按钮的“单击”事件的“事件监听器”。这是 ActionScript 3 中用于回应 Flash Player 中的对象的计时提示的标准格式。在本例中,事件处理函数指示 Flash Player 返回第 1 帧并再次开始播放时间轴。(每当创建交互式按钮时,您将重复创建事件处理函数并将它指定到某个按钮实例的过程。)提示:您可以将“片段”面板用作为按钮添加事件的快捷方式。
- 选择“控制”>“测试影片”以测试 FLA 文件。单击“重放”按钮重新启动动画。
- 关闭“测试影片”窗口,然后保存 FLA 文件。