作业《动画资源的获取处理与应用》分析.docx

作业《动画资源的获取处理与应用》分析.docx

《作业《动画资源的获取处理与应用》分析.docx》由会员分享，可在线阅读，更多相关《作业《动画资源的获取处理与应用》分析.docx（22页珍藏版）》请在冰豆网上搜索。

作业《动画资源的获取处理与应用》分析

实验四　动画资源的获取、处理及应用

一、动画形成的基本原理

动画的形成与人眼的视觉暂留是不可分的。

人眼的“视觉暂留”就是人的眼睛看到一幅画或一个物体后，在约0.1秒内不会消失，利用这一原理，在一幅画还没有消失前播放出下一幅画，就会给人造成一中流畅的视觉变化效果。

因此在计算机中用一幅幅的图片来表现这一段时间内物体的变化，当这些图片以一定的速度连续播放时，就会给人以动画的感觉。

二、常用动画文件的格式

1．GIF动画文件格式

2．SWF动画文件格式

3．FLIC、FLI/FLC动画文件格式

三、动画资源的获取方法

教学要使用动画资源时，获取方法有很多。

除了可以购买使用，或使用动画制作软件如UleadGifAnimator、MacromediaFlash制作动画资源外，通过网络下载是一种非常主要的获取方法。

在这里我们重点学习如何从网上下载GIF动画和SWF动画。

（一）从网上下载GIF动画资源

GIF动画既是动画文件格式也是图像文件格式，所以可以使用从网上下载图片的方法下载GIF动画。

打开网页，在GIF动画文件上单击鼠标右键，选择“图片另存为”，将GIF动画保存到计算机中。

（二）从网上下载SWF动画资源

网上除了存在大量的GIF动画外，还有大量的是SWF格式的Flash动画。

有的Flash动画直接提供了下载链接，可以方便地下载到本地机。

有的Flash动画不提供下载链接，则需要使用一定的方法才能下载。

1.下载提供了下载链接的Flash动画资源

打开网页，找到网页中的Flash动画，并找到该动画的下载链接，单击该链接，即可下载该Flash动画。

实例：

从“闪客动漫天地”下载Flash动画。

图4-1Flash动画所在网页

第1步：

在InternetExplore地址栏中输入网址（），打开网页，找到需要的Flash动画。

图4-2下载动画

第2步：

在网页上单该动画的下载链接“下载保存”，如图4-1所示，打开下载页面，如图4-2所示，找到“点击立即下载”链接，在弹出的“文件下载”对话框中单击“保存”选择保存位置，将动画保存到计算机中。

2.下载未提供下载链接的Flash动画资源

在网上有大量的Flash动画没有提供下载链接，如何下载这类动画呢？

其实一般只要访问过一张带有Flash动画的网页，则该网页上的Flash动画就已经自动地暂时保存到本地机上，我们只要找到这个临时存储网页动画文件的文件夹，就能找到该Flash动画。

实例：

下载温州大学首页上的Flash动画。

第1步：

打开温州大学首页（），找到网页上的Flash动画，如图4-3所示。

第2步：

单击IE菜单项“工具”/“Internet选项”，打开“Internet选项”窗口，选择“常规”选项卡，单击“设置”按钮，在弹出的“设置”对话框中单击“查看文件”按钮，则打开了“Internet临时文件夹”（TemporaryInternetFiles）。

第3步：

将Internet临时文件夹中的文件以详细信息的方式显示，并按“上次访问时间”排列。

如果不是这种方式排列文件，请通过以下方法设置成按此方式排列：

在“Internet临时文件夹”窗口上单击菜单项“查看”/“详细信息”，再单击菜单项“查看”/“排列图标”/“上次访问时间”，如图4-4所示。

第4步：

拖动“Internet临时文件夹”窗口的垂直滚动条到最下方，从下往上找类型为“Flash影片”（或ShockWaveFlashObject）的文件，把该文件拷贝到计算机某位置（如桌面），查看该文件是否是我们要下载的动画，如果是，则已成功地完成了动画的下载。

