FLASH第一课

第1课 推门而入——制作第一个简单动画
Flash MX 2004是创作性的工具，可以创建简单的动画到复杂的交互式 Web 应用程序。在创作的过程中可以发挥个人的创意与Flash的技术结合做出有声有色的动画作品来。这一课将开始Flash之旅的第一站，制作一个简单的“小球运动”实例，让大家熟悉Flash MX 2004的工作环境，掌握一些常用工具和功能菜单的使用方法，系统的学习应用Flash MX 2004完成基本动画的全过程。
效果预览     背景图片下载
本实例是一个小球跳动的动画效果。紫色的小球在美丽的背景衬托下，自由的跳动。
知识要点：
熟悉Flash的工作环境（第1课附录-----认识Flash MX 2004工作环境） 文档属性的设置方法 图形元件的创建方法 绘图工具的使用方法 渐变填充的设置和调整 创建补间动画的技巧 导入和应用外部的图片 如何测试、保存和导出影片
制作步骤:
１．新建文档设置文档属性
步骤1 新建文档
单击Windows系统的【开始】菜单，执行【开始】|【程序】|【Macromedia】|【Macromedia Flash MX 2004】命令，启动Flash MX 2004，系统现弹出Flash MX 2004的启动界面。单击中间“开始页”【创建新项目】下的【Flash 文档】项目，创建一个新空白文档,如图1-3-2所示。

图1-3-2创建空白新文档
说明：还有一种创建新文件的方法，启动Flash MX 2004,执行【文件】|【新建】命令，在【常规】选项卡上选择【Flash 文档】，打开一个新的空白文档。
步骤2 打开属性检查器
执行【窗口】|【属性】命令（快捷键Ctrl+F3），打开【属性检查器】面板。【属性检查器】面板位于舞台的下方，新建文档以后，用【属性检查器】面板来指定文档的【舞台】大小、【背景颜色】、【帧频】 (fps也就是播放速度)以及文档的【发布设置】等参数，如图1-3-3所示。

图1-3-3【属性检查器】面板
步骤3 设置文档属性
单击【属性检查器中】面板上【大小】右边的“控件按钮”，弹出设置【文档属性】对话框，最上面【尺寸】是用来设定【舞台】大小尺寸的，输入宽度的值：400 px（像素）；高度的值不变：400 px（像素），如图1-3-4所示。

图1-3-4【文档属性】对话框
说明：设置【舞台】的大小尺寸，最小可设定为高和宽均为 18 px （像素）；最大可设定高和宽均为 2880 px （像素）。系统默认的尺寸是 px （像素），可以在【标尺单位】的下拉菜单里面选择其他的单位，如：厘米、毫米等。
单击【背景颜色】右边的“取色按钮”，在弹出的【颜色样本】面板上选取颜色，选取颜色的同时鼠标指针变成【滴管工具】，找到天蓝色样本并拾取，同时可以查看在“十六进制文本框”中显示颜色值为 “#00CCFF”，如图1-3-5所示。

图1-3-5【背景颜色】选择
说明：除了用【滴管工具】直接在颜色样本中拾取颜色外，如果知道颜色的十六进制数值，可以在“十六进制文本框”中直接输入，颜色的十六进制值以“井”开头。
保持【文档属性】的其它参数不变，单击【确定】按钮，完成文档属性的设置，场景效果如图1-3-6所示。

