Flash(1) 曾兰芳 教育技术学院 zenglf2003@163.com.

Presentation on theme: "Flash(1) 曾兰芳 教育技术学院 zenglf2003@163.com."— Presentation transcript:

1 Flash(1) 曾兰芳 教育技术学院

2 动画原理 动作的变化是动画的本质 人类眼睛的“视觉残留”的生物现象 24帧/秒
英国动画大师约翰·海勒斯 人类眼睛的“视觉残留”的生物现象 某一场景从人眼中消失后，该场景在视网膜上不会立即消失，而是要保留一段时间（1/24秒）。 24帧/秒

3 马儿奔跑逐帧分解图

4

5 动画的分类 根据动画反映的空间范围 根据播放时画面的生成途径 二维动画 三维动画
造型动画：对每个活动的对象分别进行设计，并构造每一对象的特征，然后利用这些对象组成完整的画面。 帧动画：由一幅连续的画面组成的图像或图形序列。

6 几个重要的概念 帧（Frame）：帧其实是电影里的一个名词，组成动画的每一幅图像被称为帧，是动画片的最小长度单位。
关键帧(Key-frame)：即原画，通常是一个动作的几个重要画面，在这些画面中有动作发生关键变化的部分。一个动作关键帧的多少取决于动画的难易程度，也就是动画对象动作变换的复杂程度。 中间画：中间画是一个关键帧与另一个关键帧之间的过渡画。计算机动画制作的优势就在于能根据关键帧之间的位置和运动关系自动生成中间画。 帧频：一秒钟动画所包含的图像数量（也就是帧数）被称为帧频，用单位“帧/秒（fps）”表示。我们知道这并不是一个固定的数值，它取决于传送动画的介质。一般情况下，在录像带上，1秒钟动画包含30帧画面（也就是显示速率为“30帧/秒”）；在电影胶片上，1秒钟动画包含24帧画面（也就是显示速率为“24帧/秒”）。

7 计算机动画的技术参数 帧速度 数据量 图像质量 表示一秒钟的动画内有几帧静态画面
在不计压缩的情况下，数据量指帧速度与每幅图像的数据量的乘积。例如，如果一幅图像为1MB，播放速度30帧/秒，则每秒达到30MB。 图像质量 和压缩比有关

8 动画文件格式 GIF(Graphics Interchange Format)即“图形交换格式”，这种格式在20世纪80年代由美国一家著名的在线信息服务机构CompuServe开发而成。GIF格式的特点是压缩比高，是网络动画的重要格式。提供图像渐显方式。

9 动画文件格式 FLIC(FLI／FLC)格式：由Autodesk公司研制而成。FLIC是FLC和FLI的统称：FLI是最初的基于320×200分辨率的动画文件格式，而FLC进一步扩展，它采用了更高效的数据压缩技术，所以具有比FLI更高的压缩比，其分辨率也有了不少提高。

10 动画文件格式 SWF格式 SWF是Micromedia公司的产品Flash的矢量动画格式。采用矢量方式制作动画，在缩放时不会失真。这种格式的动画体积较小，并且是一种“准”流(Stream)形式的文件。

11 动画文件格式 DIR格式 Director的动画格式，扩展名为.dir，一种具有交互性的动画，可加入声音，数据量较大。多用于多媒体产品和游戏中。

12 动画制作软件 软件名称 所属公司 功能及特点 网站 3D Studio MAX Autodesk 利用多种造型方法生成人体、动物及物体模型
studio.com Poser MetaCreation 由多种工具和素材库，快速生成人体和动物动画 Ulead COOL 3D Ulead 快速制作三维字体和三维标题的动画效果 Flash MacroMedia 二维动画制作，用于设计交互式媒体页面或主题相关的专业开发多媒体内容 GIF Animator 源于网页，后发展为制作二维动画的工具软件

13 Flash是美国Macromedia公司开发的一款矢量图形编辑和动画创作专业软件，是制作二维动画最为专业的工具之一，它主要应用于网页设计和多媒体创作等领域，功能十分强大。Flash是一种交互式动画设计工具，可以将文字、声效、动画等融合在一起，创造出高品质的动态效果。

14 网页上的Flash导航条 网页上的Flash菜单 用Flash制作的网站

15

16 Flash的基本界面

17 Flash制作的五个标准步骤 创建文档，决定舞台尺寸大小 建立元件库 编辑剧本（时间轴）（注意在关键帧中来调整位置或其他设置） (添加脚本)
储存和发布动画

18 一、逐帧动画 例：奔跑的马

19 步骤 1、创建新文档：背景色白色、尺寸300*300像素、帧频12fps
2、建立元件库：选择【文件】菜单下【导入】中的【导入到库】命令，将本地文件夹中9张“转身”的图片导入到当前Flash文档的库中

20 步骤续1 3、编辑时间轴： 选中第1帧，将【库】中“图片1”的图片拖入到舞台中央。
在舞台上选中该图片，在下方的【属性】面板里设置图片的宽和高，以及坐标值 。 在第2帧处点击鼠标右键，选择【插入空白关键帧】命令，将【库】中“图片2”的图片拖入到舞台中央，设置与第一帧图片同样的坐标值。 同上在第3帧、第4帧、……、第8帧处分别插入空白关键帧，并将“图片3”、“图片4”、……、“图片8”的图片分别放入每一帧舞台同样的位置。

21 步骤续2 4、预览和发布动画 选择【控制】菜单下的【测试影片】命令，或者按Ctrl+Enter组合键测试影片。
选择【文件】菜单的【发布】命令，在当前目录下生成 “奔跑的马.swf”文件。

22 总结：几个重要的概念(1) 时间轴——剧本 层控制区 帧控制区 场景——舞台 元件库——演员/后台