如果不是我们要的动画，则继续从下往上找，直到找到为止。

在例中的Top_mian.swf文件就是我们要下载的温州大学首页上的Flash动画，如图4-4所示。

四、动画资源的制作

制作动画资源的软件有很多，如制作GIF动画可以用UleadGifAnimator、EximiousSoftGIFCreator、GIFMovieGear等；制作SWF动画可以用MacromediaFlash、AdobeFlash等。

本实验以MacromediaFlash软件为例，讲解动画资源的制作。

图4-4Internet临时文件夹

（一）认识Flash软件界面

Macromedia公司的Flash软件是制作SWF动画最主要的软件，打开MacromediaFlashprofessional软件，在开始页中单击“创建新项目”/“Flash文档”，或者单击菜单项“文件”/“新建”/“Flash文档”，就会创建一个空白的Flash文档，同时进入MacromediaFlash

professional8.0的操作界面，如图4-5所示。

单击菜单项“窗口”，可打开或关闭工具箱面板及其他浮动面板。

（二）运动对象的绘制

在MacromediaFlash中绘制运动对象常见方法有四种：

（1）利用Flash工具箱工具绘图

Flash工具箱中提供了绘图工具、查看工具、颜色工具、选项工具，我们可以利用这些工具绘制运动对象。

目前电脑绘画中最常用的硬件工具就是数位板，如图4-6所示，使用它能够很方便的在电脑中绘制动画运动对象和动画背景。

1.熟悉Flash工具箱

MacromediaFlashprofessional8.0工具箱提供了用于图形绘制和编辑的各种工具，如图4-6所示。

（1）选择工具

使用选择工具，单击舞台上的对象，即可选中该对象。

选中对象后，拖曳鼠标可移动对象。

当对象未被选中时，使用选择工具靠近对象边沿，当鼠标由箭头变成箭头+弧形时，如图4-7所示，拖曳对象边沿，则可修改对象的外形，如图4-8所示。

如果按住键盘Ctrl键，使用选择工具靠近对象边沿拖曳对象边沿，得到的是尖角变形，如图4-9所示。

（2）任意变形工具

利用任意变形工具可对图形进行缩放、扭曲、封套和旋转变形，还可以改变中心点。

（3）填充变形工具

填充变形工具主要用于对填充的渐变色进行变形，可改变渐变色的中心点、方向、大小、宽度等。

（4）线条、椭圆、矩形工具

线条工具用于绘制各种长度和角度的直线。

椭圆工具用于绘制椭圆，按住Shift键可以绘制正圆。

矩形工具用于绘制矩形，按住Shift键可以绘制正方形。

（5）铅笔、钢笔工具

铅笔工具用于绘制不规则的曲线或直线。

钢笔工具用于绘制精确、光滑的曲线，调整曲线曲率等。

（6）橡皮擦工具

橡皮擦工具用于擦除对象的填充和轮廓。

在选项工具栏中，可调整橡皮擦的外形和粗细。

（7）笔触颜色、墨水瓶工具

笔触颜色用于设置笔触的颜色。

墨水瓶工具则用于将设置好的笔触颜色应用到对象的轮廓上，以改变线条的颜色。

（8）填充颜色、颜料桶工具

填充颜色用于设置填充的颜色。

颜料桶工具则用于将设置好的填充颜色应用到对象的内部填充区域，以改变内部填充的色彩。

（9）文本工具

文本工具是编辑文字和建立文字交互响应必备的工具，在Flash中，可以创建三种类型的文本：

静态文本、动态文本和输入文本。

（10）手形、缩放工具

手形工具用于通过鼠标拖动来移动舞台画面，以便更好地观察。

缩放工具用于改变舞台画面的显示比例。

通过选项工具栏可以切换放大工具和缩小工具。

2．Flash基本操作

（1）新建、保存

单击菜单项“文件”/“新建”，可新建一个Flash文档。

单击菜单项“文件”/“保存”，可保存Flash文档，格式为.Fla文件。

（2）导出

单击菜单项“文件”/“导出”/“导出影片”，可导入格式为.swf的动画文件。

