大学 flash 形状补间动画与传统补间动画制作步骤

游戏人物入场动画制作步骤：1.新建文件：宽和高：390，699 帧频：35导入到舞台：105201.jpg导入到库：105202.png--105206.png第180帧：插入帧（F5）2.图层2：从库面板将105202.png 拖入场景将拖入的图像转换成图形元件“墨点”，调整大小和位置，属性面板设Alpha为0%第20帧插入关键帧，调整元件大小，属性面板设“色彩效果”为“无”第1帧右击选“创建传统补间”3.图层3：第10帧插入关键帧，拖入“墨点”元件，调大小位置，属性面板设Alpha为0%第20帧插入关键帧，调元件大小，属性面板设Alpha为50%第28帧插入关键帧，调元件大小，属性面板设Alpha为50%在第10帧、第20帧位置右击，“创建传统补间”4.图层4：第15帧插入关键帧，拖入“墨点”元件，调大小位置，属性面板设Alpha为0%第25帧插入关键帧，调元件大小，属性面板设Alpha为50%第33帧插入关键帧，调元件大小，属性面板设Alpha为50%在第15、25帧位置右击，“创建传统补间”5.图层5：第33帧插入关键帧，拖入105203.png，将拖入的图像转换成图形元件“花与仙鹤模糊”，调大小位置，属性面板设Alpha为0%第48、54帧插入关键帧，调元件大小位置，属性面板设“色彩效果”为“无”第58帧插入关键帧，调元件大小，属性面板设Alpha为0%在第33、48、54帧位置右击，“创建传统补间”6.图层6：第48帧插入关键帧，拖入105204.png，将拖入的图像转换成图形元件“花与仙鹤”，调大小位置，属性面板设Alpha为0%第54帧插入关键帧，调元件大小位置，属性面板设“色彩效果”为“无”在第48帧位置右击，“创建传统补间”7.图层7：第25帧插入关键帧，拖入105205.png，将拖入的图像转换成图形元件“人物模糊”，调大小位置，属性面板设Alpha为0%第40、45帧插入关键帧，调元件大小位置，属性面板设“色彩效果”为“无”第49帧插入关键帧，调元件大小，属性面板设Alpha为0%在第25、40、45帧位置右击，“创建传统补间”8.图层8：第40帧插入关键帧，拖入105206.png，将拖入的图像转换成图形元件“人物”，调大小位置，属性面板设Alpha为0%第45帧插入关键帧，调元件大小位置，属性面板设“色彩效果”为“无”在第40帧位置右击，“创建传统补间”闪光动画制作步骤：1、打开素材文件：932.fla ，双击场景中的“书动画”元件进入元件编辑状态。

FLASH实例练习--传统补间和形状补间动画教学提纲
F L A S H实例练习--传统补间和形状补间动
画
精品资料
实例一：字母动画
1、新建舞台，设置舞台大小和背景颜色，帧频为12
2、用文字工具“welcome”，将字母打散，调整各个字母的颜色，选中所有字
母右键选择分散至各个图层，分别选中各个字母转换为图片元件
3、选中W图层，在12帧处打一个关键帧，调整12帧处的位置，ALPHA
值，做出飞入淡入效果，在任意帧处右键选择传统补间动画，选中任意帧，在帧属性面板上选择补间-旋转，做出旋转效果
4、选中E图层，将第1帧移至第13帧，在25帧处打一个关键帧，照以上步
骤给E字母做出旋转淡入飞入效果
5、将各个字母依次做出旋转淡入飞入效果
6、用传统补间动画为各字母做出变色效果，结尾做出放大淡出效果
实例二：摇摆的坠子
1、新建舞台610*320，舞台色黑色，帧频为30
2、用矩形工具绘制圆角方块，填充色为线性渐变，第一个色标
（64,146,200），第二个色标（112,158,203），第三个色标
（255,255,255），笔触为4，边框为线性渐变，第一个色标
（191,191,191），第二个色标（255,255,255），第三个色标
（200,200,200），第四个色标（64,64,64），圆角参数为5
3、用线条和椭圆工具来绘制连接绳子，最后将图形转换为图形元件
4、新建图层，命名为背景，拖至最下层，从文件-导入-导入到舞
台，导入背
景图片
仅供学习与交流，如有侵权请联系网站删除谢谢2。

