计算机科学与技术毕业论文--基于Flash的MTV动画设计与实现.doc

目 录摘 要1引言11MTV的辅助开发工具简介21.1图片处理Photoshop21.2音频处理Cool Edit31.3矢量图绘制CorelDraw32. Flash MTV的整体设计32.1设计分析42.2项目规划42.3制作流程43. Flash MTV动画制作功能的实现53.1片头动画53.2片中动画63.3片尾动画73.4歌词动画84. 关键技术总结84.1 Flash MTV中镜头画面的位置与范围84.2 Flash MTV的镜头效果及实现技巧94.3音乐的导入与词曲同步94.4对Flash添加全屏技术105. Flash MTV测试与发布106.总结与展望11参考文献12致谢13基于Flash的MTV动画设计与实现学生姓名：于方方 学号：201008080174专升本（1）班 计算机科学与技术专业指导教师：谭永杰 摘 要：Flash是目前Internet上最为流行的Web动画制作软件，它集矢量编辑和动画创作为一体，同时能够将图形，图像，音频，动画和深层次的交互动作有机地结合在一起，以创建美观，新奇，交互性强的动态网页效果。在视听语言统治的时代，任何一种叙述方式都离不开MTV的影响，Flash自然也不例外。本论文阐述一个以音乐为背景的FlashMTV的详细制作过程，包括辅助开发工具的介绍， MTV的整体设计、MTV动画的制作、Flash动画中的关键技术总结及其测试和发布的整个过程。关键词：Flash；动画；MTVThe MTV Design and Implementation Based on FlashAbstract: Flash is the most popular Web animation software so far. To create a beautiful, novel, interactive dynamic webpage effect, it sets the vector editing and animation creation as a whole, and gets the graphics, images, audio, animation and deep-seated interactive organically together at the same time. In the era of ruled by audio-visual language, any kind of narration can not do without the impact of MTV. This thesis attempts to elaborate the detailed production process of Flash MTV, the auxiliary development tools, MTV design, MTV animation production, key Flash animation technology and its test and release of the whole process are also introduced.Key Words: Flash; animation; MTV引言Flash是Macromedia公司推出的一种优秀的二维矢量动画编辑软件，它是集图形/图像的处理、变换、压缩和保存等诸多功能于一体的操作平台，是多媒体作品制作中必不可少的基础和重要组成部分。Flash软件紧跟时代的发展，其功能不断完善和扩充，充分满足了从事动画、广告、网页、游戏等专业创造人员和相关技术爱好者的应用要求1 2。在信息技术迅猛发展的21世纪，越来越多的人喜欢通过网络来获取信息。而Flash 动画以其短小精悍、形象生动、适合网络传输而备受动画爱好者的青睐，其中Flash MTV音乐动画作品更集构图、画面、情节、音乐于一体，在网络中广泛传播3。时至今日，MTV 已经完成了自己的进化历程，进入完全商业运作阶段，成为电视台的支柱栏目。Flash 鉴于用声音表意、叙述上的困难，从诞生之处即投身于MTV 的创作，利用现有的mp3 音乐素材，发挥本身通过颜色、虚拟画面表现主题的优势，创作了大量的作品4。每一首歌曲都有它背后的故事，Flash 制作MTV，用动漫画面的形式呈现故事情节，拨动人们内心深处的琴弦。通常高质量的MTV作品需要解读和领会歌曲的寓意，制作一个吸引浏览者的Flash MTV作品，必须要有丰富的想象力、动画的设计、扎实的美术功底，熟练地Flash 动画技术。MV 制作的全过程都是在Flash中完成的， 通过使用关键帧、补间动画、逐帧动画、引导层、遮罩层等使得生成令人心动的动画效果，再把音乐，动画，声效，交互方式融合在一起，效果就更加突出。1MTV的辅助开发工具简介MTV中涉及多种特效的制作，光靠Flash是不够的，还需要收集素材，用Photoshop处理各个场景图片，同时为了实现对声音文件的截取，就还需要用到Cool Edit 软件，最后还要根据需要使用Corel Draw绘制所需素材。1.1图片处理PhotoshopPhotoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱5。本作品运用Photoshop来制作MTV中所用到的文字，如图1.1所示。 图1.1 运用FX样式添加文字效果图1.2音频处理Cool EditCool Edit Pro是美国Adobe Systems公司(前Syntrillium Software Corporation)开发的一款功能强大、效果出色的多轨录音和音频处理软件。它是一个非常出色的数字音乐编辑器和MP3制作软件。在本次用Flash制作MTV时利用了Cool Edit截取音乐，处理好后复制为新的，又由于FLASH只支持频率为11Hz的整数倍，码率为160Kbps以下的音频，所以在文件另存时需要进行选项设置，以选择适当的比特率与采样频率来进行音乐格式的转换，如图1.2所示。图1.2 运用Cool Edit截取音乐图1.3矢量图绘制CorelDrawCorelDraw是基于矢量图的软件，作为一个强大的绘图软件，被用作商业设计和美术设计。本作品片头图片的设计就很好的用到了Corel Draw这个强大的绘图软件。如图1.3所示。图1.3 运用CorelDraw绘制片头背景图2. Flash MTV的整体设计2.1设计分析本作品就是让人们在闲暇之余欣赏，要让欣赏之人看上去心情放松，配上好的音乐，好的动画，设计出好的作品，这样才能起到欣赏的价值。根据分析，设计中要解决的问题如下：（1）素材要充足（2）界面友好，便于操作（3）整个框架要美观简洁（4）各个模块之间的链接（5）音乐、歌词及表达意境动画的同步2.2项目规划运用Flash 制作MTV是一个非常新颖的项目，给人以视觉上的全新感受，规划系统功能模块如下：动画模块：该模块主要制作MTV所需要的动画场景。（1）片头动画：主要是告诉观众本MTV歌曲的信息。（2）片中动画：主要是表现歌曲所要表达的含义。（3）片尾动画：示意动画结束，出现结束文字信息。首先进入片头动画，画面背景即为特效背景图，进入后画面静止，只有通过点击画面中的“play”按钮才能进行动画的播放。片中动画主要是根据【哥只是个传说】这首歌设计的动画，是作品的核心。片尾用遮罩以黑白场显示结束，并出现结束信息，然后进入结束帧。在最后结束帧会有一个“replay”按钮，点击此按钮会跳转回片头动画画面。音频模块：该模块主要是插入MTV的灵魂歌曲。2.3制作流程制作动画时，首先根据作品内容进行选材并从各种途径获取素材，接着将音乐和图片导入Flash的库面板中以便制作时使用，最后就是根据动画制作的需要在Flash中尽量把一些元件如影片剪辑元件、按钮元件和图形元件准备好，为布置场景做充分的准备。本设计Flash制作MTV流程如图2.3所示。动画前期准备动画功能实现测试素材的准备音乐的选定与处理剧情构思学习声音的截取制作歌词动画技巧应用发布学习歌词与音乐同步的方法作品的灵魂，这需要创意图片的搜集处理和制作学习动画技巧在MTV中的应用图2.3 MTV制作流程图3. Flash MTV动画制作功能的实现此模块为Flash MTV动画制作功能的实现，整个动画共分为片头动画，片中动画与片尾动画三大部分。除此之外还实现了词曲同步功能，播放器控制功能。3.1片头动画此动画由“舞台背景”“心”“按钮”三个图层实现，舞台背景层是一张由CorelDraw绘制并由Photoshop处理的静态图片，“心”则是制作的一个影片剪辑，并通过添加Action脚本语言实现其飘落效果，“按钮层”用来控制动画的播放。按钮代码为：on (press) play();实现效果如图3.1所示。图3.1 片头动画效果图3.2片中动画片中动画是整个设计的表现主体，是从视觉上感受所要表现的意义与主题。（本部分就不一一列举每句歌词的动画制作了，下面举几个典型例子）(1)“逐帧动画”实现人走路效果。如图3.2.1所示。图3.2.1 走路效果图 (2)“引导层”实现馒头叠影旋转落地动画效果。如图3.2.2所示。 图3.2.2 引导层动画效果图(3)“背景旋转”动画效果。如图3.2.3所示。 图3.2.3 背景旋转的动画效果图(4)“怒火”动画效果。如图3.2.4所示。 图3.2.4 怒火的动画效果图(5)“女孩逐渐消失”动画效果。如图3.2.5所示。 图3.2.5女孩逐渐消失的动画效果图(6)“文字逐条显示”动画效果。如图3.2.6所示。 图3.2.6文字逐条显示的动画效果图3.3片尾动画作为总结性，此动画通过遮罩以黑白场结束，最后出现结束文字信息。其中用一个影片剪辑”heart”实现心飘落效果。通过结束按钮层的stop()语句将画面停止，同时在此动画上会显示“replay”按钮，点击该按钮会进入MTV的重新播放，该动作的实现首先必须将“replay”文字转化为按钮元件，其代码是：on(release)gotoAndPlay(1)；，具体实现效果如图3.3所示。 图3.3 片尾动画效果图3.4歌词动画在本动画中有些歌词重复出现多次，为了便捷，歌词的制作采用了影片剪辑。如图3.4所示。 图3.4 歌词动画效果图4. 关键技术总结4.1 Flash MTV中镜头画面的位置与范围通过Flash技术平台实现时，动漫作品中的场景是由Flash中的场景管理器来控制添加的，不同的场景表达剧本中不同的动画主题，每个主题的执行顺序由场景的排列顺序决定。动画中不同的角色由场景中时间轴的图层来定义，而镜头画面则是由时间轴中的关键帧来实现。不同的镜头画面通过导入方式将其放入相应的关键帧中。一般的，我们会将关键帧中的图像画面转换成图形或影片剪辑元件存于文档库中67。4.2 Flash MTV的镜头效果及实现技巧在Flash动漫创作中，镜头效果是根据电影拍摄中摄像机的运动轨迹来确定的。可分为推、拉、摇、移、升（降）五种类型效果。在获取不同的镜头位置和范围的画面，通过Flash时间轴的关键帧表现出来之后，就可以通过画面的运动来获得更为灵活的视觉感受。推拉镜头效果的实现技巧，首先将要表现的画面定义成图形或影片剪辑元件存于文档库中。在将要实现推拉镜头动画的图层对应的帧上建立一个区间，其中首关键帧中产生该画面元件的实例，并确定进行推拉运动开始时的画面。在末关键帧中同样产生元件的实例，并确定进行推拉运动最终的缩放画面。在该区间定义产生补间动画。推拉效果变化的快慢是由区间的长度决定。另外还可通过修改整个动画的帧频来改变镜头画面运动的快慢，但对动画帧频的修改将会影响整个作品的播放速度；摇镜头运动效果在Flash动画创作中，只有通过在舞台中移动对象元素来达到摇镜头的目的。首先为目标对象做出几个视角的透视图，然后将这几种视角的透视图组合成比舞台更高或更宽的图，再通过对这幅图上下或左右移动，就能产生摇镜头的效果。Flash动画中的横移镜头和升降镜头效果，可以先做一张宽度大于舞台的场景图，需要横移镜头时把图片左右或上下移动即可。图片的上下或左右移动都是由Flash的渐变移动动画，通过改变图形元件画面的位置来实现的8-10。4.3音乐的导入与词曲同步音乐的导入是Flash中制作MTV的焦点，而词曲同步更是焦点中的难点。一般来讲导入音乐后计算音乐长度，选择音乐图层第1帧，打开属性面板看到相应的信息，选择音乐图层的相应帧，延伸帧，使音乐能在时间轴上播放完。制作出歌词的影片剪辑。新建歌词及歌词标记图层，插入相应关键帧并标记歌词位置，先把第一句歌词的影片剪辑拖入对应的关键帧，并在后一句歌词的前面插入一个空白关键帧，使得在第二句歌词出现时第一句歌词瞬间消失。以此类推，用上面同样的方法依次将所有歌词替换到舞台上。如图4.3所示。图4.3 词曲同步的实现操作图4.4对Flash添加全屏技术在第一帧处的Actions用FS Command命令，在For standalone player选项中选择full screen，这时就会看到arguments中为true，Command中是full screen。运行中可按ESC退出或设置一按钮在Actions上，用FS command在For standalone player选项中选择quit也可退出。在浏览Flash动画时，如果按CTRL+F键，可实现全屏与非全屏的切换。如果仅是要使.swf文件占满Flash播放器的窗口，什么也不需要做。直接单击.swf文件。即只要新建图层加上脚本语言fscommand(full screen, true)；即可以显示全屏。5. Flash MTV测试与发布5.1 MTV测试此MTV包含多个片段，本作品对测试采取的方法是：完成了一个片段之后，便开始对本片段进行测试，当本片段独立测试无误后，便进行下一个片段的测试。当其无误后，最后对整个MTV测试，若基本已符合所要制作的意境，最后将MTV导出再整体测试。在测试过程中主场景的片段功能均能实现，只是音乐导入时出现了如图5.1所示的问题。图5.1 音乐导入错误图经了解这是由于mp3的码率是VBR（变长码率）的，flash不支持VBR格式的音乐。所以需要将它转换成CBR（恒定码率）的音乐，此外因为FLASH只支持频率为11Hz的整数倍，码率/为160Kbps以下的音频，所以在解决方案中选择了运用Cool Edit工具来将文件另存，选择适当的比特率与采样频率，此处选择了128Kbps，44100Hz，如图5.1.2所示。图5.1.2音乐格式转换图5.2 Flash的发布经过以上的测试过程，本作品的错误解决，已比较完整，为了使用户直接观看作品，将把整个作品发布为.exe文件和html文件。如图5.2所示。 图5.2 flash动画的发布图6.总结与展望通过这几个月的毕业设计实践过程，本人对FlashCS3软件有了更深一步的了解，并开拓了眼界，加深了对多媒体技术专业的认识。明白动画设计除了在视觉上给人一种全新享受外，更重要的是向广大的观众传达一种信息、一种理念，一种精神享受，不仅要注重视觉上的美观，而且还应该重视到信息的传达效果11。设计者与观众之间正是通过这种动画设计的作品这一特殊载体，来进行一种互动式的交流，而这一交流过程要求设计师在动画设计中融入自己的思想与情感，这就要求设计人员不能沿用传统的思维模式和手段进行创作，而是要把自己融入到新时代的浪潮中去，只有这样才能与时俱进设计出优秀的作品。以前只是在网络上看到Flash MTV，而这部作品正是通过自己努力独立完成。但是这次制作的Flash MTV并不是传统意义上的MTV，只是根据歌词的情景意境和歌词制作出的一段影音同步的小短片，因为所学尚浅，所以还有很多不足之处，例如：(1) 由于绘画功底有限所以Flash中的人物比较粗糙，只能做简单的动作，没有完全演绎出想要表达的思想。(2) Flash脚本的添加让本人无从下手，在大量翻阅资料和实例后，只能退而求其次的在按钮中找到一些简单的脚本，使整个作品没有想象中的活灵活现，这也是本次制作的最大遗憾。但是这次毕业设计，本人不仅复习熟练了相关的课程、专业知识，还学习掌握了很多Flash软件的操作技巧，同时也认识到自己还有很多基础知识去学习，去巩固，很多地方都急需挖掘与深化。在以后的时间里，本人将不断激发自己的想象力和创意，注重培养自己的审美情操，多加开拓自己的视野，这样才能逐步提高自己的创作水平，不断提高自己的创新意识，进而制作优秀的作品，完善专业课程，增加Flash软件的学习时间，学通学精这门技术，做到学以致用。参考文献1 袁媛，庞霏，王旭.浅谈Flash动画设计J.科技天地，2011，(14):79.2 陈晶晶.Flash的应用J.实用科技，2011，(18).3 沈莉.Flash MTV的设计