1、学年论文（设计）（本科）学 院 计算机与信息技术学院 专 业 计算机科学与技术 年 级 2007 级 姓 名 吴晓娜 论文（设计）题目 flash 动画机器猫的制作 指导教师 王淑礼 职称 副教授 成 绩 2009 年 6 月 6 日学号：20075101027目 录中文摘要 1关键词 1Abstract 1Key words1引言 11.flash 制作动画的优越 12.前期准备 12.1 选材 22.2 素材准备 22.3 场景的转化 33.制作流程 23.1 界面制作 23.2 制作思想 33.3 制作动画步骤 33.3.1 创建文档 33.3.2 制作动画外层的黑框 43.3.3 片头
2、人物的切换效果 43.3.4 叮当猫消失效果63.3.5 片头文字的制作63.3.6 叮当猫在天空中飞行 73.3.7 叮当猫与馅饼碰撞83.3.8 人物落下时的动作 93.3.9 人物落到圆环上的动作93.3.10 制作结束画面104.结束语 11参考文献 11Flash 动画机器猫的制作学生姓名：吴晓娜 学号：20075101027学院：计算机与信息技术学院 专业：计算机科学与技术专业指导老师：王淑礼 职称：副教授摘要：Flash 是一种交互式动画设计工具，用它可以将音乐，声效， 动画以及富有新意的界面融合在一起，以制作出高品质的动态效果。 该 文 论述了 Flash 技术在 Flash
3、短片机器猫中的应用，描述了 Flash 的特点和本短片的思路，并着重介绍了短片的制作过程，最后总结出制作本短片的收获。关键字： Flash 场景 帧 音效Abstract：Flash is one kind of interactive animation design tool, with it may music, the sound effect, the animation as well as the rich fresh idea contact surface fuses in together, manufactures the high quality the dynamic
4、 effect. This article elaborated the Flash technology in the Flash short film “Machine Cat“ the application, described the Flash characteristic and this short film mentality, and introduced emphatically the short film manufacture process, summarizes finally manufactures this short film the harvest.K
5、ey words： Flash ；scenes； audio； frame引言Flash 是美国的 Macromedia 公司于 1999 年 6 月推出的优秀网页动画设计软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起。它是目前网络动画的事实标准，其文件短小，播放效果好，交互功能强，易学易用，被广泛应用于网络动画，广告制作，教学课件，互动游戏等方面。哆 啦 A 梦 是 一 只来 自 未 来 世 界 的 机 器 猫 ， 它 用 自 己 神 奇 的 百 宝 袋 和 各 种 奇 妙 的 道 具 帮 助 大 雄 解 决 各种 困 难 。 哆 啦 A 梦 的 故
6、 事 将 人 们 带 进 一 个 奇 妙 、 充 满 想 像 力 的 世 界 。 本 flash 短剧机器猫描述的是一个动画片的片头，以 片 头 动 画 的 形 式 简 要 呈 现 机 器 猫 的 形 象 ，短短的几个场景则勾勒出整个剧本，具有积极的象征意义。加上背景音乐的烘托,使该动画更加的生动。1.flash 制作动画的优越性(一)使用矢量图形和流式播放技术与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。(二)文件小，播放速度快 通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几 K 字节
7、的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。(三)融合音乐、声效、交互等多种方式 把音乐，动画，声效，交互方式融合在一起，并且创作出了许多令人叹为观止的动画(电影)效果。而且在 Flash8.0 的版本中已经可以支持多种流媒体格式，这使得加入视频文件也能保持小巧的身材。 (四)具有动画编程功能强大的动画编程功能使得设计者可以随心所欲地设计出高品质的动画和游戏，通过ACTION 和 FS COMMAND 可以实现交互性，使 Flash 具有更大的设计自由度。2.前期准备2.1 选材大多数人
8、都对未来充满了好奇，对未来的世界充满了渴望，机器猫是大多数人所熟悉的动画片，看过的人都留下了深刻的印象，来自未来世界的机器猫展现给我们的是一次又一次惊险，还有数不尽的喜悦，因此我便选择了这样的一个主题,虽然很老但是很经典，让我们重新找回童年的记忆，结合着动画片的很多情节便构造了短片中的场景。2.2 素材准备这是工程最庞大的一块,由于想到要在整体达到一种清新的感觉,单靠 flash 是远远不够的,还需要用到 ps 软件,因为 ps 对于处理背景的效果功能是很强大的。不同的情景需要不同的场景衬托。又要考虑到整体的色彩的搭配,因此背景构图是相当费神的。缺少主角的短片当然不够完整,在这主要用的是矢量图
9、形,因为牵涉到局部的动作,用图片表现很占空间,而且画面不很流畅,因此考虑在 flash 里手绘,对每个动作的绘制都要很仔细才行,不然会使人物的动作不协调。在场景中也涉及到很多小的修饰,如天空、红色背景、飞行物等。为了使其真实、形象有的则是通过图片再进行特殊的处理放入场景中去的。短片中的声音和场景相呼应，每个情节都有相应的对照，起到渲染情节的作用。2.3 场景的转化基本上都是采用的是淡入淡出的手法,这样使的画面过渡的自然、流畅。3.制作流程3.1 界面制作整个画面用一个黑色的框包围起来，给人一个整体的感觉,依次采用蓝色背景、红色背景、蓝色天空和白云做为背景,很淡雅。在黑框上面特意把标题写成黄色，
10、看起来醒目,并且采用遮照的方式使其产生动的感觉,是整个界面不死板。3.2 制作思想该短片采用的大小是 620*520,帧频是 18 秒/帧。在整个短片之中,要考虑到镜头的组节问题。镜头的组节要符合生活的逻辑、思维的逻辑。这点在动画的运用中也不例外。在这个的基础上我们才能从观众的口味入手,怎样才能组接好更多的镜头。场景的变化都要采用的是循序渐进的方式,才能使得整个画面过度的不突然。在动作的表现当中,也不可能把每个细节都展现出来,只要抓住可以表现的东西即可。比如在描述叮当旋转的场景中,只需把镜头对叮当即可表现出来。因此在 Flash 的创作过程中是很灵活的,想怎样去实现就通过自己的思想去实现,只要
11、不违背现实的客观规律就可。3.3 制作动画的步骤3.3.1 创建文档图 1 创建文档首先创建一个空白 flash 文档，进入 flash 的编辑页面后修改页面的属性，宽为620px，高为 520px，帧频为 18 帧，淡蓝色的背景色，点击确定设置完成（见图 1） 。将使用的素材导入到库中，执行文件菜单下的导入，导入到库命令，打开导入到库的对话框，导入人物图片、机器猫文字、背景图片，以及声音等文件，在库中把相应的素材整理到相应的夹子下。3.3.2 制作动画外层的黑框按 Ctrl+F8 键创建一个名称为黑框的图形元件，进入此元件的编辑状态，使用工具箱中的矩形工具，将笔触颜色设置为无，填充颜色设置为
12、黑色，然后在舞台坐标的（0，0）处绘制一个大小为 620*60 的黑色矩形，选中此矩形按 ctrl 键向下拖动矩形，并将复制出来的矩形拖动到（0，460 ）处。再绘制一个大小为 35*520 的黑色矩形，将它复制一个分别将这两个矩形拖动到（0，0 ） 、 （585 ，0）处，回到场景一按 F11 打开库面板，将黑框图形元件拖动到舞台（0，0 ）处，将图层一改名为黑框。3.3.3 片头人物的切换效果按 Ctrl+F8 键创建一个名称为三角块的图形元件，在此元件的编辑状态下使用工具箱中的多角星形工具，打开属性面板，单击选项按钮，在工具选项窗口中样式为多边形，边数为三，星形顶点大小为 0.50，将笔
13、触颜色设置为无，填充色设为白色。设置完成后，按住 shift 键在舞台中绘制一个宽为 220px，高为 200px 的倒立等腰三角形，选中此三角形，执行修改菜单下的变形，垂直翻转命令，将三角形翻转成正立的三角形。按Ctrl+F8 键创建一个名称为 01 的影片剪辑，进入此元件的编辑状态，按 F11 打开库面板将 01 图片叮当猫拖动到舞台原点处在图层一的 24 帧处插入一个关键帧，新建图层二，将库中的三角块元件拖入舞台中的（-55，100 ）处，然后在此图层的 24 帧处按 F6 插入关键帧，图 2 建立遮罩层再将此帧下的三角块元件向上移动使其到（-55，-100）的位置，并在此帧间创建补间动
14、画，选中图层二单击右键，在弹出的菜单中选择遮罩层（见图 2） 。新建图层三使用工具箱中的矩形工具，笔触颜色为蓝色，填充颜色为无，在舞台（0，0 ）处绘制一个宽为110px，高位 100px 的矩形，选中图层二下的 24 帧，打开动作面板在帧的动作中输入stop（） ；至此 01 元件就制作完成了。重复上面的步骤，我们依次使用库中的03、05、07 元件制作 03、05 、07 影片剪辑。同理按下 Ctrl+F8 键创建一个名称 02 的影片剪辑元件，进入此元件的编辑状态，打开库面板按照上面的步骤将三角形元件垂直翻转，将其移动到（-55，-200）处，在此图层第 24 帧处插入关键帧，再将三角形
15、元件向下移动使其在（-55，0）的位置，并在此帧间创建补间动画，选中图层二单击右键，在弹出的菜单中选择遮罩层，类似 01影片剪辑完成 02 影片剪辑，重复上面的步骤，我们依次使用库中的 04、06、08 元件制作 04、06、08 影片剪辑。回到场景一中，在图层黑框上新建一图层声音，打开库面板，将多拉 A 梦 01.mp3元件拖动到舞台中，并选中第一帧按 F5 插入帧，一直插入到第 1170 帧，在图层黑框下方依次插入图层切换集一，切换集二，action。下面制作人物切换效果，选中切换集一，打开库面板，将影片剪辑 01 元件拖动到舞台可见区域的外侧，打开属性面板，将此元件命名为 qh01,选中
16、图层 action 下的第一帧打开动作面板，在其帧的动作下输入代码，重复上面的步骤分别在图层一上的第 70 帧、 140 帧、210 帧、280 帧处插入关键帧，并分图 3 人物切换效果别将 03、05、07、01 元件拖到舞台可见区域的外侧，并将它们分别命名为qh03、qh05、qh07、qh9，在 action 层上在其相应的帧上插入代码。同理在切换集二上制作动画切换，效果（见图 3） 。3.3.4 叮当猫消失效果新建一个名为叮当旋转的影片剪辑，进入到此元件的编辑状态下，使用矩形工具在舞台中绘制一个米黄色 620*520 的无边框矩形，新建图层二，打开库面板，将叮当图片拖动到舞台中，移动到
17、矩形的中间位置，在图层二的 90 帧插入关键帧，在 116 帧插入关键帧，用任意变形工具选中图片，将中心位置调到叮当猫的嘴部位置，在 90 帧到116 帧处创建补间动画，打开属性面板，在旋转中选择顺时针，选中第 116 帧打开动作面板，在帧的动作中输入 stop（） ；回到场景一中在图层切换集二的 310 帧处插入空白关键帧，图 4 叮当猫消失在 311 帧处插入关键帧，并打开库面板将叮当旋转元件拖动到舞台中的（0，0 ）位置处，再回到图层 action 上在311、321、331、341、351、361 、371、381.、391、401、411帧处插入关键帧并在帧的动作中输入相应代码，以逐
18、渐消除叮当猫的图片（见图 4） 。3.3.5 片头文字的制作新建一个名字为片头文字的影片剪辑，在此元件的编辑状态下打开库面板，将text01 拖动到舞台中，在图层一的下放新建一图层二，打开库面板，将 text02 拖动到舞台中，将它与 text01 错开一点，在图层二的下方新建一个图层三，使用工具箱中的矩形工具在此图片的左侧绘制一个 30*20 的任意颜色的矩形，在舞台中选中此矩形把它转换为名称为闪条的图形元件，在此图层的第 6 帧处插入关键帧，并将矩形向右移动到文字右侧，并在此帧之间创建补间动画，单击图层三单击右键在弹出的菜单中选择遮罩层，至此片头文字的影片剪辑制作完成了。回到场景一中在切换
19、集二的 427 帧处插入空白关键帧，图 5 创建补间动画打开库面板将红色背景拖动到舞台中，回到图层切换集二的 435 帧插入关键帧，打开库面板，将片头文字元件拖动到舞台中，并适当缩小此元件，打开属性面板将其透明度调整为 0%，在此图层的 445 帧出插入关键帧，将此帧的元件透明度设置为 100%，然后在 455 帧处插入关键帧，将此帧下的元件适当放大，并向下移动，将其透明度设置为 0%，在此图层下的第 470 帧处插入关键帧，并将此帧下的透明度设置为 100%。在 435 帧和445 帧，445 帧和 455 帧 ，455 帧和 470 帧间插入补间动画（见图 5） 。3.3.6 叮当猫在天空
20、中飞行选择图层切换集一下的第 471 帧，插入空白关键帧，首先新建一个名称为飞行的影片剪辑元件，打开库面板，将飞行素材一拖动到舞台中，将此图片改为矢量图，使用选择工具将叮当猫上的竹蜻蜓选中并按下 ctrl+s 剪切选中的部分，再新建一图层为竹蜻蜓的图形元件，在此图层上的第四帧上插入关键帧，使用选择工具，将竹蜻蜓上的螺旋桨部分选中，复制选中的部分，进行黏贴，用任意变形工具和选择工具调整其大小和位置，再使用颜料桶工具将原来的螺旋桨位置填充为白色，选中第 1 帧和第 4 帧复制帧，分别在第 8 帧，第 16 帧黏贴帧，在第 24 帧处按 F5 插入帧。回到飞行元件的编辑状态，将库面板的竹蜻蜓元件拖入
21、到场景一中，调整到起始位置。类似竹蜻蜓做小强运动的影片剪辑。再新建一个白色闪块的图形元件，在舞台中绘制一个无边框的 620*520 白色矩形，回到场景一中在图层黑框下方新建一图层白色闪层，在白色闪层的 465 帧处插入关键帧，图 6 插入叮当猫将库中的白色闪层元件拖动到舞台的（0，0 ）处，并将透明度设置为 0%，分别在此图层的 480 帧和 490 帧出插入关键帧，并分别将其帧下的元件透明度设置为 100%，创建补间动画，在图层切换集一的下方新建图层背景，在 485 帧处插入关键帧，将蓝色天空背景拖入场景中，在 635 帧处插入关键帧，将此帧下的图片拖动到右边，在此帧间创建补间动画。在 ac
22、tion 上新建图层运动一并在此图层的 485 帧处插入关键帧打开库面板拖入到舞台右侧可见区域的外侧（见图 6） ，使用任意变形工具将其变小，然后缓慢移到场景当中。3.3.7 叮当猫与馅饼碰撞新建图层碰撞，使其在运动一图层上，在此图层的 585 帧上插入关键帧。打开库面板，将馅饼拖动到舞台可见区域左侧，使用任意变形工具适当调整其大小，选中此图层图 7 调整元件大小605 帧插入关键帧，然后将此帧下的元件移动到与叮当猫相撞的位置，并在此帧间创建补间动画，再回到运动一图层在 605 帧处插入关键帧，创建补间动画，在 615 帧处插入关键帧，使用任意变形工具将此帧下的元件向上旋转，同时在图层碰撞的
23、615 帧插入关键帧，也将此帧下的元件向上旋转，创建补间动画。上述完成后，分别在图层运动一和碰撞的 616 帧处插入空白关键帧。下面制作物体碰撞产生的白色星星效果，新建名称为白色星星的图形元件，使用多角星工具在舞台中画一星形图案，回到场景一在白色闪层的 605 帧处插入关键帧，打开库面板将白色星星拖动到舞台当中并调整大小，在此层下的 645 帧处插入关键帧，将此帧下的元件调整到覆盖住舞台的可见区域（见图 7） ，在此帧间创建补间动画，在图层下的 675 帧处插入关键帧，将此帧下的元件透明度设置为 0%，在此帧间创建补间动画，最后在 676 帧处插入空白关键帧。3.3.8 人物落下时的动作首先在
24、背景层的 645 帧插入关键帧，并将此帧下的元件顺时帧旋转 90 度，在此层下的 685、940 帧处插入关键帧，调整 940 帧处元件的位置，在此帧间创建补间动画，在碰撞图层下新建图层落下一，选中此图层的 685 帧插入关键帧，将落下一拖动到舞台的上方，将叮当猫的中心跳到脚部位置，在此层的 705 帧处插入关键帧，将元件移动到舞台中的适当位置，创建补间动画，同理在碰撞图层下新建落下图层二和落下图层三，创建运动人物二和三从上到下的运动效果。3.3.9 人物落到圆环上的动作创建一个名称为猫头的图形元件，打开库面板，将运动素材拖动到舞台中，并将元件转换为矢量图（见图 8） 。使用选择工具选中黄色圆
25、环，按 ctrl+s 剪切圆环将它复制到图 8 位图转换为矢量图名称为圆环的图形元件中，回到场景一中在图层落下的下方新建一图层命名为猫头，在此层的 828 帧处插入关键帧，将库中的猫头元件拖动到舞台中。在猫头图层下新建一图层命名为圆环，在 828 中插入关键帧，将圆环元件也拖动到舞台中，调整圆环的位置使其和猫头元件为一个整体。分别在猫头图层和圆环图层的 864 帧处插入关键帧，并将帧下的元件向上移动，然后在帧间创建补间动画，在落下一的 800 帧和 864 帧处插入关键帧，将 864 帧处的叮当猫元件向下移动，用任意变形工具适当放大和旋转此元件，调整完成后在此帧间创建补间动画，类似制作落下二和
26、三。右键选择落下一图层，在弹出的图 9 使用引导层菜单中选择添加引导层，在引导层 864 帧处插入关键帧，使用线条工具在圆环上画一圆形的运动轨迹（见图 9） 。在 916 帧处插入关键帧将元件拖动到引导线的右侧适当缩小此元件，创建补间动画，最后依次制作落下二和三的运动。3.3.10 制作结束画面在图层白色闪层的 1115 帧处插入关键帧，打开库面板，将元件白色闪块拖动到舞台的（0，0）处，将此帧下的元件透明度设制为 0%，在 1135 帧处插入关键帧，将此帧下图 10 结束画面元件的透明度设置为 100%，使用工具箱中的文本工具将字体设置为方正艺黑简体，字号设置为 45，颜色为黑色，其它选项为
27、默认，设置完成后在舞台中输入文本（见图 10） ，回到图层白色闪层，1115 帧和 1135 帧间创建补间动画。4.结束语这次的学年论文是我模仿完成的 flash 动画片头机器猫,对于人物的把握可能不是很到位,但我都是非常认真的去完成。在此期间,我同时也体会到了鼠绘的妙用,意识到 flash 也是一种非常强大的画图的工具，用它能制作出非常精美的矢量图形。但它代表的却是我对 flash 的一个崭新的态度。总之,对我来说。这次动画对我在 flash 制作方面是一个提高, 增强了我的动手能力，为自己能力的提高奠定了坚实的基础。也使我从另外一个角度认识了 flash 制作。我也希望 flash 软件能够更加的智能话,让更多的人能步入这个动画的行列,并做出更多更好的作品。参考文献1王志敏 刘鸿翔 Flash 动画制作M华中科技大学出版， 20042于鹏Flash MX 动画设计教程M 电子工业出版社， 20053 王占宁 Flash8 大师课堂全记录 M中国宇航出版社，20064 陈冰Flash 第一步 基础篇M清华大学出版社，20065 王汝义别具光芒： Flash8 ActionScript 滤镜效果M人民邮电出版社，20076 龙腾科技 Flash 8.0 循序渐进教程 M科学出版社，2007 7 谢广彬 Flash 8.0 动画制作M国防科技出版社，2008
