Flash计算机动画制作入门.ppt

1、上课时间： 4、26 上午9:0011：30 下午2：004：30 4、27 上午9:0011：30 下午1：304：00 上课地点： 上午：主206 （理论课） 下午：主1102 （实验课）,Flash计算机动画制作入门,关于实验,20 用户名及密码均为 student 课程文件夹：“继续教育flash动画制作”,步骤： 1、下载实验讲义 2、在本地机新建文件夹“个人姓名” 3、完成实验任务，并将结果保存在“个人姓名”文件夹 4、文件夹“个人姓名”上传到ftp的“实验结果”内,Flash短片欣赏！,Flash动画,1、形象、生动、直观 2、矢量动画，文件占用空间小

2、3、交互性,特点：,Flash计算机动画制作入门,物理与电子信息学院 刘根萍 ,课程内容,学习目标,1、了解动画形成原理 2、了解常见动画文件格式 3、掌握从网络获取动画素材的方法 4、能根据实际需求制作二维计算机动画,活动一 认识动画形成原理,人眼“视觉暂留”的特性：视觉印象在人的眼中大约可保持0.1秒之久 。 以一定的速度连续播放一系列静止画面时，就会给人以画面活动的感觉。,活动二 认识常见动画格式,常见的动画文件格式包括：,GIF SWF FLIC、FLI/FLC,GIF格式,GIF文件是图形文件交换格式（graphics interchange format）的简称，由compuser

3、ve公司创建。 图像色彩不超过256色，因此几乎所有的显示器都支持gif动画，不必考虑显示器的色彩失真问题。 gif文件采用LZW压缩方式，数据量小。 直观、生动、易学易用，且制作gif动画的软件众多。（Ulead Gif Animator ）,SWF格式,SWF是Micromedia公司的产品Flash的矢量动画格式，它采用曲线方程描述其内容，不是由点阵组成内容，因此这种格式的动画在缩放时不会失真，非常适合描述由几何图形组成的动画，如教学演示等。 由于这种格式的动画可以与HTML文件充分结合，并能添加MP3音乐，因此被广泛地应用于网页上。,FLIC格式,FLIC是Autodesk公司在其出品

4、的Autodesk Animator / Animator Pro / 3D Studio等2D/3D动画制作软件中采用的彩色动画文件格式。 目前，FLIC被广泛用于动画图形中的动画序列、计算机辅助设计和计算机游戏应用程序。,活动三 获取网络动画素材,GIF动画的获取 SWF动画的获取,下载SWF动画素材,问题：网上很多Flash没有提供下载链接，如何下载呢？ 方法： 1. 打开网页，浏览Flash 2. 桌面IE图标，右键属性常规设置查看文件 3. 从后往前找，类型为ShockWave Flash Object，并拷贝文件出来，预览看是否是自己想要的文件,下载SWF动画素材,活动四 熟悉Fl

5、ash软件环境,软件环境 制作动画的基本流程,工具箱,时间轴,工作区(舞台),浮动面板,属性面板,制作动画的基本流程,准备舞台,让我们制作一个简单的动画吧,新建、预览、保存、导出、发布,活动五 绘制运动对象,绘制运动对象常见方法： 方法一：利用Flash工具箱工具绘图 工具：绘画、涂色、选择 查看：在工作区内缩放、移动 颜色：设置边框颜色和填充颜色 选项：显示选定工具的功能设置按钮,方法二：利用数位板绘图 数位板 数位笔绘画时，会随着用笔的轻重不同，轻松地绘制出不同明暗、不同色彩轻度，特别是画笔粗细不同的笔触效果。 WACOM公司的产品深受用户喜爱。,方法三：手绘后扫描或拍摄 有相当一部分人习

