Dreamweaver 和Flash 案例教程 动 画 制 作

会计学1Dreamweaver和Flash案例教程动画制作【案例39】“自转地球”动画10.6【案例37】“移动的探照灯光”动画10.4【案例38】“变化文字”动画10.5第1页/共114页10.1【案例34】“旋转移动的扇叶”动画10.1.1学习目标

“旋转移动的扇叶”动画播放后，画面出现一个扇叶一边围绕中心顺时针旋转，一边移动。动画播放后的两幅画面如图10-1-1所示。第2页/共114页图10-1-1“旋转移动的扇叶”动画播放后的两幅画面第3页/共114页

通过制作该案例，可以进一步了解制作动作动画的方法，了解动画的种类，进一步了解时间轴的结构特点，以及时间轴中各种帧的特点。10.1.2操作过程第4页/共114页10.1.3相关知识1．动画的种类和动作动画的特点（1）动画的种类：Flash动画分为帧帧动画和动作动画两大类，它们的特点如下。

第5页/共114页帧帧动画：帧帧动画的每一帧都由制作者确定，而不是由Flash通过计算得到，然后连续依次播放这些画面，即可生成动画效果。帧帧动画适于制作非常复杂的动画，Gif格式的动画就是属于这种动画。与过渡动画相比，通常帧帧动画的文件字节数较大。为了使一帧的画面显示的时间长一些，可以在关键帧后边添加几个与关键帧内容一样的普通帧。第6页/共114页补间动画：它也叫过渡动画。制作若干关键帧画面，由Flash计算生成各关键帧之间的各个帧，使画面从一个关键帧过渡到另一个关键帧。补间动画又分为动作动画和形状动画。第7页/共114页（2）动作动画的特点：动作动画是补间动画的一种。在Flash8中可以创建出丰富多彩的动作动画效果，可以使一个对象在画面中沿直线移动，沿曲线移动，变换大小、形状和颜色，以中心为圆点自转，以中心为圆点旋转，产生淡入淡出效果等。各种变化可以独立进行，也可合成复杂的动画。例如一个对象不断自转的同时还水平移动。第8页/共114页Flash8可以使实例、图形、图像、文本和组合产生动作动画。创建动作动画后，自动将对象转换成补间的实例，“库”面板中会自动增加元件，名称为“补间l”、“补间2”和“补间3”等。动作动画可以借助于引导层使对象沿任意路径运动，即创建引导动作动画。动作动画还可以借助遮罩层的作用产生千奇百态的动画效果。第9页/共114页

时间轴窗口如图10-1-5所示。其中，有许多图层和帧单元格（简称为帧），每一行表示一个图层，每一列表示一帧。各个帧的内容会不相同，不同的帧表示了不同的含义。2．时间轴的帧特点第10页/共114页图10-1-5时间轴窗口第11页/共114页（1）空白帧：也叫做帧。该帧内是空的，没有任何对象，也不可以在其内创建对象。第12页/共114页（2）空白关键帧：也叫做白色关键帧。帧单元格内有一个空心的圆圈，则表示它是一个没有内容的关键帧。如果新建一个Flash文件，则会在第1帧自动创建一个空白关键帧。空白关键帧内可以创建各种对象。选中某一个空白帧，再按F7键，即可将它转换为空白关键帧。第13页/共114页（3）关键帧：帧单元格内有一个实心的圆圈，表示该帧内有对象，可以进行编辑。选中一个空白帧，再按F6键，即可创建一个关键帧。第14页/共114页（4）普通帧：在关键帧的右边的浅灰色背景帧单元格是普通帧，表示它的内容与左边的关键帧内容一样。选中关键帧右边的一个空白帧，再按F5键，则从关键帧到选中的帧之间的所有帧均变成普通帧。第15页/共114页（5）动作帧：该帧本身也是一个关键帧，其中有一个字母“a”，表示这一帧中分配有动作脚本。当影片播放到这一帧时会执行相应的脚本程序。要加入动作需弹出“动作-帧”面板。第16页/共114页（6）过渡帧：它是两个关键帧之间，创建补间动画后由Flash计算生成的帧，它的底色为浅蓝色或浅绿色。不可以对过渡帧进行编辑。第17页/共114页