图1-3-6完成属性设置的场景
说明：
【匹配】︱【打印机】：匹配打印机，让底稿的大小与打印机的打印范围相同。
【匹配】︱【内容】：匹配内容，在舞台上将内容四周的空间都设置为对称。
【匹配】︱【默认】：匹配默认，使用默认值。
【帧频】：默认为12 fps。是动画每秒播放的帧数，默认的播放速度是每秒钟播放时间轴上的 12 帧，这是在 Web 上播放动画的最佳帧频。根据特殊需要可以修改。
【设为默认值】：将所有设定保存成默认值，当下次再开启新的影片文档时，影片的舞台大小和背景颜色会自动调整成这次设定的值。
2.创建图形元件
元件是在 Flash 中创建的图形、按钮或影片剪辑，是Flash动画中的基本构成重要元素之一。元件只需创建一次，即可在整个文档或其他文档中重复使用。而且多次使用它不会明显增大动画文件的体积大小。创建的任何元件都会自动成为当前文档的【库】的一部分。可以随时打开【库】面板进行调用，元件的应用使动画制作变得轻松快捷。
步骤1 新建图形元件：
执行【插入】︱【新建元件】命令（快捷键 Ctrl+F8），打开【创建新元件】对话框。在【创建新元件】对话框中，输入元件的【名称】为“小球”，【行为】选择【图形】前面的单选按钮，然后单击【确定】按钮，如图1-3-7所示。

图1-3-7创建小球元件的设置
步骤2 进入元件编辑状态
创建元件完成以后，编辑动画的【舞台】已经从“场景1”切换到“小球”图形元件的编辑状态，在【时间轴】的上方有“场景1”|“小球”的提示，如图1-3-8所示。

图1-3-8小球图形元件的编辑场景
3.绘制图形
步骤1 设置圆形的颜色
选择【工具】面板上的【椭圆工具】，单击【工具】面板下面“颜色”区域的【笔触颜色】，在弹出的【颜色样本】面板上选择【没有颜色】；再单击【填充颜色】，在弹出的【颜色样本】面板上选择蓝色“#0000FF”，如图1-3-9和图1-3-10 所示

图1-3-9设置圆形的笔触颜色图1-3-10设置圆形的填充颜色
说明：在绘制某个形状时，它的颜色有两个部分：外部线条称为【笔触颜色】，它描绘形状的轮廓；形状内部的着色称为【填充颜色】。在绘制图形之前，通常要先设置【笔触颜色】和【填充颜色】。
步骤2 绘制圆形
移动鼠标到【舞台】的中间，按住键盘“Shift”键同时按住鼠标左键拖动，绘制出一个随意大小的圆形，如图1-3-11所示。

图1-3-11绘制出的小球
说明：按住 Shift 键拖动可以将形状限制为正圆形，否则为不规则的椭圆形状。
步骤3 设置圆形的属性
选择【工具】面板上的【选择工具】，然后单击【舞台】上的“圆形”，执行【窗口】|【属性】命令（快捷键Ctrl+F3），打开【属性检查器】面板，在【属性检查器】面板中设置【宽】和【高】都为“66”像素，【X轴】和【Y轴】的坐标都为“-33”，如图1-3-12所示。

图1-3-12设置圆形的属性
4.改变圆形为渐变填充
步骤1 选择渐变色填充类型
保持【舞台】上的“圆形”处于被选中状态，执行【窗口】︱【设计面板】︱【混色器】命令（快捷键Shift+F9）， 打开【混色器】面板。单击【填充样式】后面的下拉按钮，在弹出菜单中选择【放射状】渐变填充，如图1-3-13所示。

图1-3-13选择【填充样式】
说明：【混色器】面板可以创建并编辑纯色和渐变填充，还可以设置无色和位图的填充。渐变填充有两种方式，【线性】渐变填充是从起始点到终点沿直线逐渐变化的渐变方式；【放射状】渐变填充是从起始点到终点按照环形模式向四周逐渐变化。
步骤2 设置渐变填充颜色
单击中间【渐变定义栏】的下面“左边”的【渐变指针】，设置【放射状】渐变填充的起始点颜色，也就是圆心中间部位的颜色。在下面的“颜色空间”单击选择一种浅蓝颜色“#939BFD”，如图1-3-14所示。

图1-3-14调整起始点填充色
然后再单击【渐变定义栏】下面“右边”的【颜色指针】，设置【放射状】渐变填充的终点颜色，也就是圆形周围的颜色。在下面的“颜色空间”单击选择一种深蓝颜色“#36027D”，如图1-3-15所示。