6、惯于先在纸上画草图，扫描或拍摄入电脑后，再用软件勾线、上色等处理。,绘图工具,直线工具 铅笔工具 椭圆工具 矩形工具 钢笔工具,上色工具,透明度,系统调色板,渐变色,所选颜色,所选颜色的16进制,实例1,凹透镜 月亮 铅笔,实例2,甲壳虫 蜡烛,对象的变形,任意变形工具 选择工具 菜单项命令：修改变形 “变形”面板,实例3,花朵 叶子 扇子,对象的组合和分离,组合(Ctrl+G)：将若干个对象组合在一起而不改变他们各自的属性； 分离对象：将组、实例和位图分离成单独的可编辑元素。,文本工具,彩虹字,实例4,情人节 月夜,月夜,总结：软件环境及绘图,1、原理 2、格式 3、操作流程：新建-编辑-保

7、存-浏览-发布 4、变形的方法：箭头工具、任意变形工具 变形命令、变形面板 5、文件导入到库或舞台，导入外部素材,活动六 创建基础动画,一、元件与实例 二、帧并帧动画 三、补间动画 四、引导线动画 五、颜色动画 六、组合动画 七、遮罩动画,一、元件与实例,概念、类型、创建、编辑、按钮、库,引 语,在Flash动画中，很多对象在动画中出现的频率是比较高，或者是很高的。为了提高制作效率和降低资源空间。,元件和实例,元件和实例的概念及联系,元 件：,是可以重复利用的图形、按钮或影片剪辑，他们随用户的创建存在于元件库中，也可以通过链接的方式存在于其他Flash文档的元件库中。元件还可以包含从其他应用程

8、序中导入的素材。,元件和实例的概念及联系,实 例 ：,是指应用于舞台上的元件，或嵌套在其他元件内的元件。,元件的类型,图形 影片剪辑 按钮,图形元件的创建和特点,图形元件可以是静态图片或者简单的动画。但不支持交互功能（包括元件内部和实例），也不支持声音，而且图形元件与影片的时间轴是同步的，也就是说主时间轴播放到哪一帧它也播放到哪一帧。所以，这种特性一般不好掌握，有时甚至会带来很多麻烦，所以，没有特殊作用，一般不用图形元件的动画功能。,创建方法 ：,先创建一个空元件，在元件编辑界面编辑元件。 在工作舞台中创建好对象，然后将对象转化成元件。 该方法要注意注册位置的选择。,影片剪辑的创建和特点,影片

9、剪辑可以是静态图片或者动画（包括低级和高级动画，交互动画）。影片剪辑的播放独立于影片的时间轴，播放速度不受主时间轴影响，支持ActionScript和声音，可包含交互控制，其他影片剪辑。,创建方法 ：,先创建一个空元件，在元件编辑界面编辑元件。 在工作舞台中创建好对象或动画序列，然后将对象或动画转化成元件。,按钮的创建和特点,按钮元件可以用以电影中响应鼠标事件的交互按钮。 创建方法及应用将在脚本部分介绍,元件的编辑,前面我们学习了3种元件的创建，但有时需要回头对创建好的元件进行修改。,1.在当前位置编辑。选择一个元件实例，然后右击鼠标，选择菜单中“在当前位置编辑”。,2.在新窗口中编辑。选择一

10、个元件实例，然后右击鼠标，选择菜单中“在新窗口中编辑”。,3.在元件编辑模式中编辑元件。,修改元件有三种方法:,帧 帧并帧动画 运动动画 形变动画,动画形成原理,动画是指物体在一定的时间内发生的变化过程，包括动作、位置、颜色、形状、角度等等的变化。 在电脑中用一幅幅的图片来表现这一段时间内物体的变化，每一幅图片称为一帧。 当这些图片以一定的速度连续播放时，就会给人以动画的感觉，而静止的物体则用一幅幅相同的图片来表示。,一、帧的分类,关键帧,是帧内容发生变化的帧，前后两个关键帧内容有所变化和不同。,普通帧,位于两个关键帧之间，其内容是前一关键帧的复制品,空白关键帧,是一种关键帧，但是其内容为空。

