《网页设计实用技术-电子教案-陈建国 第8章》由会员分享，可在线阅读，更多相关《网页设计实用技术-电子教案-陈建国 第8章（50页珍藏版）》请在金锄头文库上搜索。
1、第八章 Flash CS5动画制作,制作：李勤,8.1 逐帧动画 8.2 形状补间动画 8.3 传统补间动画 8.4 补间动画 8.5 骨骼动画 8.6 遮罩动画 8.7 沿路径运动的传统补间动画 8.8 制作交互式动画,第八章 Flash CS5动画制作,8.1 逐帧动画 8.1.1 逐帧动画的创建 8.1.2 绘图纸 8.1.3 实例满天星,8.1.1 逐帧动画的创建 用导入的静态图片建立逐帧动画：用jpg、png等格式的静态图片连续导入到Flash中，就会建立一段逐帧动画。 绘制矢量逐帧动画：用鼠标或压感笔在场景中一帧帧的画出帧内容。 文字逐帧动画：用文字作帧中的元件，实现文字跳跃、旋转
2、等特效。 指令逐帧动画：在时间帧面板上，逐帧写入动作脚本语句来完成元件的变化。 导入序列图像：可以导入gif序列图像、swf动画文件产生的动画序列。,8.1.2 绘图纸 【绘图纸】是一个帮助定位和编辑动画的辅助功能，这个功能对制作逐帧动画特别有用。通常情况下，Flash在舞台中一次只能显示动画序列的单个帧。使用绘画纸功能后，你就可以在舞台中一次查看两个或多个帧了。,8.1.3 实例满天星,8.2 形状补间动画 8.2.1 形状补间动画的概念 8.2.2 构成形状补间动画的元素 8.2.3 形状补间动画在时间轴面板上的表现 8.2.4 创建形状补间动画的方法 8.2.5 形状补间动画的属性设置
3、8.2.6 实例变脸,8.2.1 形状补间动画的概念 在Flash的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或形状来创建的动画被称为“形状补间动画”。,8.2.2 构成形状补间动画的元素 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔绘制出的形状，如果使用图形元件、按钮、文字，则必先执行【修改】|【分离】命令或使用快捷键Ctrl+B将其“打散”再变形。,8.2.3 形状补间动画在时间轴面板上的表现,8
4、.2.4 创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的形状，一般一帧中最好放置一个对象，在动画结束处创建或选择一个关键帧并设置要变成的形状，再右击开始帧，在弹出的快捷菜单中选择“创建补间形状”，此时，时间轴上的变化如图8-10所示，一个形状补间动画就创建完毕。,8.2.5 形状补间动画的属性设置 1.“缓动”选项 2.“混合”选项,8.2.6 实例变脸,8.3 传统补间动画 8.3.1 创建传统补间的方法 8.3.2 元件的变形点对补间的影响 8.3.3 实例小桥流水人家,8.3.1 创建传统补间的方法,8.3.2 元件的变形点对补间的影响 1
5、改变变形点的位置 2变形点的使用,8.3.3 实例小桥流水人家,8.4 补间动画 8.4.1 创建补间动画 8.4.2 创建对象补间的基本规则 8.4.3 处理补间动画范围 8.4.4实例宣传动画 8.4.5 补间动画和传统补间之间的差异,8.4.1 创建补间动画,8.4.2 创建对象补间的基本规则 1. 如果对象不是可补间的对象类型（比如：形状），或者如果在同一图层上选择了多个对象，这时将弹出一个对话框，询问是否将所选对象转换为元件并创建补间 . 2. 如果补间对象是图层上的唯一项，则Flash将包含该对象的图层转换为补间图层。 3. 将鼠标放置在时间轴中补间范围的任一端，当鼠标变为左右双箭
6、头时左右拖动帧可以缩短或延长补间范围。 4. 也可以对影片剪辑进行3D旋转或位置进行补间，直接使用3D旋转工具或3D平移工具修改对象即可，3D属性的变化也将新建一个属性关键帧。 5. 如果把另外一个元件实例添加到补间范围中，这时会出现“替换当前补间目标”对话框询问是否替换现有补间目标对象.,8.4.3 处理补间动画范围 1. 延长动画的持续时间 2.选择一定范围内的帧 3.移动某个范围 4. 为了选择动画范围中的某一帧或某个关键帧 5. 为将补间范围分成两个独立的范围,8.4.4 实例宣传动画,8.4.5 补间动画和传统补间之间的差异 1、传统补间使用关键帧。 2、补间动画在整个补间范围上由一
7、个目标对象组成。 3、补间动画和传统补间都只允许对特定类型的对象进行补间。 4、补间动画会将文本视为可补间的类型，而不会将文本对象转换为影片剪辑。 5、在补间动画范围上不允许帧脚本。,8.4.5 补间动画和传统补间之间的差异 6、可以在时间轴中对补间动画范围进行拉伸和调整大小，并将它们视为单个对象。 7、对于传统补间，缓动可应用于补间内关键帧之间的帧组。 8、利用传统补间，可以在两种不同的色彩效果（如色调和 Alpha 透明度）之间创建动画。 9、只可以使用补间动画来为 3D 对象创建动画效果。 10、只有补间动画可以另存为动画预设。 11、在同一图层中可以有多个传统补间或补间动画，但在同一图
8、层中不能同时出现两种补间类型。,8.5 骨骼动画 8.5.1 定义骨骼 8.5.2 选择骨骼 8.5.3 删除骨骼 8.5.4 创建骨骼动画 8.5.5 IK骨架动画配合其他补间动画 8.5.6 创建形状骨骼,8.5.1 定义骨骼 Flash CS5提供了一个“骨骼工具”，使用该工具可以向影片剪辑元件实例、图形元件实例或按钮元件实例添加IK骨骼。,8.5.2 选择骨骼 在创建骨骼后，可以使用多种方法来对骨骼进行编辑。要对骨骼进行编辑，首先需要选择骨骼。在【工具箱】中选择“选择工具”，单击骨骼即可选择该骨骼，在默认情况下，骨骼显示的颜色与姿势图层的轮廓颜色相同，骨骼被选择后，将显示该颜色的相反色
9、。如图8- 34所示。,8.5.3 删除骨骼,8.5.4 创建骨骼动画 在为对象添加了骨架后，即可以在产生的姿势图层中创建骨骼动画了。在制作骨骼动画时，可以在开始关键帧中制作对象的初始姿势，在后面的关键帧中制作对象不同的姿态，Flash会根据反向运动学的原理计算出连接点间的位置和角度，创建从初始姿态到下一个姿态转变的动画效果。,8.5.5 IK骨架动画配合其他补间动画,8.5.6 创建形状骨骼 除了可以向实例元件添加IK骨架，也可以向形状对象以及在【对象绘制】模式下创建的形状添加IK骨架。对于形状，可以向单个形状的内部添加多个骨骼。这不同于元件实例，形状将变为骨骼的容器，形状可以包含多个骨骼，
10、而每个元件实例只能具有一个骨骼。,8.6 遮罩动画 8.6.1 创建遮罩 8.6.2 构成遮罩层和被遮罩层的元素 8.6.3 遮罩层作为动画层 8.6.4 被遮罩层作为动画层,8.6.1 创建遮罩 要创建一个遮罩层，必须放置一个填充形状，也就是我们前面提到的“窗口”，如果不在遮罩层上放置颜色填充对象，就好比没有“窗口”，那么与它联接层的所有对象都将看不到 .,8.6.2 构成遮罩层和被遮罩层的元素 遮罩层中的图形对象在播放时是看不到的，遮罩层中的内容可以是按钮、影片剪辑、图形、位图、静态文字等，但不能使用线条，如果一定要用线条，可以执行【修改】|【形状】|【将线条转化为填充】命令，这样就可以将
11、线条用在遮罩层中了。 被遮罩层中的对象只能透过遮罩层中的对象被看到。在被遮罩层，可以使用按钮，影片剪辑，图形，位图，静态文字，线条。,8.6.3 遮罩层作为动画层 将遮罩层作为动画层来创建复合的动画效果，这一般用于那些静态图片中。,8.6.4 被遮罩层作为动画层 遮罩动画中，也可使用运动的图片或动画做为被遮罩层，实现文字或特殊形状里播放影片的效果，这时使用的字体越粗效果越好。,8.7 沿路径运动的传统补间动画 8.7.1 创建沿路径运动的传统补间 8.7.2 应用沿路径运动的传统补间动画的技巧 8.7.3 实例雪花飘舞,8.7.1 创建沿路径运动的传统补间 1. 创建引导层和被引导层 2. 引
12、导层和被引导层中的对象 3. 向被引导层中添加元件,8.7.2 应用沿路径运动的传统补间动画的技巧 1把【属性】面板上的“调整到路径”前打上勾，对象的基线就会调整到运动路径。 2、平滑圆润的线段有利于引导动画成功制作。 3、被引导对象的中心对齐场景中的“十字”，也有助于引导动画的成功。 4、一定要让元件的中心点对准引导线的开始和结束的端点，否则无法引导。,8.7.2 应用沿路径运动的传统补间动画的技巧 5、如果想解除引导，可以把“被引导层”拖离“引导层”，或在图层区的引导层上单击右键，在弹出的菜单上勾掉“引导层”。 6、如果想让对象作圆周运动，可以在“引导层”画个圆形线条，再用橡皮擦去一小段，
13、使圆形线段出现2个端点，再把对象的起始、终点分别对准端点即可。 7、引导线允许重叠，比如螺旋状引导线，但在重叠处的线段必需保持圆润，让Flash能辨认出线段走向，否则会使引导失败。,8.7.3 实例雪花飘舞,8.8 制作交互式动画 8.8.1 动作面板介绍 8.8.2为关键帧添加ActionScript 8.8.3为按钮添加ActionScript 8.8.4为影片剪辑添加ActionScript 8.8.5 stop和play语句 8.8.6 goto语句 8.8.7 getURL语句 8.8.8 loadMovie/loadMovieNum语句,8.8.1 动作面板介绍,8.8.2 为关键
14、帧添加ActionScript 在关键帧上添加ActionScript的方法是： （1）右击需要添加ActionScript的关键帧。 （2）从弹出的菜单中选择【动作】选项，打开帧动作面板，在右边的代码显示窗口中输入语句。,8.8.3 为按钮添加ActionScript 在Flash动画中我们常常可以看到用按钮控制动画的播放，但并不是创建了按钮元件就能控制动画，只有为按钮添加了交互语句才可以 .,8.8.4 为影片剪辑添加ActionScript Flash动画中的影片剪辑元件拥有独立的时间线，每个影片剪辑元件都有自己唯一的名称。为影片剪辑元件添加语句并指定触发事件后，当事件发生时就会执行设置
15、的语句动作。,8.8.5 stop和play语句 通过为关键帧、按钮或影片剪辑实例添加play或stop命令可以对Flash影片的播放或停止进行控制。play命令的主要功能就是能让停止的动画继续播放，它没有任何参数 .,8.8.6 goto语句 帧跳转命令goto是一种非常重要的时间轴控制命令，它主要用来控制动画播放头的跳转，主要包括gotoAndPlay和gotoAndStop这两个命令。除此之外还有nextFrame和prevFrame。利用nextFrame和prevFrame可以很容易地实现电子相册。,8.8.7 getURL语句 getURL就是flash的超级链接，因此这是一个跟浏览器密切程度很高的语句。 用法如下： getURL(“url“,“窗口“,“变量“);,8.8.8 loadMovie/loadMovieNum语句 在Flash中从外部加载SWF动画或者JPG图片，可以使用loadMovie语句或者loadMovieNum语句。 loadMovie(“url“,目标 , 变量) loadMovieNum(“url“,级别 , 变量),
