多媒体动画制作

nullnull 动画可以清楚地表现出一个事件的过程，或是展现一个活灵活现的画面。 5.1 动画设计概述 5.2 二维动画制作软件——Flash 5.3 Flash的工作界面 5.4 Flash中的基本操作 5.5 Flash中的基本动画 5.6 Flash中的交互动画null5.1 动画设计概述 5.1.1 动画的视觉原理 由一系列相似的画面组成的，每一幅画面称为一帧，利用人眼“视觉残留”现象。null5.1.2 动画的分类 根据动画反映的空间范围，动画分为二维动画和三维动画。二维与三维动画的区别主要在于采用不同的方法获得动画中的景物运动效果。 根据常用动画软件中用到的方法和技术，可以将动画分为：帧动画、造型动画、路径动画和关键帧动画。 null5.1.3 动画的特点 从制作的角度看，计算机动画可能相对较简单，也可能相当复杂，其关键技术体现在计算机动画制作软硬件及艺术设计上。 null5.1.4 动画文件格式 1. AVI格式 支持将视频和音频信号混合交错地存储在一起，是微软公司开发的一种符合RIFF文件规范的数字音频与视频文件格式。目前主要用来保存电影、电视等各种影像信息。null2. GIF文件 主要用于图像文件的网络传输，目的是能够在不同的平台上交流使用，是Internet上WWW的重要文件格式之一。 特点：压缩比高、磁盘空间占用较少、图像文件小、下载速度快、无损压缩和基于帧的动画等。 3. FLIC格式 广泛用于动画图形中的动画序列、计算机辅助设计和计算机游戏应用程序。null4. SWF格式 Flash的矢量动画格式，目前大量应用于WEB网页中，特别适合网络传输。 5. DIR格式 Director的动画格式，扩展名为DIR，也是一种具有交互性的动画，可加入声音、数据量较大。多用于多媒体产品、游戏中。 null5.2 二维动画制作软件——Flash 5.2.1 Flash动画的优点 ⑴ 操作简单，硬件要求低。 ⑵ 功能较强，可以综合众多媒体，如文字、声效等，在 Flash 里完成动画。 ⑶ 在很多方面简化了动画制作难度，许多元件可以重复利用。null5.2.2 Flash动画的缺点 ⑴ 制作较为复杂的动画有些费力 ⑵ 矢量绘图的局限null5.3 Flash MX的工作界面null5.3.1时间轴窗口 时间轴窗口是一个用于制作动画的场所，表示各帧的排列顺序和各层的覆盖关系，是Flash 8的生命线。在缺省情况下，时间轴窗口以编辑栏的形式出现在舞台的上面，紧靠上边框。可以调整电影的播放速度，并把不同的图形作品放在不同图层的相应帧里，以安排电影内容播放的顺序。null帧的类型：空白关键帧 变形帧 运动帧 普通帧 关键帧 有错误的变形帧 有错误的移动帧 未定义帧 null5.3.2工具箱 选取工具： 选取节点工具： 直线工具： 套索工具： 钢笔工具： 文字工具： 椭圆工具： 矩形工具： 铅笔工具： 笔刷工具： 自由变换工具： 渐变工具： 墨水瓶工具： 油漆桶工具： 吸管工具： 橡皮擦工具： null5.3.3场景与舞台 场景是进行创作的主要工作区域，一般情况下场景与舞台共同操作。 在Flash中的符号一共有3种： 图形符号：指的是静态的图像。 按钮：用来制作具有交互性的按钮。 影片片段：指的是动态图像。 null5.3.4影片属性 在属性窗口中可以设置影片的属性，如播放速度、大小、背景色。帧的默认播放次序为从序号小到大。场景的播放次序是，没有定义时按照场景选择按钮下拉菜单显示的场景顺序。null5.3.5 动画类别 Flash动画分成两种： 逐帧动画：由位于时间轴上同一动画轨道上的一个连续的关键帧序列组成，对于动画序列的每一帧中的内容都可以单独进行编辑。 补间动画：制作好若干关键帧的动画，由Flash通过计算生成中间各帧，使得画面从一个关键帧过渡到另一个关键帧。Flash补间动画就有两种：变形动画和运动动画。 null5.4 Flash中的基本操作 5.4.1 动画文件的基本编辑操作 ⑴ 新建文件 在启动软件后就会自动创建一个文件名为“未命名1”的文件，用户也可以通过选择菜单“文件/新建”命令自己创建新文件。选择好要建立的文件类型后，点击确定按钮，就会进入工作界面。null⑵ 打开文件 选择菜单“文件/打开”命令，打开已有的文件。 ⑶ 保存 菜单“文件/保存”，或按下Ctrl+S直接保存文件。 ⑷ 另存为 选择菜单“文件/另存为”，另存为其他名称或格式的文件。 ⑸ 关闭 选择菜单“文件/关闭”，可以关闭当前图像文件。 null5.4.2剪辑元件的创建 执行菜单“插入/新建元件”。为新创建的元件命名，系统默认的名称为“元件1”，然后选择元件的类型，点击确定按钮，进入到元件绘制界面，在这个窗口中可以绘制任意形状的剪辑元件 。null5.4.3场景的绘制 在时间线窗口的上方，点击场景选项，将编辑模式转回到场景中。在场景中可以设置不同的关键帧，并在关键帧中设置参数，系统会自动在2个关键帧之间生成动画。null5.4.4动作的设置 一些简单的动画通过菜单中参数的设置就可以实现，但是比较复杂的动画还是需要编写脚本来实现。脚本语言是通过动作设置来完成的，选择动作命令。这时会打开一个对话框，输入编写好的脚本就可以控制程序的运行了。 null5.4.5 声音文件的导入 操作步骤： ⑴ 在动画的编辑状态下，选择菜单【文件】→【导入】→【导入到舞台】命令，打开导入对话框。 ⑵ 在【导入】对话框中，打开【文件类型】列表框，选择声音文件格式。null⑶ 在【导入】对话框中选种声音文件之后，单击【打开】命令按钮，声音文件便导入了Flash动画文件中。这里是把声音文件作为一个对象导入到【库】面板里，打开【窗口】→【库】面板就会看到声音文件的名称，选种声音文件后，在【库】面板的预览窗口可以看到声音的波形。 null⑷ 选择要插入声音文件的帧，把声音文件从【库】面板中拖入舞台或者单击帧【属性】面板中声音列表框，这时【库】面板中的声音文件已经被列在其中，选择要插入的文件即可。选择一个声音文件之后，会在【属性】面板中显示所选择的声音文件信息，包括采样频率、立体声格式、播放时间和声音文件大小。null5.5 Flash中的基本动画 5.5.1 正方体旋转动画 实例5-1 正方体旋转色彩变化动画的制作。 操作步骤： ⑴ 新建一个影片，命名为“例5-1”， 单击菜单【修改】→【文档】命令，将影片舞台大小设置为550×400像素，背景颜色为白色。 ⑵ 选择绘图工具栏中的矩形工具“”，将填充色设为黄色，在舞台中按住【Shift】键画一个黄色正方形。null⑶ 在时间轴上第30帧处单击鼠标右键，在弹出的菜单中选择【插入帧】命令。 ⑷ 选择菜单命令【插入】→【时间轴特效】→【变形/变换】→【变形】，弹出【变形】对话框。将旋转参数设置为180度，选种【更改颜色】复选框，将【最终颜色】设置为蓝色，按下右上角的【更新预览】按钮，就会看到矩形在不断的选转，并且颜色由黄色变成了蓝色。 ⑸ 点击【确定】按钮，执行菜单【控制】→【测试影片】命令，就可以看到制作的效果了。null5.5.2 球体运动动画 例5-2：运动的小球。 操作步骤： ⑴ 新建一个影片，命名为“例5-2”， 单击菜单【修改】→【文档】命令，将影片舞台大小设置为550×400像素，背景颜色为白色。 ⑵ 在工具箱中选择画圆工具，在下面的颜色选项栏中设置关闭边线色，选定填充色为黄色，用鼠标在舞台中按住【Shift】键绘画一个圆。 null⑶ 在时间轴上将第1帧设置为关键帧，执行菜单命令【插入】→【时间轴特效】→【变形/变换】→【变形】，更改移动方式设置为“移动位置”，X、Y均设置为100像素点，并将缩放设置为150%。 ⑷ 点击【确定】按钮，完成操作。执行菜单【控制】→【测试影片】命令，就可以看到制作的效果了。 null5.5.3 遮罩效果动画 实例5-3：遮罩效果的制作。 操作步骤： ⑴ 新建一个影片，命名为“例5-3”。单击菜单【修改】→【文档】命令，将影片舞台大小设置为550×400像素，设置背景色为黑色。 null⑵ 选择工具箱中的文本工具，颜色为红色，在场景中输入文本信息“遮罩动画效果”，并在该层时间轴的第30 帧插入一个关键帧，在该图层属性对话框中将图层名称设定为“文字层”。 ⑶ 在图层控制区单击鼠标右键，添加一个新图层，名称设定为“探照灯层”。 null⑷ 选择 “探照灯层”的第一帧，选择工具箱中的椭圆工具，在文字场景最左端能够盖住文字的位置画一个圆，并该圆转换为库中的元件1。⑸ 在 “探照灯层”的时间轴上第30帧处插入一个关键帧，使用工具箱中的选择工具将所绘制的圆移动最右段的文字上。null⑹ 选择“探照灯层”第一帧，在该帧的属性对话框中选择补间下拉菜单中的“动画”。在图层控制区右键单击“探照灯层”，选择弹出快捷菜单中的“遮罩层”。 ⑺ 按Ctrl+Enter键预览演示效果，单击菜单【文件】→【导出】→【导出影片】命令，输出制作好的遮罩效果文件。null5.5.4 路径动画 实例5-4 自行车走山路。 操作步骤： 1. 绘制一座弯曲的山间小路。2. 在第45帧处按F6添加关键帧。 3. 在图层控制区新建图层，选取文本工具，在下面的属性栏中选择字体为Webdings，字号为100磅，颜色为红色，在场景中输入小写字母“b”，可看到一辆自行车的图案。 null4. 在第45帧处按F6添加关键帧。 5. 在图层控制区下方单击引导层按钮，可以看到图层栏中出现一个新的引导线层，而刚才的自行车图层所在的被引导层向后退了一格。6.在工具箱中选择铅笔工具，在工具箱下面选项栏中选中平滑命令，用铅笔工具沿山路弯曲方向绘制一条平滑曲线，作为引导符号运动的路径。 null7. 单击第一帧，安装场景中的自行车中心点，将其移动到引导线起始点。 8. 同样方法在最后一帧，将其移动到引导线终点。 9. 按Enter键预览效果，可看到自行车能够按着引导线运动，但是自行车的头始终向前方，这就不符合常理。 10. 要让自行车始终朝运动的前方，在场景下边属性栏选中Orient to Path（使路径适应）复选框。null11. 在起始帧选择工具箱中的自由变换工具，将鼠标放在自行车的角点上，看到旋转符号时按住鼠标拖动，将自行车旋转为与引导线方向一致。 12. 同样方法，在结束帧将自行车旋转为与引导线方向一致。 13. 按Ctrl+Enter键预览效果 null5.5.5 逐帧动画制作 实例5-4：节日彩灯，效果如图所示。 操作步骤： 1. 设置背景为蓝色。 2. 绘制房子轮廓并且用黑色进行填充。再在其中绘制窗户和门用浅黄色进行填充。。3.执行菜单“插入”选择“新建元件”命令，新建灯元件，按照此方法继续创建“星1”和“星2”元件。null4. 执行“窗口”选择“库”命令调出库元件，执行菜单“插入”选择“关键帧”命令或者按F6插入关键帧，从库中首先把“灯”元件的实体拖入舞台，依此类推，在后面的每按F6一次将灯元件的实体拖入一直到房顶填满，再在后面的帧中依次把“星1”和“星2”元件的实体在拖拽到房顶中间，按Ctrl+Enter键预览效果。 null5.6 Flash的交互动画 5.6.1精巧时钟动画设计 最终效果如图所示。 null操作步骤： 1. 新建一个影片，将影片舞台大小设置为270×320像素，背景颜色为白色。 2. 制作时钟里的时针。新建一个影片剪辑元件，命名为hours。进入元件的编辑区后，在工具箱中找到矩形工具，并绘制一个细长的无边框的矩形，填充色为灰色没，颜色代码为#999999。null3. 制作时钟里的分针。新建一个影片剪辑元件，命名为minutes。进入元件的编辑区后,使用矩形工具绘制一个细长的无边框的矩形，填充色为深灰色，颜色代码为#666666。4. 制作时钟里的秒针。新建一个影片剪辑元件，命名为seconds。进入元件的编辑区后，使用矩形工具绘制一个细长的无边框的矩形，填充色为红色，颜色代码为#FF0000。null5. 新建一个图形元件，命名为outeregde。进入元件的编辑区后，使用前面内容中介绍的方法制作一个圆环。填充色为灰色，颜色代码为#999999，用作时钟的边框。6. 回到主场景中，将影片默认的图层Layer1重命名为outeredge。然后将元件outeregde拖到舞台上，调整其位置到舞台的中央。 7. 新建一个图层numbers，使用文本工具，分别输入从1到12这12个数字,并绕着时钟边框排列位置。null8. 新建一个图层clockhands，分别将元件hours、 minutes和seconds拖到场景中。然后使用椭圆工具绘制一个黑色无边框的正圆，将其放置在表盘的中心，然后分别将时针，分针和秒针放到表盘的中心，使三个表针的下部和中心位置对齐。9. 添加图层pagetitle，使用工具分别绘制一个静态文本框和一个动态文本框。在静态文本框中输入时钟的标签：flash时钟，设置动态文本框的文本变量名为time，用来动态显示年、月、日和星期。null10. 最后添加一个图层命名为Action，设置控制时钟运行的Action脚本。 在第1帧添加如下Action： time = new Date();//定义time为Date日期对象 hours = time.getHours();//取得当前系统的小时,并赋给变量hours minutes = time.getMinutes();//取得当前系统的分钟,并赋给变量minutes seconds = time.getSeconds();//取得当前系统的秒钟,并赋给变量secondsnullif (hours>12) { hours = hours-12; } if (hours<1) { hours = 12; } hours = hours*30+int(minutes/2); minutes = minutes*6+int(seconds/10); seconds = seconds*6; 在第2帧添加如下Action： gotoAndPlay(1);null11. 最后一步是给三个表针添加各自的Action，使其可以按照自己的规律进行旋转。 给时针添加如下Action： onClipEvent (enterFrame) { setProperty(this, _rotation, _root.hours); }null给分针添加如下Action： onClipEvent (enterFrame) { setProperty(this, _rotation, _root.minutes); } 给秒针添加如下Action： onClipEvent (enterFrame) { setProperty(this, _rotation, _root.seconds); }null5.6.2 DNA的双螺旋结构动画设计 最终效果如图所示。操作步骤： 1 . 场景布置，新建一个大小为550×400像素、背景为#006699、帧速率为18fps的场景。null 2. 创建立体球，按快捷键“Ctrl+F8”新建一个名字为ball的图符元件，按快捷键O选取椭圆形工具，在属性面板中设边框为“无”。在混色器面板中把填充色的填充类型设为“放射渐变”，由中心艳红向边缘暗红渐变，按住Shift键画一个圆心在中心点的正圆。 将填充色改为白色，画一些大小合适的椭圆，通过自由转换工具旋转刚才的椭圆到合适的角度，把它拖到正圆的亮点上，完成一种立体的效果。null3. 创建长方形，按快捷键Ctrl+F8新建一个名字为cf的图符元件，按快捷键R选取矩形工具，画一个大小合适的长方形。按快捷键N选取线条工具，把刚才的长方形平分。按V键回到箭头工具，把刚才被平分的长方形的一边的填充色改为纯蓝色，另一边填充色改为黄色。null4. 制作合成元件(bf)。按快捷键Ctrl+F8新建一个名字为bf的影夹元件。按Ctrl+L打开库，把元件ball和cf拖到场景上，使cf元件中心与中心点对齐。5. 让元件动起来，按快捷键Ctrl+F8新建一个名字为mc的影夹元件，按Ctrl+L打开库，把bf拖到舞台上，在45帧上按F6，添加关键帧。再单击第一帧，在属性面板中进行设置。null6. 返回主场景，进行action编写： ⑴ 把mc影夹放在场景中并将它的实例名称命名为mc。 ⑵ 新建层action，用来书写action。在第一帧中书写如下action： setProperty("mc", _alpha, 0); //将mc设置为不可见(即透明度为0) duplicateMovieClip("mc", "mc" add n, n); //复制mc，并命名为mcn setProperty("mc" add n, _alpha, 100);null//将mcn透明度设置为100 setProperty("mc" add n, _y, getProperty("mc" add n, _y)+15*n); //设置mcn的Y位置 setProperty("mc" add n, _rotation, 20*n); //将每个复制后的mcn旋转度加20° n = n+1; //每执行一次程序n加1null⑶ 在第二帧插入关键帧，书写以下代码： gotoAndPlay(1); if (n>100) { n = 100 //最大复制个数为100 }