11、,补间帧,位于两个关键帧之间，其内容是继承前一关键帧的。,帧的操作,插入帧：,【插入】 【时间轴】 【帧】/【关键帧】/【空白关键帧】,删除帧（shift+F5),拷贝帧,剪切帧,粘贴帧,移动帧,二、帧并帧动画的创建,逐帧动画的概念,帧内容是变化的，制作时先把一帧一帧的内容都制作好，然后由帧播放产生动画效果。,逐帧动画实例： 美丽校园 / 倒计时 / 打字效果 / 豹子奔跑,三、补间动画的创建,补间动画的概念,包括运动补间动画和形状补间动画。只要设置起始帧和结束帧的内容，两帧之间的动画效果可以由计算机自动完成。,补间动画的创建,创建补间动画的四大步骤,1、准备运动对象 2、创建第一个关键帧，设

12、置内容 3、创建第二个关键帧，设置内容 4、选择两个关键帧之间的任意一帧，设置补间属性,运动补间动画的创建,运动补间动画效果： 位移 / 缩放 / 旋转 / 颜色变化效果,运动补间动画实例： 小车运动 / 运动的文字 / 小球碰撞 渐隐动画 / 网页片头,运动补间动画的创建,属性面板中关于运动补间的几个属性设置： 缩放：选中此选项可以实现组或实例的尺寸变化。 简易：调节该项滑块的方向和值能实现组或实例进行加速运动、匀速运动或减速运动。如果滑块处于输入方向，则进行加速运动，处于输出方向则进行减速运动，处于中间则进行匀速运动。 旋转：选择此项可以使组或实例进行旋转。 调整到路径：选中此项可以实现组

13、或实例按照指定的路径进行有方向的运动，实际上就是能设定对象是否随着路径的改变而改变自身的方向。主要应用于引导层动画。 同步：选择此项可以避免在影片剪辑帧数与主动画帧数不成倍数关系时引起的播放不一致。 对齐：选择此项可以实现组或实例在某一帧对齐到引导线的位置。,运动补间动画的创建,注意的事项 ：,（1）做补间运动的对象必须是实例、文字、导入的素材，不能是图形。,（2）一个图层上一般只能设置一个对象做补间运动，而且起始帧和结束帧一般都是同一对象；,（3）静止对象与运动对象分别放在不同图层；,（4）不同运动方式的对象分别放在不同图层；,形状补间动画的创建,形状补间动画的概念,与动作补间很类似，区别在

14、于形状补间动画主要是完成从一个形状到另一个形状的过渡，起始帧和结束帧的对象可以是一样，也可以不一样，可以是一个对象，也可以是多个对象。同时，可以伴有颜色、尺寸、位置的变化。,形状补间动画实例： 哭脸变笑脸 / 树苗长大 / 翻页效果,形状补间动画的创建,与形状补间动画相关的属性设置： 简易：运动速度特点的设置； 混合：选择“分布式”能让形状变化更加平滑和无规则：选择“角度式”能在中间的图形最终保留目前的拐角和直线。,形状补间动画的创建,虽然Flash会试图以最有逻辑的方式实现两个形状间的过渡，但有时用户要控制更加复杂或罕见的形状变化，需要使用形状提示。形状提示用字母（从 a 到 z，最多可以使

15、用 26 个形状提示）标识起始形状和结束形状中的相对应的点。起始关键帧上的形状提示是黄色的，结束关键帧的形状提示是绿色的，设置未完成的为红色。,形状补间动画的创建,要在补间形状时获得最佳效果，请遵循这些准则：,（1）按顺时针顺序排序提示，并且以左下脚为起点，它们的工作效果最好。,（2）确保形状提示是符合逻辑的。例如，如果在一个三角形中使用三个形状提示，则在原始三角形和要补间的三角形中它们的顺序必须是一致的。如下图所示。,实例：1变2,四、引导线动画,我们学习了运动补间动画，大家总结一下：运动补间动画的运动特点？,如果现在要求制作一个运动路线为任意的曲线，该如何制作？,引导层的概念,引导层：普通