创建不同帧的方法还有：选中某一个帧单元格，再单击“插入”→“时间轴”→“××××”菜单命令；或者，将鼠标指针移到要插入关键帧的帧单元格处，单击右键，弹出快捷菜单，再单击快捷菜单中相应的菜单命令。第18页/共114页（7）不同种类动画的帧：动作动画、形状动画和动作动画错误的帧特点如下。第19页/共114页动作动画：在关键帧之间有一条水平指向右边的箭头，帧为浅蓝色背景。形状动画：在关键帧之间也有一条水平指向右边的箭头，帧为浅绿色背景。动画错误：表示在创建动作动画中存在错误，无法正确完成动画的制作。第20页/共114页

在选中一个或多个关键帧后，执行下面的操作均可以将选中的一个或多个关键帧转换为动作动画的关键帧，从而创建动作动画。常用的创建动作动画的方法如下。3．使关键帧成为动作动画的关键帧第21页/共114页（1）使用工具箱内的选择工具，选中动画的第1个关键帧，单击鼠标右键，弹出帧快捷菜单命令，单击该菜单命令中的“创建补间动画”菜单命令或单击“插入”→“时间轴”→“创建补间动画”菜单命令。选中动画的最后一个关键帧，按F6键。第22页/共114页（2）使用工具箱内的选择工具，按住Shift键，选中动画的第1个关键帧，再选中动画的最后一个关键帧，单击鼠标右键，弹出帧快捷菜单命令，单击该菜单命令中的“创建补间动画”菜单命令或单击“插入”→“时间轴”→“创建补间动画”菜单命令。第23页/共114页

选中动画关键帧，弹出动画关键帧的“属性”面板。利用该面板可以设置动画类型和动画其他属性。在“补间”下拉列表框中选择了“动画”选项（应该翻译为“动作选项”）后，该面板如图10-1-6所示。该对话框内有关选项的作用如下。4．动画关键帧的“属性”面板

第24页/共114页图10-1-6动画关键帧的“属性”面板第25页/共114页（1）“<帧标签>”文本框：用来输入关键帧的标签名称。（2）“标签类型”下拉列表框：在输入关键帧的标签名称后“标签类型”下拉列表框才会生效。该下拉列表框可以用来定义标签的类型，其中有三个选项“名称”、“注释”、“锚点”。第26页/共114页

例如：单击选中动作动画的第1关键帧，在其“属性”面板“<帧标签>”文本框中输入“第1帧”文字后，时间轴的第1关键帧内会显示标签的名称。如果在“标签类型”下拉列表框中选择不同选项，则该关键帧内的红色标记图案会不一样，其作用也会不一样。选择“名称”选项时，程序中可以利用该名称。第27页/共114页（3）“补间”下拉列表框：用来选择动画类型。它有三个选项：选择“无”选项，是没有动画；选择“动画”选项，是创建动作动画；选择“形状”选项，是创建“形状”动画。第28页/共114页（4）“缓动”文本框：可输入数据或调整滑条的滑块（数值范围是−100到100），来调整运动的加速度。其值为负数时为动画在结束时加速，其值为正数时为动画在结束时减速。第29页/共114页（5）“旋转”下拉列表框：用来控制对象在运动时是否自旋转和旋转方式。选择“无”，是不旋转；选择“自动”，是按照尽可能少运动的情况下旋转对象；选择“顺时针”，是顺时针旋转对象；选择“逆时针”，是逆时针旋转对象。可以在其右边的“次”文本框内输入旋转的次数。第30页/共114页（6）“调整到路径”复选框：选中它后，可将运动对象的基线调整到运动路径。（7）“同步”复选框：选中它后，可使图形元件实例的动画与住时间轴同步。（8）“对齐”复选框：选中它后，可使运动对象的中心点标记与运动路径对齐。第31页/共114页（9）“声音”下拉列表框：该下拉列表框用来选择导入的声音名称。选择一种声音名称后，会将声音加入动画，时间轴的动画图层中会出现一条水平波纹线，反映加入了声音。（10）“效果”下拉列表框：该下拉列表框用来选择导入声音的播放效果。第32页/共114页（11）“同步”下拉列表框：用来选择影片剪辑实例在循环播放时与主电影相匹配的方式。该下拉列表框中有4个选项：“事件”、“开始”、“停止”、“数据流”。第33页/共114页（12）“声音循环”下拉列表框：用来选择播放声音的方式，它有“重复”和“循环”两个选项。选择“重复”选项后，其右边会出现一个“循环次数”文本框，用来输入播放声音的循环次数。选择“循环”选项后，声音会不断循环播放。第34页/共114页10.2.1学习目标