Flash的传统动作补间和新的动作补间详解2008年9月，Adobe公司发布了新版本的Flash “Adobe Flash CS4 Professional”，从这个版本开始，Flash动画技术有了很大的变革。

其中主要包括“3D工具”、“骨骼工具”和新的动作补间形式。

请朋友们注意，以上这些动画技术都需要ActionScript 3.0支持。

因此，在新建动画文件的时候，要选择创建“ActionScript 3.0”文档,发布设置的时候，选择最新版本的播放器。

形状补间动画，新旧版本Flash的制作方法是一样的。

但是动作补间动画发生了很大的变革，在旧版本的Flash中，创建动作补间动画，一个变化必须由首尾2个关键帧完成，开头关键帧是变化的初始状态，结尾关键帧是变化的最终状态，首尾2个关键帧之间的变化过程由电脑自动运算完成；目前新版本的Flash 中，在保留了传统动作补间的制作方法的基础之上，增加了新的创建动作补间的方法。

在新版本Flash中（比如Flash Professional CS6简体中文版），传统动作补间叫做“传统补间”，新的动作补间叫做“补间动画”。

现在的动作补间动画，只需要开头一个关键帧，便可以“创建补间动画”，把元件实例放入这个关键帧的舞台中，就可以在后面增加适量的普通帧进行动画制作。

在任意一个普通帧中，都可以任意调整元件实例各种状态，比如二维位置、三维位置、缩放、色彩、二维旋转、三维旋转、透明度等等，调整完毕Flash会自动为这个普通帧加上菱形的“属性关键帧”标志。

如果实例有位置的变化，舞台中会显示实例的运动路径（相当于传统引导线动画中的引导线），我们可以任意修改这个路径。

新版本Flash增加了“动画编辑器”面板，在动画编辑器面板里能更加灵活、方便地设置属性关键帧、调整实例的各种属性、设置各种缓动等等。

如图XXX所示：图XXX 新版Flash补间动画界面。

简述制作形状补间动画的步骤
形状补间动画是一种将形状元素之间的交互效果用动画实现的
方法。

以下是制作形状补间动画的步骤:
1. 定义形状补间动画的类型:根据动画的要求,确定形状补间动画的类型,例如平移、旋转、缩放等。

2. 选择基础形状:根据要求选择基础形状作为动画的基础形状。

3. 绘制关键帧:绘制出需要用作补间动画的关键帧,通常需要选择多个关键帧以创建复杂的动画效果。

4. 定义动画参数:定义动画参数,例如运动方向、速度、加速度等,以确保形状之间的交互符合要求。

5. 编写动画脚本:编写动画脚本,包括实现补间动画的方法和参数。

6. 渲染动画:将动画渲染到视频或图像中。

7. 调整动画效果:调整动画参数和渲染结果,以获得所需的动画效果。

需要注意的是,形状补间动画的最佳效果取决于设计的复杂度和要求。

因此,在制作动画之前,应该仔细考虑并定义所需的动画效果。

心之所向，所向披靡
形状补间动画制作步骤(圆形→五角星)：
1.创建动画文件：
启动flash程序，打开“文件”——“新建”命令；
2.创建动画起始关键画面：
●选择工具栏中的“椭圆工具”，设置笔触颜色为“关”状态、填充颜色为“蓝色”，如图1：
图1
●按住“Shift”键，在工作区上按下鼠标左键并拖出一个正圆形，圆形大小自行确定；
3.创建动画结束关键画面：
●用鼠标右键在时间轴的第40个帧格处单击，在弹开的菜单中选择“插入关键帧”；
●用鼠标左键长按工具栏中的“矩形工具”，在展开的工具菜单中选择“多角星型工具”（如图2），
在工作区上单击一下鼠标左键，选择设置属性面板中的“选项”按钮，在弹出的对话框中进行如下图3设置；
图2
图3
●设置完成后关闭对话框，并用鼠标在工作区（40帧格对应的工作区）上拖出一个五角星；
4.创建动画补间：
●用鼠标右键单击时间轴的第一个关键帧，在弹出的菜单中选择“创建补间动画”，如图4；
●用鼠标右键单击时间轴的第二个关键帧，在弹出的菜单中选择“创建补间动画”，如图5；
图5
●按Ctrl +“回车”组合键预览影片效果。

