1、动画制作与创意,第3讲 3D工具和骨骼工具,主讲人:夏耘,实验分析,遮罩动画的制作方法形状补间（添加干预点）如何使导入的图 与舞台大小相当?传统补间与补间的区别,案例：划变,遮罩动画 特点：元件组合构成遮罩,4-3,4-4,4-5,4-6,4-7,案例：虚光文字,被遮罩对象的运动,4-8,第3讲 3D工具和骨骼工具,【教学目标】掌握三维空间概念。掌握【3D平移】和【3D旋转】工具。掌握【骨骼】和【绑定】工具。,3.1 功能讲解,3.1.1 二维空间与三维空间,二维空间（2D）是指仅由长度和宽度（在几何学中为x轴和y轴）两个要素所组成的平面空间，只在平面延伸扩展，二维空间呈面性。同时也是美术上的
2、一个术语，例如绘画便是要将三度空间的事物，用二度空间来展现。三维空间（3D）是指长、宽、高构成的立体空间，三维空间呈体性。三维空间的长、宽、高三条轴是说明在三维空间中的物体相对原点O的距离关系。,3.1 功能讲解,3.1.2 【3D旋转】工具,【3D旋转】工具 可以在三维空间中旋转影片剪辑实例。舞台中的3D旋转控件用不同色彩代表不同的旋转操作，其中红色绕x轴线旋转、绿色绕y轴线旋转、蓝色绕z轴线旋转、橙色的自由旋转控件可同时绕X和Y轴旋转。,3.1 功能讲解,3.1.3 【3D平移】工具,使用【3D平移】工具 可以在三维空间中移动影片剪辑实例。在使用该工具选择影片剪辑后，影片剪辑的x轴、 y轴
3、和z轴3个轴将显示在舞台上对象的顶部。x轴为红色、y轴为绿色，而z轴为蓝色。,3.1 功能讲解,3.1.4 反向运动及【骨骼】工具,通过反向运动(IK)可以轻松地创建人物动画，如胳膊、腿和面部表情的自然运动。Flash包括两个用于处理IK的工具。使用【骨骼】工具 可以向元件实例或形状添加骨骼。在一个骨骼移动时，与启动运动的骨骼相关的其他连接骨骼也会移动。使用反向运动进行动画处理时，只需指定对象的开始位置和结束位置即可。,3.1 功能讲解,3.1.4 反向运动及【骨骼】工具,在Flash中可以按两种方式使用IK。,第1种方式：通过添加将每个实例与其他实例连接在一起的骨骼，用关节连接一系列的元件实
4、例。骨骼允许元件实例链一起移动。例如，您可能具有一组影片剪辑，其中的每个影片剪辑都表示人体的不同部分。通过将躯干、上臂、下臂和手链接在一起，可以创建逼真移动的胳膊。可以创建一个分支骨架以包括两个胳膊、两条腿和头。,3.1 功能讲解,3.1.4 反向运动及【骨骼】工具,在Flash中可以按两种方式使用IK。,第2种方式：是向形状对象的内部添加骨架。可以在合并绘制模式或对象绘制模式中创建形状。通过骨骼，可以移动形状的各个部分并对其进行动画处理，而无需绘制形状的不同版本或创建补间形状。,3.1 功能讲解,3.1.5 【绑定】工具,使用【绑定】工具 可以调整形状对象的各个骨骼和控制点之间的关系。默认情
5、况下，形状的控制点连接到离它们最近的骨骼。使用【绑定】工具，可以编辑单个骨骼和形状控制点之间的连接。这样，就可以控制在每个骨骼移动时图形扭曲的方式以获得更满意的结果。,3.1 功能讲解,3.1.5 【绑定】工具,【绑定】工具 使用过程中涉及的图标含义。,黄色加亮方形控制点：表示已连接当前骨骼的点。红色加亮骨骼：表示当前选定的骨骼。蓝色方形控制点：表示已经连接到某个骨骼的点。三角形控制点：表示连接到多个骨骼的控制点。,3.1 功能讲解,3.1.6 IK运动约束,若要创建IK骨架的更多逼真运动，可以控制特定骨骼的运动自由度。选定一个或多个骨骼时，可以在【属性】面板中设置【连接:旋转】、【连接:X平
6、移】和【连接:Y平移】选项。,3.2 范例解析,3.2.1 灵巧的手,3.2 范例解析,3.2.2 晨练,3.3 课堂实训,3.3.1 旋转的相册,3.3 课堂实训,3.3.2机械臂,3.4 综合案例三维立方体,第4讲 动作脚本应用基础,【教学目标】ActionScript基本概念。ActionScript语法基础。ActionScript基本用法。常用语句和函数。事件的概念和处理方法。,4.1 功能讲解,4.1.1 ActionScript基础概念,ActionScript程序一般由语句、函数和变量组成，主要涉及到变量、函数、数据类型、表达式和运算符等，它们是ActionScript的基石。
7、可以由单一动作组成，如指示动画停止播放的操作，也可以由一系列动作语句组成，如先计算条件，再执行动作。 ActionScript是一种面向对象的编程语言。对象是ActionScript 3.0语言的核心，程序所声明的每个变量、编写的每个函数以及创建的每个实例都是一个对象。,在ActionScript面向对象的编程中，任何对象都可以包含3种类型的特性。属性：表示与对象绑定在一起的若干数据项的值，如矩形的长、宽、颜色。方法：可以由对象执行的操作，如动画播放、停止或跳转等。事件：由用户或系统内部引发的、可被ActionScript识别并响应的事情，如鼠标单击、用户输入、定时时间到等事件。 这些元素共同
8、用于管理程序使用的数据块，并用于确定执行哪些动作以及动作的执行顺序。ActionScript为响应特定事件而执行某些动作的过程称为“事件处理”。在编写执行事件处理代码时，Flash需要识别三个重要元素。事件源：发生该事件的是哪个对象。事件：将要发生什么事情，以及程序希望响应什么事情。响应：当事件发生时，程序希望执行哪些步骤。,无论何时编写处理事件的ActionScript代码，都会包括这3个元素，并且代码将遵循以下基本结构。 function eventResponse(eventObject:EventType):void /此处是为响应事件而执行的动作。 eventSource.addEv
9、entListener(EventType.EVENT_NAME, eventResponse); 此代码执行两个操作。首先，定义一个函数，这是指定为响应事件而要执行的动作的方法。接下来，调用源对象的addEventListener()方法，实际上就是为指定事件“订阅”该函数，以便当该事件发生时，执行该函数的动作。,一旦编写了事件处理函数，就需要通知事件源对象（发生事件的对象，如按钮）程序希望在该事件发生时调用函数。可通过调用该对象的addEventListener()方法来实现此目的（所有具有事件的对象都同时具有addEventListener()方法）。 addEventListener(
10、)方法有两个参数。第一个参数是希望响应的特定事件的名称。同样，每个事件都与一个特定类关联，而该类将为每个事件预定义一个特殊值；类似于事件自己的唯一名称（应将其用于第一个参数）。第二个参数是事件响应函数的名称。请注意，如果将函数名称作为参数进行传递，则在写入函数名称时不使用括号。,1. 变量的声明 变量可用来存储程序中使用的值。要声明变量，必须将 var 语句和变量名结合使用。例如，下面的语句声明一个名为 i 的变量：var i; 如果在声明变量时省略了 var 语句，在严格模式下将出现编译器错误，在标准模式下将出现运行时错误。 要将变量与一个数据类型相关联，则必须在声明变量时进行此操作。在声明
11、变量时不指定变量的类型是合法的，但这在严格模式下将产生编译器警告。可通过在变量名后面追加一个后跟变量类型的冒号 (:) 来指定变量类型。例如，下面的代码声明一个 int 类型的变量 i：var i:int;,4.1.2 变量,4.1.2 变量,2.变量的赋值 可以使用赋值运算符( = )为变量赋值。例如，下面的代码声明一个变量i并将值20赋给它。var i:int;i = 20; 也可以在声明变量的同时为变量赋值，如下面的示例所示。var i:int = 20; 如果要声明多个变量，则可以使用逗号运算符(,)来分隔变量，从而在一行代码中声明所有这些变量。例如，下面的代码在一行代码中声明3个变量
12、。var a:int, b:int, c:int; 也可以在同一行代码中为其中的每个变量赋值。例如，下面的代码声明3个变量（a、b和c）并为每个变量赋值。var a:int = 4, b:int = 20, c:int = 30;,4.1.2 变量,3.默认值 “默认值”是在设置变量值之前变量中包含的值。首次设置变量的值实际上就是“初始化”变量。如果我们声明了一个变量，但是没有设置它的值，则该变量便处于“未初始化”状态。未初始化的变量的值取决于它的数据类型，一般来说，Boolean类型变量的默认值为“false”，int类型变量的默认值为0。 如果我们声明某个变量，但是未声明它的数据类型，则将
13、应用默认数据类型*，这实际上表示该变量是无类型变量。如果我们没有用值初始化无类型变量，则该变量的默认值是undefined。,4.1.3 语法,1.区分大小写 ActionScript 3.0 是一种区分大小写的语言。只是大小写不同的标识符会被视为不同。例如，下面的代码创建两个不同的变量。 var num1:int; var Num1:int;2.点语法 可以通过点运算符 (.) 来访问对象的属性和方法。使用点语法，可以使用后跟点运算符和属性名或方法名来引用对象的属性或方法，例如。 ball.x=40; /对象ball的x坐标为40 ball.alpha=50; /对象ball的透明度值为50
14、,4.1.3 语法,3.分号 可以使用分号字符 (;) 来终止语句。如果我们省略分号字符，则编译器将假设每一行代码代表一条语句。但是一般程序员都习惯使用分号来表示语句结束，因此，我们也应当养成这样一个习惯，以使自己的代码更易于阅读。 使用分号终止语句可以在一行中放置多个语句，但是这样会使代码变得难以阅读。4.小括号 在 ActionScript 3.0 中，可以通过三种方式来使用小括号 ()。 （1）可以使用小括号来更改表达式中的运算顺序。组合到小括号中的运算总是最先执行。例如，小括号可用来改变如下代码中的运算顺序。 trace(2 + 3 * 4); / 14 trace( (2 + 3)
15、* 4); / 20,4.1.3 语法,（2）可以结合使用小括号和逗号运算符 (,) 来计算一系列表达式并返回最后一个表达式的结果，如下面的示例所示：（3）可以使用小括号来向函数或方法传递一个或多个参数，如下面的示例所示，此示例向 trace() 函数传递一个字符串值： trace(hello); / hello,4.1.3 语法,5.注释 ActionScript 3.0 代码支持两种类型的注释：单行注释和多行注释。编译器将忽略标记为注释的文本。 单行注释以两个正斜杠字符 (/) 开头并持续到该行的末尾。例如，下面的代码包含一个单行注释。var someNumber:Number = 3;
16、/ 单行注释 多行注释以一个正斜杠和一个星号 (/*) 开头，以一个星号和一个正斜杠 (*/) 结尾。 /* 这是一个可以跨多行代码的多行注释。 */,4.1.4 运算符,4.1.4 运算符,4.1.5 条件语句,1.if.elseif.else 条件语句用于测试一个条件，如果该条件存在，则执行一个代码块，否则执行替代代码块。例如，下面的代码测试 x 的值是否超过 20，如果是，则生成一个 trace() 函数，否则生成另一个 trace() 函数。if (x 20) trace(x is 20);else trace(x is 20) trace(x is 20);else if (x 0)
17、 trace(x is negative);,4.1.5 条件语句,3.switch 如果多个执行路径依赖于同一个条件表达式，则 switch 语句非常有用。它的功能大致相当于一系列 if.else if 语句，但是它更便于阅读。switch 语句不是对条件进行测试以获得布尔值，而是对表达式进行求值并使用计算结果来确定要执行的代码块。代码块以 case 语句开头，以 break 语句结尾。例如，下面的 switch 语句基于由 Date.getDay() 方法返回的日期值输出星期日期。,var someDate:Date = new Date();var dayNum:uint = someD
18、ate.getDay();switch(dayNum) case 0: trace(星期天); break; case 1: trace(星期一); break; default: trace(我也不知道是星期几); break;,4.1.5 条件语句,4.1.6 循环语句,1.forfor 循环用于循环访问某个变量以获得特定范围的值。必须在 for 语句中提供 3 个表达式：一个设置了初始值的变量，一个用于确定循环何时结束的条件语句，以及一个在每次循环中都更改变量值的表达式。例如，下面的代码循环 5 次。变量 i 的值从 0 开始到 4 结束，输出结果是从 0 到 4 的 5 个数字，每个数
19、字各占 1 行。var i:int;for (i = 0; i 5; i+) trace(i);,2.for.infor.in 循环用于循环访问对象属性或数组元素。例如，可以使用 for.in 循环来循环访问通用对象的属性（不按任何特定的顺序来保存对象的属性，因此属性可能以看似随机的顺序出现）。var myObj:Object = x:20, y:30;for (var i:String in myObj) trace(i + : + myObji);/ 输出：/ x: 20/ y: 30,4.1.6 循环语句,3.whilewhile 循环与 if 语句相似，只要条件为 true，就会反复执
20、行。例如，下面的代码与 for 循环示例生成的输出结果相同。var i:int = 0;while (i 5) trace(i); i+;,4.1.6 循环语句,4.do.whiledo.while 循环是一种 while 循环，它保证至少执行一次代码块，这是因为在执行代码块后才会检查条件。下面的代码显示了 do.while 循环的一个简单示例，即使条件不满足，该示例也会生成输出结果。var i:int = 5;do trace(i); i+; while (i 5);/ 输出：5,4.1.6 循环语句,4.1.7 函数,1.调用函数可通过使用后跟小括号运算符 () 的函数标识符来调用函数。要
21、发送给函数的任何函数参数都括在小括号中。例如，贯穿于本书始末的 trace() 函数，它是 Flash Player API 中的顶级函数。trace(Use trace to help debug your script);如果要调用没有参数的函数，则必须使用一对空的小括号。例如，可以使用没有参数的 Math.random() 方法来生成一个随机数：var randomNum:Number = Math.random();,2.定义自己的函数在 ActionScript 3.0 中可通过使用函数语句来定义函数。函数语句是在严格模式下定义函数的首选方法。函数语句以 function 关键字开头
22、，后跟：函数名 用小括号括起来的逗号分隔参数列表 用大括号括起来的函数体，即在调用函数时要执行的 ActionScript 代码 例如，下面的代码创建一个定义一个参数的函数，然后将字符串“hello”用作参数值来调用该函数：function traceParameter(aParam:String) trace(aParam);traceParameter(hello); / hello,4.1.7 函数,3.从函数中返回值要从函数中返回值，请使用后跟要返回的表达式或字面值的 return 语句。例如，下面的代码返回一个表示参数的表达式。function doubleNum(baseNum:i
23、nt):int return (baseNum * 2);请注意，return 语句会终止该函数，因此，不会执行位于 return 语句下面的任何语句，如下所示：function doubleNum(baseNum:int):int return (baseNum * 2); trace(after return); / 不会执行这条 trace 语句。,4.1.7 函数,4.1.8 【动作】面板,动作工具箱,脚本窗口,脚本导航器,面板工具栏,4.2 范例解析,4.2.1 改变属性辛苦的工人,作品：辛苦的工人,4.2.2 随机取值驿动的心,作品：驿动的心,4.3 课堂实训,4.3.1 画面跳转
24、表情变幻,public function gotoAndPlay(frame:Object, scene:String = null):void 跳转到指定的帧并继续播放 SWF 文件。 frame:Object 表示播放头转到的帧编号的数字，或者表示播放头转到的帧标签的字符串。如果用户指定了一个数字，则该数字是相对于用户指定的场景的。 如果不指定场景，Flash Player 使用当前场景来确定要播放的全局帧编号。 如果指定场景，播放头会跳到指定场景的帧编号。 scene:String (default = null) 要播放的场景的名称。此参数是可选的。,4.3 课堂实训,4.3.1 画面
25、跳转表情变幻,下面的代码使用 gotoAndPlay() 方法指示 mc1 影片剪辑的播放头从其当前位置前进 5 帧。：mc1.gotoAndPlay(mc1.currentFrame + 5); 下面的代码使用 gotoAndPlay() 方法指示 mc1 影片剪辑的播放头移到名为 Scene 12 的场景中标记为 intro 的帧：mc1.gotoAndPlay(intro, Scene 12);,作品：表情变幻,作品：表情变幻,4.3.2 事件的响应和处理,把“为响应特定事件而执行某些动作”称为“事件处理”。在编写执行事件处理的 ActionScript 代码时，需要识别3个元素。事件源
26、发生该事件的是哪个对象？例如，哪个按钮会被单击，或哪个对象正在加载发生变化？事件源也称为“事件目标”，因为 Flash Player 将此对象（实际在其中发生事件）作为事件的目标。 事件将要发生什么事情，以及用户希望响应什么事情？识别事件是非常重要的，因为许多对象都会触发多个事件。 响应当事件发生时，用户希望执行哪些步骤？,function eventResponse(eventObject:EventType):void / 此处是为响应事件而执行的动作。 eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);此代
27、码执行两个操作：首先，定义一个函数，这是指定为响应事件而要执行的动作的方法；接下来，调用源对象的 addEventListener() 方法，实际上就是为指定事件“订阅”该函数，以便当该事件发生时，执行该函数的动作。,4.3.2 事件的响应和处理,enterFrame（进入帧）事件是Flash动画中最常用到的事件之一。当动画播放头进入一个新帧时就会触发此事件。如果动画只有一帧，则会按照设定的帧频（默认为12帧/秒）持续触发此事件。在这个事件发生后，系统就会要求所有侦听此事件的对象同时开始相应的事件来处理函数。,4.3.2 事件的响应和处理,A、B两点的水平间距为x1-x2，垂直间距为y1-y2。若B点向A点靠近，则B点在坐标变化为：x2=x2+(x1-x2)y2=y2+(y1-y2)若B点是逐渐向A点靠近，则需要将间距划分为若干小段，然后反复进行位置判断，直至两点位置重合。例如划分为5段，则：x2=x2+(x1-x2)/5y2=y2+(y1-y2)/5,4.3.2 事件的响应和处理,作品：调皮的皮卡丘,4.4 综合案例 绿野仙踪,教学安排,下周实验3再下周作品交流作品主题：吾校 2011年大学生计算机大赛 后世博最后一次 在规定时间完成作业当场上传,4-65,下次课再见！,