（3）设置Flash文档属性

单击菜单项“修改”/“文档”，打开“文档属性”对话框，如图4-10所示。

一般我们会根据实际需要在这里设置文档的尺寸、背景颜色等。

帧频指影片每秒播放的帧数，帧频的大小直接影响到影片播放的快慢。

帧频的单位是“帧/秒”，即fps，默认的帧频为12fps。

（4）导入外部位图素材

单击菜单项“文件”/“导入”/“导入到舞台”，可以将外部位图素材导入到Flash中使用。

（5）对象的组合与分离

组合是将若干个对象组合在一起而不改变他们各自的属性。

单击菜单项“修改”/“组合”，可将选中的所有对象组合成一个对象。

单击菜单项“修改”/“取消组合”，即可将对象返回到组合之前的状态。

要将组、实例和位图分离成单独的可编辑元素，可以使用菜单项“修改”/“分离”命令，分离可以极大地减小导入图形的文件大小。

（7）对象的对齐

当创建多个对象时，往往需要确定各对象之间的相对位置。

单击菜单项“修改”/“对齐”，可以选择需要的对齐命令。

我们也可以单击菜单项“窗口”/“对齐”，打开“对齐”面板，如图4-11所示，它将多种对齐方式组合在一起，使用起来非常方便。

（8）对象的变形

我们除了可以使用工具箱中的“选择工具”拖曳对象边沿改变对象形状，或者使用“任意变形工具”对对象进行缩放、旋转、扭曲等变形操作外，还有以下两种方法可以对对象进行变形。

单击菜单项“修改”/“变形”，在变形子菜单中可以选择命令对对象进行缩放、旋转、扭曲、翻转等变形操作。

单击菜单项“窗口”/“变形”，可以打开“变形”面板，如图4-12所示，使用“变形”面板对对象进行缩放、旋转和倾斜等变形操作，可以达到精确变形的目的，还可以复制对象。

3、利用Flash工具箱工具绘图

我们可以利用Flash工具箱中的绘图工具、查看工具、颜色工具、选项工具绘制场景和运动对象。

实例1：

使用工具绘制以下平面几何图形（效果如图4-13）

（1）将舞台的大小设置为“800×400”像素，背景色不变，为白色。

（2）按住shift键，利用“椭圆工具”绘制出正圆。

（3）利用“矩形工具”绘制矩形。

（4）利用“线条工具”绘制出平行四边形、三角形和梯形的轮廓，用“颜料桶工具”为各个图形填充相应的颜色。

（5）单击菜单项“文件”/“保存”，保存文件，扩展名为.Fla。

图4-13平面几何图形

实例2：

绘制房子

（1）打开文件菜单栏，新建一个Flash文档。

（2）在属性面板中将文档尺寸设置为550*400像素，帧频设置为12fps。

（3）将“图层1”改名为“bg”，选取工具箱中“矩形工具”，设置“笔触颜色”为无，“填充颜色”为从蓝色（#034BB8）到深蓝色（#012354）的线性渐变，背景效果如图4-15所示。

图4-14渐变色设置图4-15夜空背景效果

（4）在“bg”图层上新建“moon”图层，绘制一个月牙形的月亮，并利用“任意变形工具”对月亮进行旋转，效果如图4-16所示。

图4-16绘制月亮

（5）在“moon”图层上新建“star”图层。

选择“多角星形工具”，在属性面板中选择“选项”按钮，代开“工具设置”对话框，参数设置如图4-20所示。

绘制效果如图4-17所示。

图4-17“多角星形工具”参数设置

图4-18夜空效果

（6）选择菜单“文件”→“保存”命令，输入文件名并保存当前文件。

（三）动画制作基础

1．Flash动画的三种基本类型

Flash中的动画包括三种基本类型：

逐帧动画、形状补间动画、运动补间动画。

逐帧动画指帧内容是变化的，制作时先把一帧一帧的内容都制作好，然后由帧播放产生动画效果。