●选择“文件”—“导出”—“导出影片”菜单命令，为动画影片文件找到保存的路径，为动画影
片文件命名，然后点击“保存”按钮。

勤劳的蜜蜂有糖吃
备注：如果要设置文字的形变，要先将文字转换成形状：对文字进行“修改”→“分离”菜单命令的设置。

《Flash动画制作课程》两种补间动画教案第一章：补间动画概述1.1 补间动画的概念1.2 补间动画的作用1.3 补间动画的类型1.4 补间动画的制作流程第二章：传统补间动画2.1 传统补间动画的原理2.2 传统补间动画的制作步骤2.3 传统补间动画的关键帧设置2.4 传统补间动画的调整与优化第三章：补间形状动画3.1 补间形状动画的概念3.2 补间形状动画的制作步骤3.3 补间形状动画的调整与优化3.4 补间形状动画的应用实例第四章：补间动画的制作技巧4.1 补间动画的制作注意事项4.2 补间动画中的关键技巧4.3 补间动画与传统动画的结合4.4 补间动画在实际项目中的应用第五章：补间动画的综合实践5.1 实践项目一：制作简单的传统补间动画5.2 实践项目二：制作补间形状动画5.3 实践项目三：结合补间动画与传统动画制作复杂动画5.4 实践项目四：制作补间动画广告第六章：补间动画的性能优化6.1 补间动画性能影响因素6.2 优化补间动画的步骤6.3 常用的性能优化技巧6.4 性能优化在实际项目中的应用第七章：补间动画与交互设计7.1 补间动画在交互设计中的应用7.2 交互式补间动画的制作步骤7.3 常用的交互设计元素及效果7.4 交互式补间动画的实际项目案例第八章：补间动画在游戏制作中的应用8.1 补间动画在游戏制作中的重要性8.2 游戏中的常见补间动画类型8.3 游戏补间动画的制作流程8.4 游戏补间动画的实际应用案例第九章：补间动画在移动端应用的制作9.1 移动端补间动画的特点9.2 移动端补间动画的制作工具9.3 移动端补间动画的制作步骤9.4 移动端补间动画的实际项目案例第十章：补间动画的创新与拓展10.1 补间动画的新技术与发展趋势10.2 补间动画在虚拟现实中的应用10.3 补间动画在增强现实中的应用10.4 补间动画的创新实践与拓展思路重点和难点解析重点一：补间动画的原理和作用解析：理解补间动画的基本原理对于制作高质量的动画至关重要。

Flash四种动画的基本步骤Flash 动画包括逐帧动画、动作补间动画、形状补间动画、遮罩动画、引导线动画等。

（一）逐帧动画逐帧动画是一种常见的动画形式，其原理是在“连续的关键帧"中分解动画动作，即在时间轴的每个关键帧上逐帧绘制不同的内容，使其连续播放而成动画.逐帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容，很适合于表演细腻的动画。

但因每个关键帧上的内容不一样，增加了动画制作负担，且使最终输出的文件体积很大。

实例:打字效果(1)新建一个 Flash 文件,展开 Flash 窗口下端的文档属性面板或在舞台上单击右键，在右键菜单中选择“文档属性"，设置舞台的宽 500 像素、高 200 像素，背景色为黑色. （2）选中第一帧，选取文本工具,在属性面板上设置字体为“楷体” 、字号“ 72 ”、颜色“白色”、粗体,键入“教育技术学"六个字；并设置它的位置相对于舞台居中对齐（选择“窗口”主菜单的“设计面板”，调出“对齐"面板。