“人和自然”动画播放后，在森林中，一只狗和一只豹子在来回奔跑戏耍，在画面的左上角，一个女人的眼睛一会儿睁开一会儿闭上。这个画面很自然地使人想到“人和自然”这个主题，人和动物应该和谐地生活在大自然中。10.2【案例35】“人和自然”动画第35页/共114页图10-2-1“人和自然”动画播放后的2幅画面第36页/共114页

通过制作该案例，可以掌握利用连续动作的一系列图像制作动画的方法，进一步掌握制作动作动画的方法。动画播放后的2幅画面如图10-2-1所示。10.2.2操作过程第37页/共114页1．选择帧编辑帧以前应先选中要编辑的帧。在时间轴中选中若干帧，然后单击右键，即可弹出帧快捷菜单，常常需要使用帧快捷菜单中的菜单命令来编辑帧。选择帧的方法如下。（1）选中一个帧：单击一帧的单元格，即可选中该帧。10.2.3相关知识第38页/共114页（2）选中连续的多个帧：按住Shift键，选中一个或多个动画所在图层内左上角的帧，再单击右下角的帧，即可选中连续的所有帧。另外，选中某一个非关键帧，再拖曳鼠标。（3）选中一个图层的所有帧：单击控制区域内的某一图层，即可选中该图层的所有帧。第39页/共114页（4）选中多个连续图层的所有帧：按住Shift键，单击控制区域内的连续图层中第1个图层，再单击连续图层中最后一个图层，即可选中多个连续图层内的所有帧。（5）选中多个图层的所有帧：按住Ctrl键，单击控制区域内的各个图。（6）选择所有帧：选中帧快捷菜单中的“选择所有帧”菜单命令。第40页/共114页（1）移动帧：在时间轴中选中若干帧，用鼠标拖曳选中的帧，可以把它们移到目的位置。2．移动帧、复制帧和调整过渡帧的数量第41页/共114页（2）复制帧和移动帧：选中要移动的帧，单击帧快捷菜单中的“复制帧”（或“剪切帧”）菜单命令，将选中的帧复制（剪切）到剪贴板内。再在时间轴窗口中选中一个帧单元格，然后弹出“帧”快捷菜单，单击快捷菜单中的“粘贴帧”，即可把剪贴板中的若干帧粘贴到时间轴窗口选定的帧内，从而实现复制帧（移动帧）。第42页/共114页（3）调整过渡帧的数量：在创建了运动或形状动画后，如果要调整过渡的长度，可以先选中起始或结束关键帧，然后用鼠标水平拖曳该帧单元格，在拖曳帧单元格的时候，可能会出现只拖曳了结束帧单元格，此时需要再拖曳终止关键帧，使它与结束帧单元格重合。第43页/共114页（1）插入普通帧：选中要插入普通帧的帧单元格，然后按F5键。这时就会在选中的帧单元格中新增加一个普通帧，该帧单元格中原来的帧以及它右面的帧都会向右移动一帧。（2）删除帧：在时间轴窗口中选中要删除的一个或多个帧，然后单击帧快捷菜单中的“删除帧”菜单命令。按住Shift+F5键，也可以删除选中的帧。3．插入帧和删除帧第44页/共114页（3）插入关键帧，选中要插入关键帧的帧单元格，然后按F6键或单击帧快捷菜单中的“插入关键帧”菜单命令。（4）插入空白关键帧：选中要插入空白关键帧的帧单元格，然后按F7键或单击帧快捷菜单中的“插入空白关键帧”菜单命令。第45页/共114页（5）清除关键帧：选中要删除的关键帧，然后单击帧快捷菜单中的“删除关键帧”菜单命令。此时，原关键帧中的内容会被前面的关键帧内容取代。（6）清除帧：选中要清除的帧，然后单击帧快捷菜单中的“清除帧”菜单命令，可将选中的帧中的内容清除，使该帧成为空白关键帧。第46页/共114页（1）转换为关键帧（或空白关键帧）：选中要转换的普通帧，然后单击帧快捷菜单中的“转换为关键帧”（或“转换为空白关键帧”）菜单命令。4．转换为关键帧和动画反向播放第47页/共114页（2）动画反向播放：动画反向播放就是使起始帧变为终止帧，终止帧变为起始帧。选中一段动画，可以包括多个图层，然后单击帧快捷菜单中的“翻转帧”菜单命令。第48页/共114页10.3.1学习目标