图1-3-15调整终点填充色
步骤3 完成渐变色填充
颜色设置好以后，因为舞台上的“圆形”处于被选中状态，编辑颜色的同时被选中的“圆形”会自动添加编辑的渐变填充颜色，很像一个小球的形状，如图1-3-16所示。

图1-3-16渐变填充的小球
说明：如果没有事先选中绘制的图形，在【混色器】面板上编辑颜色以后，选择【工具】面板上的【颜料桶工具】，鼠标指针变成“颜料桶”形状，移动鼠标到舞台上单击绘制的形状也可以完成填充，这是填充颜色的另外一种方法。
步骤4 调整渐变填充
渐变填充完成以后，“圆形”有了立体感，但是不符合光源的照射规律，我们来调整“圆形”渐变填充的起始位置，使其看起来更接近自然界中的球体。
选择【工具】面板上的【填充变形工具】，移动鼠标到舞台上单击“圆形”，“圆形”的中间和周围出现4个【填充变形控制点】，如图1-3-17所示。

图1-3-17【填充变形工具】选中小球
移动鼠标到“圆形”中间的【填充变形控制点】上，鼠标指针变成“十字方向”，按住鼠标左键向左上方拖动，将“高光区”拖放到“圆形”的左上方，如图1-3-18所示。调整后的效果如图1-3-19所示。

图1-3-18移动填充变形控制点

图1-3-19调整后的效果
5.制作动画
步骤1 打开库面板
执行【窗口】︱【库】命令（快捷建F11）,打开【库】面板。在【库】面板中看见我们刚才创建的“小球”图形元件，如图1-3-20所示。

图1-3-20【库】面板
步骤2 布局第1帧上的小球
单击【时间轴】的上方“场景1”，切换到“场景1”的舞台，选中【库】面板中的“小球”图形元件，按下鼠标左键并拖动它到【舞台】的上边中间位置，如图1-3-21所示。

图1-3-21舞台上的小球位置
说明：按下快捷键Ctrl+L，可以快速打开【库】面板。【库】中保存的对象是创建好的可以重复使用的图形、影片剪辑或按钮。将【库】中的元件拖放到【舞台】上以后，【舞台】上的对象叫做元件的实例。
新建文档的主场景在【时间轴】上只有一个【图层1】和一个【空白关键帧】，“小球”拖放到【舞台】上以后，就直接加到【图层1】的第一帧上，同时第一帧变成【关键帧】。【关键帧】是用来定义动画变化状态的帧，显示为实心圆，如图1-3-22所示。

图1-3-22小球第一帧的图层结构
步骤3 改变图层名称添加关键帧
鼠标双击【图层1】的图层名称处，输入“小球”将【图层1】重新命名为【小球】。单击选中【小球】图层的第20帧，执行【插入】|【时间轴】|【关键帧】命令（快捷键 F6），在第20帧处插入一个【关键帧】，用同样的方法在【小球】图层的40帧插入一个【关键帧】，效果如图1-3-23所示。

图1-3-23插入关键帧的图层结构
说明：改变图层名称是为了图层数量增多时，可以一目了然分清每个图层所放置的内容是什么，因此重新命名时尽量和放置的元件名称接近。另外除了使用【插入】菜单中的命令插入帧，还可以用快捷键实现插入帧的操作。选中某个帧以后，按下F5键可以插入一个【普通帧】；按下F6键可以插入一个【关键帧】；按下F7键可以插入一个【空白关键帧】。
步骤4 调整20帧上小球位置
单击选中【小球】图层的第20帧，选择【工具】面板上的【选择工具】，然后移动鼠标到【舞台】的“小球”图形元件上，按住键盘上的“Shift” 键同时按住鼠标左键拖动“小球”到舞台的正下方，如图1-3-24所示。