在“对齐"面板上先把“相对于舞台"五字下方的按钮单击成白色，再分别单击“水平中齐”和“垂直中齐").（3）选中文本，在按住 Ctrl 键的同时，单击 B 键，把组合在一起的文字分解，并分别在第 10 、 20 、 30 、 40 、 50 帧插入一个关键帧。

若连续单击 B 键两次，则把文字打散。

（4)选中第 1 帧,将五个文字全部删除。

(5）选中第 10 帧，将后四个文字删除，留下一个“教”字.选中第 20 帧，将后三个文字删除，留下“教育”两字.选中第 30 帧,将后二个文字删除,留下“教育技” 三字。

选中第40 帧，将后一个文字删除,留下“教育技术"四字。

（6)在第 60 帧插入普通帧.测试效果,观看效果。

（二）补间动画Flash 中的补间动画有两种:一种是动作补间动画;另一种是形状补间动画。

Flash动画分类及其制作方法位置移动:汽车、飞机运动补间角度变换:表针、单摆动画类型形状补间:圆形变为矩形逐帧动画:横幅广告1、运动补间动画——例1:圆球的运动第一步执行“文件”?“新建”命令或单击常用工具栏中的新建按钮。

第二步利用工具栏中椭圆工具在舞台上画一个圆(可以利用填充工具，使圆产生立体感)。

第三步利用选择工具选定整个圆的图形，然后，鼠标指向圆的图形单击右键，选择“转换为元件”，出现对话框，选择“图形”，单击确定。

第四步鼠标指向时间轴中第30帧单击右键，弹出菜单，选“插入关键帧”，然后拖动舞台上的圆球到舞台右边适当位置。

第五步鼠标指向时间轴中第1,30帧之间单击右键，弹出菜单，选“新建补间动画”。

然后，按回车播放。

试一试:操练与练习——圆球在运动过程中由大变小操练与练习——圆球在运动过程中颜色淡化 2、运动补间动画——例2:文字的变幻第1步单击工具栏中的文字工具A第2步在舞台内划一个文字输入区域，输入文字“Flash带你进入精彩世界” 第3步选定输入的文字，鼠标指向文字单击右键，选择“转换为元件”，出现对话框，选择“图形”，单击确定。

第4步鼠标指向时间轴内第30帧击右键，弹出菜单，选“插入关键帧”。

然后，利用箭头工具选择输入的文字，再单击菜单栏中的“窗口”?“设计面板”?“变形”，出现对话框，在比例栏中输入200。

第5步选择舞台上的文字，单击属性面板中颜色下拉框，选Alpha，设置其右边的数值为10%第6步鼠标指向时间轴内第1,30帧之间单击右键，弹出菜单，选“创建补间动画”。

按回车播放。

3、运动补间动画——例3:直线的旋转第1步利用工具栏中直线工具画一条直线。

选择箭头工具，鼠标指向直线单击右键，选择“转换为元件”，出现对话第2步框，选择“图形”，单击确定。

第3步利用箭头工具选择上输直线，然后中心点单击工具栏中“任意变形工具” ，利用鼠标拖动直线中心点到直线底端。

第4步鼠标指向时间轴内第30帧击右键，弹出菜单，选“插入关键帧”，再单击菜单栏中的“修改”?变形?旋转，鼠标指向直线顶端控制点，拖动鼠标使直线旋转到适当位置。

画。

制作步骤：1.单击层名称，使之成为当前层，选择层中的某一关键帧作为动画的起点。

2.创建图形，可以使用绘图工具直接绘图，也可以从剪板板粘贴图象或导入图象。

3.单击右边的下一帧，鼠标右键点击→在弹出菜单中选择插入关键帧命令或按F6键4.修改舞台上的内容5.重复步骤4、5，完成所有关键帧。

（如果我们担心有些帧之间图形的位置间隔不太恰当，可以打开灯箱显示模式，来查看各帧的相对效果，）5.3 绘图纸显示模式通常情况下，Flash一次只显示动画序列中的一个帧。