16、引导图层和运动引导图层。,1.普通引导图层,普通引导层中的内容只作为绘制动画的位置参考，不出现在最后的作品中。,注意：普通引导图层一般放在最下层比较合适。,引导层的概念,2.运动引导图层,这类图层有一个抛物线图案，表示在运动引导层中绘制的线条可以作为其下面图层的补间动画的运动路径。该图层中的内容不出现在最终的作品里。,引导层动画的创建,引导层动画的创建方法：,（1）创建引导层和被引导层,（2）在引导层创建运动路径,（3）在被引导层设计运动细节,引导层动画实例： 地球绕太阳转 / 文字路径动画,引导层动画的创建,注意：,一个引导层可以有一个或多个被引导层；,运动对象必须是组、文本、实例，不能是图

17、形；,设置动作时，注意是否选择“调整到路径”和“同步”；,运动对象中心必须位于运动路线上；,若要显示路径，则须单独建一个路径图层。,五、组合动画,嵌套动画 实例：小人走路 地球绕太阳转，同时月亮绕地球转,六、颜色动画,方法一：形变动画，使关键帧上的对象颜色不同 方法二：运动动画，通过属性来设置颜色,颜色：明亮度、色相、透明度等,七、遮罩动画的特点,欣赏遮罩动画： 简单遮罩、运动遮罩、移动背景字 移动的彩虹字、遮罩字、倒影,遮罩动画的特点,遮照层的特点： 遮罩动画由遮罩层和被遮罩层组成。遮罩层的对象相当于窗口，被遮罩层相当于窗外的风景，只有与窗口重合的部分才能被看到，其中遮罩层提供了外形，被遮罩

18、图层提供颜色，通过遮罩层对象的运动或被遮罩层中对象的运动来实现遮罩效果。,遮罩动画的创建,遮罩动画的创建方法： 1、创建遮罩层和被遮罩层 2、在遮照层创建遮罩项目 3、在被遮罩层设计内容 4、制作遮罩层对象的运动效果或被遮罩层对象的运动,遮罩动画的创建,遮罩运动中的注意点：,（1）遮罩层的遮罩项目可以是图形或文字、实例、组。,（2）一个遮罩层只能有一个遮罩项目，即不能把一个图形和一个实例一起作为遮罩项目，只能是一个实例，或一组文字，或一组对象，或若干个图形。,（3）一个遮罩层可以包含一个或多个被遮罩层,遮罩动画的创建,遮罩运动的第一种形式：被遮罩层运动。,遮罩运动的第二种形式：遮罩层运动。,遮

19、罩运动的第三种形式：遮罩层和被遮罩层都做运动。,活动七 声音、视频的应用,欣赏MTV,声音文件的导入,直接file-import导入库中 支持格式：Wav、Mp3、AIFF 如果是midi，需用java语句调入。,声音的同步,事件：非同步。声音不会随着动画播放的结束而停止。多用于简短或循环声音。,开始：非同步。但声音正在播放时不会播放新的声音实例,结束：将指定声音设置为静音。,数据流：同步。声音随着动画播放的结束而停止。多用于mp3,可逐帧控制。,编辑时间轴中的声音,如果现在选择了一个很短的声音作为一个比较长的动画的播放文件，该设置声音的什么属性？,思考：,声音的循环： 播放次数/循环。事件选

20、项中可实现循环的效果或指定次数的重复；数据流的循环或指定次数的重复效果是受动画的长度限制的。,视频的导入,可以直接导入场景当中，在库中可以察看属性。 支持的视频格式：avi mpeg dv mov,电影文件不会成为Flash文件的一部分，flash保持一个对源文件的路径指向。用户可以对视频进行缩放、旋转。,活动八 创建交互式动画,基本内容：概述、种类、实例,学习目标：掌握脚本应用方法 能制作简单的交互式动画 能在本课基础上进行深入学习,按钮的创建和特点,按钮元件可以用以电影中响应鼠标事件的交互按钮。,创建方法：先创建一个空元件，在元件编辑界面编辑元件。,按钮的创建和特点,任何一个按钮都是是一个