补间动画包括运动补间动画和形状补间动画，只要设置起始帧和结束帧的内容，两帧之间的动画效果可以由计算机自动完成。

2．时间轴和帧

在Flash中用户通过时间轴窗口来进行动画的合成和控制。

动画连不连贯，运行起来是否流畅，在很大程度上决定于时间轴和帧的使用。

按照功能的不同，时间轴窗口可以分为左右两个部分：

层控制窗口和时间轴，如图4-19所示。

帧是影像动画中最小单位的单幅影像画面，是组成动画的基本单位。

按照帧的作用不同，可以将帧分为以下3类，如图4-19所示。

（1）关键帧：

包括关键帧和空白关键帧。

任何动画要表现运动或变化，至少前后要给出两个不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，在Flash中，表示关键状态的帧叫做关键帧。

（2）普通帧：

包括普通帧和空帧。

普通帧是将关键帧进行延续，一般是用来将元素保持在舞台上。

（3）过渡帧：

包括形状过渡帧和运动过渡帧。

是将过渡帧前后的两个关键帧进行计算得到，它所包含的元素属性的变化是通过计算得来的。

所有关于帧的操作，如插入、复制、粘贴、删除、剪切、转换，我们都可以按如下方法进行：

在某帧上单击选择该帧，单击鼠标右键，在弹出的菜单中选择相应的命令。

3．元件与实例

元件是Flash中一个非常重要的概念，是可以重复使用的图片、动画或者按钮。

如果把一个Flash动画比作是一座大厦的话，那么元件就是构成这座大厦的一砖一瓦。

元件分为3种类型：

（1）影片剪辑：

是指一段完整的动画，可以包含一切素材，如图形、声音、按钮、其他影片剪辑等。

它有着相对于主时间轴独立的时间轴和相对主坐标系独立的坐标系，可以为影片剪辑添加动作脚本来实现交互或制作一些特殊效果。

（2）按钮：

主要用来实现交互。

（3）图形：

和影片剪辑类似，可以加入其他的元件和素材，也可以是一段动画。

它拥有自己的时间轴，不具有交互性，不能添加滤镜和声音。

单击菜单项“插入”/“新建元件”，打开创建新元件对话框，如图4-20所示，选择元件的类型。

单击“确定”按钮后，将进入元件编辑界面，如图4-21所示。

在元件编辑界面中，绘制元件内容。

完成元件的制作后，单击时间轴左上角的场景按钮，退出元件的编辑模式，返回场景1。

创建的元件会自动成为当前文档的库的一部分。

单击菜单项“窗口”/“库”，打开库面板，如图4-22所示。

元件只需创建一次，就可以在整个文档或其他文档中重复使用。

当把元件从库面板中拖到当前舞台上时，舞台上就增加了一个该元件的实例。

用户可以随意对实例进行缩放、添加滤镜等操作，对实例进行的这些操作不会影响到元件本身，但对元件本身进行了修改，Flash就会更新该元件的所有实例。

4．逐帧动画的创建

在时间轴上逐帧绘制帧内容称为逐帧动画，由于是一帧一帧的画，所以逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容。

逐帧动画可以按照以下步骤来创建：

第1步：

单击菜单项“文件”/“新建”，新建一个Flash文档。

第2步：

创建第一个关键帧内容。

第3步：

插入第二个关键帧。

根据该关键帧画面持续的时间，按照公式“帧数=时间（秒）*帧频（帧/秒）”计算该关键帧延续的帧数N。

选择第一个关键帧N帧之后的帧，单击鼠标右键，选择“插入关键帧”命令，创建第二个关键帧内容。

如设计某关键帧需要持续1秒，Flash默认帧频是12（帧/秒），该关键帧需延续到第12帧，则在第13帧处插入关键帧。

第4步：

按照上述第3步的方法，依次创建其他关键帧内容，直到动画完成。

第5步：

单击菜单项“控制”/“测试影片”，浏览动画效果。

第6步：

单击菜单项“文件”/“保存”，保存文件，扩展名为.Fla。

5．运动补间动画的创建

