多媒体技术应用(课堂PPT).ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,.,*,重点难点：,Flash,动画对象的绘制和编辑,简单动画制作,引导路径动画和遮罩动画的设计与制作,使用,ActionScript2.0,实现交互,第,3,章,Flash,动画制作,内容提要：,3.1,计算机动画基础知识,3.2 Flash,基本操作,3.3 Flash,简单动画制作,3.4,图层特效动画制作,3.5,声音与按钮,3.6,交互动画制作,3.7,动画制作综合应用,1,.,3.1,计算机动画基础知识,3.1.1,动画的概念,动画是一种通过连续画面来显示运动的技术，通过一定速度投放画面以达到连续的动态效果；或动画是一系列物体组成的图像帧的动态变化过程，其中每帧图像只是前一帧图像的略加变化。,2,.,3.1,计算机动画基础知识,3.1.2,动画原理,动画原理,传统动画的生产过程,计算机动画的概念,Flash,动画,动画制作应注意的问题,速度的处理,循环动画,夸张与拟人,3,.,3.2 Flash,基本操作,3.2.1,熟悉,Flash,操作界面,4,.,3.2 Flash,基本操作,时间轴面板,5,.,3.2.4,文件操作,新建文件,保存文件,打开文件,设置文档属性,导入导出文件,6,.,3.2.5,绘制和编辑图形,案例,3-2-1,：绘制“鸟语花香”,设计效果,：舞台效果图如下所示。,设计目标,：学习,Flash,动画对象的绘制和编辑方法，掌握各种绘图工具的使用。,设计思路,：该案例包含背景、草地、花朵、蘑菇、太阳、文字和小鸟图层。利用工具箱中的各种绘图工具，分别在各个图层中绘制相应的对象。,7,.,3.2.5,绘制和编辑图形,矩形工具和椭圆工具：,绘制几何图形,属性面板可设置笔触颜色，填充颜色等,多角星形工具：点击属性面板的,“,选项,”,，可设置样式、边数等,填充变形工具：,调整渐变色填充,调渐变中心点,调渐变大小,调渐变角度,8,.,3.2.5,绘制和编辑图形,直线工具：,绘制矢量线段,在属性面板设置直线颜色、粗细、样式等,Shift+,拖动鼠标：绘制与水平成45度直线,选择工具:,选取、移动和复制对象（按住,CTRL,）,改变对象形状,9,.,3.2.5,绘制和编辑图形,墨水瓶工具：,改变线条,颜色和样式（,不是填充色！）,颜料桶工具：,对封闭区域填充颜色,四种封闭模式：不封闭空隙、封闭小空隙、封闭中等空隙、封闭大空隙,填充颜色：使用颜色面板（,纯色、渐变色、位图,）,10,.,3.2.5,绘制和编辑图形,任意变形工具：,改变对象形状,旋转、倾斜、缩放等,变形面板,11,.,3.2.5,绘制和编辑图形,？,思考,怎样绘制蘑菇？,12,.,3.2.5,绘制和编辑图形,文字,工具,文本对象类型：,静态文本：动画播放时不会改变,动态文本：动画播放时可以动态更新,输入文本：浏览者可以输入,文字方向：3种,文字的格式化：在属性面板完成,文字的变形：任意变形工具,转化为图形：,两次分离,Ctrl+B,组合键,13,.,3.2.5,绘制和编辑图形,橡皮擦工具：,擦除图形（矢量图）,套索工具：,选择不规则区域,模式：自由选取模式、多边形模式、魔术棒模式,魔术棒属性设置,Ctrl+Enter,组合键：,测试影片，在与源文件相同位置创建同名,swf,影片文件,14,.,内容提要：,动画的原理,Flash,文件格式？影片文件格式？,文档属性的修改,工具箱的使用,Premiere,的界面有哪几部分构成？,使用,Premiere,制作视频的流程？,00:00:05:02,代表什么意思？,插入操作和覆盖操作的区别？,上次课复习,15,.,3.2.5,绘制和编辑图形,Flash,绘制模式,合并绘制模式,对象绘制模式,需要,在工具箱中的工具选项区按下,对象绘制按钮,16,.,3.2.5,绘制和编辑图形,对象的组合和分离,组合：对个对象组合在一起，,Ctrl+G,快捷键,取消组合：已经组合的对象重新分散成为单个的对象,分离：对象打散成形状，,Ctrl+B,快捷键,组合是可逆操作，分离是不可逆操作,17,.,3.3.1,动画的分类,1.Flash CS5,支持的动画类型,18,.,3.3.2,帧操作,帧是,Flash,动画的基本单位。,Flash,中的帧分为：,关键帧,空白关键帧,普通帧,概念,用来存放动画中关键画面的帧,和关键帧类似,，但,对应的舞台中没有内容。,用来延长上一个关键帧的播放状态和时间,在时间轴的表示,黑色实心小圆点,空心圆圈,灰色矩形,是否能编辑,可编辑,可编辑,不可编辑,插入方法,F6,F7,F5,19,.,3.3.2,逐帧动画,逐帧动画在每一帧中都会更改舞台内容，它最适合于图像在每一帧中均发生变化的精细动画，例如动物的奔跑，人物的动作等。,若要创建逐帧动画，要将每个帧都定义为关键帧，然后为每个帧制作不同的图像。,工作量大，生成的文件也较大。,在,Flash,中，制作逐帧动画主要有,2,种方式：,将动画过程分解成一个个画面，在每个关键帧处绘制画面的的内容；,通过导入表示连续分解动作的图片文件，如,GIF,文件。,20,.,3.3.2,逐帧动画,案例,3-3-1,：利用逐帧动画制作“草原女孩”动画,设计效果,：舞台效果图如下所示。,设计目标,：理解逐帧动画原理，掌握两种逐帧动画的制作方法。,设计思路,：包含,3,个逐帧动画：马、眨眼睛、字幕的出现。,21,.,3.3.2,逐帧动画,绘制各关键帧方式：,在动画开始的第,1,个关键帧处绘制动画对象。,按,F6,插入关键帧，将其中的内容稍作修改。或按,F7,键插入空白关键帧，重新绘制对象。重复这一操作，直至动画完毕。,需要时在关键帧之间插入普通帧来降低动画速度。,导入连续图片的方式：,准备好展现对象运动的连续图片，如,GIF,图片。,在动画开始的第,1,个帧处导入连续图片。,需要时在关键帧之间插入普通帧来降低动画速度。,22,.,3.3.3,库、元件、实例,库、元件、实例的概念,元件是指在,Flash,创作环境中创建过一次的图形、按钮或影片剪辑。创建完成后，可在整个文档或其它文档中重复使用该元件。每个元件都有一个唯一的时间轴和舞台。,用户所创建的元件会存放在当前文档的库中。,实例是指库中元件,在,舞台上的具体应用。,23,.,3.3.3,库、元件、实例,元件,的分类：,图形元件,：可用于静态图像。也可用来创建连接到主时间轴的可重用动画片段，与主时间轴同步运行。交互式控件和声音在图形元件的动画序列中不起作用。,影片剪辑元件,：创建可重用的动画片段。影片剪辑的时间轴独立于主时间轴。影片剪辑元件可以包含交互式控件、声音甚至其它影片剪辑实例。,按钮元件,：可以创建用于响应鼠标单击、滑过或其它动作的交互式按钮。,24,.,3.3.3,库、元件、实例,元件,的操作：,创建元件：,新建原件,Ctrl+F8,，将已有内容转换为元件,F8,复制元件,：,在库面板上直接复制,编辑,元件：,双击库面板上的原件,实例的操作：,创建,实例,：,将库中的元件拖动至舞台,编辑实例属性,：,属性面板,分离实例元件,：,Ctrl+B,使用库,25,.,内容提要：,Flash,动画对象的绘制,逐帧动画适用的场合、特点及制作方法,什么是元件？库？实例？,修改元件和修改实例之间的区别,上次课复习,快捷键,：,Ctrl+G,：组合,Shift+Ctrl+G,：取消组合,Ctrl+B,：打散（分离）,Ctrl+Enter,：测试动画,精细动作,每一帧都是关键帧，都需要编辑,两种制作方法：,将动画分解为一个个画面，在每个关键帧中绘制画面,导入连续图片,元件：,Flash,中创作过一次的图形、小段动画或按钮，可以反复使用,制作好的元件存放在库中,将库中的元件拖动至舞台上，就是创建了该元件的一个实例,修改一个实例，舞台上的其他实例和库中的元件都不会变,修改了元件，舞台上所有该元件的实例都会发生变化,F5,：插入普通帧，延续时间,F6,：插入关键帧,F7,：插入空白关键帧,F8,：转换为元件,26,.,？,27,.,内容提要：,形状补间动画的原理和制作方法,传统补间动画的原理和制作方法,补间动画的原理和制作方法,本次课内容,重点,：,形状补间动画的原理和制作方法,传统补间动画的原理和制作方法,难点,：,正确区分几种简单动画类型,28,.,3.3.4,形状补间动画,形状补间动画概述,时间轴中的一个,起始,关键帧上绘制一个,矢量形状,结束,关键帧处更改该形状或绘制另一个,形状,Flash,将,自动,给出中间内插帧的形状,补间形状最适合用于简单,形状,变化,、,位置,变化、,颜色,变化等,的动画,29,.,3.3.4,形状补间动画,形状补间动画,创建,案例,3-3-2,：制作矩形渐变为椭圆的形状补间动画,设计效果,：舞台效果图如下所示。,设计目标,：理解形状补间动画原理，学习形状补间动画的制作。,设计思路,：形状和颜色的变化。起始关键帧处绘制一个蓝色的矩形，在结束关键帧处绘制一个黄色的椭圆，中间的过渡帧由,Flash,自动生成。,30,.,3.3.4,形状补间动画,形状补间动画的制作步骤,：,在变化起始时刻的关键帧中绘制变化前的形状。,在变化结束时刻，按,F7,键插入空白关键帧，并在该帧中绘制变化后的形状。,右击时间轴上起始关键帧和结束关键帧中的任意一帧，在弹出的快捷菜单中选择“创建补间形状”，完成形状补间动画的创建。,31,.,案例拓展,拓展,1,：在案例,3-2-2,基础之上，继续实现圆变红色五角星的动画,设计效果,：舞台效果图如下所示。,设计目标,：进一步理解形状补间动画原理，学习形状补间动画的制作。,设计思路,：起始关键帧处已有黄色椭圆，在结束关键帧处绘制两个红色的五角星，中间的过渡帧由,Flash,自动生成。,形状补间动画,可以是,一对多,32,.,案例拓展,拓展,2,：在案例拓展,1,基础之上，添加字母,A,到,B,的演变动画,设计效果,：舞台效果图如下所示。,设计目标,：进一步理解形状补间动画原理，学习形状补间动画的制作。,设计思路,：新建图层，在起始和结束关键帧处输入字母,A,和,B,，打散后建立形状补间动画。,形状补间动画的对象必须是,形状（单击呈点状）,，如果是元件、组合、文字等需先打散,一个形状补间动画产生在,同一图层,33,.,案例拓展,拓展,3,：在案例拓展,2,基础之上，添加三角形翻转的动画。,设计效果,：舞台效果图如下所示。,设计目标,：进一步理解形状补间动画原理，学习为形状补间动画添加形状提示点。,设计思路,：新建图层，在起始和结束关键帧处绘制三角形，建立形状补间动画并添加形状提示点。,添加形状提示点，可以控制形变过程,34,.,3.3.4,形状补间动画,使用形状提示控制形状变化,创建形状补间动画,在起始关键帧，“修改”“形状”“添加形状提示点”，将提示点移动到合适位置,在结束关键帧，将对应的提示点移动到对应位置,35,.,3.3.4,形状补间动画,36,.,3.3.4,形状补间动画,形状补间动画总结,适合形状、颜色、位置的变化,动画的对象必须是形状（单击呈点状），若是元件、组合、文字、位图等必须先打散成形状,动画可以是一对一，也可以是一对多,动画发生在同一图层,添加形状提示点可以控制形状补间过程,37,.,课后思考题,案例,3-3-3,：生日贺卡的制作,设计效果,：参照“生日贺卡,.swf”,。,设计目标,：进一步掌握形状补间动画的制作，使用形状提示点控制形变过程。掌握元件的概念、制作和使用。,38,.,3.3.5,传统补间动画,传统补间动画概述,时间轴中的一个,起始,关键帧上,放置,元件、文本、组合或位图,结束,关键帧处更改,其属性,Flash,将,自动,给出中间内插帧的形状,传统补间动画,适合用于,对象的,大小,、,位置,（包括旋转、加减速）,、,颜色,（包括亮度、色调、透明度）变化。,39,.,3.3.5,传统补间动画,传统补间动画,创建,案例,3-3-3,：,制作蝴蝶飞过,的传统补间动画。,设计效果,：一,只蝴蝶从,舞台左侧向右侧飞过的,动画。,设计目标,：理解传统补间动画原理，学习传统补间动画的制作。,设计思路,：只需在起始关键帧处舞台左侧放置一,个蝴蝶元件,，在结束关键帧,处将蝴蝶移动,到舞台,右侧并缩小，中间,的过渡帧由,Flash,自动生成。,40,.,3.3.5,传统补间动画,传统补间动画,创建,传统,补间动画的制作步骤,：,在起始键帧中添加运动对象的元件，设置其属性。,在变化结束时刻，按,F6,键插入关键帧。根据需要，修改该帧中运动对象的属性（如位置、旋转、缩放、颜色等）。,右击时间轴上起始关键帧和结束关键帧中的任意一帧，在弹出的快捷菜单中选择“创建传统补间”，完成传统补间动画的创建。,41,.,3.3.5,传统补间动画,案例,3-3-5,：制作一个蓝图白云的动画效果。,设计效果,：参照“蓝图白云,.swf”,。,设计目标,：进一步掌握传统补间动画的制作，例如对象进行直线运动、旋转、摇摆、放大缩小、颜色改变等动画效果的制作。,42,.,3.3.5,传统补间动画,传统补间动画总结,适合大小、颜色、位置的变化，还可以制作加减速，旋转、透明度变化,动画的对象必须是元件、组合、文字、位图等，如果是形状，需要先组合或转换为元件,动画只能是一对一,动画发生在同一图层,43,.,3.3.5,补间动画,补间动画概述,时间轴中的一个,起始,关键帧上,放置元件、文本、组合或位图,为该帧创建补间动画,添加属性关键帧，改变对象属性,补间动画可以设置运动对象的,大小,、,位置,、,颜色,等属性的变化，还可以进行,曲线,运动。,44,.,3.3.5,传统补间动画,案例,3-3-5,：制作一个气球升起的补间动画。,设计效果,：参照“气球,.swf”,。,设计目标,：理解补间动画原理，学习补间动画制作。,45,.,3.3.5,传统补间动画,补间动画,创建,补间动画的制作步骤,：,新建一个图层，向第一个关键帧添加元件，右键单击该帧，在快捷菜单中选择“创建补间动画”。,选择后面某个帧，按,F6,添加属性关键帧。（黑色菱形）,修改属性关键帧处元件的属性，如位置，颜色、倾斜等。舞台中,2,个关键帧的对象之间将产生运动路径。,使用编辑工具修改运动路径。,46,.,补充：,4,种简单动画比较,逐帧动画,形状补间动画,传统补间动画,补间动画,每个帧都是关键帧，都需要人工编辑,只需要规定首尾关键帧或者属性关键帧，过渡帧由,Flash,自动生成,47,.,补充：,4,种简单动画比较,形状补间动画,传统补间动画,补间动画,场合,大小颜色位置的变化,形状的变化,大小颜色位置的变化,透明度、亮度等的变化,还可以旋转、加减速,大小颜色位置的变化,可以做曲线运动,时间轴,淡绿色背景带箭头实线,淡紫色背景带箭头实线,淡蓝色背景,帧,首尾两个关键帧，过渡帧,Flash,生成,首尾两个关键帧，过渡帧,Flash,生成,首关键帧，后续几个属性关键帧,图层,同一图层,同一图层,同一图层,对象,形状，单击呈芝麻点状,若不是，需先,Ctrl+B,打散,元件、组合，文字或位图，单击有边框线。绝不能是形状。,元件、组合，文字或位图，单击有边框线。绝不能是形状。,48,.,3.4.1,引导路径动画,现实世界里，很多物体的运动轨迹并不是直线，而是任意的曲线，有的甚至还是封闭的曲线,。,49,.,3.4.1,引导路径动画,1.,引导路径动画概述,引导路径动画，也称引导层动画，是指将一个或多个层链接到一个运动引导层，使一个或多个对象沿同一条路径运动的动画形式。,50,.,3.4.1,引导路径动画,2.,引导路径动画,创建,案例,3-4-1,：制作一片枫叶随风飘落的动画。,设计效果,：参照“枫叶飘飘,.swf”,文件。,设计目标,：理解引导路径动画的原理。学习最基本的引导层动画创建,设计思路,：枫叶是运动对象，放置于被引导层，在引导图层中绘制飘落时的运动轨迹。,51,.,3.4.1,引导路径动画,引导路径,动画,（最基本）,的制作步骤,：,新建图层，在第,1,帧中放置动画对象。,右键点击动画对象所在的图层，快捷菜单中选择“添加传统运动引导层”，添加运动引导层。在运动引导层中，利用铅笔或其他工具绘制引导线。绘制的引导线要平滑流畅，尽量一气呵成，不作停顿。,选中动画对象所在图层的第,1,帧，拖动对象，将中心点对准引导线的起点。在结束处，按,F6,键插入关键帧，并将实例的中心对准引导线的终点。,创建该图层的传统补间动画。,52,.,3.4.1,引导路径动画,运动轨迹为封闭曲线的,引导路径动画,创建,案例,3-4-2,：制作小狗绕着旋转的圆球跑动的动画。,设计效果,：参照“小狗圆球,.swf”,文件。,设计目标,：进一步理解运动引导动画的原理，学习引导线为封闭曲线的引导路径动画制作。,设计思路,：小狗作为运动对象放置于被引导层，在引导层中绘制运动轨迹：有缺口的圆线，还需另外一个图层，制作圆球旋转的动画。,53,.,3.4.1,引导路径动画,运动轨迹为封闭曲线的,引导路径动画,创建,案例,3-4-2,：制作小狗绕着旋转的圆球跑动的动画。,设计效果,：参照“小狗圆球,.swf”,文件。,设计目标,：进一步理解运动引导动画的原理，学习引导线为封闭曲线的引导路径动画制作。,设计思路,：小狗作为运动对象放置于被引导层，在引导层中绘制运动轨迹：有缺口的圆线，还需另外一个图层，制作圆球旋转的动画。,54,.,3.4.1,引导路径动画,多个对象沿着同一条轨迹运动的,引导路径动画,创建,案例,3-4-3,：制作星空文字汇聚动画。,设计效果,：参照“星空文字汇聚,.swf”,文件。,设计目标,：学习一条引导路径引导多个运动对象的引导路径动画制作,设计思路,：多个“星”字图案沿着同一条路径汇聚在一起，一个引导层要引导多个被引导层，每个被引导层里放置一个“星”文字，而且各个图层中文字的透明度也是不同的。,55,.,3.4.1,引导路径动画,多个对象沿着同一条轨迹运动的,引导路径动画,创建,案例,3-4-3,：制作星空文字汇聚动画。,设计效果,：参照“星空文字汇聚,.swf”,文件。,设计目标,：学习一条引导路径引导多个运动对象的引导路径动画制作,设计思路,：多个“星”字图案沿着同一条路径汇聚在一起，一个引导层要引导多个被引导层，每个被引导层里放置一个“星”文字，而且各个图层中文字的透明度也是不同的。,56,.,3.4.1,引导路径动画,运动轨迹可见的,引导路径动画,创建,案例,3-4-3,：制作多个小球绕着椭圆轨迹线运动的动画。,设计效果,：参照“小球运动,.swf”,文件。,设计目标,：进一步掌握引导路径为封闭曲线的运动引导路径动画制作，掌握如何显示对象运动轨迹的方法。掌握元件的创建和使用方法。,设计思路,：由于引导路径在动画播放时是不显示的，所以看到的椭圆并不是引导线，而是在另外图层中绘制的椭圆。,57,.,3.4.2,遮罩动画,1.,遮罩动画概述,遮罩动画由两个图层构成：遮罩层和被遮罩层，两个图层上下链接在一起。在遮罩图层中绘制填充色块或文字，或者放置对象，就等于在遮罩层上挖出了与之形状相同的“视窗”，动画的效果就是透过遮罩图层上的“视窗”来观看下方被遮罩图层的内容。,58,.,3.4.2,遮罩动画,在,Flash,作品中，我们常常看到很多神奇炫目的效果，比如探照灯、放大镜、万花筒、水波涟漪等等，这些丰富的效果都可以使用“遮罩动画”来打造。,59,.,3.4.2,遮罩动画,2.,遮罩,动画,创建,案例,3-4-5,：利用遮罩动画实现会变颜色的彩虹文字效果。,设计效果,：参照“彩虹文字,.swf”,文件。,设计目标,：理解遮罩动画原理，掌握动画产生在被遮罩层的遮罩动画创建方法。,设计思路,：文字形状是“视窗”，透过这个视窗，可以看到下方彩条的移动，从而形成会变颜色的彩虹字。所以，文字所在的图层是遮罩图层，彩条所在的图层是被遮罩层。彩条在做位移运动。,60,.,3.4.2,遮罩动画,遮罩,动画的制作步骤,：,制作被遮罩层中的内容,制作遮罩层中的内容,在图层面板中，右键点击遮罩图层，在快捷菜单中选择“遮罩层”。,正确区分哪个是遮罩层，哪个是被遮罩层；进一步确定到底是哪个图层在动或者是两个图层都在动。,61,.,3.4.2,遮罩动画,案例,3-4-6,：利用遮罩动画打造探照灯效果。,设计效果,：参照“探照灯,.swf”,文件。,设计目标,：进一步理解遮罩动画原理，掌握动画产生在遮罩层的遮罩动画创建方法。,设计思路,：动画中应该包含三个图层，从下到上分别放置黑暗的夜景，光照的夜景和探照灯。其中，光照的夜景是被遮罩层，探照灯是遮罩层，遮罩层中要制作探照灯移动的位移动画。,62,.,3.4.2,遮罩动画,案例,3-4-7,：古诗诵读。,图层,图层中的对象,动画,是否为遮罩层或被遮罩层,背景图层,棕色系背景图片,无,否,左卷轴图层,左卷轴,从舞台中心至左侧的位移动画,否,右卷轴图层,右卷轴,从舞台中心至右侧的位移动画,否,诗句背景图层,白色矩形，荷叶，荷花,无,被遮罩层,蜻蜓图层,蜻蜓,向左下角的补间动画,被遮罩层,诗句图层,诗句,透明度变化的传统补间动画,被遮罩层,遮罩层,矩形,从小到大的形状补间动画,遮罩层,63,.,3.5.1 Flash,中声音的应用,Flash CS5,支持的声音文件格式：,WAV,，,MP3,，,ASND,，,AIFF,等,2.,在,Flash,中如何加入声音？,导,入声音素材：文件菜单导入导入到舞台,命令,添加声音：新建图层，拖动到舞台上,设置声音,的同步,选项,设置,声音的,效果,压缩,声音,64,.,3.5.1 Flash,中声音的应用,声音的同步选项：,“事件”：会将声音和一个事件的发生过程同步起来。独立于时间轴完整播放，即使,SWF,文件停止声音也会继续播放。同步选项“事件”多用于按钮中的声音，或较短的声音。,“开始”：与“事件”选项的功能相近，但是如果声音已经在播放，则新声音实例就不会播放。,“停止”：使指定的声音静音。,“数据流”：强制动画和音频流同步。与事件声音不同，音频流将随着,SWF,文件的停止而停止。,65,.,3.5.1 Flash,中声音的应用,声音效果：,属性面板的“效果”选项中可以设置声音的效果,自定义声音效果,66,.,3.5.2 Flash,中导入视频,Flash CS5,支持的,视频,文件格式：,FLV,或,F4V,（,H.264,）,2.,在,Flash,中如何加入视频？,文件菜单导入导入,视频,按照向导逐步操作,67,.,3.5.3,按钮的制作,什么,是,按钮？,按钮,元件可以被看作是一个,4,帧的影片,剪辑,第,1,帧是弹起帧,：,鼠标没有经过按钮时，该按钮的外观。,第,2,帧是指针经过帧,：,鼠标滑过按钮时，该按钮的外观。,第,3,帧是按下帧,：,鼠标按下按钮时，该按钮的外观。,第,4,帧是点击帧,：,定义响应鼠标单击的物理区域。此区域在影片播放时不可见。,68,.,3.5.3,按钮的制作,用户自定义按钮,按钮,设计时，应分别设计其包含的,4,个帧，并为按钮添加脚本，以实现交互的功能。,案例,3-5-2,设计制作“,play”,和“,stop”,按钮。,69,.,3.5.3,按钮的制作,公用库,按钮,窗口,菜单公用库按钮命令，打开按钮公用库。,将所需按钮,拖动至舞台上即可,使用。,70,.,3.6,交互动画制作,Flash,是一款非常优秀的动画制作软件，最吸引人的是它强大的交互功能。,Flash,的交互功能是基于动作脚本语言的基础之上的。,ActionScript,，简称,AS,，中文译为“动作脚本”，是,Flash,的内置脚本语言。它是一种面向对象的编程语言。,71,.,3.6.1,动作面板的使用,窗口菜单动作命令，或者按下,F9,键，打开动作面板。,脚本语言编辑窗格,动作工具箱,脚本导航器,72,.,3.6.2 ActionScript,基础,ActionScript,书写规则,区分,大小写,。,分号,。用以表示每一句语句的结束。,大括号,。一段完整的代码需要放置在,中，用,可以将语句分成若干部分。,圆括号,(),。用来为函数传递参数。例如，,GotoAndPlay(1),表示跳转到第,1,帧播放。,下划线,_,。用来表示属性。例如，,my_mc._height,表示影片剪辑,my_mc,的高度。,点语法。在,ActionScript,中，点有两种作用：访问对象的属性和方法,my_mc._x=100,；,my_mc._x.stop,(),；表示路径,_root.my_mc.my1_mc,。,73,.,3.6.2 ActionScript,基础,ActionScript,语法,数据类型,常量,变量,运算符,函数：能够完成某些特定功能的程序块,程序结构：顺序结构，选择结构和循环,结构,74,.,3.6.3 ActionScript,交互动画制作,脚本添加的对象,Flash,里可以为,3,类对象添加动作脚本，分别是,帧,、,按钮元件,和,影片剪辑元件,变量。,为,关键帧添加,动作：选中,帧后，只需双击动作工具箱里所需的动作，将动作添加到脚本编辑区中即,可。,为,按钮添加,动作：在,添加动作到脚本编辑区之前，需要通过工具箱中的影片剪辑控制类中的,on,语句来指定触发该动作的鼠标或键盘事件,函数。,若是为影片剪辑添加动作，则在添加动作到脚本编辑区之前，需要通过工具箱中影片剪辑控制类中的,onClipEvent,语句来指定触发该动作的,事件。,75,.,3.6.3 ActionScript,交互动画制作,ActionScript,中的常用动作,控制,Flash,影片的停止与,播放,案例,3-6-1,：,两,个按钮，分别控制影片的播放和停止。,设计,思路,：,默认,打开,SWF,文件时，动画会开始循环播放。只需在舞台上放置两个按钮，编写脚本，使用时间轴控制类中的,stop,和,play,动作，使得单击“,Stop”,按钮时，动画停止播放；单击“,Play”,按钮时，动画继续播放。,76,.,3.6.3 ActionScript,交互动画制作,on(,鼠标或键盘事件,),动作脚本,on(press),点击：使用鼠标指向按钮并按下左键不动,on(release),释放：使用鼠标指向按钮并按下鼠标左键后松开左键,on(releaseOutside),释放离开：使用鼠标指向按钮并按下左键后松开左键后离开按钮区域,on(keyPress),按键：按下键盘上的某键,on(rollOver),指针经过：将鼠标指针放在按钮区域内（不按任何键）,on(rollOut),指针离开：鼠标指针离开按钮区域（不按任何键）,on(dragOver),拖放经过：当鼠标激活按钮，单击拖过按钮有效区域时,on(dragOut),拖放离开：当鼠标激活按钮，单击拖出按钮有效区域时,77,.,3.6.3 ActionScript,交互动画制作,案例,3-6-2,：,动画不会自动播放，需要单击“,play”,按钮，才开始播放。在播放过程中，“,play”,和“,stop”,按钮分别控制影片的继续播放和停止。,设计思路：,播放过程中，“,play”,和“,stop”,按钮控制功能的实现与第一种情况完全相同。实现动画不会自动播放功能，需要在第,1,帧上添加脚本，使用,stop,动作，使得动画在第,1,帧处就停止，不会播放。,78,.,3.6.3 ActionScript,交互动画制作,案例,3-6-3,：,动画自动播放至结束，不会自动循环播放，结束时出现“,Replay”,按钮，单击该按钮，从头开始播放动画。,设计思路：,Flash,动画默认是自动循环播放，所以自动播放无需设置，但需要在动画最后,1,帧添加,stop,动作使其停止播放。同时，在最后一帧还需要在舞台上放置“,Replay”,按钮，并添加代码，使用时间轴控制类中的,gotoAndPlay,动作，使得单击该按钮，动画继续播放。,79,.,3.6.3 ActionScript,交互动画制作,ActionScript,中的常用动作,控制,影片剪辑的属性,案例,3-6-4,：,利用,脚本控制瓢虫运动。,设计,思路：,舞台上的,9,个按钮分别用来控制瓢虫的上下左右移动，旋转，大小变化和透明度变化。上下、左右移动可以通过编写脚本改变瓢虫影片剪辑的纵坐标（,ladybird_y,）和横坐标（,ladybird_x,）属性实现，大小变化则可通过改变瓢虫影片剪辑的宽度（,ladybird_width,）和高度属性（,ladybird_height,）实现，改变旋转方向（,ladybird_rotation,）和透明度属性（,ladybird_alpha,）则可实现瓢虫的旋转以及透明度变化。,80,.,3.7,动画制作综合应用,案例,3-7-1,制作圣诞贺卡,设计思路：,该案例为一个单场景动画，主场景的舞台上包含多个对象，每个对象对应一个图层：,舞台背景：颜色为线性渐变填充，可通过绘制渐变色的矩形来实现。,雪地：用白色刷子绘制。,圣诞树：静止对象，利用素材图片制作成图形元件放置于舞台上即可。,光晕：大小发生变化，可以制作成影片剪辑元件，内含光晕从小到大的形状补间或者传统补间动画。,风铃：有摆动效果，可利用素材图片制作成影片剪辑，以逐帧动画来实现风铃的摇摆。,雪花飘落：典型的引导路径动画，亦可制作成影片剪辑元件。,文字：典型的遮罩动画，亦可制作成影片剪辑元件。,音乐：添加音乐图层，将音乐导入即可。,81,.,