21、4帧的影片剪辑。前3帧是用来显示按钮的3种可能状态，最后一帧是按钮的感应区域。时间轴不是播放的，只能根据指针的动作做出简单的响应并且转到所指示的帧。,按钮的创建和特点,弹起帧：代表鼠标不在按钮感应区内的按钮状态。,指针经过帧：代表鼠标在按钮感应区内的按钮状态。,按下帧：代表鼠标在按钮感应区内按下时的按钮状态。,点击帧：定义了响应鼠标的感应区域。,按钮的创建和特点,（1）按钮中不能嵌入按钮，动画效果按钮可以在按钮中使用影片剪辑。,注意点：,（2）关于按钮的交互，不是在按钮元件编辑中设计的，而是把按钮实例放在舞台上，然后为该实例指定动作的。,1、脚本概述,action在动画中作用,许多动画和用户之

22、间会有一定程度的交互 如：点播电影、移动电影中的对象、输入信息，这些交互功能增添了动画的实用性和趣味性。 这些功能需要通过动作脚本ActionScript实现,Flash编程的方法和过程,（1）确定要完成的功能； （2）分析要完成功能的触发事件、目标、动作（即执行的命令）； （3）在动作面板编写程序； （4）测试。,动作脚本三要素,动画交互功能的实现需要三因素：,事件（触发动作的事件） 动作（事件所触发的动作） 目标（执行动作的对象或事件所影响的目标）,actionscript是一组简单的命令，用以定义事件、目标、动作,动作脚本三要素,注意： 编程中为了对对象进行控制，因此要在属性面板中为帧或

23、元件实例取一个唯一的且有意义的名称。,action面板,如何打开动作脚本面板； 如何利用“”输入动作； 如何查看文件中添加了动作的帧、按钮实例、影片剪辑实例； 如何使用帮助查看actionscript字典；,2、脚本种类,action的种类,在Flash中，action分为三类： 帧动作 、按钮动作 、影片剪辑动作,action的种类帧动作,帧动作：给关键帧指定一个动作，使电影播放到那一帧时做些事情，如stop(),gotoandplay(n),步骤：, 选择关键帧，打开动作面板；, 输入动作,action的种类按钮动作,给按钮实例(不是按钮元件)指定动作可以使用户在按下鼠标或者鼠标经过按钮等

24、事件发生时执行动作。当给按钮实例指定动作时，要指定触发动作的事件，也可以指定一个触发动作的键盘中的某一键。,action的种类按钮动作,步骤：, 选择关键帧中的按钮实例，打开动作面板；, 全局函数影片剪辑控制选择on 选择一个激发事件的鼠标或键盘动作；, 输入动作,action的种类影片剪辑动作,步骤：, 选择关键帧中的影片剪辑实例，打开动作面板；,全局函数影片剪辑控制选择onclipevent选择一个激发的事件；, 输入动作,3、实例学习,实例学习1动画播放控制,观看效果：地球转控制,实例学习1动画播放控制,注意： 注意帧动作、按钮动作使用方法的区别 实例须命名 控制实例时，动作应为“实例名

25、.play()”,实例学习2图片浏览,观看效果：校园风光图片浏览,实例学习2图片浏览,观看效果：逐帧播放车跑 思考：如何实现呢？,实例学习2图片浏览改进,观看效果：校园风光图片浏览2,实例学习2图片浏览改进,on (release) prevframe(); if (page1) page-; else page=1 ,on (release) nextFrame(); if (page4) page+; else page=4 ,前页 后页,实例学习3声音控制,观看效果：简单声音控制,思考： 用stop()能否实现同样的功能呢？ 用stop()与stopAllSounds()有什么区别呢？,实例学习4MTV制作,观看效果：MTV制作,1、制作幕布动画 2、歌名动画 3、歌手照片动画 4、加播放按钮 5、加声音前让加帧动作让动画停止，点按钮后播放 6、为按钮加动作 7、音乐的末尾设置停止,实例学习5教学网页,观看效果：教学网页,1、做主页面 1）设置页面大小，背景层上画与页面同大小的矩形，设置渐变颜色 2）绘制直线分上下区域，全选先组合 3）矩形工具绘制导航条，用单色填充