运动补间动画可以实现运动对象位移变化、缩放、旋转、颜色变化等动画效果。

运动补间动画可以按照以下步骤来创建：

第1步：

单击菜单项“文件”/“新建”，新建一个Flash文档。

第2步：

准备运动对象。

运动补间动画的运动对象必须是实例、组、文字对象、或者导入的外部位图图像，不能是可单独编辑的图形对象。

第3步：

创建第一个关键帧内容，准备运动的初始状态。

第4步：

创建第二个关键帧内容，准备运动的结束状态。

根据该关键帧画面持续的时间，按照公式“帧数=时间（秒）*帧频（帧/秒）”计算该关键帧延续的帧数N。

选择第一个关键帧N帧之后的帧，单击鼠标右键，选择“插入关键帧”命令，创建第二个关键帧内容。

第5步：

选择两个关键帧之间的任何一个普通帧，在属性面板中，设置补间属性为“动画”，如图4-23所示。

第5步：

单击菜单项“控制”/“测试影片”，浏览动画效果。

第6步：

单击菜单项“文件”/“保存”，保存文件，扩展名为.Fla。

6．形状补间动画的创建

运动补间动画可以完成从一个形状到另一个形状的过渡。

形状补间动画可以按照以下步骤来创建：

第1步：

单击菜单项“文件”/“新建”，新建一个Flash文档。

第2步：

准备运动对象。

形状补间动画的运动对象必须是可单独编辑的图形，不能是实例、组、文字对象、或者导入的外部位图图像，实例、组、文字对象、或者导入的外部位图图像只有经过分离以后才可以作为形状补间动画的运动对象。

第3步：

创建第一个关键帧内容，准备运动的初始状态。

第4步：

创建第二个关键帧内容，准备运动的结束状态。

根据该关键帧画面持续的时间，按照公式“帧数=时间（秒）*帧频（帧/秒）”计算该关键帧延续的帧数N。

选择第一个关键帧N帧之后的帧，单击鼠标右键，选择“插入关键帧”命令，创建第二个关键帧内容。

第5步：

选择两个关键帧之间的任何一个普通帧，在属性面板中，设置补间属性为“形状”，如图4-34所示。

第6步：

单击菜单项“控制”/“测试影片”，浏览动画效果。

第7步：

单击菜单项“文件”/“保存”，保存文件，扩展名为.Fla。

实例3：

圆变为花

（1）新建一个大小为为550*400像素，帧频为12fps的文档，背景设置为蓝色。

（2）在第一帧的工作区域画上一个黄色的圆，边框颜色为无，效果如图4-24所示。

图4-24圆

 （3）在时间线上第60帧的的地方单击鼠标右键，在弹出的菜单中选择“插入关键帧”。

然后在其工作的区域里画一个花朵，效果如图4-25所示。

4-25花

（4）选中1-60帧中的任意一帧，在“属性”面板中选择“补间”下拉菜单中的“形状”选项，创建1-60帧之间的形状补间动画。

如图4-26所示。

图4-26设置“形状”补间动画

（5）选择菜单栏上的“控制”/“测试影片”，即可预演效果。

（6）单击菜单项“文件”/“保存”，保存文件，扩展名为.Fla。

该案例最后的时间轴效果和动画效果如图4-27和图4-28所示。

图4-27最终时间轴效果

图4-28动画效果

实例4：

太阳东升西落

（1）新建一个大小为为550*400像素，帧频为12fps的文档，背景设置为浅蓝色。

（2）单击菜单项“插入”/“新建元件”，创建一个名为“太阳”的图形元件，利用椭圆工具绘制一个红色的太阳。

效果如图4-29所示。

图4-29“太阳”元件

（3）将“图层1”改名为“太阳”，在“太阳”的第1帧中，将“太阳”元件拖放到舞台右侧位置，效果如图4-30所示。

图4-30“太阳”元件在第1帧中的位置

（4）在时间线上第40帧的的地方单击鼠标右键，在弹出的菜单中选择“插入关键帧”。

然后将太阳移动到舞台左侧，效果如图4-31所示。