如果用户需要定位和编辑多个帧或调节帧之间图形的位置间隔，可以使用绘图纸显示模式，来查看多个帧各帧的相对效果。

在绘图纸显示模式下时间轴中的各帧像隔着一层透明绘图一样重叠显示。

绘图纸功能的使用：•分布式：选择该项在创建动画时所产生的中间形状将平滑而不规则•角形：选择该项在创建动画时将在中间形状中保留明显的角和直线注意：•变形对象必须在一个图层上，否则不能形成补间动画。

•要对组合体、实例、文本、位图图象应用补间形状动画，必须首先将这些元素打散。

二.控点的运用控点的作用：在补间形状动画的起始和结束帧中设置控点以便对变形过程进行人为的控制。

设置控点方法：1.选择变形动画序列中的第一个关键帧，执行【修改】→【变形】→【添加形状提示】命令，则在变形对象的正中央有一个红色小圈，内部标有字母2.将变形提示移动到要标记的点。

按照同样的方法添加和设置其他的变形提示。

3.选择下一个关键帧，用鼠标按住控点，拖动变形提示到标记的位置。

注意：•设置控点时一定要排列好各控点的位置。

在原始图形和要补间的图形中控点的顺序应该一致。

•控点编号从a到z最多可以设置27.控点。

•确保形状提示是符合逻辑的。

例如，如果在一个三角形中使用三个形状提示，它们的顺序不能在第一个关键帧中是 abc，而在第二个中是 acb。

实验三（2） FLASH ——变形动画及传统补间动画制作实验目的：1、熟悉FLASH 中建立元件和制作动作补间动画的一般步骤；2、熟悉制作形状补间动画的一般步骤。

3、通过实例制作，掌握动作补间动画和形状补间动画的制作要点和区别。

实验内容：1、 制作“变形字”形状补间动画；2、 制作“月亮绕地球”引导线动画。

实验步骤：一、变形字制作步骤1、打开FLASH 程序，建立新的FLASH 文档，进入FLASH 工作界面。

2、单击属性栏中，大小后面的按钮，打开文档属性对话框，设置文档的宽为：500PX ，高为：200PX 。

选择红色作为背景颜色。

3、选择工具箱中的文本工具，在“属性”栏设置文本的字体、字号和颜色如下图所示。

4、在画布左边输入文本“F ”，点击黑箭头工具，选中文本“L ”，按“CTRL+B ”把文本打散成图形。

5、在图层右边时间轴的第10帧，单击右键，插入关键帧，按“Delete ”删除“F ”。

6、选择工具箱中的文本工具，在原字稍右方输入文本“L ”， 按“CTRL+B ”把文本L 打散成图形。

7、在第1～10之间任意帧单击，在最下方的“属性”栏中，单击“补间”项后面的按钮，选择“形状”。

即可实现从F 到L 的变形动画。

8、用同样的方法，输入其他文本并打散，完成后面的变形字。

9、按“ENTER ”键预览，如果不需要修改，执行“文件－另存为”，在弹出的对话框中输入文件名“实验3-2变形字”，保存为源文件。

10、执行“文件－导出－导出影片”命令，在弹出的“导出影片”对话框中，选择文件保存的位置，输入文件名“实验3－2变形字”，把文件导出成FLASH影片（*.swf）的格式。

二、月亮绕地球制作步骤1、打开FLASH程序，建立新的FLASH文档，进入FLASH工作界面。

2、单击文档属性中“背景”右下方的黑色三角形按钮。

弹出色版中，选择深蓝色作为太空的颜色。

3、按“CTRL+F8”建立新元件，新元件名称：月亮；行为：图形。

补间形状与补间动画内容一、补间形状——窗帘飘动步骤如下：一、创建影片文档和制作动画背景1、新建一个flash 8影片文档，设置舞台背景颜色为淡蓝色，其他保持默认。

2、将“图层1”从新命名为“风景”，执行【文件】→【导入】→【导入到舞台】命令，将外部图像文件“风景.jpg”导入到场景中。

将风景图片缩小到合适尺寸，选择第80帧，按F5键，增加一个普通帧，以延伸风景图片。

