“小荷塘”二维Flash动画的设计与制作

I “小荷塘”二维 Flash 动画的设计与制作 摘要：随着当今网络的发展，Flash 已经成为一个必不可少的网页动画设计工具。 Flash 是美国的 MACROMEDIA 公司于 1999 年 6 月推出的优秀网页动画设计软件。它 是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融 合在一起，以制作出高品质的网页动态效果。具有体积小、互动性强、兼容性好的 特点，一直受到动画制作者的青睐。如今，因特网上已具有成千上万个 flash 站点， 让人尽情地享受这种多媒体技术所带来的动感，flash 动画势必将成为未来网页的 一大主流。在 flash 动画制作过程中，它的三大基本功能是整个 Flash 动画设计知 识体系中最重要、也是最基础的，包括：绘图和编辑图形、补间动画和遮罩。这是 三个紧密相连的逻辑功能，并且这三个功能自 Flash 诞生以来就存在。而其中 AS 动 作脚本扮演着一个重要的角色，动作脚本是 flash 动画中使用的程序脚本，通过动 作脚本，可以对动画进行高级的逻辑控制，能实现时间轴的特殊效果，能帮助用户 按照自己的想法更加准确地创建电影。Flash 中的影片剪辑技术也是我们这些初学 者非常常用的一个工具，它把那些重复而又复杂的动画简单化，在时间轴上的特殊 效果也充分的体现出来了，使我们制作起来更容易操作和理解。使用 Flash 中的各 种技术相结合，并将它们融合至恰到好处时做出来的动画效果更加精彩纷呈，但是 如何能掌握好 flash 动作脚本制作技术，已经成为广大学习者迫切需要解决的问题。 关键字：绘图；编辑图形；补间动画；遮罩；声效；影片剪辑 II Animation design and facture, FLASH animation, the small lotus pond Abstract: with the development of todays network, Flash has become an indispensable web animation design tool. Flash is MACROMEDIA company in June 1999 in the United States launched the excellent web animation design software. It is a kind of interactive animation design tool, it can be music, sound, animation and innovative interfaces together, in order to produce high quality dynamic web pages effect. Have the characteristics of small volume, interactive and good compatibility, has been favored by animators. Today, the Internet has tens of thousands of flash site, let people fully enjoy the motion brought by the multimedia technology, flash animations will be web pages a mainstream in the future. In the process of flash animation, its three basic function is the most important in the flash animation design knowledge system, which is the most basic, including: drawing and editing graphics, animation and mask. This is closely related to the three logical functions, and these three functions have existed since the birth of Flash. And one of the AS actionscript plays an important role, action script is used in the flash animation program, through the action script, the animation can be advanced logic control, to achieve the timeline of special effects, can help users to more accurately according to oneself idea to create a movie. Movie clips in the Flash technology is also our these beginners are very commonly used a tool, it put the repeated and complex animation simplification, special effects on the timeline also fully reflected, enable us to make it easier to use and understand. Use Flash in various technology and fusion to just make them more brilliant animation effects, but how can grasp the Flash actionscript production technology, has become the learner is an urgent need to solve the problem. Key words: The drawing; Edit graphics; Between animation; Mask; Sound effects; Movie clip III 目 录 第一章 绪论 .1 1.1 FLASH动画的发展现状 .1 1.2 FLASH动画的技术特点与优势 .1 1.3 FLASH动画的应用领域与发展方向 .3 1.4 课题的目的与意义 .3 第二章 小荷塘FLASH 动画的创意与设计 .5 2.1 作品背景简介 .5 2.2 主要设计内容及目标 .6 2.3 作品的总体创意构思 .7 2.4 作品的详细设计 .8 2.4.1 作品的构图设计 .8 2.4.2 作品的色彩与界面设计 .11 2.4.3 作品的声音与文字设计 .14 第三章小荷塘FLASH 动画的制作 .18 3.1 主要制作工具简介 .18 3.2 作品相关素材的收集与加工 .18 3.3 作品的主要制作流程与方法 .18 3.3.1 片头的制作 .20 3.3.2 主要帧的制作 .23 3.3.3 片尾的制作 .25 第四章小荷塘FLASH 动画的测试与发布 .27 4.1小荷塘FLASH 动画的测试 .27 4.2 发布 FLASH动画 .31 结 论 .33 致 谢 .34 参考文献 .35 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 1 第一章 绪论 1.1FLASH 动画的发展现状 随着当今网络的发展需求量扩大，2001 年前后，Flash 软件开始在中国的动画 市场风行。这个由美国 MACROMEDIA 公司推出的一款多媒体动画制作软件，作为交互 式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起， 以制作出高品质的网页动态效果。具有体积小、互动性强、兼容性好的特点，造就 了一种新的动画形式Flash 动画，受到动画制作者的青睐。短短几年时间，Flash 动画就从网络迅速推广到影视媒介，其发展速度之快，出乎意料。Flash 动画最早 通过网络流通，并随着网络技术的飞速发展，深入人们的日常生活中。这一优秀的 矢量动画编辑工具给我们带来了强有力的冲击，使我们能够轻易地将丰富的想象力 可视化。 现如今，Flash 已经逐渐被国内用户所认识和接受，并随之出现一大批忠实的 追随者。在网络上，对 Flash 动画贡献最大的要数那些“闪客”们了，无数年轻人 借助 Flash 技术实现了他们的创意和梦想。如边城 浪 子 、 老 蒋 、 IM,等“闪客”们， 为中国的 Flash 动画事业做出了不可磨灭的贡献。中国有一千万人喜欢看 Flash， 有七、八十万人喜欢做 Flash，作为 MACROMEDIA 中国用户联盟(CHINA MMUG)秘书长 冯嵘认为这样的数字已经表明，一个有着大量需方和供方的市场已经形成。只有 Flash 形成产业，找到自身的盈利增长点，才能使“闪客”成为一种职业，进而促 进更多优秀作品的出现。一些优秀作品对于推动 Flash 动画事业也起到了不可低估 的作用，近两年，各电视台动画频道也陆续播放由 Flash 制作的动画片，如现在热 播的喜羊羊和灰太狼 、 饮茶之功夫学园等，都受到了业内人士及大众的一致 好评。可见，中国电视观众已经完全接受了 Flash 动画这种新的艺术表现形式。 1.2FLASH 动画的技术特点与优势 从 Flash 软件本身特性来看，它在动画制作上较其他软件有很多优势和独到之 处，简单易学、容易上手。很多人不用经过专业训练，通过自学也能制作出很不错 的 Flash 动画作品。Flash 有很多重要的动画特 征 ， 能 实 现 较 好 的 动 画 效 果 ，Flash 的 人机交互性可以让观众通过点击按钮、选择菜单来控制动画的播放。也可以建立 Flash 电影，把动画输出为许多不同的文件格式，便于播放。Flash 使用的是矢量图 形和流式播放技术，与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 2 形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急 等待的情绪。通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几 K 字 节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使 网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就 得以播放。把音乐、动画、声效、交互方式融合在一起，越来越多的人已经把 Flash 作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效 果。而且在 Flash8 的版本中已经可以支持 MP3 的音乐格式，这使得加入音乐的动画 文件也能保持小巧的“身材” 。强大的动画编辑功能使得设计者可以随心所欲地设计 出高品质的动画，通过 ACTION 和 FS COMMAND 可以实现交互性，使 Flash 具有更大 的设计自由度，另外，它与当今最流行的网页设计工具 Dreamweaver 配合默契，可 以直接嵌入网页的任一位置，非常方便。 从动画制作工序和周期上来看 Flash 动画比传统动画在工序流程有一定简化和 较多的削减，制作周期大为缩短传统动画片虽然有一整套制作体系保障它的制作， 但还是有难以克服的缺点。一部 10 分钟的普通动画片，要画几千张画面；像大家熟 悉的大闹天宫 ，1 分钟的片长需要画 10 万多张画面，如此繁重而复杂的绘制任 务，需要几十位动画作者，花费 3 年多时间才能最终完成。传统动画片在分工上非 常复杂，要经过导演、美术设计师、原画、动画、绘景、描线、上色、校对、摄影、 剪辑、作曲、对白配音、音乐录音、混合录音、洗印等十几道工序，才可以顺利完 成。目前，Flash 动画主要分为商业用途和个人创作，包括产品广告、网站、故事 短片、MTv 等，Flash 作者从接到任务，到最后分布完成，差不多都是一个人。虽然 Flash 动画相较于传统动画来说，在画面动作衔接上不太流畅，略显粗糙，但是有 自己特有的视觉效果。比如，画面往往更夸张起伏，以达到在最短时间内传达最深 感受的效果，适应现代观众的审美需要。在制作周期上，半小时的节目，若用 Flash 技术制作，大约 34 个月就可完成，若用其他技术通常需用 10 一 14 个月。 从动画制作成本上来看传统动画片制作成本最低也要 10000 元分钟，一部动 画短片的制作成本至少需要几十万，还不包括广告费、播出费等，再加上市场运作 与相关产品开发等，制作成本大大高于收入，也因此制约了传统动画片的发展。而 Flash 动画制作成本非常低廉，只需一台电脑，一套软件，作者就可以制作出绘声 绘色的 Flash 动画，大大减少人力、物力资源以及时间上的消耗。在目前中国动画 市场资金短缺的环境张下，Flash 动画非常适合中国的国情。 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 3 1.3 FLASH 动画的应用领域与发展方向 由于 Flash 有着各方面的全方位优点，它日益成为网络多媒体的主流。Flash 动画相对于传统动画的优势非常明显，在中国的发展也取得了一定的进展，但是全 盛时代还没有到来。随着网络时代的到来，传统媒体和非传统媒体必将在相互竞争 中不断向前发展，Flash 动画必将随着自身技术和形式上的更大突破，展现出更为 广阔的前景。 因此 Flash 动画的应用领域也是非常广泛的，如下这些方面： 广告：这是当前比较流行的一种广告形式，采用 Flash 制作的广告既可以在网 络上发布，同时也可以存为视频格式在传统的电视台播放，一次制作，多台发布， 所以得到了很多企业的青睐。 娱乐短片：这是广大 Flash 爱好者最热衷应用的一个领域，利用 Flash 制作动画 短片，供大家娱乐，这也是一个 Flash 爱好者发展潜力、展现自我的平台。 MTV 制作：这也是应用比较广泛的形式，在一些 Flash 制作的网站，几乎每天 都有新的 MTV 作品的产生。 小游戏：利用 Flash 开发的小游戏体积小，画面品质高，可玩性强而且操作简单， 无需特殊安装即可立即游戏。作为一种新的娱乐方式被越来越多的人所接受，前线 网络所设计的游戏会充分结合企业自身文化，并考虑到所宣传的品牌和产品的特性， 把网络广告和网络游戏结合起来，玩者会自然地关注这些信息并亲身参与，最大限 度的扩大了游戏和广告的影响范围。 Flash 网站：精美的动画不仅可以大大提高网站的含金量，同时也可以在很短 的时间内把自己的整体信息传播给访问者，这样即可以给访问者留下深刻的印象， 同时也能在访问者心中建立良好印象。由于 Flash 有强大的交互功能，可以通过制 作按钮选择控制观看网站所展示产品的功能、外观等，这种形式比传统的展示方式 更胜一筹。 导航的应用：Flash 的按钮功能非常强大，是制作菜单的首选。 简单的应用系统：随着功能的日益强大，Flash 逐渐的走上了实际应用领域的 前台。Flash 不同于其他普通的编程工具和动画制作软件，它把图像图像、动作设 计、ActionScript 语言完美地结合在一起了，极好的克服了一般编程语言（例如 C 和 Java 等）使用程序绘图的抽象问题，以及普通动画制作软件的局限性。 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 4 1.4 课题的目的与意义 随着社会的发展和科技的进步，人们对文化需求日益增多，闪客事业如日中天。 Flash 能准确的表现人们对事物的看法，能渗透人类文化和艺术的精髓，还能发挥 其商业作用动画。Flash 可谓是无处不在，从歌曲到游戏，从寓言故事到教育 片，都能看到 Flash 的身影。Flash 是矢量图形编辑和动画创作的专业软件，主要 应用于网页设计和多媒体创作等领域，功能十分强大和独特。相同效果用 Flash 做 出来的文件比 GIF 要小很多，现在已经成为互联网事实上的交互式矢量动画标准。 Flash 技术广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制 作中；不仅如此，Flash 在学习生活中也大量地应用，例如制做课件、制作宣传片 等等。可见，Flash 在生活中的应用真的是很广泛。同时，Flash 软件在年轻人中十 分的流行，它制作出的动画色彩丰富鲜艳，形象生动活泼，风格清新可爱，已经成 为了一种时尚，我们作为年轻一代的学子，也必须具备一项技术的能力。Flash 入 门简单并且极富趣味性，但有很多细节上的东西需要学习者自己去体会，去积累， 也就是实战经验在动画制作中起了很大的作用。往往会发生这样的情况，很多初学 者认为自己的操作是完全正确的，但就是不能达到预期的效果。大多数情况就是犯 了细节上的错误，这些错误自己很难发现，需要有指导者的提醒。要融入分解 Flash 动画作品思想，开阔自己的思维。将 Flash 中的基本动画：逐帧动画、形状 补间动画、动作补间动画、遮罩动画、引导线动画融入结合到一起来制作自己的动 画，使之更加具有连贯性。初学者要多看网站上的各种 Flash 动画，丰富自己的见 识，增加自己的想象力、提高自己的审美能力，这样在进行创作的时候就没有那么 的生硬，创作出来的作品也不会显得很平淡。我们要顺应当今社会的 Flash 动画制 作主流，创造出更加丰富的作品。 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 5 第二章 小荷塘 FLASH 动画的创意与设计 2.1 作品背景简介 在一个忙碌了一天的周五下班回家的路上，恍惚看到一则广告视频，上面出现 了一叶扁舟中开出许多颜色的花朵，其中最为印象深刻的就是一朵白色的荷花。之 后我想起了在网上看到的一则关于荷花的寓意：“荷花相传是王母娘娘身边的一个 美貌侍女玉姬的化身。当初玉姬看见人间双双对对，男耕女织，十分羡慕，因 此动了凡心，在河神女儿的陪伴下偷出天宫，来到杭州的西子湖畔。西湖秀丽的风 光使玉姬流连忘返，忘情的在湖中嬉戏，到天亮也舍不得离开。王母娘娘知道后用 莲花宝座将玉姬打入湖中，并让她打入淤泥，永世不得再登南天 。从此，天宫中 少了一位美貌的侍女，而人间多了一种玉肌水灵的鲜花。 ”其中还说道荷花是美丽与 男女情爱的象征。莲花因其水生，在众多花卉中尤显洁净、高贵，所以人们经常把 她与美人联系在一起。象形容一个女子的美丽与清纯，多用“出水芙蓉” ，传说中的 四大美人之一西施，其故事也多与采莲、浣纱联系在一起。 诗经国风陈风中的 泽陂云：“彼泽之陂，有蒲与莲。有美一人，硕大且卷。 ”这便是直接把莲花比 喻成美人。曹植的洛神赋也有“远而望之，皎若太阳升朝霞；迫而察之，灼若 芙蕖出绿波”这样的将美人比做莲花的辞句。就连封建时期人们那畸形的审美观： 喜欢女人小脚，那小脚也非得叫成“三寸金莲” 。将莲花形容美人的诗句不胜枚举， 而且在古代竟然也有用莲花形容美男的典故。最著名的莫属唐时女皇武则天的面首 张昌宗，其外号叫六郎，人们都夸他“貌似莲花”而留下的“六郎似莲花”的掌故。 美人总是与爱情联系在一起的，而莲花洁净、美丽，最适合作纯洁、美好爱情的象 征。在民间，新婚洞房的布置，对联和窗花就常有“并蒂莲” 、 “鱼戏莲” 、 “荷花鸳 鸯”这些元素，古人也常以“并蒂莲开”来形容夫妻的恩爱。莲花的根：藕又与 “偶”谐音，而藕中又有千万条细丝，藕虽断，丝还连，这简直就是天造地设的爱 情象征物。而莲花的果实：莲子，因其生长于莲房中，一子一隔，互不干涉，又与 我国传统伦理“多子多福” 、 “兄弟有序”的观念极为吻合，因此被赋予了“多子” 的意义。又因“莲”与“连”谐音，所以民间还有用“莲生贵子”来祝贺他染多生 儿子的说法，以莲来象征生殖繁衍。这莲从花、根、子都被赋予了男女情爱、子孙 繁衍的象征意义。想着当今的生活和节奏，我不禁感叹，觉得自己由于开始忙于生 活，再也没有多余的闲暇时间去独自欣赏那些美丽的荷塘景色，周围的生活的环境 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 6 好像也看不到这么美丽的荷花了，我便将心中的一副荷塘画卷用我所学的知识记录 下来。 2.2 主要设计内容及目标 美是一种艺术，大自然孕育出荷的美丽更是一种是人无法参透和超越的境界。 自有古诗云：“平底碧玉秋波莹，绿云拥扇青摇柄，水宫仙子斗红妆，轻步浅 波踏明镜。 ” 同时又不排除凄美的意境：“红藕香残玉簟秋，轻解罗裳，独上兰舟。云中谁 寄锦书来？雁字回时，月满西楼。花自飘零水自流。一种相思，两处闲愁。此情无 计可消除，才下眉头，却上心头。 ” 然而此作品展现的却是一种轻快而活跃的气氛，里面采用的都是荷塘中的动物 的肢体表现，整体要充分体现出一种欢快而自然的气息，要给人一种回归大自然的 宁静与舒适。在忙碌了一天的工作之后，回到家中，打开电视机、电脑，就能看到 这样一个画面“鱼戏莲叶间，鱼戏莲叶东，鱼戏莲叶西，鱼戏莲叶南，鱼戏莲叶北。 ”会让自己的身心得到适当的减负，使疲惫着的身躯得到放松。 同时也倡导了人们在旅行的时候要爱护环境，不要随地乱扔垃圾，这样才能营 造出美丽的景色供我们观赏。 此作品的内容简洁、目标鲜明，内容主要是应用荷塘中的小动物：青蛙、蝌蚪、 鱼儿、鸳鸯来表现荷塘中的各种气氛。也体现出了荷塘中的坏境干净明亮，营造出 让人印象深刻的气氛。片头是以一只鸟儿越过天空时，远处飘来的字幕开始的，这 代表着整个动画都是鲜明快捷的开始到结束，其中没有沉闷的部分。远处飘来的字 幕是以一颗“蛋”的形势随着水的波浪走势由远到近而来，代表着一切生命的源头， 在这里有了新的开始，也象征着我从安逸的校园生活过度到忙碌的社会中去了，在 真正的社会生活工作中体验到了似是水波的来回漂荡起伏，让我有了新生活的体验， 从中学会了新生活的方式，即是“小荷塘”字幕从“蛋”中破裂而生的新生的意义， 要开始面对一切。如果那颗“蛋”代表了垃圾、果皮纸屑，那么一切将变得肮脏污 秽，在此剧中我并没有将它体现出来，因为它应该不会受到广大人士的欢迎，我们 只能从一种负面的思想去理解和看待它了。中间有一段打雷闪电的视频出现，则代 表着荷塘的天气变化和环境的变化，是整个动画画面的转折点，也突出显示了荷塘 中的环境压力，要经历暴风雨才能够有更美好的景色出现在眼前。里面的动物也可 以说是我自身的化身吧，鱼儿游过时与荷花相辅相成，在碧波荡漾中展现出了荷塘 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 7 中的水是透明干净的。也体现了我所处的生活环境本身就是一个平静的世界，它要 怎幺变化都是由我来控制的。小蝌蚪相继游过，是根据“小蝌蚪找妈妈”的片段发 展而来的，但剧中没有体现出“小蝌蚪找妈妈”的画面，只是用一只青蛙跳过水面 上的荷叶来表现出小蝌蚪成长的历程；其实也是自然赋予万千动物的一个生命的起 伏和变化关系。那么也可以想象成我现在只是一只生活在安静环境中的“小蝌蚪” ， 要经历犹如荷塘中的打雷闪电般的天气我才会迅速成长起来。最后将近尾声的时候 出现两只鸳鸯与荷塘中的荷花相辉映成美人总是与爱情联系在一起的“荷花鸳鸯” ， 代表着一切事物总会有圆满的结局，即使经历了风雨，也会有胜利的一天，也会找 到自己的归宿。最后倡导大家爱护环境，打造自然的美丽，人人有责。 2.3 作品的总体创意构思 此作品的总体创意构思是根据三层思路来确定的： 第一层思路主要表现的是画面的表面意思，既由一只鸟儿开始从天空中越过平 静的水面，一颗蛋带着字幕出现，由按钮控制开始播放后面的动画至结束。开始播 放动画后，出现小荷塘的局部景色，相继是水中小动物的出现，中间还有打雷闪电 的下雨画面，下雨结束、水面平静后动画相继结束。 第二层思路是将其中的小动物形象化寓意为自己，用它们来表现自己的成长历 程和对生活环境改变的体验。如在字幕开始时远处飘来一颗“蛋”随着水的波浪走 势由远到近而来，象征着我从安逸的校园生活中过度到忙碌的社会中去了，在真正 的社会生活工作中体验到了似是水波的来回漂荡起伏，让我有了新生活的体验，从 中学会了新生活的方式，即是“小荷塘”字幕从“蛋”中破裂而生的新生的意义， 要开始面对一切。当打雷闪电的时候，代表着我在生活中的压力与挫折，当我不怕 困难，无所畏惧的克服它之后，出现的将是雨过天晴的一片宁静和收获。青蛙的欢 腾跳跃、小蝌蚪的游动、鱼儿的寻觅，都代表着我对现在生活的看法和见解，如小 蝌蚪在经过一番成长之后就变成了站在荷叶上跳跃的青蛙，犹如我成功的走向社会， 学会如何去面对充满压力的工作，不怕困难、无所畏惧的向前冲，最后就像两只鸳 鸯一样找到自己的归宿。 第三层思路则是在作品的尾声体现出来的， “守护，自然之美”即是倡导人们守 护自然、爱护环境，才可拥有一个像小荷塘这样美丽而健康的生活环境。 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 8 2.4 作品的详细设计 2.4.1 作品的构图设计 作品的构图设计首先从场景的分镜头上看，此动画的分镜头共有三个大的分镜 头，分别是片头开始是的鸟儿越过水面时，分镜头 1 如图 2-1 所示： 图 2-1 分镜头 1 当片头完成时，动画内容开始播放的第一帧，分镜头 2 如图 2-2 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 9 图 2-2 分镜头 2 当内容播放完成，出现片尾时的分镜头 3 如图 2-3 所示： 图 2-3 分镜头 3 在中间的内容中，出现四个转折的分镜头构图，第一个分镜头是随着柳树叶的 飘落小蝌蚪出现了，转折分镜头 1 如图 2-4 所示： 图 2-4 转折分镜头 1 当柳树叶飘落，小蝌蚪游过，一只青蛙从视图的左上角往右下角欢腾的跳出时， 就出现了转折分镜头 2 如图 2-5 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 10 图 2-5 转折分镜头 2 此时鱼儿也游过，荷塘中的天气变化也即将开始，一幕打雷闪电的画面在荷塘 中出现，转折分镜头 3 如图 2-6 所示： 图 2-6 转折分镜头 3 当雨过天晴时，一对鸳鸯从荷塘慢慢游过，同时也出现了“守护，自然”的标 语字样，即动画接近尾声时出现转折分镜头 4 如图 2-7 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 11 图 2-7 转折分镜头 4 2.4.2 作品的色彩与界面设计 此作品的色彩主要以冷色系的蓝色和绿色为主，暖色为辅。整个画面看上去轻 快而鲜明，大面积的绿色和蓝色在其中表现得并不过于“冷” ，而是体现出了荷塘里 的安逸和宁静，表现出这里完全与世俗隔绝，是一块幽幽净土，在这里生活将是无 比的快乐，也没有烦恼。粉红色的荷花，在众多的绿叶中并不显单调，如果花朵的 颜色多，反而使画面更加繁复，还会让观众的视觉感产生疲劳，从而毁了整个设计。 其中红黄相间的鱼儿起到了点缀的作用，鱼儿的色彩点缀如图 2-8 所示： 图 2-8 鱼儿的色彩点缀 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 12 而两只不同色调的鸳鸯则有了相互间的对比和融合，很好的起到了色彩对比的 作用，鸳鸯的色彩对比如图 2-9 所示： 图 2-9 鸳鸯的色彩对比 作品的界面设计采用了清晰而自然的手法，使整个画面的构图显得清晰明了。 将各个元件组合到整个画面，利用构思好的构图设计把它们很好的融合在一起。 单个的元件表现出一个小的整体、小的界面，单个元件如图 2-10 所示： 图 2-10 单个元件 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 13 除单个的元件之外还有一种单个的元件，但它并不是以一个整体的形式来表现 的，它是散落的，在此作品中的荷花的花瓣很明显的就是利用了这种散落的元件拼 合而成的一个整体界面，也可以理解成把散落的元件组成一个完整的个体。散落元 件的组合界面如图 2-11 所示： 图 2-11 散落元件的组合界面 又如青蛙是一个元件，把每一个不同的青蛙组合成一个跳动的青蛙，跳动的青 蛙元件组合界面如图 2-12 所示： 图 2-12 跳动的青蛙组合界面 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 14 把这些元件组合在一张大的背景图上，就能合成一张完整的动画界面图，整体 界面如图 2-13 所示： 图 2-13 整体界面 2.4.3 作品的声音与文字设计 在 FLASH 中,点击文件菜单,选择导入,然后导入需要的的音乐或声音,选中该音 乐或声音,然后单击对话框右下角的打开键此作品中的声音即可在动画作品中添加声 音；也可以直接将声音拖到需要的帧里，完成添加声音。具体的做法如下： 首先把一段音乐先导入到【库】面板，然后按【Ctrl+L】键打开【库】 ，把【库】 里的音乐格式拖拽到舞台上。这时，在时间轴的帧上，音乐文件只是一条短直线。 在时间轴的某帧处(可随意，主要由音乐的长短来决定在哪里)按(F5)键将帧延长， 然后按【Enter】键试听音乐，如果音乐没有播放完毕，继续按【F5】键延长帧，直 到音乐结束为止。可以在导入文件的窗口中查看 Flash 支持的音频和视频的类型。 按【Ctrl+F3】键打开【属性】面板，单击时间轴上的音轨，在【属性】面板里 修改声音的同步类型，在【同步】项选择“数据流” ，在【声音循环】项选择“重复” ，把【循环次数】值设定为“1” 。但是要注意声音【同步】项中“事件”与“数据 流”两种方式的区别： 事件：选择“事件”形式时，声音必须全部加载到计算机上才能播放。所以在 用 Flash 制作较长的 MV 时，声音一般采取“数据流”形式。声音文件被某关键帧开 始调用后，便会从头到尾播放，直到该关键帧作用区域结束为止。 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 15 数据流:声音边下载边播放，只要数据流声音所属的关键帧作用范围结束，声音 便停止。设定重复播放时，影片会储存指定长度的声音，增加文件大小，而且在影 片其他地方不能重复使用这个声音。 编辑声音:选中声音所在的帧，在【属性】面板中单击【编辑】按钮，弹出【编 辑封套】对话框，如下图所示。单击波形图中的直线段可添加控制点，控制点越靠 近中间轴，声音音量越小。也可以从对话框中的【效果】下拉列表中选择预设的效 果。右击【库】面板中的声音文件，弹出右键菜单，选择【属性】命令。在弹出的 【声音属性】对话框中可设置压缩模式、播放频率及输出品质。如果声音文件很大， 可以进行自定义压缩，一般选择默认的品质即可。 此作品中的声音是根据作品的整体画面和背景来源把握的，我采用的是一些轻 快悦耳的配音。比如说鸟儿叫的声音就是采用了欢快、清脆的声音节奏，下雨过后 的声音采用的是泉水冒出泡泡的声音，显得生动活泼。这些声音与动画相结合，会 更好的将小荷塘中的思想体现在观众的面前。声音分层如图 2-14 所示： 图 2-14 声音分层 小荷塘的主要配音是小桥流水 （古筝琵琶合奏曲）中的一段，而小桥 流水表现出的是一种江南水乡的韵味，江南水乡里最让人流年忘返的就是“江南 可采莲， 莲叶何田田” ，用它作为配音可以将作品中的画面和主题思想很好的结合 在一起，同时也把小荷塘拟人化了。最主要的就是，它比较平静，没有太多的 起伏，比较符合整个动画的旋律。主要配音层如图 2-15 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 16 图 2-15 主要配音层 作品中的文字比较简洁，除了片头的名字之外，在画面上没有过多的出现文字， 文字的色彩也和画面互相呼应。 片头里的“小荷塘”字样是由在波浪上飘荡而来的一颗蛋破碎后，从中渐渐放 大而来的。 “小荷塘”字样如图 2-16 所示： 图 2-16 “小荷塘”字样 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 17 在最后将近尾声时慢慢显现出“守护，自然之美”的宣传语字样，它是由九个 关键帧组成，每个关键帧的颜色都不一样，依次从浅色渐变到深色。 “守护，自然之 美”字样如图 2-17 所示： 图 2-17 “守护，自然之美”字样 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 18 第三章 小荷塘FLASH 动画的制作 3.1 主要制作工具简介 在此作品中我用的软件是 F1ash CS3，它是 Adobe 公司于 1998 年 5 月 31 号推 出的版本，它在原有的 F1ash 制作软件的基础上增加了许多新的功能：影片剪辑、 Javascript 插件、透明度和独立播放器 ；与其他设计软件相比在使用上有了更大 程度上的兼容。F1ash 是目前非常流行的二维动画制作软件之一，它是矢量图编辑 和动画创作的专业软件，能够将矢量图、位图、音频、动画等有机地、灵活地结合 在一起，以创建美观、新奇、交互性强的动态效果。F1ash 由于具有文件数据量小， 适于网络传输的特点，并且拥有无限放大的高品质矢量图形、完美的声音效果及较 强的交互性，使用 F1ash 创建的动画其表现形式可以是多种多样的，设计者可以尽 情地在动画中表现自己丰富的、夸张的想象力。而这次我制作的作品中大多数元件 需要用到影片剪辑，又考虑到普片的用户使用的电脑系统几乎都是 32 位的，用此款 版本的软件来制作出的作品可以在多数媒体上播放，所以我选择了用它来完成作品。 3.2 作品相关素材的收集与加工 Flash 设计是一种多媒体制作设计，需要用到图片、声音、视频等元素的支撑， 所以在做该 Flash 设计之前我将所需要的图片、音频、视频等素材在互联网上搜集 起来并放在同一个文件夹内。由于有些素材导入到 Flash 的需要有一定的格式和大 小的限制，所以在做 Flash 设计之前要对所收集到的图片、音频、视频等素材进行 处理，也就是图片的美化以及图片的大小，还有音频文件和视频文件的格式、比特 率、大小的调整。这些素材的处理就要用到一些软件了，图片可以使用美图秀秀、 光影魔术手等美图工具完成预处理，当然也可以使用专业的图像修改软件 Photoshop 来处理，而音频文件和视频文件则可以使用格式工厂、Flash 转换王、 SWF to Video 等软件来进行预处理。除了素材准备时所需要的软件外，做 Flash 设 计必不可少的就是 Flash 设计软件以及 Flash 播放器。 准备好素材之后，就要根据设计思路中的构思建立起作品中的主要元素和一些 场景的位图等等放入到 Flash 的库中，以便于在制作过程中调用。 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 19 3.3 作品的主要制作流程与方法 首先要了解和掌握 Flash 动画设计的三大基本功能是整个 Flash 动画设计知识 体系中最重要、也是最基础的，包括：绘图和编辑图形、补间动画和遮罩。它们是 三个紧密相连的逻辑功能。 绘图和编辑图形：是创作 Flash 动画的基本功，也是进行多媒体创作的基本功。 使用 FlashProfessional8 绘图和编辑图形这是 Flash 动画创作的三大基本功的 第一位；在绘图的过程中要学习怎样使用元件来组织图形元素，这也是 Flash 动画 的一个巨大特点。Flash 中的每幅图形都开始于一种形状，形状由两个部分组成： 填充（fill）和笔触（stroke） ，前者是形状里面的部分，后者是形状的轮廓线。记 住这两个组成部分，就可以比较顺利地创建美观、复杂的画面。Flash 包括多种绘 图工具，它们在不同的绘制模式下工作。许多创建工作都开始于像矩形和椭圆这样 的简单形状，因此能够熟练地绘制它们、修改它们的外观以及应用填充和笔触是很 重要的。对于 Flash 提供的 3 种绘制模式，它们决定了“舞台”上的对象彼此之间 如何交互，以及怎样来编辑它们。默认情况下，Flash 使用合并绘制模式，但可以 启用对象绘制模式，或者使用“基本矩形”或“基本椭圆”工具，以使用基本绘制 模式。 补间动画：是整个 Flash 动画设计的核心，也是 Flash 动画的最大优点，它有 动画补间和形状补间两种形式；学习 Flash 动画设计，最主要的就是学习“补间动 画”设计；在应用影片剪辑元件和图形元件创作动画时，有一些细微的差别，应该 完整把握这些细微的差别。Flash 的补间动画分别有两种：一是 Flash 动作补间动 画，它是 Flash 中非常重要的动画表现形式之一，在 Flash 中制作动作补间动画的 对象必须是“元件”或“组成”对象。二是 Flash 形状补间动画，它是由一种对象 变换成另一个对象，而该过程只需要用户提供两个分别包含变形前和变形后对象的 关键帧，中间过程将由 Flash 自动完成。但在创作形状补间动画的过程中，如果使 用的元素是图形元件、按扭、文字，则必须先将其“打散” ，然后才能创建形状补间 动画。 遮罩是 Flash 动画创作中所不可缺少的一部分，使用遮罩配合补间动画，可以 创建更多丰富多彩的动画效果，图像切换、火焰背景文字、管中窥豹等都是实用性 很强的动画。并且，从这些动画实例中，可以举一反三创建更多实用性更强的动画 效果。遮罩的原理也是非常简单的，实现的方式也是多种多样的，特别是和补间动 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 20 画以及影片剪辑元件结合起来，可以创建千变万化的形式。在 Flash 作品中，常看 到很多眩目神奇的效果，而其中部分作品就是利用“遮罩动画”的原理来制作的， 如水波、万花筒、百叶窗、放大镜、望远镜等。它是通过遮罩图层中的图形或者文 字等对象，透出下面图层中的内容。在 Flash 动画中， “遮罩”主要有两种用途：一 种是用在整个场景或一个特定区域，使场景外的对象或特定区域外外的对象不可见； 另一种是用来遮罩住某一元件的一部分，从而实现一些特殊的效果。被遮罩层中的 对象只能透过遮罩层中的对象显现出来，被遮罩层可使用按扭、影片剪辑、图形、 位图、文字、线条等。 再将收集好的素材导入到 Flash 的库中，调用之前准备好的元件放在“舞台” 上按照先后的层次依次制作。分层如图 3-1 所示： 图 3-1 分层 3.3.1 片头的制作 首先把动画的背景制作出来。先添加一个新的图层，将其命名为“背景” 。将开 始准备好的舞台背景素材导入到“背景”层的第一帧，因为每一帧都是在该舞台背 景的基础上的，所以在最后一帧插入帧，中间可创建补间动画。片头的分层如图 3- 2 所示： 图 3-2 片头的分层 片头是一个鸟儿飞过后，一颗“蛋”随着水波荡漾在屏幕中央破裂开后出现 “小荷塘”的字幕。其中水波的表现形式是利用了补间动画效果，使其变化。在水 波上面的那层水纹是通过 Flash 中的影片剪辑技术来达到的效果，在元件库中， “影 片剪辑”的图标是由一个蓝色底白色齿轮组成的。 制作影片剪辑的方法：在舞台中绘制一个图形后，使用“选择工具”框选这个 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 21 图形，按下【F8】键转换为影片剪辑。也可以直接通过菜单【插入】 、 【新建元件】 ， 打开“创建新元件”对话框来创建“影片剪辑” 。在此作品中的荷花的飘动、荷叶的 飘动、柳树的飘动、下雨等等都是利用了“影片剪辑”技术。库中的“影片剪辑” 如图 3-3 所示： 图 3-3 库中的“影片剪辑” 水纹的制作每个关键帧都不一样，都要有变化的，水纹的制作如图 3-4 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 22 图 3-4 水纹的制作 在片头结束后出现一个“Play”的字样，它是一个按钮。当鼠标经过它时，它 的颜色由黑色变成其它颜色，当鼠标按下时、离开时，它的颜色又依次改变。首先 要做一个按钮就要先新建一个按钮的元件，在按钮中的每一帧根据自己的喜好设置 不同的颜色或形状，按钮的制作如图 3-5 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 23 图 3-5 按钮的制作 制作按钮的方法：单独建一个图层用于摆放按钮，命名为“动作” ，专门用于摆 放动作语句。点第一关键帧，打开动作面板，加帧动作：stop();点一下按钮，让其 处于选中的状态，打开动作面板，在“动作-按钮”处输入： on (release) gotoAndPlay(2); 其意思是当点击按钮时播放第二帧。 3.3.2 主要帧的制作 在此作品中的主要页面既上述分镜头中的转折界面，其中有一个非常重要的制 作，也是本作品的一大亮点，就是片中的打雷闪电下雨的一幕。下雨是用的“影片 剪辑”技术，每隔两帧有一个关键帧，一共是四个关键帧。其他关于场景的所有界 面都要成一个色调，色调要统一暗下去，表示为阴影。当没有闪电时，场景中的物 体有亮阴影；反之。打雷闪电雨景如图 3-6 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 24 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 25 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 26 图 3-6 打雷闪电雨景 3.3.3 片尾的制作 片尾是由“守护，自然之美”字样消失引导出来的一个“完”字开始至结束， “完”字从小变大的过程中，一只青蛙从画面的左上角跳跃到显现出来的荷叶上， 同时，完结的作者介绍字幕从画面的右下方往上呈现。 “完”字的变化、荷叶的变化 以及字幕的呈现都是利用了简单的补间动画来完成的。片尾分层如图 3-7 所示： 图 3-7 片尾分层 片尾如图 3-8 所示: 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 27 图 3-8 片尾 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 28 第四章 小荷塘 FLASH 动画的测试与发布 4.1小荷塘FLASH 动画的测试 由 Flash 软件中的各种制作技巧制作出最终的作品，需要充分的展示出其中各 个部分的细节，因此在播放动画短片时的效果又是不一样的感觉，就需要在播放器 中播放一遍，检查一下动画效果，如果有问题，就要马上到软件中去修改。所以 Flash 动画做出来之后要测试，测试是创建动画时一个非常重要的步骤，它贯穿于 整个 Flash 动画的制作过程，用户在制作各个元件和动画片段时，应该经常进行测 试，以提高动画的质量。测试又分别为在编辑环境中进行测试和在编辑环境外进行 测试。 在编辑环境中进行测试：在编辑环境中能快速地进行一些简单的测试，但测试 任务繁重，编辑环境一般不是首选的测试环境。 测试按钮状态：制作完的按钮元件会出现在库面板中，可以单击【播放】按钮， 测试按钮在弹起、指针经过、按下和点击状态下的外观；还可以选择【控制】 、 【启 用简单按钮】命令来测试按钮的状态。 测试声音：在一些 MTV 中，经常需要音乐与相应的文本同步出现，这时通常采 用数据流同步声音。若要对声音进行同步效果测试，可以选择【窗口】 、 【工具栏】 、 【控制器】命令，打开“控制器”面板，单击要测试声音的起始位置，然后分别单 击控制器面板中的【播放】按钮 和【停止】按钮等。 还有一种简单的方式，单击要测试声音的起始位置，然后按【Enter】键直接测 试，当需要停止时，只需用鼠标单击时间轴面板中的其他位置即可。 测试帧动作：在编辑环境中，还可以测试简单的帧动作，如 goto，play 和 stop 等。若要测试动画中的帧动作，必须先选择【控制】 、 【启用简单帧动作】命令， 然后单击添加了简单动作的帧，按【Enter】键或单击控制器面板中的【播放】按钮。 测试时间轴动画：在制作完时间轴动画（例如逐帧动画或补间动画等）之后， 应及时测试这部分动画片段是否流畅。若要测试时间轴动画，只需单击动画的起始 位置，然后按【Enter】键即可。 在编辑环境外进行测试：在编辑环境中的测试是有限的，若要评估影片剪辑、 动作脚本或其他重要的动画元素，必须在编辑环境之外进行。可以选择【控制】 、 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 29 【测试影片】或【测试场景】命令，将当前动画或场景输出为（.swf）格式的文件， 同时在测试窗口中打开并播放。使用【测试影片】命令可以完整地播放动画，而使 用【测试场景】命令仅能播放当前编辑的场景或元件，而不是整个动画。 经过反复的测试和调整，一部完整的动画短片精彩的呈现出来了。 片头在播放器中如图 4-1 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 30 图 4-1 片头在播放器中 中间部分的场景在播放器中将整个画面的设计感大幅度提升了，使整个构图更 加鲜明。在播放器中如图 4-2 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 31 图 4-2 在播放器中 然而打雷闪电、下雨的部分在播放器中展现出了应有的氛围，营造出逼真的效 果。下雨在播放器中如图 4-3 所示: 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 32 图 4-3 下雨在播放器中 片尾部分的场景在播放器中也完全表现了自身的意义， “守护，自然之美”的字 样在播放器显得更加使人铭记于心。片尾在播放器中如图 4-4 所示： 西南科技大学高等教育自学考试（数字媒体艺术）毕业论文 33 图 4-4 片尾在播放器中 4.2 发布 FLASH 动画 当 Flash 动画制作完成后，需要将其发布为独立的作品，以便用户在其他环境 中使用与播放。发布动