图1-3-24调整后的小球位置
说明：按住“Shift”同时拖动舞台上的元件，可以保持水平或垂直移动元件。也可以45度的角度，向四个斜面方向移动。
步骤5 定义动作补间动画
选中【小球】图层的第1帧，打开【属性检查器】面板，在【属性检查器】面板中，单击【补间】后面的下拉按钮，在弹出的菜单中选择【动作】，如图1-3-25所示。

图1-3-25定义动作补间动画
【小球】图层的第1帧到第20帧之间出现一条浅蓝色背景的带黑色箭头的实线。 这样就实现了第1帧到第20帧的【动作】补间动画。用同样的方法，再实现第20帧到40帧之间的动画，完成后的图层结构如图1-3-26所示。

图1-3-26定义补间动画的图层结构
说明：所谓补间动画，是指只要做好起点【关键帧】和终点【关键帧】的图形，Flash就会自动补上中间的动画过程。要构成补间动画，同一个图层上至少有两个不同位置的【关键帧】。
步骤6 在场景中测试动画
拖动【时间轴】上的红色【播放头】到第一帧的位置，按下键盘的“Enter”键，动画开始播放，观察小球的【动作】补间动画效果，看见“小球”以平均的速度从上到下又回到上面。
步骤7 使动画更符合客观规律
我们观察到的“小球”是均速的上下运动，现实生活中受地球吸引力的因素，应该是向落下的速度越来越快，弹起以后到上面速度逐步减慢，下面我们来对补间动画属性进行一些设置，使“小球”的运动更符合客观规律。
选中【小球】图层的第1帧，打开【属性检查器】面板，在【属性检查器】面板中【简易】的参数文本框中输入“-100”，如图1-3-27所示。用同样的方法选中【小球】图层的第20帧，在【属性检查器】面板中【简易】的参数文本框中输入“100”。

图1-3-27设置补间动画的【简易】参数
说明：在定义补间动画时，通过设置一些相关参数可以使动画效果更丰富，比如上面定义的【简易】参数，可以将运动表现为先慢后快和先快后慢的效果。默认状态下，【简易】参数值为“0”，表示平均速度的运动，更改这个参数值，就可以实现加速运动或者减速运动。当值为正数时，运动为减速运动；当值为负数时，运动为加速运动。
步骤8 再次在场景中测试动画
拖动【播放头】到第一帧的位置，再按下键盘的“Enter”键，观察发现“小球”运动效果比较符合客观规律了。
6.给动画添加背景
步骤1 新建图层
单击【时间轴】左边“图层名称”底部的【插入图层】按钮，新建【图层2】，如图1-3-28所示。

图1-3-28插入图层
步骤2 改变图层顺序并重新命名
单击选中新建的【图层2】图层名称处，按住鼠标左键并拖动到【小球】图层的下面，然后双击【图层2】的图层名称处，输入“背景”将【图层2】重新命名为【背景】，如图1-3-29所示。

图1-3-29重新命名图层名称
说明：【时间轴】是控制动画的合成和播放的地方，它可以有不同的图层组成，可以把图层看成是堆叠在一起的多张幻灯胶片一样，每个层都包含一个显示在舞台中的不同图像，一层层地向上叠加。层可以帮助组织文档中的插图，可以在层上绘制和编辑对象，而不会影响其它层上的对象。上面的图层可以遮挡住下面图层的内容，当有很多图层时，可以组合出各种复杂的动画效果。
步骤3 导入背景图片
我们要给“小球运动”加上一个背景图片，使动画更加美观，事先选好一张和场景大小一致的图片。本例中的背景图片参见随书附带的光盘中的第一章的素材文件。
选中【背景】图层的第一帧，执行【文件】|【导入】|【导入到舞台】命令（快捷键Ctrl+R），弹出【导入】对话框，在【导入】对话框中选择要导入的图片文件“背景.jpg”，然后点击【打开】按钮，如图1-3-30所示。