23 几个重要的概念(2) 帧：组成动画的每一幅图像。 关键帧：包含有内容或者是对内容的改变起决定性作用的帧。
中间过渡帧：一个关键帧与另一个关键帧之间的过渡帧。 静态帧：相邻关键帧的延续，显示的内容是与其相邻的一个关键帧的内容。

24 几个重要的概念(3) 元件：可以重复使用的图形、动画或按钮，实体是元件在舞台上的体现。

25 二、形状补间动画 三角形变圆形

26 步骤 1、创建一个新的Flash文档，设置文档的尺寸为600×300像素，背景颜色为白色。 2、建立元件库：
选择【新建】菜单的【插入元件】命令，在弹出的【创建新元件】对话框中，选择【图形】元件类型，元件名为“三角形” 选择线条工具，用线条工具在舞台中央绘制一个三角形轮廓，选择颜料桶工具，在三角形中单击鼠标左键，三角形被填充为黄色。 同样，分别建立圆1、圆2、圆3三个元件，分别绘制红、绿、蓝三个 圆形。

27 步骤续1 3、编辑时间轴： 点击时间轴上方左边的场景标签，切换回场景编辑模式。
单击时间轴的第1帧，在【库】中选中“圆1”元件，将其拖入到舞台左侧，在属性面板中调整其长宽的值。选中“圆1”元件实例，右键选择【分离】命令，将元件打散。 同样，将“圆2”、“圆3”拖入到舞台，调整长宽值及三个圆形的位置，分离元件。 在第25帧处，将“三角形”元件拖入舞台右侧，调整其大小，并打散。 在时间轴第1帧到第25帧之间单击任一帧，在【属性】面板中选择“形状补间”，将会自动生产绿色的过渡帧。

28 步骤续2 4、预览和发布动画 选择【控制】菜单下的【测试影片】命令，或者按Ctrl+Enter组合键测试影片。
选择【文件】菜单的【发布】命令，在当前目录下生成 “圆形变三角形.swf”文件。

29 例：蜡烛和小铃铛变形

30 重点说明 基本步骤 形状提示的添加 550*320，蓝色背景 导入元件 在相应的帧中，拖入元件，设置形状提示的位置 设置形状补间动画
预览和发布 形状提示的添加 修改/形状/添加形状提示，会在该形状处显示一个带有字母a的红色圆圈。

31 形状补间－蜡烛和铃铛的互变 新建文件550*320，背景色蓝色，（拷贝库文件） 将蜡烛元件拖动到时间轴的第一帧，打散之
在第25帧，插入空白关键帧，并将铃铛元件拖放到舞台上，打散之 将鼠标放在1到25帧之间，选择属性面板“补间”中的“形状” 设定形状提示 选中第一帧，选择“修改/形状/添加形状提示”，带有字母a的红色圆圈 选中最后一帧，将圆圈拖放到目的地，如铃铛的右下角

32 三、运动补间动画 例：风车

33 步骤 1、创建一个新的Flash文档，设置文档的尺寸为300×300像素，背景颜色为蓝色。 2、建立元件库：
选择矩形工具，设置边框颜色为“无边框”(如图)，设置填充颜色为“黄色”。 在编辑区拖动鼠标，绘制出一个矩形。 选择工具箱中的选择工具，拖动矩形左上角的顶点，使它与右上角的顶点重合，如上图。 选中叶片，选择右键菜单里的【转换为元件】命令，在弹出的对话框中，将新建的图形元件命名为“叶片”，此时【库】面板里出现“叶片”元件。

34 步骤续1 3、编辑时间轴： 点击时间轴上方左边的场景标签，切换回场景编辑模式。
选中已绘制好的“叶片”，按Ctrl+C快捷键复制叶片，再按Ctrl+Shift+V快捷键将叶片粘贴到原来的位置上。 通过【窗口】菜单打开【变形】面板。选中“旋转”，输入旋转角度为“45”度，表示把复制的叶片以“十”字定位中心为轴顺时针旋转45度，按Enter键确定。 选中原始叶片，按Ctrl+C快捷键再复制一个叶片，按Ctrl+Shift+V快捷键将叶片粘贴到原来的位置，只是这次旋转的角度变为90度。用同样的方法制作其余的叶片，每复制一个，在【变形】面板中设置旋转角度为前一个叶片旋转角度加上45度。 按Ctrl+A选中风车中的所有叶片，将其转化为图形元件“风车”，8个叶片成为一个整体。 选中第30帧，按F6键，插入一个关键帧。在第1帧到第30帧之间右击鼠标，选择【创建补间动画】命令，在【属性】面板中设置补间类型为“动画”（或动作），在 “旋转”方式中旋转“顺时针”，次数为1次，表示在第1帧到第30帧之间，风车将顺时针旋转1圈。 选中第60帧，插入关键帧，在第36帧到第60帧之间设置动作补间，顺时针旋转1次。 选中第30帧，选择任意变形工具，按照Shift键的同时，拖动风车周围的小方块，将风车适当缩小。这样在动画过程中，风车会先缩小，再逐渐变大。 选中“风车”元件，在属性面板的“颜色”标签后选择“色调”，设置为红色（如图）。这样在动画过程中，风车会由黄色变为红色，再逐渐变回黄色。

35 步骤续2 4、预览和发布动画 选择【控制】菜单下的【测试影片】命令，或者按Ctrl+Enter组合键测试影片。
选择【文件】菜单的【发布】命令，在当前目录下生成 “旋转的风车.swf”文件。

36 利用变形工具画花 画椭圆（只要边框），把中心点移到边缘，转换为元件（修改菜单） 把元件导入舞台，并打开变形对话框（窗口菜单中的变形）