“奔驰火车头”动画播放后，一列精致的玩具小火车，沿着浅蓝色木地板上的八字形轨道行驶。动画播放中的两幅画面如图10-3-1所示。通过制作该案例，可以掌握引导动作动画的制作方法。

10.3.2操作过程10.3【案例36】“奔驰火车头”动画第49页/共114页图10-3-1“奔驰火车头”动画播放后的两幅画面第50页/共114页1．引导层可以在引导层内创建图形，这可以在绘制图形时起到辅助作用，以及起到运动路径的引导作用。引导层中的图形只能在舞台工作区内看到，在输出的影片中不会出现。另外，还可以把多个普通图层关联到一个引导层上。10.3.3相关知识第51页/共114页

在时间轴窗口中，引导层名称的左边有图标（运动引导层）或图标（普通引导层）。它们代表了不同的引导层，不同的引导层有不同的作用。第52页/共114页（1）运动引导层：它可以引导对象沿辅助线移动，产生引导动作动画。单击时间轴左下角的“添加运动引导层”按钮，即可在选中图层的上边增加一个运动引导层。第53页/共114页（2）普通引导层：它只起到辅助绘图的作用。创建普通引导层的方法是，创建一个普通图层。将鼠标指针移到该图层名称处，单击鼠标右键，弹出图层快捷菜单，如图10-3-12所示。再单击快捷菜单中的“引导层”菜单命令，其结果如图10-3-13所示。第54页/共114页

图10-3-12图层快捷菜单第55页/共114页

图10-3-13创建普通引导层第56页/共114页

下面通过制作一个沿曲线移动的动画来介绍引导动作动画（简称引导动画）的制作方法。（1）按照上述方法建立沿直线移动的动作动画，例如圆球从左边移到右边的动画。2．引导动作动画的制作方法第57页/共114页（2）单击时间轴左下角的“添加运动引导层”按钮，则选中图层（此处是“图层1”图层）的上边会增加一个引导层（也叫做导向图层），同时选中的图层自动成为与引导层相关联的被引导层。关联的图层名称向右缩进，表示它是关联的图层。此外，还可以通过单击“插入”→“时间轴”→“运动引导层”来增加一个引导层。第58页/共114页（3）选中引导层，在舞台工作区内绘制路径曲线（辅助线），如图10-3-14所示。选中引导层的第30帧，按F5键，创建一个普通帧。第59页/共114页图10-3-14导向动作动画的时间轴和舞台工作区第60页/共114页（4）选中图层1图层的第1帧，选中“属性”面板内的“对齐”复选框，用鼠标拖曳对象（圆球）到辅助线的起始端或辅助线上，使对象的中心十字与辅助线起始点或辅助线重合。再选中终止帧，用鼠标拖曳圆球到辅助线的终止端或辅助线上，使对象的中心十字与辅助线终止点或辅助线重合。第61页/共114页（5）按回车键，播放动画，可以看到小球沿绘制的辅助线移动。按住Ctrl键再按回车键，播放动画，此时辅助线不会显示出来。第62页/共114页10.4.1学习目标

“移动的探照灯光”动画是模拟探照灯光（圆形形状）在黑夜中照射一幅图像的情况。动画播放后的两个画面如图10-4-1所示。通过制作该案例，掌握遮罩技术。

10.4.2操作过程10.4【案例37】“移动的探照灯光”动画第63页/共114页图10-4-1“移动的探照灯光”动画播放后的两幅画面第64页/共114页1．遮罩层在遮罩层上创建对象，相当于在遮罩层上挖掉了相应形状的洞，形成挖空区域，挖空区域将完全透明，其他区域都是完全不透明的。通过挖空区域，下面图层的内容就可以被显示出来，而没有对象的地方成了遮挡物，把下面的被遮罩图层的其余内容遮挡起来。10.4.3相关知识第65页/共114页