图1-3-30【导入】对话框
步骤4 设置图片在舞台上的位置
单击【打开】按钮以后“背景.jpg”导入到舞台上。默认状态没有摆放到【舞台】的中间，看起来很不美观，如图1-3-31所示。

图1-3-31刚导入的背景图片位置
执行【窗口】|【设计面板】|【对齐】命令（快捷键Ctrl+K），打开【对齐】面板，保持右边【相对于舞台】按钮处于按下状态，分别单击【对齐】下面的“水平中齐”和“垂直中齐”按钮，如图1-3-32所示。

图1-3-32【对齐】面板
说明：“相对于舞台”处于按下的状态的，这样实现的是对于舞台为中心的对齐和分布，如果处于非“相对于舞台”状态下，则是两个以上对象之间的相互对齐和分布。
7.测试和保存动画
步骤1 测试动画
执行【控制】︱【测试影片】命令（快捷键 Ctrl+Enter），弹出（.SWF）测试窗口，可以观看整个动画的播放效果，测试动画效果是否满意。单击 (.SWF）测试窗的关闭按钮即可关闭。如果有不满意的地方可以继续回到场景对动画进行编辑和调试，直到满意为止。测试窗口如图1-3-33所示。

图1-3-33小球运动的测试窗口
说明：前面我们通过在场景中按下“Enter”键,观察了“小球”的动画效果，这是一种常用测试效果的方法，但是如果结构比较复杂，比如主时间轴上有影片剪辑对象，那么这样的测试方法就不能观察到动画的全部效果。必须通过上面的方法测试动画。
步骤2 保存动画
执行【文件】︱【保存】命令（快捷键 Ctrl+S），弹出【另存为】对话框，指定文件保存的路径，输入文件名“小球运动”，保存类型：Flash MX 2004 文档（*.fla）即文件的扩展名为 .fla。最后单击【保存】按钮保存动画，如图1-3-34所示。

图1-3-34【另存为】对话框
说明：在制作动画的过程中，按Ctrl+S键可以快速保存文件，养成经常保存的好习惯，以免突然断电等意外发生文件丢失。
8.导出动画
步骤1 导出动画
执行【文件】︱【导出】︱【导出影片】命令（快捷键 Ctrl+Alt+Shift+S），弹出【导出影片】对话框，指定文件导出的路径和源文件保存在一个目录下，输入文件名“小球运动”，保存类型：Flash 影片（*.swf）即文件的扩展名为 .swf。然后单击【保存】按钮，如图1-3-35所示。

图1-3-35【导出影片】对话框
步骤2 导出设置
单击【保存】按钮以后，弹出【导出Flash Player】设置对话框，如图1-3-36所示。在这个对话框中可以设置导出动画文件的相关参数，本实例不作改动，保持目前默认的参数，单击【确定】按钮，导出动画完成。

图1-3-36【导出Flash Player】对话框
说明：在【导出Flash Player】对话框的最上边有个【版本】下拉菜单，在菜单里面可以选择将要导出的影片版本FlashPlayer1至FlashPlayer7，默认是Flash Player7，即FlashMX2004的播放器。如果别人的电脑没有安装FlashPlayer7的播放器，而是比较低的版本，可以选择导出低版本的播放器，这样在别人的电脑上才能观看到你做的动画影片。但是Flash MX 2004 新增加了一些新的功能，导出低版本的播放器播放就会丢失这些功能实现的效果。
【加载顺序】：设置Flash加载影片各层显示影片第一帧的顺序，此选项控制着Flash在速度较慢的网络或调制解调器连接上先显示影片的哪些部分，可以选择“由下而上”或“由上而下”的显示画面。默认设置即可，没有特殊要求不需改动。
【动作脚本版本】：到Flash MX 2004动作脚本也得到扩展升级到2.0，比以前的动作脚本语法要求严格了，如果你的动作脚本中用到2.0新增的扩展函数，就要发布成2.0版本的动作版本，不然在导出的影片文件中有些动作脚本不能正常执行。
    第1课附录-----认识Flash MX 2004工作环境