01网络动画制作.ppt

08.06.2020,1,FLASHMX的使用,08.06.2020,2,课程教学目标,掌握flash动画制作的基本原理和基本概念（元件、舞台、场景、层等）；熟悉flash的制作界面，掌握动画制作的一般流程掌握flash配套软件swish的使用方法掌握flash中两种动画（逐帧动画和渐变动画）的制作方法能使用flash制作简单的动画并与网页结合；掌握flash中的脚本语言Actionscript的基本语法，能用Actionscript对动画进行常见的控制；掌握制作flashMTV的一般方法掌握制作flash课件的一般方法,08.06.2020,3,课程的重点与难点,重点：flash动画制作的基本原理和基本概念；掌握动画制作的一般流程，逐帧动画和渐变动画的制作方法flash中的脚本语言Actionscript的基本语法掌握制作flashMTV的一般方法掌握制作flash课件的一般方法swish的使用方法难点：场景、舞台和层的概念遮照动画、按钮和电影元件的使用Actionscript的基本语法声音的同步与优化动画的发布设置制作flash课件的一般方法,08.06.2020,4,教材,教材：精通FLASHMX2004动画与ACTIONSCRIPT编程，胡孔法等著，清华大学出版社，2004年11月第1版参考教材：flashMX网络动画设计师特训班2004四川电子音像出版社金鼎图书工作室著30元含光盘,08.06.2020,5,教学内容,基础篇制作FLASHMTV制作FLASH课件,08.06.2020,6,基础篇课程目录,简介工作界面Flash中动画制作原理元件逐帧动画与渐变动画素材的导入声音与动画的同步动画的导出与发布FLASH动画的制作流程动画制作实例,08.06.2020,7,flash简介,Macromedia公司出品的Flash动画制作软件功能很强大，其中增加了对MP3压缩编码的支持，这使得在普通课件中播放MP3音乐成为可能。Flash动画需要自带的播放器才能播放，也可以打包为可执行文件(*.exe)，Macromedia公司也为流行的web浏览器提供了播放插件。,08.06.2020,8,flash简介,Flash还支持其他格式文件的输出，如GIF动画文件、AVI视频文件、QuickTime的MOV文件及EMF和WMF图元文件序列、EPS文件序列JPEG图像文件序列等，这弥补了Flash动画文件在播放上的局限性。EMF、WMF是一种矢量图片格式，支持透明，与Gif相似。,08.06.2020,9,flash简介,Flash动画的最基本元件就是对象，使用绘图工具栏中的绘图工具在帧编辑区中绘制矢量化对象，为了方便对象的重复使用，可以把对象保存为symbo1（元件）或直接创建组件；对象处于Scene（场景）中，某一时刻场景的静态图像称为Frame（帧）；每个场景中可设置多个Layer（层），每个层中有若干个对象；改变不同的时刻（即不同的帧）中对象的位置、形态，由此产生动画。,08.06.2020,10,Flash的应用,广泛应用在因特网上。动态贺卡MTV课件游戏网页（整个网页、网页中的导航条等）网页中的广告横幅广告、擎天柱广告、画中画广告、流媒体按钮广告、竖条广告、鼠标响应广告、全屏广告、专栏广告（独立窗口）、浮动广告、伸缩广告,08.06.2020,11,工作界面（一）,08.06.2020,12,工作界面（二）常用工具的使用,选择工具画线工具文字工具画圆工具画矩形工具变形工具填充工具吸管工具橡皮工具,08.06.2020,13,FLASH动画原理,Flash动画是以时间轴为基础的帧动画，它由按时间顺序排列的一系列帧组成，连续地播放这些帧就形成了动画。帧Flash把动画随时间的进程，按不同的时刻分成一幅幅的画面，即帧。帧是动画的基本单元，是动画最小时间单位里出现的画面。帧是播放内容(图像、音频和其他嵌入对象)的载体。播放和交互操作也是以帧为基本单位进行的。关键帧也是一种帧，关键帧中的图形（像）等内容与普通帧不同。Flash只保存关键帧的信息。一个Flash动画中至少有一个关键帧，此时无法产生动画效果。若要产生动画至少需要两个关键帧才可产生动画效果。,08.06.2020,14,FLASH动画原理,帧频帧频指每一秒内动画播放的帧数，系统默认帧率为12帧/秒。帧按设定的帧频播放，便形成了动画。帧频越大，动画越连贯。用帧数除以帧频就可以得到动画的时间长短。3.时间轴Flash动画持续的时间长短在时间轴上表现，其刻度为“帧”，即动画是由若干帧组成的。,08.06.2020,15,FLASH动画原理,4.层每个层都像一张透明的胶片，每帧的内容都可由若干层叠加形成。同时，每一个层中又包含了一系列帧。5.场景一个复杂的Flash动画可以由若干个场景组成，每一个场景都可以是一个完整的动画。场景可以通过舞台右上部的“场景”切换按钮进行切换。在播放动画时，场景与场景之间可以通过交互响应进行切换，默认按顺序播放。6.舞台是编辑图形（像）等动画元素的场所，也是图形（像）等动画元素表演的场所，舞台大小可调。,08.06.2020,16,FLASH中的元件,图形元件按钮元件电影元件“元件”类似于面向对象思想中的“类”，例如要多次用到一个图像，我们就可以将这个图像制作为“元件”，以后再次用到只需将它从库面板中拖到需要的帧中即可。在一个Flash动画中，所有元件都可以共享使用，从而压缩文件的大小。制作好的元件都存放在库中，可通过库面板管理。元件的内容可以是图片文字、按钮，也可以是一个动画。渐变动画的运动对象必须是元件。,08.06.2020,17,图形元件,静止的图形或图像，作为电影元件或主动画的“演员”。图形元件有自己的时间轴，但由于图像元件为静止的，所有一般只有一个帧。图形元件可以有多个层。,08.06.2020,18,按钮元件,在flash动画中鼠标移上去后播放按钮元件有自己的时间轴，但只有四个关键帧（弹起、指针经过、按下和点击）。按钮元件有多个层。按钮可以有动作，且只有与actionscript结合。按钮的例子,08.06.2020,19,电影元件,是一个子动画。电影元件有自己的时间轴，是一个完整的小动画，因此有多个帧（至少两个关键帧）。电影元件有多个层。电影元件可以有动作。,08.06.2020,20,Flash中的两种动画,逐帧动画逐帧动画中的每一帧内容都可以单独进行编辑，使得各帧展示的内容不完全相同。用逐帧动画的制作方法几乎可以创作出任意效果的动画作品。但这种方法工作量大，动画文件存储空间大。渐变动画（过渡动画）由两个处于两端的关键帧和位于中间的一个过渡帧序列组成。两个关键帧分别放置动画序列的起始状态和终止状态，过渡帧序列产生动画的中间效果。编辑两个关键帧中的动画对象属性，然后设计过渡帧序列的动作类型和效果。Flash的补间动画分为补间形状动画和补间动作动画两种。,08.06.2020,21,不同帧的样子,(1)渐变动作动画是在起始关键帧用一个黑色圆点指示，中间的渐变帧有一个浅蓝色背景的黑色箭头。(2)渐变形状动画是在起始关键帧用一个黑色圆点表示，中间的帧有一个浅绿色背景的黑色箭头。(3)虚线表示渐变是断的或不完整的，例如，最后的关键帧丢失就会显示如下形状。,08.06.2020,22,不同帧的样子,(4)单个关键帧用一个黑色圆点表示。单个关键帧后面的浅灰色帧包含着相同的内容，没有任何变化，在这个范围中的最后一个帧还有一个中空的矩形。(5)一个小a表明该帧已经用“动作”面板分配了一个帧动作。(6)一个红色标记表明该帧包含一个标签或注释。(7)一个金色的锚记表明该帧是一个命名锚记。,08.06.2020,23,制作逐帧动画,方法一（直接导入多个图片）新建flash文件在主时间轴上，导入表示连续动作的系列图片。自动将图片导入库中，并在主时间轴上生成多个关键帧，每张图片对应一个关键帧。方法二（手动添加关键帧）新建flash文件在主时间轴上，插入一张图片，添加关键帧，插入下一张图片添加关键帧，插入下一张图片。调整各关键帧中图片的位置。,08.06.2020,24,制作渐变动画（补间动画）,新建flash文件在主时间轴上，放入动画对象（元件），插入关键帧，改变动画对象。在两个关键帧间，设置渐变。,08.06.2020,25,动作,ActionScript是Flash内置的编程语言，用它为动画编程，可以实现各种动画特效、对影片的良好控制、强大的人机交互以及与网络服务器的交互功能。动作的本质是为对象（帧、按钮元件和电影元件）设置Actionscript。,08.06.2020,26,ActionScript的功能,控制播放顺序你可以通过选择某个菜单将影片暂停在某个位置，然后由用户来决定下一步干什么，这就避免让影片径直朝前播放。创建复杂动画直接使用Flash中的绘图工具和基本命令来创建足够复杂的动画是相当困难的，但是脚本可以帮助你创建复杂的动画。例如可以用ActionScript控制一个球在屏幕中无休止的跳动，并且可以使它的动作遵从物理学中的重力定律。如果你不用ActionScript来实现这样的动画，你将需要几千帧来模仿相似的动作，而用ActionScript，你将只需要一帧。,08.06.2020,27,ActionScript的功能,响应用户输入可通过影片向用户提出问题并接收答案，然后将答案信息用于影片中或将其传送到服务器。加入了相应ActionScript的Flash影片更适合做网页中的表单。从服务器获取数据与向服务器传送数据相反，使用ActionScript也可以从服务器中获取数据，你可以获取即时的信息并将它提供给用户。计算对数值进行计算，用它可以模拟出各种复杂的计算器。,08.06.2020,28,ActionScript的功能,调整图像ActionScript可以在影片播放时改变图像的大小、角度、旋转方向以及影片剪辑元件的颜色等。你还可以从屏幕中复制或删除对象。测试环境测试Flash影片的播放环境，如获取系统时间，获取FlashPlayer的版本信息等。控制声音ActionScript可以方便地控制声音的播放，甚至控制声音的声道平衡和音量等。,08.06.2020,29,在哪里放置Actionscript？,关键帧按钮元件的实例添加的脚本应该是在单击按钮时执行。其实，也可以为其他鼠标动作添加相应的脚本，如鼠标进入和移出按钮区域。按钮也可以响应按键动作，这使得我们可以方便地为按钮设置快捷键。电影元件的实例,08.06.2020,30,动作面板,动作面板的标准模式允许你从脚本目录中选择关键字并设置相应的选项，标准模式：必须从窗口左边的菜单中选择需要的关键字，而不能直接使用键盘输入脚本，可以有效避免输入的错误。专家模式：为程序员提供了直接输入代码的自由。可以直接通过键盘输入脚本（或任何东西），而不需要从左边的目录中选择命令。很容易导致错误。,08.06.2020,31,动作面板中的内容,动作在动作类中包含了最简单的ActionScript命令。动作类提供了测试条件、循环、创建函数、复制和创建影片剪辑以及从服务器中获取数据等功能的命令。动作类中的命令是ActionScript最重要的组成部分。动作类又分为影片控制、浏览器/网络、影片剪辑控制、变量、条件/循环、打印、用户定义的函数以及其他动作等子类。运算符它包括了各种数学和比较运算符，如+号，用于两数相加；=号，用于判断两数是否相等。运算符类下面又分为按位、比较、赋值、逻辑、算术和其他运算符等子类。,08.06.2020,32,动作面板中的内容,函数使用函数可以转换数据或获取需要的信息，如获取Flash的版本信息。你可以使用函数将字符串123转换成数字123。你还可以自定义需要重复使用的函数。在函数类下面主要有两个子类：数学函数和转换函数。常量常量类中包含了一些具有特定值的特殊关键字，如true、false、null和newline等。属性属性类中的关键字反映了Flash中元素的相关信息。例如_x属性代表影片剪辑在屏幕中的水平位置。,08.06.2020,33,动作面板中的内容,对象对象类是最复杂的一类，它包含了ActionScript中的众多概念。所有的对象关键字被分成4个子类：核心、影片、客户端/服务器、创作。影片剪辑是影片类下面的一种，它包含了与控制影片剪辑相关的关键字。Math是核心下面的一种，它包含了求平方根、正弦值等数学函数。否决的这一类中的关键字是已经作废但FlashMX仍然支持的，在FlashMX中请尽量避免使用，因为在以后的Flash版本中将不再支持这些关键字。FlashUI组件这一类中的关键字包含了特殊功能的组件，如单选按钮、滚动条等。,08.06.2020,34,动作面板中的内容,索引索引类将ActionScript中的所有关键字按字母顺序排列。以上各类中的关键字都可以在索引类中找到。动作面板中提供的关键字分类有时可以帮你方便地找到需要的关键字，但也有可能给你带来麻烦。如你可能认为表示影片剪辑水平坐标属性的_x应该在对象类的“影片”/“影片剪辑”/“属性”里面，但它却在属性类里面。你可能认为sqrt（开平方）应该在函数类中，但它却在“对象”/“核心”/“Math”/“方法”下面。,08.06.2020,35,如何调试程序？,三种方法：逻辑推断向输出窗口发送信息使用脚本调试器。,08.06.2020,36,调试程序输出窗口,按Ctrl+Enter键测试影片同时出现一个输出窗口输出窗口是只在测试Flash影片时出现的一个编程工具，Flash用它来显示出错信息或其他的一些重要信息。用户可以用ActionScript中的trace命令自定义要发送到输出窗口中的信息。输出窗口在测试程序时非常有用。你可以使用trace命令在输出窗口中显示变量的值或者哪一部分ActionScript正在执行。输出窗口还可以帮助你学习ActionScript。你可以编写一些小程序，将信息发送到输出窗口，这将帮助你看到程序的运行结果。,08.06.2020,37,调试程序调试器,可以查看影片中的各种数据以及ActionScript代码的运行情况。控制”“调试影片”命令，或按快捷键Ctrl+Shift+Enter调试器窗口中包含很多窗格，在左边的窗格中可以检查Flash影片中不同类型的对象，右边的窗格显示影片中所有的ActionScript。在调试器窗口中可以设置断点，断点即是为某行代码添加的一个标记，当调试影片时，影片会自动在断点处停止，允许你查看当前包括变量值在内的的影片状态。使用断点可以使你逐行地执行代码，对每行代码的运行结果进行观察和分析。,08.06.2020,38,控制影片播放的脚本,stop：使影片停止在当前时间轴的当前帧中。play：使影片从当前帧开始继续播放。gotoAndStop：跳转到用帧标签或帧编号指定的某一特定帧并停止。gotoAndPlay：跳转到用帧标签或帧编号指定的某一特定帧并继续播放nextFrame：使影片转到下一帧并停止。prevFrame：使影片回到上一帧并停止。说明：stop命令常常用在帧动作中，以使影片停止并等待用户控制。其他命令常常用在按钮的事件处理函数中。例如：gotoAndPlay(myScene,1);再如on(release)gotoAndStop(end);,08.06.2020,39,浏览器/网络控制,on(release)fscommand(fullscreen,true);fscommand(allowscale,true);fscommand(showmenu,true);,加引号,08.06.2020,40,控制影片剪辑,动作：事件：影片剪辑最重要的事件是load和enterFrame。,08.06.2020,41,onClipEvent(load)vari=0;onClipEvent(enterFrame)trace(i);i+;,08.06.2020,42,“STOP”按钮：单击“STOP”按钮使roll实例停止播放on(release)roll.stop();“PLAY”按钮：单击“PLAY”按钮使roll实例继续播放。on(release)roll.play();PREV”按钮：单击“PREV”按钮使roll实例回退一帧并停止。on(release)roll.prevFrame();“NEXT”按钮：on(release)roll.nextFrame();,08.06.2020,43,坐标的表示方法,分别用_x和_y表示x坐标值属性和y坐标值属性主时间轴上表示场景中的影片剪辑myMC的位置属性，可以使用下面的方法：myMC._xmyMC._y如果是在myMC自身的脚本中表示它的坐标，也以使用如下的方法：_x;_y;或：this._x;this._y;,08.06.2020,44,鼠标光标的坐标,表示鼠标光标的坐标属性的关键字是_xmouse和_ymouse，其中，_xmouse代表光标的水平坐标位置，_ymouse代表光标的垂直坐标位置。如果这两个关键字用在主时间轴中，则它们表示鼠标光标相对于主场景的坐标位置；如果这两个关键字用在影片剪辑中，则它们表示鼠标光标相对于该影片剪辑的坐标位置。_xmouse和_ymouse属性都是从对象的坐标原点开始计算的，即在主时间轴中代表光标与左上角之间的距离；在影片剪辑中代表光标与影片剪辑中心之间的距离。多数情况下，你需要用到鼠标光标在主场景中的位置，所以可以使用_root._xmouse和_root._ymouse表示。,08.06.2020,45,鼠标光标的坐标,你可以使用下面的代码让影片剪辑保持与鼠标位置相同的坐标值：onClipEvent(enterFrame)_x=_root._xmouse;_y=_root._ymouse;Flash不能获得超出影片播放边界的鼠标位置。这里的边界并不是指影片中设置的场景大小。如将场景大小设置为550400，在正常播放时能获得的鼠标位置即在(0,0)(550,400)之间；如果缩放播放窗口，将视当前播放窗口的大小而定；如果进行全屏播放，则与显示器的像素尺寸有关。,08.06.2020,46,影片剪辑的控制复制影片剪辑（duplicateMovieClip）,动作面板的“动作”/“影片剪辑控制”目录）MovieClip对象（动作面板的“对象”/“影片”目录）duplicateMovieClip方法：在影片播放时复制场景中的父影片剪辑以产生新的影片剪辑。此方法和attachMovie方法对于要在影片中重复产生较多相同图形或动画对象时非常有用，如棋类游戏、射击游戏、鼠标跟随、下雪等特效动画。要使用duplicateMovieClip动作和MovieClip.duplicateMovieClip方法，首先需要在场景中创建用来复制的父影片剪辑，并且在属性面板中为该父影片剪辑实例命名，该影片剪辑实例名称将作为duplicateMovieClip的参数之一。,08.06.2020,47,影片剪辑的控制复制影片剪辑（duplicateMovieClip）,在帧动作中使用duplicateMovieClip动作的方法如下所示：duplicateMovieClip(parentMC,childMC,10);其中，第1个参数parentMC是父影片剪辑的唯一标识符，第2个参数childMC是复制产生的新影片剪辑实例的唯一名称，第3个参数10是新影片剪辑的深度级别（level）。深度级别的概念与层类似，较高深度级别中的图形会遮挡住较低深度级别中的图形，影片剪辑所在的深度级别越高就越贴近我们的视线。在同一个深度级别中只能有一个影片剪辑实例，如果在同一深度级别中添加多于一个影片剪辑实例，新的影片剪辑实例将替换掉旧的影片剪辑实例。,08.06.2020,48,影片剪辑的控制复制影片剪辑（duplicateMovieClip）,复制产生的影片剪辑实例与父影片剪辑实例的位置是重叠在一起的，所以一般还需要调整新影片剪辑实例的坐标等属性，以使其按照需要显示，如下所示：_root.parentMC._visible=false;duplicateMovieClip(parentMC,childMC,10);_root.childMC._x=275;_root.childMC._y=200;运行以上脚本，屏幕中只能看到新影片剪辑实例，而父影片剪辑实例不见了。从这里也可以看出，父影片剪辑实例的属性并不会影响到复制产生的新实例,08.06.2020,49,影片剪辑的控制附加影片剪辑（attachMovie）,attachMovie方法也是在影片播放