因此可以透过遮罩层内的对象（挖空区域）看到其下面的被遮罩图层的内容。利用遮罩层的这一特性，可以制作很多特殊效果。创建遮罩层的操作步骤如下。第66页/共114页（1）创建一个图层，并在其上创建一个对象。此处导入一幅图像，如图10-4-3所示。第67页/共114页

图10-4-3导入一幅图像第68页/共114页（2）选中该图层，再单击时间轴左下方的按钮，在选中的图层的上边创建一个新的普通图层。在新建的图层上绘制图形与输入文字，如图10-4-4所示，作为遮罩层中挖空区域。第69页/共114页

图10-4-4绘制图形与输入文字第70页/共114页（3）将鼠标指针移到遮罩层的名称处，单击鼠标右健，弹出图层快捷菜单，单击该快捷菜单中的“遮罩层”菜单命令。此时，选中的普通图层的名称会向右缩进，表示已经被它上面的遮罩层所关联，成为被遮罩图层。如图10-4-5所示。第71页/共114页

图10-4-5创建遮罩图层第72页/共114页

在建立遮罩层后，Flash8会自动锁定遮罩层和被它遮盖的图层，如果需要编辑遮罩层，应先解锁，解锁后就不会显示遮罩效果了。如果需要显示遮罩效果，需要再锁定图层。第73页/共114页（1）建立遮罩层与普通图层关联，它的操作方法有以下两种。在遮罩层的下面创建一个普通图层。用鼠标将该普通图层拖曳到遮罩层的右下边。

2．建立与取消普通图层与遮罩层的关联第74页/共114页在遮罩层的下面创建一个普通图层。弹出图层快捷菜单，单击菜单中的“属性”菜单命令，弹出“图层属性”对话框。选中该对话框中的“被遮罩”单选按钮。第75页/共114页（2）取消被遮罩的图层与遮罩层关联，它的操作方法有以下两种。在时间轴中，用鼠标将被遮罩层拖曳到遮罩层的左下边或上面。选中被遮罩的图层，然后选中“图层属性”对话框中的“正常”单选按钮。第76页/共114页10.5.1学习目标

“变化文字”动画播放后，屏幕下面的绿色“Flash8”逐渐向上移动，同时它的颜色也逐渐由绿色变为红色，它的大小也不断变大。该动画播放后的各个帧画面如图10-5-1所示。10.5【案例38】“变化文字”动画第77页/共114页图10-5-1显示“变化文字”动画的全部帧画面第78页/共114页

通过制作该案例，可以初步了解形状动画的制作方法，还可以了解添加和调整形状提示的方法。10.5.2操作过程第79页/共114页1．制作形状动画的基本方法形状动画也叫做变形动画，它是由一种形状对象逐渐变为另外一种形状对象。Flash8可以将图形、打碎的文字和打碎的点阵图。Flash8不能将实例、未打碎的文字、点阵图像、组合对象进行变形。10.5.3相关知识第80页/共114页

在形状动画中，对象位置和颜色的变换是在两个对象之间发生的变化，而在动作动画中，变化的是同一个对象的位置和颜色属性。下面通过制作一个彩球变化为七彩矩形的形状动画来介绍形状动画的制作方法。第81页/共114页（1）选中在时间轴内一个空白关键帧作为动画的开始帧。然后，在舞台工作区内创建一个符合要求的对象，作为形状动画的初始对象。此处绘制一个红色立体彩球。（2）选中形状动画的第1个关键帧，再选中“属性”面板内“补间”下拉列表框中的“形状”选项，此时该面板如图10-5-3所示。第82页/共114页图10-5-3形状动画关键帧的“属性”面板第83页/共114页（3）单击形状动画的终止帧，按F6键，创建动画的终止帧为关键帧。此时，在时间轴上，从第1帧到终止帧之间会出现一个指向右边的箭头，帧单元格的背景为浅绿色。第84页/共114页（4）在舞台工作区内创建一个附合要求的对象，作为形状动画的终止对象（例如，绘制一个七彩色放射状渐变填充的矩形），再将该帧内原有的对象（例如，红色立体彩球）删除。注意：一定先创建新对象，再删除原对象；关键帧内创建的对象必须是图形、打碎的文字或打碎（或矢量化）的点阵图像。上面制作好的形状动画中的所有帧的画面如图10-5-4所示。第85页/共114页图10-5-4形状动画中的所有帧的画面第86页/共114页

