1计算机动画技术4.1 计算机动画概述 传统动画传统动画： 通常认为第一部动画影片是由通常认为第一部动画影片是由J.StewartJ.Stewart BlacktonBlackton于于19061906年创作年创作的的滑稽脸的幽默面滑稽脸的幽默面。 1946 1946年美国创作第一部长篇真年美国创作第一部长篇真人与动画合演的动画片人与动画合演的动画片南方之歌南方之歌。制作流程制作流程制作流程制作流程：根据剧本中的人物和活动场景，先用铅笔画在动：根据剧本中的人物和活动场景，先用铅笔画在动画纸上，然后用钢笔把线条描在透明的化学板画纸上，然后用钢笔把线条描在透明的化学板( (赛璐璐赛璐璐) )上，上，再用毛笔在化学板的反面涂上各种颜色。把已绘制好的背景再用毛笔在化学板的反面涂上各种颜色。把已绘制好的背景和人物合在一起，放在平面的摄影台上，由摄影师一张一张和人物合在一起，放在平面的摄影台上，由摄影师一张一张地拍成电影胶片，再冲洗出电影影像。地拍成电影胶片，再冲洗出电影影像。2计算机动画技术 在拍摄动画片在拍摄动画片大闹天宫大闹天宫时，几十位动画时，几十位动画工作者花了近两年的时间才完成，其中绘制工作者花了近两年的时间才完成，其中绘制了了600600多万张图画。多万张图画。 美国迪士尼公司于美国迪士尼公司于19371937年创作的第一部长达年创作的第一部长达8383分钟分钟的大型动画片的大型动画片白雪公主和七白雪公主和七个小矮人个小矮人，共绘制了两亿张，共绘制了两亿张草图，最后用来拍摄的图画草图，最后用来拍摄的图画有有250000250000张。张。4.1 计算机动画概述3计算机动画技术 计算机动画计算机动画：19641964年年,Bell,Bell实验室的实验室的Ken Ken KnowltonKnowlton博士制作了第一部计算机动画片。博士制作了第一部计算机动画片。 19711971年，被称为计算机动画之父年，被称为计算机动画之父Nestor Nestor BurtnykBurtnyk和和MarceliMarceli WeinWein 提出了提出了计算机产生计算机产生关键帧动画关键帧动画技术技术, ,并应用该技术开发了并应用该技术开发了MSGENMSGEN二维动画系统。二维动画系统。 玩具总动员玩具总动员 恐龙恐龙 泰坦尼克号泰坦尼克号4.1 计算机动画概述4计算机动画技术一、什么是计算机动画一、什么是计算机动画 动画动画是通过一定速度播放的连续画面来是通过一定速度播放的连续画面来显示运动和变化的过程。其含义有：显示运动和变化的过程。其含义有： 播放速度：播放速度：2424f/sf/s、25f/s25f/s、30f/s30f/s 运动过程：动画的本质运动过程：动画的本质 变化过程：色彩变化、光强变化变化过程：色彩变化、光强变化4.1 计算机动画概述 计算机动画计算机动画是借助于计算机生成一系列是借助于计算机生成一系列连续图像并动态播连续图像并动态播放的计算机技术。放的计算机技术。5计算机动画技术 第二级第二级：实现中间帧的计算：实现中间帧的计算 第三级第三级：提供形体的操作：提供形体的操作( (平移、旋转平移、旋转) ) 虚拟摄像机的操作虚拟摄像机的操作( (镜头推移镜头推移) ) 第四级第四级：定义角色：定义角色 第五级第五级：智能动画系统：智能动画系统( (自学习能力自学习能力) )4.1 计算机动画概述二、计算机动画的分类二、计算机动画的分类 1.1.按动画的系统功能分类按动画的系统功能分类 第一级第一级：用于交互产生、着色、存储、：用于交互产生、着色、存储、检索和修改图像，不考虑时间检索和修改图像，不考虑时间( (图像编辑器图像编辑器) )6计算机动画技术 2. 2.按动画的制作原理分类按动画的制作原理分类 二维动画二维动画( (计算机辅助动画计算机辅助动画) ) 二维动画可实现中间帧生成，即根据两二维动画可实现中间帧生成，即根据两个关键帧生成所需的中间帧个关键帧生成所需的中间帧( (插补技术插补技术) )。4.1 计算机动画概述 二维动画系统的功能二维动画系统的功能( (第二级第二级) ) 中间帧画面生成中间帧画面生成 着色着色 预演预演 后期制作后期制作7计算机动画技术 三维动画三维动画( (计算机生成动画计算机生成动画) ) 三维动画是采用计算机技术来模拟真实三维动画是采用计算机技术来模拟真实的三维空间的三维空间( (虚拟真实性虚拟真实性) )。4.1 计算机动画概述 三维动画系统的功能三维动画系统的功能( (第三、四级第三、四级) ) 定义角色定义角色 构造几何造型构造几何造型 设置运动和灯光设置运动和灯光 调整材质和贴图调整材质和贴图 生成连续画面生成连续画面8计算机动画技术三、计算机动画的应用三、计算机动画的应用 1.1.影视广告影视广告 主要用于制作电视广告、电视片头、卡主要用于制作电视广告、电视片头、卡通片、电影片头和电影特技等。通片、电影片头和电影特技等。 电视广告电视广告：计算机动画可制：计算机动画可制作出神奇的视觉效果，以取得特作出神奇的视觉效果，以取得特殊宣传效果和艺术感染力。殊宣传效果和艺术感染力。 玩具总动员玩具总动员：没有真人演员表演的故事：没有真人演员表演的故事片，这部长达片，这部长达7777分钟的影片全部由计算机动分钟的影片全部由计算机动画和计算机合成图像组成。画和计算机合成图像组成。4.1 计算机动画概述9计算机动画技术 2.2.工程设计工程设计 计算机辅助设计计算机辅助设计/ /制图，正朝着利用计制图，正朝着利用计算机动画的后期预览发展。算机动画的后期预览发展。 工程图纸设计完后，指定立体模型材质，工程图纸设计完后，指定立体模型材质，制作三维动画。如机械运动的效果、楼房建制作三维动画。如机械运动的效果、楼房建筑的透视和整体视觉效果。筑的透视和整体视觉效果。4.1 计算机动画概述10计算机动画技术 3. 3.飞行模拟飞行模拟 飞行模拟器飞行模拟器：它能训练飞行员模拟起飞：它能训练飞行员模拟起飞和着陆、操纵各种手柄、观察各种仪器以及和着陆、操纵各种手柄、观察各种仪器以及在舷窗能看到机场跑道或自然景象等。在舷窗能看到机场跑道或自然景象等。 在航天、导弹等复杂的系统工程中，先在航天、导弹等复杂的系统工程中，先建立模型，再用计算机动画模拟真实系统的建立模型，再用计算机动画模拟真实系统的运行，调节参数，获得最佳运行状态。运行，调节参数，获得最佳运行状态。4.1 计算机动画概述11计算机动画技术 4. 4.教育与娱乐教育与娱乐 教育教育：利用计算机动画可将各种现象或：利用计算机动画可将各种现象或模型形象生动地表现出来，如化学反应时分模型形象生动地表现出来，如化学反应时分子结构变化、机器结构模型拆装。子结构变化、机器结构模型拆装。 娱乐娱乐：利用计算机动画产生模拟环境，：利用计算机动画产生模拟环境，使人有身临其境的感觉。使人有身临其境的感觉。4.1 计算机动画概述12计算机动画技术 5. 5.科学计算可视化科学计算可视化 通过计算机动画将科学计算过程及结果通过计算机动画将科学计算过程及结果转换为图形或图像并显示出来，如计算标量转换为图形或图像并显示出来，如计算标量数据场、流体动力学分析等。数据场、流体动力学分析等。 4.1 计算机动画概述13计算机动画技术 6. 6.虚拟现实技术虚拟现实技术 利用计算机动画模拟产生一个三维空间利用计算机动画模拟产生一个三维空间的虚拟环境系统。的虚拟环境系统。 视觉、听觉、触觉、嗅觉等。视觉、听觉、触觉、嗅觉等。4.1 计算机动画概述14计算机动画技术四、计算机动画的制作环境四、计算机动画的制作环境 1. 1.硬件配置硬件配置 图形工作站图形工作站：SGISGI、SUNSUN、IBMIBM、HPHP 高档微型机高档微型机：PentiumPentium、MacintoshMacintosh 输入设备输入设备：图形输入板、扫描仪：图形输入板、扫描仪 输出设备输出设备：视频输出、胶片输出：视频输出、胶片输出4.1 计算机动画概述15计算机动画技术 2.2.软件环境软件环境 系统软件系统软件 操作系统、诊断程序、开发环境和工具操作系统、诊断程序、开发环境和工具 动画软件动画软件 二维动画软件二维动画软件： TOONZTOONZ：二维卡通动画制作系统：二维卡通动画制作系统 SGI/IRIXSGI/IRIX，PC/WindowsPC/Windows4.1 计算机动画概述16计算机动画技术 RETAS PRORETAS PRO：专业二维动画制作系统：专业二维动画制作系统 适用于适用于PCPC、AppleApple机机 USAnimationUSAnimation：二维卡通制作系统：二维卡通制作系统 代表作代表作-美女和野兽美女和野兽 点睛辅助动画制作系统点睛辅助动画制作系统：我国第一个拥：我国第一个拥有自主版权的计算机辅助制作动画系统。有自主版权的计算机辅助制作动画系统。 代表作代表作-海尔兄弟海尔兄弟4.1 计算机动画概述17计算机动画技术 三维动画软件三维动画软件： Softimage 3DSoftimage 3D：擅长于卡通造型和角色擅长于卡通造型和角色动画，如动画，如侏罗纪公园侏罗纪公园的恐龙制作。的恐龙制作。 MAYAMAYA：擅长于人物或动物动画，如泰擅长于人物或动物动画，如泰坦尼克号许多画面制作。坦尼克号许多画面制作。 3 3dsds max max：广泛应用于的三维建模、动广泛应用于的三维建模、动画、渲染软件，制作高质量动画、广告等。画、渲染软件，制作高质量动画、广告等。 PoserPoser：专门用来制作人体，它可以产：专门用来制作人体，它可以产生各种类型的人物，如男人、女人、小孩等生各种类型的人物，如男人、女人、小孩等4.1 计算机动画概述18计算机动画技术4.2 计算机动画设计方法一、计算机动画创意一、计算机动画创意 计算机动画是高科技与艺术创作的结合，计算机动画是高科技与艺术创作的结合，它需要科学的设计和艺术构思，这些在制作它需要科学的设计和艺术构思，这些在制作之前的方案性思考，称为之前的方案性思考，称为创意创意。 创意有宏观和微观两个层面。创意有宏观和微观两个层面。 宏观宏观( (战略创意战略创意) )：指整个设计行动的统：指整个设计行动的统筹安排筹安排( (战略策划高度战略策划高度) )。 微观微观( (战术创意战术创意) )：指具体动画作品的意：指具体动画作品的意境构思及手法选择境构思及手法选择( (小点子、小安排小点子、小安排) )。19计算机动画技术4.2 计算机动画设计方法二、动画动作的设计二、动画动作的设计 1.1.动画时间的分配动画时间的分配 动画时间动画时间：一个动作要用几帧来完成：一个动作要用几帧来完成 放映速度放映速度：24f/s24f/s、25f/s25f/s、30f/s30f/s 动画电影动画电影：只画：只画1212张，重复张，重复1 1次次11秒秒人类人类急跑急跑4f4f、快跑、快跑8f8f、慢跑、慢跑12f12f大象大象一个完整步子一个完整步子1-1.5s1-1.5s小猫小猫一个完整步子一个完整步子0.5s0.5s老鹰老鹰一个翅膀循环一个翅膀循环9f9f麻雀麻雀一个翅膀循环一个翅膀循环2f2f20计算机动画技术4.2 计算机动画设计方法 2.2. 物体运动规律及设计方法物体运动规律及设计方法 自然物体都有重量、结构和一定的柔韧自然物体都有重量、结构和一定的柔韧性，动画制作时还要考虑牛顿定律。性，动画制作时还要考虑牛顿定律。 旋转物体旋转物体 当物体抛向空中或降落地面时，其重心当物体抛向空中或降落地面时，其重心沿抛物线运动，到顶点时沿抛物线运动，到顶点时速度减慢，下降时速度加速度减慢，下降时速度加快。不规则的物体在运动快。不规则的物体在运动过程中还要旋转。过程中还要旋转。21计算机动画技术4.2 计算机动画设计方法 振动物体振动物体 快速振动快速振动： 弹簧片的震动弹簧片的震动 柔性振动柔性振动： 旗帜的飘动旗帜的飘动往复运动物体往复运动物体22计算机动画技术4.2 计算机动画设计方法 3. 3.动物动作规律及设计方法动物动作规律及设计方法 飞鸟类飞鸟类 鸟越大，翅膀动作越慢；鸟越大，翅膀动作越慢； 鸟越小，翅膀动作越快。鸟越小，翅膀动作越快。23计算机动画技术4.2 计算机动画设计方法 昆虫类昆虫类 多数昆虫都有翅膀，但其扇动速度远快多数昆虫都有翅膀，但其扇动速度远快于普通鸟类，这就需要用一种特殊方法来处于普通鸟类，这就需要用一种特殊方法来处理理( (翅膀模糊技术翅膀模糊技术) )。24计算机动画技术4.2 计算机动画设计方法 兽类兽类 四条腿的兽类在运动时，必须注意前腿四条腿的兽类在运动时，必须注意前腿动作如何与后腿动作相配合。如牛的右前腿动作如何与后腿动作相配合。如牛的右前腿向前时，右后腿在后；在右前腿向后时，右向前时，右后腿在后；在右前腿向后时，右后腿向前。后腿向前。兽类兽类跨步时间跨步时间牛、马牛、马1 1秒秒大象大象1.51.5秒秒猫猫0.50.5秒秒25计算机动画技术4.2 计算机动画设计方法 4.4.人物动作规律及设计方法人物动作规律及设计方法 人的走路动作人的走路动作 左右两脚交替向前。为了保持身体的平左右两脚交替向前。为了保持身体的平衡，当左脚向前时左手向后摆动，当右脚向衡，当左脚向前时左手向后摆动，当右脚向前时右手向后摆动。前时右手向后摆动。26计算机动画技术4.2 计算机动画设计方法 人的奔跑动作人的奔跑动作 身体重心前倾，两手自然握拳，手臂成身体重心前倾，两手自然握拳，手臂成屈曲状，双脚的跨步动作幅度较大，头的高屈曲状，双脚的跨步动作幅度较大，头的高低变化也比走路动作大。低变化也比走路动作大。27计算机动画技术4.2 计算机动画设计方法 人的面部表情人的面部表情 面部的动作变化能体现人物的情绪和性面部的动作变化能体现人物的情绪和性格，但也更加复杂。格，但也更加复杂。28计算机动画技术4.2 计算机动画设计方法三、影视片头的设计三、影视片头的设计 1.1.片头设计的长度片头设计的长度 电视栏目片头的时间长度：电视栏目片头的时间长度：2020秒秒 电视台台标的时间长度：电视台台标的时间长度：3030秒秒 2.2.电影片头的设计电影片头的设计 电影片头可以通过把影片最扣人心弦的电影片头可以通过把影片最扣人心弦的核心展示出来，可只提问题不解决问题。核心展示出来，可只提问题不解决问题。 二维动画二维动画：人物、动物等柔软复杂实体：人物、动物等柔软复杂实体 三维动画三维动画：变形、真实感强的造型物体：变形、真实感强的造型物体29计算机动画技术4.2 计算机动画设计方法 3.3.电视片头的设计电视片头的设计 电视节目片头电视节目片头：5 5、1212、2020、6060秒秒 新闻、评论类：严肃庄重新闻、评论类：严肃庄重 文艺、少儿类：轻松活泼文艺、少儿类：轻松活泼 电视栏目片头电视栏目片头：12-2012-20秒秒 字幕是电视栏目片头字幕是电视栏目片头设计中主要的艺术设计形设计中主要的艺术设计形象，这是以线为主的点、象，这是以线为主的点、线、面组合的表现艺术。线、面组合的表现艺术。30计算机动画技术4.3 矢量动画制作软件一、一、FlashFlash概述概述早期版本早期版本Future Splash Future Splash AnimatorAnimator6 6人小组，最大用户是人小组，最大用户是MicrosoftMicrosoft、DisneyDisney19961996.11.11Flash 1.0Flash 1.0MacromediaMacromedia收购收购19971997.6.6Flash 2.0Flash 2.01998.51998.5Flash 3.0Flash 3.0交互式矢量动画标准交互式矢量动画标准1999.61999.6Flash 4.0Flash 4.0Flashempire.comFlashempire.com20002000.8.8Flash 5.0Flash 5.0ActionScript1.0ActionScript1.0闪客：编程、美术闪客：编程、美术2002.32002.3Flash MXFlash MX2003.2003.8 8Flash MX 2004Flash MX 20042005.82005.8Flash 8Flash 8ActionScript2.0ActionScript2.02007.72007.7Flash CS3/9.0Flash CS3/9.0 ActionScript3.0ActionScript3.031计算机动画技术 2. 2.基本功能基本功能 FlashFlash是是MacromediaMacromedia推出的网页动画设推出的网页动画设计软件。它是一种交互的矢量动画，能在低计软件。它是一种交互的矢量动画，能在低数据传输率下实现高质量的动画效果。数据传输率下实现高质量的动画效果。绘图功能绘图功能 图形绘制、特殊字形处理等图形绘制、特殊字形处理等动画功能动画功能即使没有绘画基础也可以使用即使没有绘画基础也可以使用FlashFlash提供的动画工具提供的动画工具, ,编辑从外部导入的编辑从外部导入的图像，制作动画图像，制作动画编程功能编程功能提供几百个关键词提供几百个关键词, ,用来制作交互式用来制作交互式动画动画4.3 矢量动画制作软件32计算机动画技术 3.3.应用领域应用领域 MTVMTV、游戏、网络广告、教学课件等。游戏、网络广告、教学课件等。4.3 矢量动画制作软件33计算机动画技术 4. 4.制作过程制作过程策划策划动画动画动画目的，做什么，整个动画初步策动画目的，做什么，整个动画初步策划，动画剧情设计，动画中的人物等划，动画剧情设计，动画中的人物等搜集搜集素材素材根据策划时拟定的素材类型进行寻找根据策划时拟定的素材类型进行寻找和搜集和搜集制作制作动画动画在拥有动画构思和素材后，动画的最在拥有动画构思和素材后，动画的最终品质取决于动画的制作过程终品质取决于动画的制作过程调试调试动画动画对动画的各个细节、片段衔接、声音对动画的各个细节、片段衔接、声音同步进行调整，使动画更加流畅同步进行调整，使动画更加流畅测试测试动画动画对动画的效果进行最后检测，要尽可对动画的效果进行最后检测，要尽可能多地在不同档次的计算机上测试能多地在不同档次的计算机上测试4.3 矢量动画制作软件34计算机动画技术 5.5.工作界面工作界面 标题栏、菜单栏、工具栏、工具箱标题栏、菜单栏、工具栏、工具箱4.3 矢量动画制作软件35计算机动画技术二、二、FlashFlash基本操作基本操作 例题例题 制作一个移动的变色圆。制作一个移动的变色圆。打开打开FlashFlash，选择红色，选择红色选择椭圆工具，在舞台左上方画一个小圆选择椭圆工具，在舞台左上方画一个小圆右击第右击第3030帧，选择插入空白关键帧帧，选择插入空白关键帧选择蓝色，在舞台右下方画一个较大圆选择蓝色，在舞台右下方画一个较大圆选中第选中第1 1帧，属性面板帧，属性面板/ /补间补间形状形状选择控制选择控制/ /播放播放4.3 矢量动画制作软件36计算机动画技术 1.1.创建创建FlashFlash文件文件 文件文件/ /新建，工具栏新建，工具栏新建按钮新建按钮 2. 2.设置文档属性设置文档属性 修改修改/ /文档，属性面板文档，属性面板文档属性文档属性尺寸尺寸用于设置动画的尺寸用于设置动画的尺寸( (宽度宽度高度高度) )背景颜色背景颜色 用于设置文档的背景颜色用于设置文档的背景颜色帧频帧频用于设置影片的播放速度用于设置影片的播放速度( (f/sf/s) )标尺单位标尺单位 设置表示文档尺寸的单位设置表示文档尺寸的单位4.3 矢量动画制作软件37计算机动画技术 3. 3.简单动画制作简单动画制作 新建文件新建文件设置影片属性设置影片属性(400*300)(400*300) 导入背景图片：文件导入背景图片：文件/ /导入导入 调整图像大小调整图像大小第第3636帧选择帧选择 插入帧插入帧 插入新图层：单击插入新图层：单击 插入图层插入图层 按钮按钮 输入文本：文本工具输入文本：文本工具( (隶、隶、6060、红、红) ) 图层图层2525f f深、深、1010f f圳、圳、1515f f大、大、2020f f学学 设置移动动画：补间设置移动动画：补间/ /动画动画 加入背景音乐：文件加入背景音乐：文件/ /导入导入4.3 矢量动画制作软件38计算机动画技术 4. 4.预览动画预览动画 控制控制/ /测试影片测试影片( (Ctrl+Enter)Ctrl+Enter) 5. 5.保存动画文件保存动画文件 文件文件/ /保存或另存为保存或另存为( (myfirst.flamyfirst.fla) ) 6. 6.输出动画文件输出动画文件 文件文件/ /导出影片导出影片 myfirst.swfmyfirst.swfFlashFlash播放文件播放文件 myfirstmyfirst. .aviavi视频文件视频文件4.3 矢量动画制作软件39计算机动画技术三、图形绘制与编辑三、图形绘制与编辑 1.1.绘图工具绘图工具 椭圆工具、矩形工具、线条工具椭圆工具、矩形工具、线条工具 铅笔工具、文本工具、钢笔工具铅笔工具、文本工具、钢笔工具4.3 矢量动画制作软件40计算机动画技术 2. 2.图形编辑图形编辑 选择工具、次选工具、套索工具选择工具、次选工具、套索工具 颜料桶工具、墨水瓶工具、橡皮工具颜料桶工具、墨水瓶工具、橡皮工具 任意变形工具、填充变形工具任意变形工具、填充变形工具4.3 矢量动画制作软件黑体，黑体，6060，黑色，黑色按按2 2次次Ctrl+BCtrl+B打散打散填充并着色填充并着色修改修改/ /变形变形/ /封套封套41计算机动画技术四、图像导入四、图像导入 使用使用Flash,Flash,除了可以绘制矢量图形外，除了可以绘制矢量图形外，还可以从外部导入位图，以便制作出更加丰还可以从外部导入位图，以便制作出更加丰富的动画。富的动画。4.3 矢量动画制作软件42计算机动画技术五、动画制作五、动画制作 Flash MXFlash MX的动画原理与电影的成像原理的动画原理与电影的成像原理一样，是利用人眼的视觉暂留现象。一样，是利用人眼的视觉暂留现象。 Flash MXFlash MX创建动画有两种方法：创建动画有两种方法： 逐帧动画逐帧动画：帧帧连续动画：帧帧连续动画( (工作量大工作量大) ) 补间动画补间动画：运动补间动画：运动补间动画( (平移、转动平移、转动) ) 形状补间动画形状补间动画( (变形变形) ) 关键帧、帧关键帧、帧( (普通帧或内插帧普通帧或内插帧) ) 4.3 矢量动画制作软件43计算机动画技术 1. 1.逐帧动画逐帧动画 逐帧动画是构成动画的每一帧的内容都逐帧动画是构成动画的每一帧的内容都是由一幅绘制的图像组成。是由一幅绘制的图像组成。 例如：模仿写字过程。例如：模仿写字过程。4.3 矢量动画制作软件44计算机动画技术4.3 矢量动画制作软件 又如：小小系列动画。又如：小小系列动画。45计算机动画技术 2.2.运动补间动画运动补间动画 创建平移动画创建平移动画 球的运动球的运动 创建引导动画创建引导动画 指定路径运动指定路径运动4.3 矢量动画制作软件46计算机动画技术 3.3.形状补间动画形状补间动画 形状动画描述在一段时间内将一个对象形状动画描述在一段时间内将一个对象转变成另一个对象过渡过程。转变成另一个对象过渡过程。 创建形状动画创建形状动画 形状的变化形状的变化 创建遮罩动画创建遮罩动画 探照灯效果探照灯效果4.3 矢量动画制作软件47计算机动画技术4.3 矢量动画制作软件 例题例题 MTVMTV的制作的制作 昨夜星辰昨夜星辰48计算机动画技术 舞台大小：舞台大小：600350600350 总帧数：总帧数：480f/12f/s=40s480f/12f/s=40s 歌曲名：昨夜星辰歌曲名：昨夜星辰15f/15f/字字 演唱者：龙飘飘演唱者：龙飘飘100f100f 歌词：歌词： 18s(216f) 18s(216f)：昨夜的：昨夜的 20s(240f) 20s(240f)：昨夜的星辰已坠落：昨夜的星辰已坠落 29s(348f) 29s(348f)：消失在遥远的银河：消失在遥远的银河4.3 矢量动画制作软件49计算机动画技术六、交互式动画开发基础六、交互式动画开发基础 1.1.什么是什么是ActionScriptActionScript ActionScriptActionScript是针对是针对Flash Flash 运行时环境运行时环境的脚本编程语言。通过它可以使用键盘或鼠的脚本编程语言。通过它可以使用键盘或鼠标与动画进行交互。标与动画进行交互。4.3 矢量动画制作软件 采用面向对象编程思想采用面向对象编程思想 采用事件对程序进行驱动采用事件对程序进行驱动 以动画中的对象来对以动画中的对象来对ActionScriptActionScript语言进行语言进行定义和编写定义和编写 快速构建丰富互联网程序快速构建丰富互联网程序RIARIA的理想语言的理想语言50计算机动画技术 ActionScriptActionScript的发展简史的发展简史：4.3 矢量动画制作软件ActionScriptActionScript 1.0 1.0Flash 5Flash 5诞生，交互脚本诞生，交互脚本ActionScriptActionScript 2.0 2.0面向对象编程，面向对象编程，AVM1AVM1ActionScriptActionScript 3.0 3.0AVM2AVM2，代码执行快十倍，代码执行快十倍ActionScript3ActionScript3的组成的组成：核心语言核心语言 定义编程语言的基本构建块，如语定义编程语言的基本构建块，如语句、表达式、条件、循环和类型句、表达式、条件、循环和类型Flash Flash Player Player APIAPI由代表由代表Flash PlayerFlash Player特定功能并提特定功能并提供对供对Flash PlayerFlash Player特定功能访问的特定功能访问的类组成类组成51计算机动画技术 ActionScript3ActionScript3程序的开发工具程序的开发工具： Adobe Flash CS3Adobe Flash CS3 MXML MXML语言语言 集成开发工具集成开发工具 Flex SDK Flex SDK Adobe Flex Builder Adobe Flex Builder4.3 矢量动画制作软件52计算机动画技术 例例 第一个程序第一个程序( (显示显示Hello,worldHello,world!)!)新建一个新建一个FlashFlash文件文件(ActionScript3)(ActionScript3)按按F9F9、窗口、窗口/ /动作动作动作面板动作面板输入代码：输入代码：trace(“Hello,worldtrace(“Hello,world!”);!”);函数函数trace()trace()的功能：将括号中的内容从输的功能：将括号中的内容从输出面板中输出出面板中输出Ctrl+EnterCtrl+Enter 测试影片测试影片4.3 矢量动画制作软件53计算机动画技术 2.2.变量和常量变量和常量 变量变量：用来存储程序运行时的临时数据：用来存储程序运行时的临时数据 常量常量：用来存储固定的数值：用来存储固定的数值 声明变量声明变量：使用变量前，必须先声明。：使用变量前，必须先声明。 如：如：varvar a; /undefined a; /undefined varvar a:inta:int; /0; /0 varvar netebook:intnetebook:int； /0/0 varvar a=3; a=3;4.3 矢量动画制作软件54计算机动画技术 变量赋值变量赋值：声明变量后，要给它赋值，：声明变量后，要给它赋值，否则编译会出错。否则编译会出错。 varvar a:inta:int; ;varvar b:intb:int; ;a=10;a=10;b=a;b=a;trace(atrace(a););trace(btrace(b););varvar a=3; a=3;trace(trace(第一次赋值结果：第一次赋值结果：+a);a);a=5;a=5;trace(trace(第二次赋值结果：第二次赋值结果：+a);a);4.3 矢量动画制作软件55计算机动画技术 声明常量声明常量：声明常量并赋值，该常量就：声明常量并赋值，该常量就不能再次赋值。不能再次赋值。 const a=3;const a=3;trace(trace(“常量常量a a值：值：”+a);+a);const a=3;const a=3;trace(trace(“常量常量a a值：值：”+a);+a);a=5;a=5;trace(atrace(a););4.3 矢量动画制作软件56计算机动画技术 3.3.数据类型数据类型 ActionScript3ActionScript3的数据类型的数据类型：4.3 矢量动画制作软件基本类型基本类型字符串型：字符串型：StringString数值型：数值型：NumberNumber布尔型：布尔型：BooleanBoolean复合类型复合类型数组：数组：ArrayArray对象：对象：ObjcetObjcet影片剪辑：影片剪辑：SpriteSprite57计算机动画技术 基本数据类型基本数据类型：4.3 矢量动画制作软件varvar s:Strings:String= =“HelloHello”; ;trace(strace(s););varvar n:Numbern:Number=5;=5;trace(ntrace(n););trace(trace(“数值类型的最小值是：数值类型的最小值是：” + +Number.MIN_VALUENumber.MIN_VALUE););trace(trace(“数值类型的最小值是：数值类型的最小值是：” + +Number.MAX_VALUENumber.MAX_VALUE););varvar b:Booleanb:Boolean=true;=true;trace(btrace(b););58计算机动画技术 4. 4.运算符运算符 运算符是通过某种运算关系计算一个或运算符是通过某种运算关系计算一个或者多个操作数，然后返回相应的数值。者多个操作数，然后返回相应的数值。 一元运算符一元运算符：+, -, !+, -, !4.3 矢量动画制作软件varvar i:inti:int=9;=9;trace(trace(“返回之前返回之前i i的结果为的结果为: :”+-i);+-i);trace(trace(“i i的结果为：的结果为：”+i);+i);59计算机动画技术 二元运算符二元运算符：+,-,*,/,%,=4.3 矢量动画制作软件varvar i:Numberi:Number = 20; = 20;varvar j:Numberj:Number = 10; = 10;trace(trace(“加法运算结果加法运算结果: :”+(+(i+ji+j););trace(trace(“减法运算结果减法运算结果: :”+(+(i-ji-j););trace(trace(“乘法运算结果乘法运算结果: :”+(i*j);+(i*j);trace(trace(“除法运算结果除法运算结果: :”+(+(i/ji/j););trace(trace(“比较运算结果比较运算结果: :”+(ij);+(ij);60计算机动画技术 三元运算符三元运算符：条件运算符是判断语句的：条件运算符是判断语句的一种简单表达形式，由一个问号、一个冒号一种简单表达形式，由一个问号、一个冒号和三个操作数组成。例如：和三个操作数组成。例如： ( (条件条件) )？( (真结果真结果):():(假结果假结果) )4.3 矢量动画制作软件varvar i:inti:int = 100; = 100;varvar j:intj:int = 2; = 2;trace(i/jtrace(i/j)=50) ? )=50) ? true:falsetrue:false61计算机动画技术 5. 5.语句语句 语句的作用语句的作用：控制程序执行的流程。：控制程序执行的流程。 常用的语句常用的语句：条件语句、循环语句：条件语句、循环语句 条件语句条件语句：用来控制程序流程，判断程：用来控制程序流程，判断程序的执行方向。有三种形式：序的执行方向。有三种形式： ifelseifelse ifelse ifelse ifelse ifelse switch switch4.3 矢量动画制作软件62计算机动画技术 ifelseifelse语句语句：4.3 矢量动画制作软件varvar i:inti:int = 0; = 0;varvar s:Strints:Strint; ;If (i=0)If (i=0) s= s=“结果为结果为0 0”; ; elseelse s= s=“结果为非结果为非0 0”; ; trace(strace(s););63计算机动画技术 ifelse ififelse if语句语句：4.3 矢量动画制作软件varvar i:inti:int = 1; = 1;varvar s:Strints:Strint; ;If (i=1)If (i=1) s= s=“结果为结果为1 1”; ; else if (i=0)else if (i=0) s= s=“结果为结果为0 0”; ; else else ( s =( s =“结果为非结果为非0 0非非1 1”; ; ) )trace(strace(s););64计算机动画技术 switch switch语句语句：4.3 矢量动画制作软件varvar i:inti:int = 3; = 3;varvar s:Strings:String; ;switch(iswitch(i) ) case 0: s= case 0: s=结果为结果为:0;break; :0;break; case 1: s= case 1: s=结果为结果为:1;break;:1;break; case 2: s= case 2: s=结果为结果为:2;break;:2;break; case 3: s= case 3: s=结果为结果为:3;break;:3;break; case 4: s= case 4: s=结果为结果为:4;break;:4;break; default:sdefault:s=结果为结果为:5;break;:5;break; trace(strace(s););65计算机动画技术 循环语句循环语句：根据条件判断的结果，反复：根据条件判断的结果，反复执行一个特定的代码段。执行一个特定的代码段。 循环语句有三种形式：循环语句有三种形式： forfor while while dowhile dowhile4.3 矢量动画制作软件66计算机动画技术 forfor语句语句：根据某个变量来获取循环的：根据某个变量来获取循环的次数，然后反复执行里面的代码。例如：次数，然后反复执行里面的代码。例如：4.3 矢量动画制作软件varvar i:inti:int; ;varvar a:inta:int=0;=0;for(ifor(i=0;i10;i+)=0;i10;i+) trace(itrace(i); ); a+=i; a+=i; trace(trace(“累加结果：累加结果：”+ +a.toStringa.toString();();67计算机动画技术 whilewhile语句语句: :判断逻辑表达式，如果为真判断逻辑表达式，如果为真就反复执行里面特定的代码。例如：就反复执行里面特定的代码。例如：4.3 矢量动画制作软件varvar citys:Arraycitys:Array=北京北京, 天津天津, 沈阳沈阳, 青岛青岛, 上海上海, 秦皇岛秦皇岛;varvar i:inti:int=0;=0;while(iwhile(i citys.lengthcitys.length) ) trace(citysitrace(citysi); ); i+; i+; 68计算机动画技术 dowhiledowhile语句语句: :判断表达式前，执行了判断表达式前，执行了一次代码块。例如：一次代码块。例如：4.3 矢量动画制作软件varvar citys:Arraycitys:Array=北京北京, 天津天津, 沈阳沈阳, 青岛青岛, 上海上海, 秦皇岛秦皇岛;varvar i:inti:int=0;=0;dodo trace(citysitrace(citysi); ); i+; i+; while(iwhile(i citys.lengthcitys.length) )69计算机动画技术比较比较whilewhile语句和语句和dodowhilewhile语句的区别语句的区别：4.3 矢量动画制作软件varvar i:inti:int=0;=0;while(iwhile(i0)0) i+; i+; trace(itrace(i););varvar i:inti:int=0;=0;dodo i+; i+; while(iwhile(i0)0)trace(itrace(i););70计算机动画技术 breakbreak和和continuecontinue简单用法简单用法： break break和和continuecontinue用来控制循环流程，都用来控制循环流程，都在循环内使用。在循环内使用。 breakbreak语句用来直接跳出循环，不再执行语句用来直接跳出循环，不再执行循环体内后面的语句。循环体内后面的语句。 continuecontinue语句只是终止当前这一轮的循语句只是终止当前这一轮的循环，直接跳到下一轮循环。环，直接跳到下一轮循环。4.3 矢量动画制作软件71计算机动画技术 例题例题 i i从从0 0到到4 4递增，一旦递增，一旦i i等于等于3 3时时, ,分别使分别使用用breakbreak和和continuecontinue时发生的情况。时发生的情况。4.3 矢量动画制作软件varvar i:inti:int; ;for (i=0;i5;i+)for (i=0;i5;i+) if (i=3) break; if (i=3) break; trace( trace(“当前数字：当前数字：”+i);+i); for (for (varvar i:inti:int=0;i5;i+)=0;i5;i+) if (i=3) continue; if (i=3) continue; trace( trace(“当前数字：当前数字：”+i);+i); 72计算机动画技术 例例 深圳大学校园风景相册深圳大学校园风景相册 交互式动画交互式动画 从窗口从窗口/ /共享库共享库/Buttons/Buttons选择两个按钮选择两个按钮 新增图层新增图层单击第一帧单击第一帧调出动作帧面调出动作帧面板板切换到专家模式。切换到专家模式。4.3 矢量动画制作软件73计算机动画技术4.3 矢量动画制作软件square._alpha = 0;whichPic = 1;next.onPress = function() if (whichPic1 & !fadeIn & !fadeOut) fadeOut = true; whichpic-; input = whichPic; ;75计算机动画技术4.3 矢量动画制作软件_root.onEnterFrame = function() if (square._alpha10 & fadeOut) square._alpha -= 10; if (square._alpha10) loadMovie(pictrue/m+whichPic +.jpg,square); fadeOut = false; fadeIn = true; 76计算机动画技术4.3 矢量动画制作软件 if (square._alpha10) input = 10; if (Key.isDown(Key.ENTER) fadeOut = true; whichpic = input; ;inputField.onKillFocus=function() input = whichPic;77计算机动画技术4.3 矢量动画制作软件七、动画美学七、动画美学 动画美学的主要内容动画美学的主要内容： 注重画面结构布局，为动画主体留出注重画面结构布局，为动画主体留出活动空间。活动空间。 动画画面调度设计，主要在镜头移动、动画画面调度设计，主要在镜头移动、纵深运动、平面运动等模式。纵深运动、平面运动等模式。 动画制作符合视觉规律。动画制作符合视觉规律。固定不动的物体构成背景的主要对象，起到画面均衡的作用固定不动的物体构成背景的主要对象，起到画面均衡的作用低速运动的物体给人以平稳的感觉；低速运动的物体给人以平稳的感觉；高速运动能够引起特别注意，起到着力渲染的作用。高速运动能够引起特别注意，起到着力渲染的作用。78计算机动画技术本章小结 动画、动画的播放方式动画、动画的播放方式 计算机动画的定义计算机动画的定义 计算机动画的分类计算机动画的分类(5(5个等级个等级) ) 计算机动画的制作环境计算机动画的制作环境 硬件配置、软件配置硬件配置、软件配置 计算机动画的设计方法计算机动画的设计方法 动画制作软件动画制作软件FlashFlash79