《cc电子资源（课件）（33动画补间）》由会员分享，可在线阅读，更多相关《cc电子资源（课件）（33动画补间）（54页珍藏版）》请在金锄头文库上搜索。
1、,二维动画制作Flash CC,单元3 基本动画和元件、实例和库,任务3.3 基本动画制作,任务描述,活动 3 . 3.1 逐帧动画,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,微课资源,活动3.3.2 传统补间动画,活动3.3.3 形状补间动画,活动3.3.4 创建补间动画,活动3.3 .1 逐帧动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【任务描述】,制作风云变幻效果的逐帧动画。,【学习目标】,（1）了解图片的导入。 （2）了解运用对齐面板设置图片的对齐方式。 （3）掌握插入关键帧与插入空白关键帧的区别。,微课资源,【分析与设计】,（1）图片
2、导入到库后按照图片的顺序逐一从库中拖曳至对应的空白关键帧处。 （2）设置图片的对齐方式。,1导入静态图片,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,新建一个Flash CC actionscript3.0文档，舞台大小设定为“640360像素”。 执行“文件导入导入到库”命令，在弹出的对话框中选择路径为“素材第3单元3.3天空图片”，将所有的文件全部选中，单击“打开”按钮，可将所有的文件全部导入到库中。 在第1帧中将库中“1.jpg”拖拽到舞台，打开“对齐”面板，选中“与舞台对齐”复选框，设置“对齐”为“水平中齐”，“分布”为“垂直居中分布”。 在第2
3、帧中插入空白关键帧，将库中“2”拖入舞台中，打开“对齐”面板，选中“与舞台对齐”复选框，设置“对齐”为“水平中齐”，“分布”为“垂直居中分布”。 按照步骤4的方法，依次将“332”分别拖入第3帧至第32帧。 （6）测试影片，即可看到“风云变幻的天空”动画效果，如图3-21所示。,活动3.3 .1 逐帧动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,图3-21天空效果图,活动3.3.1 逐帧动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【总结提升】,运用静态图片制作逐帧动画应依次放置在连续的关键帧中。 由于各张静态
4、图片只有较细微的差别，一定要设置好对齐方式。 如果需要延长各关键帧的播放时间，可以在其后插入普通帧。,微课资源,活动3.3 .1 逐帧动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【任务描述】,微课资源,2绘制矢量图,【学习目标】,【分析与设计】,运用绘制矢量图的方法,制作烟雾效果,掌握利用铅笔工具和颜料桶工具绘制作图形。,（1）分别运用铅笔工具绘制烟雾外轮廓，颜料桶工具填色。 （2）空白关键帧的插入。,活动3.3 .1 逐帧动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,新建一个Flash CC actionscript
5、3.0文档，舞台大小设定为“100100像素”。舞台颜色为（#666666） 利用铅笔工具绘制烟雾外轮廓，选择“颜料桶工具” ，给密封的外轮廓填入颜色。 双击轮廓线，按键盘的“Delete”键删除轮廓线 (4)测试影片，即可烟雾的动画效果，步骤如图3-22图3-29。,图3-22 图3-23 图3-24,图3-25,图3-26 图3-27,图3-28 图3-29,活动3.3.1 逐帧动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【总结提升】,由于每个关键帧处所对应的图形都不同，在绘制不同的图形时，需要先在规定的时间轴上插入空白关键帧，再绘制所对应的图形。如果需要将
6、关键帧转换为空白关键帧，只需要将关键帧处的图形删除即可。,微课资源,活动3.3 .1 逐帧动画,任务描述,活动3.3.2 传统补间动画,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,微课资源,任务3.3 基本动画制作,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【任务描述】,制作具有淡入淡出效果、移动效果、缩放效果、旋转效果、颜色变幻效果的杜鹃花图片画册。,微课资源,【课前预习】,尝试打开软件，新建一个Flash CC actionscript3.0文档，然后找到时间轴面板，在时间轴面板的时间线插入关键帧，在第一帧处，利用矩
7、形工具绘制一个长方形，在第20帧处插入关键，在1-20帧中的任意一帧处单击右键，创建传统补间动画，观察动画是否成功，中间的补间是什么颜色，库面板里有何变化。,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【学习目标】,1了解图片文件的导入。 2了解图形元件的转换。 3掌握帧、关键帧、空白关键帧插入的方法。 4掌握新建图层及图层的重命名。 5掌握透明度、位置、旋转、色调的设置。,微课资源,【分析与设计】,1设置两关键帧处所对应元件的不同Alpha值来实现淡入淡出效果。 2设置两关键帧处所对应元件的不同位置来实现图片的移入效果。 3设置两关键帧处所对应元件的不同的大小来实现
8、缩放效果。 4设置两关键帧间放置的次数来实现旋转效果。 5设置两关键帧处所对应元件的不同色调来实现颜色变幻效果。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,1.新建一个Flash CC actionscript3.0文档，舞台大小设定为“1280720像素”。 2.执行“文件导入导入到库”命令，导入路径为“素材第3单元3.3风景图”中的素材图片，如图3-30所示。,图3-30 导入后库中的素材图片,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,将
9、库中的图片“1”拖至舞台中，利用对齐面板设置对齐方式，使之与舞台大小完全重合，并将图层名称改为“风景1”将1图片选中，按“F8”键将其转换成名为“风景1”的图形元件，如图3-31所示。,图3-31 转换为图形元件,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,在第10帧中按“F6”键插入关键帧，选中第1帧中的图片，然后在“属性”面板的“色彩效果”区域单击“样式”下拉按钮，在其下拉列表框中选择“Alpha”选项，将“Alpha”值设为“0%”，如图3-32所示。,图3-32设置透明度,6选中第1帧至第10帧中的任意一帧
10、，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令，创建图片淡入的效果。 7新建图层2，将其改名为“风景2”，在第11帧处插入空白关键帧。 8将库中的图片“2”拖至舞台中，利用对齐面板设置对齐方式，使之与舞台大小完全重合。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,将图片“2”选中，按“F8”键将其转换成名为“风景2”的图形元件。在第20帧中按“F6”键插入关键帧，选中第20帧中的图片，然后在“属性”面板的“色彩效果”区域单击“样式”下拉按钮，在其下拉列表框中选择“Alpha”选项，将“Alpha”值设为
11、“0%”。选中第11帧至第20帧中的任意一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令，创建图片淡出的效果，如图3-33所示。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,图3-33淡出效果图,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,新建图层3，将其改名为“风景3”，在第21帧处插入空白关键帧。 将库中的图片“3.jpg”拖至舞台中，利用对齐面板设置对齐方式，使之与舞台大小完全重合。 将图片“3”选中，按“F8”键将
12、其转换成名为“风景3”的图形元件。 在第30帧处插入关键帧，选中第21帧中的图片，按住“shift”键后将其拖至舞台左侧之外的区域。 选中第21帧至第30帧中的任意一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令，创建图片移入的效果，如图3-34所示。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,图3-34 移入效果图,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,新建图层4，将其改名为“风景4”，在第31帧处插入空白关键帧
13、。 将库中的图片“4.jpg”拖至舞台中，利用对齐面板设置对齐方式，使之与舞台大小完全重合。 将图片“4”选中，按“F8”键将其转换成名为“风景4”的图形元件。,。,图3-35设置缩放比例,在第40帧处插入关键帧，选中第31帧中的图片，执行“窗口变形”命令，弹出“变形”面板，在面板中对长宽缩放比例进行约束，缩放比例为“30%”,如图3-35所示,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,图3-36放大效果图,选中第31帧至第40帧中的任意一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令，创建图片逐渐
14、放大的效果，如图3-36所示。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,新建图层5，将其改名为“风景5”，在第41帧处插入空白关键帧。 将库中的图片“5.jpg”拖至舞台中，利用对齐面板设置对齐方式，使之与舞台大小完全重合。 将图片“5”选中，按“F8”键将其转换成名为“风景5”的图形元件。 在第50帧处插入关键帧，选中第41帧至第50帧中的任意一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令。 在“属性”面板的“补间”区域单击“旋转”下拉按钮，在其下拉列表框中选择“顺时针”选项，将值设为“1”，
15、如图3-37所示，实现旋转效果。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,图3-37 旋转方向及次数设置,将库中的图片“6.jpg”拖至舞台中，利用对齐面板设置对齐方式，使之与舞台大小完全重合。将图片“6”选中，按“F8”键将其转换成名为“风景6”的图形元件。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,翻转预习,【操作步骤】,微课资源,在第60帧中按“F6”键插入关键帧，选中第51帧中的图片，然后在“属性”面板的“色彩效果”区域单击“样式”下拉按钮，在其下拉列表框中选择“色调”选项，将“色调”、“红”、“绿”、“蓝”值分别设为“50%”、“119”、“116”、“123”，如图3-38所示。,图3-38 色调的设置,31.选中第51帧至第60帧中的任意一帧，单击鼠标右键，在弹出的快捷菜单中执行“创建传统补间”命令,实现颜色变幻的效果。,活动3.3.2 传统补间动画,任务描述,学习目标,分析与设计,操作步骤,总结提升,微项目,