图4-31“太阳”元件在第40帧中的位置

（5）选中1-40帧中的任意一帧，在“属性”面板中选择“补间”下拉菜单中的“动画”选项，创建1-40帧之间的动作补间动画。

（6）选中“太阳”图层，单击时间轴面板底边的

“添加运动引导层”命令，会新增加一个名为“引导层：

太阳”的辅助图层。

（7）选择“线条工具”，在舞台上绘制一条直线，并利用“选择工具”的变形功能将直线变为曲线，效果如图4-32所示。

图4-32引导线绘制

（8）单击“太阳”图层的第1帧，使第1帧中的太阳与路径的起始点（右端点）重合，如图4-33所示。

图4-33太阳运动的起始位置

（9）单击“太阳”图层的第40帧，使第40帧中的太阳与路径的结束点（左端点）重合，如图4-34所示。

图4-34太阳运动的结束位置

（10）选择菜单栏上的“控制”/“测试影片”，即可预演效果。

（11）单击菜单项“文件”/“保存”，保存文件，扩展名为.Fla。

该案例最后的时间轴效果和动画效果如图4-35和图4-36所示。

图4-35最终时间轴效果

图4-36动画效果

四、动画资源的应用

在多媒体课件、主题学习网站的制作中适当加入动画效果,既可使课件、主题学习网站更为生动、有趣、活跃气氛，还可以创造虚拟环境，便于帮助学习者对比事物的内部结构及相互关系、事物进程、工艺流程，有利于不同角度、不同距离地显示物体及多层次表现同一物体。

本实验中我们继续学习PowerPoint演示型课件中动画资源的使用以及在DreamWeaver软件中为主题学习网站添加动画资源。

（一）在PowerPoint演示文稿中使用动画资源

1．在演示型课件中插入GIF动画

第1步：

运用上述方法准备GIF动画资源。

第2步：

在演示型课件中插入GIF动画。

选中要插入GIF动画的幻灯片，单击菜单项“插入”/“图片”/“来自文件”，找到并选择要插入的GIF动画文件。

第3步：

播放浏览。

播放幻灯片，在幻灯片即可看到插入的GIF动画。

2．在演示型课件中插入SWF动画

第1步：

运用上述方法准备SWF格式的Flash动画资源，并把该Flash文件（如top.swf）和PowerPoint课件（如第一章.ppt）放在同一个文件夹内。

注意：

Flash文件格式必须是swf；Flash文件的文件名最好是英文小写字母，建议不用中文文件名。

第2步：

打开PowerPoint课件“第一章.ppt”，选择要插入动画的幻灯片，单击菜单项“视图”/“工具栏”/“控件工具箱”，打开控件工具箱，如图4-37所示。

第3步：

单击控件工具箱最后一个图标“其他控件”，在打开的列表中选择“ShockwaveFlashObject”，如图4-38所示，此时，可以发现鼠标形状发生了变化，变成一个十字形。

第4步：

按住鼠标左键不放，拉出一个矩形框，可以绘制一个插入Flash的定位区，如图4-62所示（此区域可以根据要插入Flash画面尺寸自行调节）。

第5步：

单击控件工具箱第一个图标“属性”，如图4-37所示，则会出现一个属性设置面板，如图4-39所示。

第6步：

在Movie属性输入框中输入Flash的相对路径及文件名。

在这里PowerPoint课件和Flash动画文件位于同一个文件夹中，则直接输入Flash文件名“top.swf”。

第7步：

单击菜单项“文件”/“保存”，保存PowerPoint课件。

第8步：

播放浏览。

播放幻灯片，

即可发现Flash已经成功插入到幻灯片中了。

以后把课件拷贝到其他计算机上使用时，只需要把PowerPoint课件和Flash动画所在的文件夹拷贝到其他计算机上即可。

总结：

通过学习动画资源的获取处理与应用，我掌握了动画的常用格式，动画资源的获取方式，在Flash中绘制动画运动对象的方法以及对动画的处理和将动画应用到ppt中，让动画更好地位我们的学习所利用。

。