Flash CS 3 平面动画案例教程与实训 第7章 经典案例.ppt

Flash平面动画制作,第七章 经典案例,教学目标,教学重点、难点,本章小结,教学内容,教学目标,通过本章的学习，使学生掌握个人简历、公益广告、贺卡和MV。,第七章 经典案例,教学重点与难点,复杂大型动画的制作思路、制作过程、制作技巧和注意事项。,第七章 经典案例,教学内容,本章计划授课12学时,7.4 “圣诞贺卡”案例,7.5 “两只老虎MV”案例,本章小结,7.3 “环境污染”公益广告,7.1 经典动画制作,7.2“个人简历”案例,第七章 经典案例,.1 Flash 平面动画制作的概述,一、 动画概述,动画(Animating)在词典中的解释是“赋予生命”的意思，从这个意义上来讲它是一种手段，使得本来没有生命的形象活动起来，它的应用范围非常广泛，除了作为电影的一种类型（用动画工艺讲故事）之外，还有用在电影特技制作的动画、科学教育动画、介绍产品形象的广告动画、电子游戏动画、远程教育动画、网页动态信息动画等等。,7.1 经典动画制作,.1 Flash 平面动画制作的概述,二、 动画制作的技巧,1. 如何有效地管理元件和图层。 2. 如何设置动作的预备和缓冲。 3. 如何利用声音编辑软件处理声音。 4. 如何利用photoshop优化图片。 5. 如何让声音与字幕同步。,7.1 经典动画制作,本节内容,案例效果,操作步骤,技术要点,练习,7.2 “个人简历” 案例,一、案例效果,重点与难点： 个人简历的结构设计、元件的管理 。,7.2 “个人简历” 案例,二、操作步骤,1、新建文档并命名。 2、制作“与甜甜的天地相关”的元件 （1）创建“甜”、“的”、“天”“地”四个“图形”元件,如下图 （2）新建一个“影片剪辑”元件，命名为“甜甜的天地”，如下图 （3）修改“甜1”图层的第1帧“甜”字的属性，设置其为透明，在1至10帧建立运动补间，并让其“逆时针”旋转1圈；“甜2” 、“的”、,7.2 “个人简历” 案例,二、操作步骤,“天”、“地”字也要进行相应设置，最后效果如图 （4）将“甜”、“的”、“天”、“地”和“甜甜的天地”等几个元件，放置到“与甜甜的天地相关”文件夹中。,7.2 “个人简历” 案例,二、操作步骤,3制作“欢迎进入”与“返回”按钮元件。 （1）新建一个“按钮”元件，命名为“欢迎进入”。如下图 （2）新建一个“按钮”元件，命名为“返回”。效果如图7.8所示。,7.2 “个人简历” 案例,二、操作步骤,4制作“与闪烁相关”元件。 新建一个 “心” 图形元件和“闪烁” 影片剪辑元件，如下图 5制作“个人简历等文本”元件如下图 6制作“个人简历使用按钮”元件。 新建“百合花”图形元件、“旋转”影片剪辑元件和“按钮”三个元件,7.2 “个人简历” 案例,二、操作步骤,7制作“个人简历等影片剪辑”元件。 （1）利用遮罩动画制作“个人简历”影片剪辑元件，如下图 （2）使用直接复制的方法制作出“个人相册”、“联系方式”、“未来憧憬”和“兴趣爱好”等四个影片剪辑。,7.2 “个人简历” 案例,二、操作步骤,（3）新建一个“影片剪辑”命名为“相册”。 8制作“菜单”元件。 （1）新建一个“菜单”影片剪辑，各按钮引导层如图,7.2 “个人简历” 案例,二、操作步骤,（2）使用“交换元件”对话框，如下图 （3）为各个按钮添加的动作脚本如下图,7.2 “个人简历” 案例,二、操作步骤,（4）“菜单”元件各帧设置效果如下图,7.2 “个人简历” 案例,二、操作步骤,9主场景设置 （1）主场景中的图层设置和“开始”图层实例的放置位置如下图 （2）“返回”按钮的动作脚本如图,7.2 “个人简历” 案例,二、操作步骤,（3）整个文件元件的分类 10测试影片，保存文件，并导出影片,7.2 “个人简历” 案例,三、技能要点,1、个人简历的结构设计 （1）镜头的变换。 （2）动画效果的变换。 （3）动画技巧的使用。 （4）制作复杂案例时可以先制作简单的基本元件。,7.2 “个人简历” 案例,2、元件的管理 （1）复制元件。 （2）删除与重命名元件。 （3）查找空闲元件。 （4）排序元件。 （5）使用元件文件夹。,三、技能要点,7.2 “个人简历” 案例,（1）请仿照本案例的设计和制作方法制作一个个人简历动画，要求使用到运动补间动画、形状补间动画、遮罩动画和引导动画等技巧。,四、练习,7.2 “个人简历” 案例,本节内容,案例效果,操作步骤,技术要点,练习,7.3 “环境污染公益广告” 案例,一、案例效果,重点与难点： 如何设计公益广告、常用镜头和镜头切换的效果。,7.3 “环境污染公益广告” 案例,二、操作步骤,1介绍设计思路。 （1）用形容古代四大美女的 “沉鱼、落雁、闭月、羞花”一句话,来表现当前我们生活的环境污染，以此来号召人们爱护自己的家园。 （2）本案例的设计步骤 2制作片头动画。 （1）新建一个文档大小为550×400像素的文件，保存为“公益广告” （2）制作“beijing”图形元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（3）创建一个名称为“bt1”的图形元件如下图 （4）选择“直接复制”命令，制作出“护”、“环”、“境”、保”、“护”、“家”、“园”七个字的图形元件如下图 （5）创建一个名称为“bt”的影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（6）新建一个“黑条”图层，画一个500*50的矩形放在场景的底部。 （7）新建一个名字为“解说1”影片剪辑如下图 （8）新建一个 “按钮”层，按钮上代码如下,7.3 “环境污染公益广告” 案例,二、操作步骤,（9）将库面板新建的元件都放在“片头”文件夹里如图 3制作“活泼的鱼儿”画面。 （1）制作“fishbg”图形元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（2）制作“lanyu”的影片剪辑元件如下图 （3）制作“qipaopiao”影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（4）制作“lanyuyou”的影片剪辑元件 （5）制作“fish1”的影片剪辑元件如下图 （6）制作“鱼字”影片剪辑元件，将所有与鱼有关的元件都放在“yu1”文件夹里,7.3 “环境污染公益广告” 案例,二、操作步骤,4制作“翱翔的大雁”画面。 （1）新建一个“蓝天和海” 和“沙滩和椰树”图形元件如下图。 （2）“大雁”的影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（3）制作“雁和天空”的影片剪辑元件如下图 （4）将所有与大雁有关的元件都放在“雁”文件夹里。,7.3 “环境污染公益广告” 案例,二、操作步骤,（5）“雁字”影片剪辑元件如下图 5制作“明亮的月空”画面。 （1）制作“star”图形元件、“starmove”影片剪辑元件和“月0”图形元件如下图。,7.3 “环境污染公益广告” 案例,二、操作步骤,（2）制作“月动”影片剪辑元件 （3）制作“月亮”影片剪辑元件如下图 （4）将所有与星月有关的元件都放在“月”文件夹里并制作“月字”影片剪辑元件。,7.3 “环境污染公益广告” 案例,二、操作步骤,6制作“盛开的花朵”画面。 （1）制作“flower1”图形元件 、“flowerdong”影片剪辑元件和“叶子”图形元件，如下图。 （2）制作“鲜花”影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（3）将所有与花叶有关的元件都放在“花”文件夹里并制作“花字”影片剪辑元件。 7美丽环境动画制作 （1）在主场景中将“雁和天空”影片剪辑元件放在“雁”图层；将“月亮”影片剪辑元件放在“月”图层，将鲜花”影片剪辑元件放在 “花”图层。 （2）将“鱼字”、“雁字”、“月字”、“花字”放在“文字”图层。 8制作“污染现象”画面。,7.3 “环境污染公益广告” 案例,二、操作步骤,（1）制作“工厂”与“废气”图形元件如下图 （2）制作一个“烟动”影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（3）制作“一条污水”的图形元件、“污水”的影片剪辑元件和“污染动画”影片剪辑元件，如下图。 （4）制作“后来”影片剪辑元件和“污染的波纹”图形元件并将所有与污染有关的元件都放在“污染现象”文件夹里。,7.3 “环境污染公益广告” 案例,二、操作步骤,9制作“沉鱼”画面。 （1）制作“fish2”和“鱼落”的影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,10制作“落雁”画面。 （1）制作“雁子luo”、“雁和天空2”影片剪辑元件如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,11制作“闭月”画面。 12制作“羞花”画面。 13制作“共建美好的家园”画面如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,14污染后动画制作。 （1）制作“沉鱼”图层文件夹中的动画如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（2） 制作“落雁”图层文件夹中的动画如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（3）制作“闭月”图层文件夹中的动画如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,（4）制作“羞花”图层文件夹中的动画如下图,7.3 “环境污染公益广告” 案例,二、操作步骤,15添加声音。 16整理作品。,7.3 “环境污染公益广告” 案例,三、技能要点,公益广告的设计思路 2. Flash动画中的常用镜头 摇镜头 推/拉镜头,7.3 “环境污染公益广告” 案例,三、技能要点,3. 镜头切换的效果设定 镜头切换有几种方式： （1）黑屏 （2）模糊 （3）部分显示,7.3 “环境污染公益广告” 案例,请你制作一个“森林防火”的公益广告。,四、练习,7.3 “环境污染公益广告” 案例,本节内容,案例效果,操作步骤,技术要点,练习,7.4 “圣诞贺卡” 案例,一、案例效果,重点与难点： 了解分镜头脚本的绘制、动作中的预备与缓冲、多米诺骨牌式动画的设置技巧、AS脚本的运用。,7.4 “圣诞贺卡” 案例,二、操作步骤,1故事情节概述及分镜头脚本的绘制如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,2新建文档并命名。 3绘制雪球、圣诞树和雪花素材。,7.4 “圣诞贺卡” 案例,二、操作步骤,“下雪总动画”影片剪辑元件的图层设置如下图 4制作Loading动画。 （1） “载入条”影片剪辑元件,7.4 “圣诞贺卡” 案例,二、操作步骤,（2）制作小箭头、小箭头动画、载入条、字元件,小箭头动画元件如下图 （3）主场景中“as”图层，第1帧和第2帧的代码如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,5制作雪球滚动动画镜头。 （1） 制作“开头动画”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,（2） 制作“中间动画” 和“场景2背景”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,6制作雪球撞在树上镜头。 （1）制作“树”、“鸟窝”、“蛋”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,（2）制作“碰到树特写镜头”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,7制作多米诺骨牌动画镜头。 （1）制作“多米诺骨牌动画”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,（2） 制作“鸡蛋碰到多米诺牌动画总合”图形元件如下图 （3）制作“多米诺落入悬崖” 图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,8制作落到翘翘板上牌动画镜头。 （1）制作“星星动画” 影片剪辑元件如下图 （2）制作“礼炮”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,（3）制作“翘翘板”图形元件如下图 （4）制作“多米诺骨牌掉在翘翘板上镜头”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,9制作礼花动画镜头。 （1）制作“单个礼花动画”图形元件如下图 （2）制作 “礼花动画总” 图形元件 （3）制作 “放烟花动画总” 影片剪辑元件 （4）制作 “老人拉车总” 影片剪辑元件,7.4 “圣诞贺卡” 案例,二、操作步骤,10制作老人发礼物镜头。 （1）制作“圣诞帽运动动画” 和“烟雾”图形元件如下图 （2）制作“字动画”图形元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,（3）制作“圣诞老人发礼物动画总合”影片剪辑元件如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,11制作总镜头。 （1）制作“镜头总”图形元件如下图a,7.4 “圣诞贺卡” 案例,二、操作步骤,“镜头总”图形元件图b,7.4 “圣诞贺卡” 案例,二、操作步骤,12布置场景。 （1） 制作“箭头按钮” 按钮元件如下图 （2）“我要走” 按钮和“想要礼物请进”按钮的位置如下图,7.4 “圣诞贺卡” 案例,二、操作步骤,（3）“replay”按钮的位置如下图 13导入音乐。 14测试影片，保存文件，并导出影片。,7.4 “圣诞贺卡” 案例,三、技能要点,1. Flash分镜头脚本的绘画 分镜头脚本（画面剧本）是影片计划的蓝图，也是影片最初的视觉形象。 镜头分为长焦镜头和广角镜头。 为故事绘制分镜头脚本，实际上就是一个纸上谈兵的过程。,7.4 “圣诞贺卡” 案例,三、技能要点,2. 动作中的预备与缓冲 （1）预备 （2）缓冲 3. 多米诺骨牌式动画的设置技巧 多米诺骨牌动画的设置，利用的是先整体后局部的方法，主要是运用了开始播放时间的不一样从而达到很强的视觉效果。,7.4 “圣诞贺卡” 案例,四、练习,找一个有意义的故事或者漫画，根据此案例的方法制作画出分镜头脚本，制作出动画。要求要包括案例中所提到的镜头的运用、镜头的切换等效果。,7.4 “圣诞贺卡” 案例,本节内容,案例效果,操作步骤,技术要点,练习,7.5 “两只老虎MV” 案例,一、案例效果,重点与难点： 了解MV的制作流程，动画素材的准备工作、词曲同步、动画制作的技巧、MV的优化和管理。,7.5 “两只老虎MV” 案例,二、操作步骤,1新建一个文档，“帧频”为“25”，保存文档命名为“两只老虎”。 2制作“正面老虎运动”元件。 （1） “正面头” 图形元件的绘制如下图 （2）制作“正面眼睛”图形元件，该元件图层如下 （3）绘制“正面身体”图形元件，如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（4） “正面手” 图形元件的绘制如下图 （5） “正面脚” 图形元件的绘制如下图 （6）制作“老虎说话动画”影片剪辑元件,如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（7）将所有与“正面说话动画”相关的元件放到此文件夹中。 （8） 复制“正面说话动画”文件夹并改名为 “正面跑步动画”。 （9）创建“老虎正面动画”影片剪辑元件 制作“快速运动脚”影片剪辑元件如下图 改变尾巴的形状如下图 （10）复制“正面说话动画”文件夹改名为 “多只老虎唱歌情形”,7.5 “两只老虎MV” 案例,二、操作步骤,（11）创建“老虎唱歌动画”影片剪辑元件 绘制正面手第2帧的形状如下图 绘制正面脚的第2、3帧的形状如下图,7.5 “两只老虎MV” 案例,二、操作步骤,制作“老虎唱歌动画”影片剪辑元件的1、3、5、7、9、11、13帧动画如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（12） 制作“老虎唱歌集合”影片剪辑元件如下图 （13） 制作“老虎唱歌总合”影片剪辑元件如下图 （14）制作“老虎舞台表演动画”和 “老虎舞台表演集合”影片剪辑元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（15）将“老虎舞台表演总合”影片剪辑元件交换成“老虎舞台表演集合”元件。 3制作侧面老虎运动元件。 （1）制作 “老虎头”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（2）制作 “眼睛”和 “身体”图形元件如下图 （3）制作“左手”和 “右手”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（4）制作“老虎侧面动画”影片剪辑元件1、3、5、7、9、11帧动画如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（5）创建“老虎缺陷动画”文件夹 制作“老虎没有眼睛”影片剪辑元件 制作“老虎没有尾巴”影片剪辑元件 4制作镜头。 （1）制作“镜头1”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（2）制作“镜头2”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（3）制作“镜头3”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（4）制作“镜头4”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（5）制作“灯光动画”图形元件如下图 （6）制作“镜头总”图形元件 5制作片头。 （1）制作“ 片头文件”图形元件如下图,7.5 “两只老虎MV” 案例,二、操作步骤,6组织场景并添加音乐。 （1）制作“字幕”图形元件及相关操作如下图,7.5 “两只老虎MV” 案例,二、操作步骤,（2）插入及编辑音乐 7测试影片，保存文件，并导出影片。,7.5 “两只老虎MV” 案例,三、技能要点,1. MV制作的流程,7.5 “两只老虎MV” 案例,三、技能要点,2. 动画素材的准备 （1）对音乐的处理如下图,7.5 “两只老虎MV” 案例,三、技能要点,（2）编写剧本。 （3）对图片的处理。,7.5 “两只老虎MV” 案例,三、技能要点,3. 音乐与歌词的同步 （1）查看音乐的长度有两种方法。 （2）如何让音乐与歌词同时出现。 4. MV的动画制作技巧 5. MV的优化与管理 （1）“库”的管理。 （2）“图层”的管理。,7.5 “两只老虎MV” 案例,四、练习,选择一首自己喜欢的歌曲，按照本章中介绍的MV制作方法。制作出自己第一部MV作品。（要求要有一定的创意，影片素材中要有自己绘制的图形和外部导入的图片，同时做到词曲同步。）,7.5 “两只老虎MV” 案例,本章通过四个案例讲解了大型动画制作过程、制作技巧和注意事项。一般制作一个大型动画动画前期的准备工作是非常重要的，如剧本的编写、音乐和图片的采集和处理。在进行了充分的准备，设计好情节和人物以及场景的变换，各种素材准备完全之后就可以动手制作动画作品了。在制作的过程中由于所使用的元件众多，图层众多，所以要给元件和图层取一些能够代表其含义的名称，并对其进行分类管理，类似的放到相同的元件文件夹或者图层文件夹中，使作品结构清晰，元件查找方便。,本章小结,