选择动画关键帧“属性”面板内的“补间”下拉列表框中的“形状”选项后，“属性”面板如图10-5-1所示。“属性”面板中各选项的作用如下。2．形状动画关键帧的“属性”面板第87页/共114页（1）“简易”文本框：用来设置动画的加速度。（2）“混合”下拉列表框：该下拉列标框内各选项的作用如下。

第88页/共114页“角形”选项：选择它后，创建的过渡帧中的图形更多地保留了原来图形的尖角或直线的特征。如果关键帧中图形没有尖角，则与选择“分布式”的效果一样。

“分布式”选项：选择它后，可使形状动画过程中创建的中间过渡帧的图形较平滑。第89页/共114页

为了使形状动画中间过程不一样，可以使用形状提示，来控制复杂或特殊的变形过程。形状提示就是在形状的初始图形与结束图形上，分别指定一些形状的关键点，并使这些关键点在起始帧中和结束帧中一一对应，这样Flash就会根据这些关键点的对应关系来计算形状变化的过程。接着上边制作的简单的形状动画，介绍使用形状提示的方法如下。3．添加形状提示第90页/共114页（1）选中时间轴上第1帧单元格，再单击“修改”→“形状”→“添加形状提示”菜单命令，或按Ctrl+Shift+H键，即可在第1帧圆形图形中加入一个形状提示标记“a”。再重复上述过程，可以继续增加“b”到“z”25个形状提示标记。此处再增加一个形状提示标记。第91页/共114页（2）用鼠标拖曳这些标记，分别放置在第1帧图形的一些位置处，如图10-5-5所示。第92页/共114页

图10-5-5第1帧圆球形状提示标记第93页/共114页（3）再选中终止帧单元格，这时会看到终止帧矩形图形中也有“a”和“b”关键点标记（两个标记重叠）。用鼠标拖曳这些标记，分别放置在矩形图形的适当位置，如图10-5-6所示。如果没有关键点标记显示，可选中“视图”→“显示形状提示”菜单命令。第94页/共114页图10-5-6终止帧矩形图形的形状提示标记第95页/共114页（4）在F1ash中最多可以使用26个形状关键点标记，分别用26个英文小写字母表示。在起始关键帧的形状关键点用黄色圆圈表示，在终止关键帧用绿色圆圈表示。如果关键点的位置不在曲线上，将显示红色圆圈。第96页/共114页10.6.1学习目标

“自转地球”动画是一个半透明地球不断自转，其中的两个画面如图10-6-1所示。通过制作该案例，可以掌握遮罩技术的更灵活的使用方法，还有关于图层的相关操作技术。

10.6.2操作过程10.6【案例39】“自转地球”动画第97页/共114页图10-6-1“自转地球”动画的两个画面第98页/共114页1．图层图层就相当于舞台中演员所处的前后位置。在制作一个Flash电影的过程中，可以根据图形和动画的需要在时间轴中建立多个图层。图层的多少，不会影响输出电影文件的大小。图层靠上，相当于该图层的对象在舞台的前面。10.6.3相关知识第99页/共114页

在同一个纵深位置处，前面的对象会挡住后面的对象。而在不同纵深位置处，可以透过前层看到后层的对象。各个图层之间是完全独立的，一般不会出现相互的影响。第100页/共114页

图层中有两种特殊的图层：一个是引导层，一个是遮罩层。当普通图层与引导层关联后，就成为被引导层；而与遮罩层关联后，则成为被遮罩层。在时间轴中，各种图层通过图层名称左边不同的图标来表示，如图10-6-11所示。第101页/共114页图10-6-11各种图层第102页/共114页

选中一个或多个图层中的所有帧，也就是选中了该图层。（1）选中一个图层：在时间轴窗口中单击图层控制区的相应图层行。选中的图层，其图层控制区的相应图层行呈黑底色