Flash动画课件01.doc

拓展型课程 Flash动画一点通拓展型课程校本教材Flash动画一点通（入门与进阶）2内 容 简 介本教材通过数十个精心设计的范例，全面展现了使用Flash制作动画的过程、方法和技巧。其特色是寓教于乐，将功能讲解融入实例制作的步骤之中，帮助学生轻松掌握Flash的使用方法和技巧，并介绍了关键帧动画、变形动画、路径动画、色彩动画和蒙板动画等各种动画的制作方法。此外，书中实例注重美术创意和色彩构成，使学生在学习中得到美的陶冶。教材共分17课，其特点是内容翔实，注重基础，由浅入深，由易到难，图文并茂，以助理解。同时备有实例素材，以供学习者使用。因此，本教材非常适合于初学者学习，也可以作为自学者的参考资料。第1课 推门而入制作第一个简单动画一、教学目的通过对小球跳动的动画效果制作，熟悉Flash MX 2004工作环境，了解一个Flash影片的创建过程，理解Flash影片的文件格式，掌握Flash影片的保存、测试、导出方法。二、教学内容2222 熟悉Flash的工作环境 文档属性的设置方法 图形元件的创建方法 绘图工具的使用方法 渐变填充的设置和调整 创建补间动画的技巧 导入和应用外部的图片 如何测试、保存和导出影片 三、教学素材（见素材-1文件目录）四、教学过程Flash MX 2004是创作性的工具，可以创建简单的动画到复杂的交互式 Web 应用程序。在创作的过程中可以发挥个人的创意与Flash的技术结合做出有声有色的动画作品来。这一课将开始Flash之旅的第一站，制作一个简单的“小球运动”实例，让大家熟悉Flash MX 2004的工作环境，掌握一些常用工具和功能菜单的使用方法，系统的学习应用Flash MX 2004完成基本动画的全过程。（一）效果预览本实例是一个小球跳动的动画效果。紫色的小球在美丽的背景衬托下，自由的跳动，如图1-1-1小球运动预览效果。图1-1-1小球运动预览效果（二）制作步骤新建文档设置文档属性步骤1 新建文档单击Windows系统的【开始】菜单，执行【开始】|【程序】|【Macromedia】|【Macromedia Flash MX 2004】命令，启动Flash MX 2004，系统现弹出Flash MX 2004的启动界面。单击中间“开始页”【创建新项目】下的【Flash 文档】项目，创建一个新空白文档,如图1-1-2所示。图1-1-2创建空白新文档说明：还有一种创建新文件的方法，启动Flash MX 2004,执行【文件】|【新建】命令，在【常规】选项卡上选择【Flash 文档】，打开一个新的空白文档。步骤2 打开属性检查器执行【窗口】|【属性】命令（快捷键Ctrl+F3），打开【属性检查器】面板。【属性检查器】面板位于舞台的下方，新建文档以后，用【属性检查器】面板来指定文档的【舞台】大小、【背景颜色】、【帧频】 (fps也就是播放速度)以及文档的【发布设置】等参数，如图1-1-3所示。图1-1-3【属性检查器】面板步骤3 设置文档属性单击【属性检查器中】面板上【大小】右边的“控件按钮”，弹出设置【文档属性】对话框，最上面【尺寸】是用来设定【舞台】大小尺寸的，输入宽度的值：400 px（像素）；高度的值不变：400 px（像素），如图1-1-4所示。图1-1-4【文档属性】对话框说明：设置【舞台】的大小尺寸，最小可设定为高和宽均为 18 px （像素）；最大可设定高和宽均为 2880 px （像素）。系统默认的尺寸是 px （像素），可以在【标尺单位】的下拉菜单里面选择其他的单位，如：厘米、毫米等。单击【背景颜色】右边的“取色按钮”，在弹出的【颜色样本】面板上选取颜色，选取颜色的同时鼠标指针变成【滴管工具】，找到天蓝色样本并拾取，同时可以查看在“十六进制文本框”中显示颜色值为 “#00CCFF”，如图1-1-5所示。说明：除了用【滴管工具】直接在颜色样本中拾取颜色外，如果知道颜色的十六进制数值，可以在“十六进制文本框”中直接输入，颜色的十六进制值以“井”开头。保持【文档属性】的其它参数不变，单击【确定】按钮，完成文档属性的设置，场景效果如图1-1-6所示。图1-1-5【背景颜色】选择图1-1-6完成属性设置的场景说明：【匹配】【打印机】：匹配打印机，让底稿的大小与打印机的打印范围相同。【匹配】【内容】：匹配内容，在舞台上将内容四周的空间都设置为对称。【匹配】【默认】：匹配默认，使用默认值。【帧频】：默认为12 fps。是动画每秒播放的帧数，默认的播放速度是每秒钟播放时间轴上的 12 帧，这是在 Web 上播放动画的最佳帧频。根据特殊需要可以修改。【设为默认值】：将所有设定保存成默认值，当下次再开启新的影片文档时，影片的舞台大小和背景颜色会自动调整成这次设定的值。2.创建图形元件元件是在 Flash 中创建的图形、按钮或影片剪辑，是Flash动画中的基本构成重要元素之一。元件只需创建一次，即可在整个文档或其他文档中重复使用。而且多次使用它不会明显增大动画文件的体积大小。创建的任何元件都会自动成为当前文档的【库】的一部分。可以随时打开【库】面板进行调用，元件的应用使动画制作变得轻松快捷。步骤1 新建图形元件：执行【插入】【新建元件】命令（快捷键 Ctrl+F8），打开【创建新元件】对话框。在【创建新元件】对话框中，输入元件的【名称】为“小球”，【行为】选择【图形】前面的单选按钮，然后单击【确定】按钮，如图1-1-7所示。图1-1-7创建小球元件的设置步骤2 进入元件编辑状态创建元件完成以后，编辑动画的【舞台】已经从“场景1”切换到“小球”图形元件的编辑状态，在【时间轴】的上方有“场景1”|“小球”的提示，如图1-1-8所示。图1-1-8小球图形元件的编辑场景3.绘制图形步骤1 设置圆形的颜色选择【工具】面板上的【椭圆工具】，单击【工具】面板下面“颜色”区域的【笔触颜色】，在弹出的【颜色样本】面板上选择【没有颜色】；再单击【填充颜色】，在弹出的【颜色样本】面板上选择蓝色“#0000FF”，如图1-1-9和图1-1-10 所示。 图1-1-9设置圆形的笔触颜色 图1-1-10设置圆形的填充颜色说明：在绘制某个形状时，它的颜色有两个部分：外部线条称为【笔触颜色】，它描绘形状的轮廓；形状内部的着色称为【填充颜色】。在绘制图形之前，通常要先设置【笔触颜色】和【填充颜色】。步骤2 绘制圆形移动鼠标到【舞台】的中间，按住键盘“Shift”键同时按住鼠标左键拖动，绘制出一个随意大小的圆形，如图1-1-11所示。图1-1-11绘制出的小球说明：按住 Shift 键拖动可以将形状限制为正圆形，否则为不规则的椭圆形状。步骤3 设置圆形的属性选择【工具】面板上的【选择工具】，然后单击【舞台】上的“圆形”，执行【窗口】|【属性】命令（快捷键Ctrl+F3），打开【属性检查器】面板，在【属性检查器】面板中设置【宽】和【高】都为“66”像素，【X轴】和【Y轴】的坐标都为“-33”，如图1-1-12所示。图1-1-12设置圆形的属性4.改变圆形为渐变填充步骤1 选择渐变色填充类型保持【舞台】上的“圆形”处于被选中状态，执行【窗口】【设计面板】【混色器】命令（快捷键Shift+F9）， 打开【混色器】面板。单击【填充样式】后面的下拉按钮，在弹出菜单中选择【放射状】渐变填充，如图1-1-13所示。图1-1-13选择【填充样式】说明：【混色器】面板可以创建并编辑纯色和渐变填充，还可以设置无色和位图的填充。渐变填充有两种方式， 【线性】渐变填充是从起始点到终点沿直线逐渐变化的渐变方式；【放射状】渐变填充是从起始点到终点按照环形模式向四周逐渐变化。步骤2 设置渐变填充颜色单击中间【渐变定义栏】的下面“左边”的【渐变指针】，设置【放射状】渐变填充的起始点颜色，也就是圆心中间部位的颜色。在下面的“颜色空间”单击选择一种浅蓝颜色“#939BFD”，如图1-1-14所示。然后再单击【渐变定义栏】下面“右边”的【颜色指针】，设置【放射状】渐变填充的终点颜色，也就是圆形周围的颜色。在下面的“颜色空间”单击选择一种深蓝颜色“#36027D”，如图1-1-15所示。图1-1-14调整起始点填充色 图1-1-15调整终点填充色步骤3 完成渐变色填充颜色设置好以后，因为舞台上的“圆形”处于被选中状态，编辑颜色的同时被选中的“圆形”会自动添加编辑的渐变填充颜色，很像一个小球的形状，如图1-1-16所示。图1-1-16渐变填充的小球说明：如果没有事先选中绘制的图形，在【混色器】面板上编辑颜色以后，选择【工具】面板上的【颜料桶工具】，鼠标指针变成“颜料桶”形状，移动鼠标到舞台上单击绘制的形状也可以完成填充，这是填充颜色的另外一种方法。步骤4 调整渐变填充渐变填充完成以后，“圆形”有了立体感，但是不符合光源的照射规律，我们来调整“圆形”渐变填充的起始位置，使其看起来更接近自然界中的球体。选择【工具】面板上的【填充变形工具】，移动鼠标到舞台上单击“圆形”，“圆形”的中间和周围出现4个【填充变形控制点】，如图1-1-17所示。图1-1-17【填充变形工具】选中小球移动鼠标到“圆形”中间的【填充变形控制点】上，鼠标指针变成“十字方向”，按住鼠标左键向左上方拖动，将“高光区”拖放到“圆形”的左上方，如图1-1-18所示。调整后的效果如图1-1-19所示。图1-1-18移动填充变形控制点图1-1-19调整后的效果5.制作动画步骤1 打开库面板执行【窗口】【库】命令（快捷建F11）,打开【库】面板。在【库】面板中看见我们刚才创建的“小球”图形元件，如图1-1-20所示。图1-1-20【库】面板步骤2 布局第1帧上的小球单击【时间轴】的上方“场景1”，切换到“场景1”的舞台，选中【库】面板中的“小球”图形元件，按下鼠标左键并拖动它到【舞台】的上边中间位置，如图1-1-21所示。图1-1-21舞台上的小球位置说明：按下快捷键Ctrl+L，可以快速打开【库】面板。【库】中保存的对象是创建好的可以重复使用的图形、影片剪辑或按钮。将【库】中的元件拖放到【舞台】上以后，【舞台】上的对象叫做元件的实例。新建文档的主场景在【时间轴】上只有一个【图层1】和一个【空白关键帧】，“小球”拖放到【舞台】上以后，就直接加到【图层1】的第一帧上，同时第一帧变成【关键帧】。【关键帧】是用来定义动画变化状态的帧，显示为实心圆，如图1-1-22所示。图1-1-22小球第一帧的图层结构步骤3 改变图层名称添加关键帧鼠标双击【图层1】的图层名称处，输入“小球”将【图层1】重新命名为【小球】。单击选中【小球】图层的第20帧，执行【插入】|【时间轴】|【关键帧】命令（快捷键 F6），在第20帧处插入一个【关键帧】，用同样的方法在【小球】图层的40帧插入一个【关键帧】，效果如图1-1-23所示。图1-1-23插入关键帧的图层结构说明：改变图层名称是为了图层数量增多时，可以一目了然分清每个图层所放置的内容是什么，因此重新命名时尽量和放置的元件名称接近。另外除了使用【插入】菜单中的命令插入帧，还可以用快捷键实现插入帧的操作。选中某个帧以后，按下F5键可以插入一个【普通帧】；按下F6键可以插入一个【关键帧】；按下F7键可以插入一个【空白关键帧】。步骤4 调整20帧上小球位置单击选中【小球】图层的第20帧，选择【工具】面板上的【选择工具】，然后移动鼠标到【舞台】的“小球”图形元件上，按住键盘上的“Shift” 键同时按住鼠标左键拖动“小球”到舞台的正下方，如图1-1-24所示。图1-1-24调整后的小球位置说明：按住“Shift”同时拖动舞台上的元件，可以保持水平或垂直移动元件。也可以45度的角度，向四个斜面方向移动。步骤5 定义动作补间动画选中【小球】图层的第1帧，打开【属性检查器】面板，在【属性检查器】面板中，单击【补间】后面的下拉按钮，在弹出的菜单中选择【动作】，如图1-1-25所示。图1-1-25定义动作补间动画【小球】图层的第1帧到第20帧之间出现一条浅蓝色背景的带黑色箭头的实线。 这样就实现了第1帧到第20帧的【动作】补间动画。用同样的方法，再实现第20帧到40帧之间的动画，完成后的图层结构如图1-1-26所示。图1-1-26定义补间动画的图层结构说明：所谓补间动画，是指只要做好起点【关键帧】和终点【关键帧】的图形，Flash就会自动补上中间的动画过程。要构成补间动画，同一个图层上至少有两个不同位置的【关键帧】。步骤6 在场景中测试动画拖动【时间轴】上的红色【播放头】到第一帧的位置，按下键盘的“Enter”键，动画开始播放，观察小球的【动作】补间动画效果，看见“小球”以平均的速度从上到下又回到上面。步骤7 使动画更符合客观规律我们观察到的“小球”是均速的上下运动，现实生活中受地球吸引力的因素，应该是向落下的速度越来越快，弹起以后到上面速度逐步减慢，下面我们来对补间动画属性进行一些设置，使“小球”的运动更符合客观规律。选中【小球】图层的第1帧，打开【属性检查器】面板，在【属性检查器】面板中【简易】的参数文本框中输入“-100”，如图1-1-27所示。用同样的方法选中【小球】图层的第20帧，在【属性检查器】面板中【简易】的参数文本框中输入“100”。图1-1-27设置补间动画的【简易】参数说明：在定义补间动画时，通过设置一些相关参数可以使动画效果更丰富，比如上面定义的【简易】参数，可以将运动表现为先慢后快和先快后慢的效果。默认状态下，【简易】参数值为“0”，表示平均速度的运动，更改这个参数值，就可以实现加速运动或者减速运动。当值为正数时，运动为减速运动；当值为负数时，运动为加速运动。步骤8 再次在场景中测试动画拖动【播放头】到第一帧的位置，再按下键盘的“Enter”键，观察发现“小球”运动效果比较符合客观规律了。6.给动画添加背景步骤1 新建图层单击【时间轴】左边“图层名称”底部的【插入图层】按钮，新建【图层2】，如图1-1-28所示。图1-1-28插入图层步骤2 改变图层顺序并重新命名单击选中新建的【图层2】图层名称处，按住鼠标左键并拖动到【小球】图层的下面，然后双击【图层2】的图层名称处，输入“背景”将【图层2】重新命名为【背景】，如图1-1-29所示。图1-1-29重新命名图层名称说明：【时间轴】是控制动画的合成和播放的地方，它可以有不同的图层组成，可以把图层看成是堆叠在一起的多张幻灯胶片一样，每个层都包含一个显示在舞台中的不同图像，一层层地向上叠加。层可以帮助组织文档中的插图，可以在层上绘制和编辑对象，而不会影响其它层上的对象。上面的图层可以遮挡住下面图层的内容，当有很多图层时，可以组合出各种复杂的动画效果。步骤3 导入背景图片我们要给“小球运动”加上一个背景图片，使动画更加美观，事先选好一张和场景大小一致的图片。本例中的背景图片参见随书附带的光盘中的第一章的素材文件。选中【背景】图层的第一帧，执行【文件】|【导入】|【导入到舞台】命令（快捷键Ctrl+R），弹出【导入】对话框，在【导入】对话框中选择要导入的图片文件“背景.jpg”，然后点击【打开】按钮，如图1-1-30所示。图1-1-30【导入】对话框步骤4 设置图片在舞台上的位置单击【打开】按钮以后“背景.jpg”导入到舞台上。默认状态没有摆放到【舞台】的中间，看起来很不美观，如图1-1-31所示。图1-1-31刚导入的背景图片位置执行【窗口】|【设计面板】|【对齐】命令（快捷键Ctrl+K），打开【对齐】面板，保持右边【相对于舞台】按钮处于按下状态，分别单击【对齐】下面的“水平中齐”和“垂直中齐”按钮，如图1-1-32所示。说明：“相对于舞台”处于按下的状态的，这样实现的是对于舞台为中心的对齐和分布，如果处于非“相对于舞台”状态下，则是两个以上对象之间的相互对齐和分布。图1-1-32【对齐】面板7.测试和保存动画步骤1 测试动画执行【控制】【测试影片】命令（快捷键 Ctrl+Enter），弹出（.SWF）测试窗口，可以观看整个动画的播放效果，测试动画效果是否满意。单击 (.SWF）测试窗的关闭按钮即可关闭。如果有不满意的地方可以继续回到场景对动画进行编辑和调试，直到满意为止。测试窗口如图1-1-33所示。图1-1-33小球运动的测试窗口说明：前面我们通过在场景中按下“Enter”键,观察了“小球”的动画效果，这是一种常用测试效果的方法，但是如果结构比较复杂，比如主时间轴上有影片剪辑对象，那么这样的测试方法就不能观察到动画的全部效果。必须通过上面的方法测试动画。步骤2 保存动画执行【文件】【保存】命令（快捷键 Ctrl+S），弹出【另存为】对话框，指定文件保存的路径，输入文件名“小球运动”，保存类型：Flash MX 2004 文档（*.fla）即文件的扩展名为 .fla。最后单击【保存】按钮保存动画，如图1-1-34所示。图1-1-34【另存为】对话框说明：在制作动画的过程中，按Ctrl+S键可以快速保存文件，养成经常保存的好习惯，以免