3、新添加一个图层，并将这个图层重新命名为“窗户”。

在这个图层上，选择工具箱中的【矩形工具】，设置“笔触颜色”为无，“填充色”为淡黄色，在场景中绘制出一个长方形的窗帘盒。

选择【矩形工具】，设置“笔触颜色”为淡蓝色，“填充色”为无，线条粗细为2.5，在舞台上绘制出窗框的形状，再用【线条工具】绘制窗框上的一些线条，画窗框时，要注意保持对称，如图1所示：图14、选择“窗户”图层的第80帧，按F5键插入帧。

二、创建“窗帘”图形元件1、执行【插入】→【新建元件】命令，新建一个名为“窗帘”的图形元件。

2、进入新元件的编辑场景，选择【矩形工具】，设置“笔触颜色”为黑色，“填充色”为无，在场景中绘制出一个矩形，再用【线条工具】在矩形上绘制几道线条，如图2所示：图2 图33、打开“混色器”面板，在其中选择填充类型为“线性”，在颜色条下，设置3个色块，从左到右，依次设置为灰色（#c8c8c8）、白色（#fafafa）和灰色（#c4c4c4）,设置如图3所示：4、选择【颜料桶工具】，选择“选项”中的【封闭大空隙】命令。

这样填充以后，窗帘就形成几个颜色快，给人感觉是柔软的纱帘在垂下时形成的褶皱，如图4所示：图4 图55、按【delete】键把轮廓线条删除，并用【选择工具】调整窗帘的形状，然后，选择整个窗帘形状，执行【修改】→【形状】→【优化】命令，使它变得有一定弧度，比较圆滑，如图5所示：6、分别选择第35帧和第80帧，分别插入关键帧，然后建立第1帧到第35帧之间的补间形状，第35帧到第80帧之间的补间形状。

99 击两端的颜色手柄进行设置，其中一个指针为“红色”，一个指针为“白色”。

步骤4：利用“油漆桶”工具单击圆形图片左上角，单击前后的图形，如图4-81所示。

步骤5：在第2帧处用鼠标右键单击，在弹出快捷菜单中选择“插入关键帧”选项，重复该动作，在第1个关键帧后面添加多个关键帧，并分别将圆拖到舞台不同的位置。

步骤 6：单击“时间轴”面板下方的“编辑多个帧”按钮，再单击“修改绘图纸标记”按钮，在弹出的菜单中选择【标记整个范围】命令，如图4-82所示。

步骤7：执行【编辑】/【全选】命令，此时舞台效果如图4-83所示。

在“属性查看器”中，单击“将宽度值和高度值锁定在一起”按钮，设置图像宽度和高度按等比例缩放。

步骤8：单击舞台上的圆，按照圆的抛体运动轨迹进行调整，如图4-84所示。

图4-82 利用“绘图纸工具”选择所有帧 图4-83 调整位图大小 图4-84 球的抛体运动轨迹步骤9：将时间轴的播放控制线定位在第一帧，按【Enter 】键预览动画效果。

4.3.2 补间动画的制作补间动画是同一个对象在两个关键帧中大小、位置、旋转、倾斜、透明度等属性的变化，关键在于创建补间帧序列的开始帧和结束帧。

补间动画只能使用实例、元件、文本、组合与位图作为动画对象，并且补间动画的关键帧中只能有一个对象，而矢量图形需要先转变成元件，才能运用补间动画。

用Adobe Flash CS6创建补间动画除了采用传统补间，即首先确定开始帧和结束帧，由计算机自动完成补间动画过渡帧的方式外，还可以采用基于动画对象的“创建补间动画”模式：先确定补间帧序列的开始帧，通过移动改变对象的物理属性，同时依托运动路径轨迹的贝塞尔曲线调整和缓动来设置动画效果。

1．“传统补间”动画的制作步骤步骤1：执行【文件】/【新建】命令，新建一个Flash 文档。

步骤2：单击“时间轴”面板下方的“新建图层”按钮，新建3个图层：实验台1层、实验台2层、小球层，如图4-85所示。