FLASH MTV毕业论文.doc

摘要FLASH MTV设计案例是用FLASH软件和音乐结合做出的动画作品，其最大的特点是它能够把一些矢量图、位图和歌词、文字做成交互性很强的动画，不仅具有视觉和听觉的双重感受，更具有趣味性和创造性，方便读者观看。在长达近两个月的整个设计过程中，由于对Flash软件和脚本语言的运用并不熟练，在最初的时候遇到了很多问题，如：语言对象出错、脚本运行错误等。经过这两个月的学习和研究，参考了很多相关书籍，也请教了同学和前辈，如今已经能够熟练地运用Flash制作过程中常用的脚本语言，尤其是按钮控制。经过本次设计，我收获了很多宝贵的经验，通过自己的努力，从最初的无从下手，到后来的触类旁通，并完成了一个比较完整的软件应用成果，心理上有些小小的成就感，也对动画设计和操作系统都有了深入的了解，人们以能够制作出倍受大家关注的MTV作品而感到骄傲和自豪。本人特别喜欢郑秀文的音乐，故选择了郑秀文的<<出界>>来作为毕业设计题材，更重要的是给了我很多的自信。关键字：Flash MTV；<<出界>>；矢量交互 ；语音同步；脚本语言目 录引 言11.需求分析：11.1.FLASH 简介11.2.Flash的功能特点12.系统概要设计43.相关理论与技术基础43.1 FLASH制作技术43.2FLASH动作脚本语言54.系统的详细设计84.1素材准备84.1.1.音乐素材的准备84.1.2.图象元件的准备84.1.3导入音效和图片素材84.2主要的场景制作94.3歌词于音乐同步134.4主要的元件制作135开发经验与收获156总 结157致 谢168参考文献17引 言计算机技术的飞速发展，为人们的日常生活带了巨大的变化，其出现大大的提高了人们的物质生活水平和文化生活水平，随着人们文化生活水平的提高，现的今人们已经不仅仅满足于在网上被动观赏一些自己喜欢的图片，而是通过flash的形式把图片很微妙的结合在一起，大大提高了图片的欣赏价值。FLASH是很好的网上制作动画软件，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的动画效果。由它制作出的作品，图文并貌、声色俱全，并可以根据自己的特点进行编辑,可以制作出具有个人特点的动画。在本设计中，利用了Macromedia Flash的动画技术制作自己喜欢一首音乐制成flashmtv出界，该制作分为：素材的准备 、音乐的设置和导入 、元件制作、动画编辑4个部分。1. 需求分析：Flash已经渐渐成为交互式知量的标准，未来网页的一大主流。用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。用flash制作动画，已经成为一种时尚，因为它的简单、实用、交互性强。受到广大电脑爱好者的喜欢。1.1. FLASH 简介Flash是一种交互式矢量多媒体技术，他的前身是Futureplash，早期网上流行的矢量动画插件。后来由于Macromedia公司收购了Future Splash以后便将其改名为 Flash2，到现在最新的flash4。现在网上已经有成千上万个Flash站点，著名的如Macromedia专门ShockRave站点，全部采用了Shockwave Flash 和Director。HTML语言的功能十分有限，无法达到人们的预期设计，以实现令人耳目一新的动态效果，在这种情况下，各种脚本语言应运而生，使得网页设计更加多样化。然而，程序设计总是不能很好地普及，因为它要求一定的编程能力，而人们更需要一种既简单直观又功能强大的动画设计工具，而Flash的出现正好满足了这种需求。1.2. Flash的功能特点flash强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FS COMMAND可以实现交互性，使Flash具有更大的设计自由度，另外，它与当今最流行的网页设计工具Dreamweaver配合默契，可以直接嵌入网页的任一位置，非常方便。使用矢量图形和流式播放技术。矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。 通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。 把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的身材。 1、灵巧的绘图工具 Flash本身具有极其灵巧的图形绘制功能，更重要的是他能导入专业级绘图工具，如Macromedia FreeHand、Adobe Illustrator等绘制的图形，并产生翻转、拉伸、擦除、歪斜等效果，还可以将图形打碎分成许多单一的元素进行编辑，并改变其颜色亮度。由于Flash提供具有保真技术的绘图工具，使图形边缘在经过一系列加工后仍会保持平滑。 2、向量透明效果应用 Flash3可以创建透明的图形，并可以任意改变层次间透明的不同效果，如透明度、倾斜度及透明的颜色等属性。 3、具有动画效果的按钮和菜单 Flash采用精灵动画的方式，在Flash3中可以随意创建按钮、多级弹出式菜单、复选框、以及复杂的交互式字谜 游戏。 4、物体的变形和形状的渐变 在Flash3中产生物体的变形和形状的渐变非常容易，其发生完全由Flash自动生成，无须人为地在两个对象间插入关键帧。 5、增强对图像的支持 Flash3不但可以对导入的图像（jpg、gif）产生翻转、拉伸、擦除、歪斜、改变颜色亮度等效果，还能利用新的套索工具或 魔术棒在图像中选择颜色相同的区域并创建遮罩（Mask）；将图像打碎分成许多单一的元素进行编辑，设置图像的属性，如产生平滑效果和质量损失压缩等。 6、声音插入 Flash3支持同步WAV (Windows) 和 AIFF(Macintosh)格式的声音文件和声音的连接，你可以用同一个主声道中的一部分来产 生丰富的声音效果，而无须改变文件量的大小。 7、自定义字体 Flash可以处理自定义的字体及其颜色、大小、字间距、行间距 、缩进等多种格式。在Flash创建的网页中，可以加入眼花缭乱的标题和动态的文本，而数据量非常小，比位图的下载速度还快。当然为了防止客户端字体短缺，你也可以将特殊字体转换为位图图形。 8、模拟传输 Flash3提供了一幅设置动画播放方式的图表，你可以在此设置你的目标Modem速度，如28.8kb/s，然后进行模拟传输，检验其播放是否流畅，在参照图表中找出发生间断的位置，并进行优化。最终确保动画在客户端播放流畅。 9、独立性 Flash3可以将制作的影片生成独立的可执行文件（EXE文件），在不具备Flash播放器的平台上，仍可运行该影片。因此，除制作网页外还可以将其应用于商业演示及电子贺卡等。 2. 系统概要设计本系统主要设计的是flash mtv动画。只要在装有flash播放器的机子上都可以运行。设计的情节与这首歌主题相吻合，紧扣主题制作的动画。3.相关理论与技术基础3.1 FLASH制作技术Flash 是现时市场上其中一个最受欢迎的多媒体制作软件，功能广泛，可以制作网页、动画、影片、甚至是手提电话接口及游戏等。使用 Flash，可以用来建立吸引人的 2D 动画，将动画带到网络上。现在，我们浏览的网页动画、广告，大部份都是以 Flash 写成，Flash 游戏甚至是网络世界大热之选。FLASH动画制作具备了五样最重要的元素，那就是影片、场景、图层、影格、元件。· 元件(Symbol)：动画上格式各样的图片或文字，亦可以称为“角色”。 · 影格(Frame)：像卡通影片中每一个人物的各个分解动作，而每个分解动作画面就是一个影格，在FLASH中是以时间轴来表示其影格。 · 圖層(Layer)：由数个影格所组成，它记录着每一个元件所要进场演出的时间及出场时间。 · 場景(Scene)：场景包含了所有制作动画的基本设定，例如动画的尺寸、背景色等。 · 影片(Movie)：整个动画要如何演出必须在你的脑海中构思成型，并且排练过一遍，再由FLASH的技术将其表现出来，因此要设计一个可看性极高的的动画应将正个细节记录下来，将有助于动画的制作。FLASH的动画类型可分为两大类，分别是“连续影格动画”和“渐变动画”，在本设计中就充分利用了这两中动画技术，其中渐变动画技术利用的尤其多。1. 连续影格动画的制作必须手动修改的修改每一个关键影格的元件图形，在利用逐格播放的方式来产生动画的效果，制作上比较烦琐，但是能够很好的展现个人特有的动画特点。 图2-1 连续影格间的时间轴2、渐变动画的制作是属于比较简单的一种，主要是利用“起点”“终点”两个关键影格中元件的变化来产生效果。我们所要做的事情只是设定两个关键影格处的元件变化，FLASH会自动的转换关键影格间的图形。  图2-2 渐变影格间的时间轴3.2 FLASH动作脚本语言用Flash制作动画，光凭时间轴和图层来演绎画面，即使动画再精彩，也只能让观赏者盯着屏幕，沿着时间线的进度被动的欣赏。如果要想动画具有交互性，根据观赏者的选择来控制播放的顺序或者呈现不同的内容就非得依靠Flash的动作脚本语言了。动作脚本英文为ActionScript，简称AS运用Flash动作脚本语言，能实现时间轴无能为力的一些特殊效果；运用基本技法与动作脚本语言相结合制做出来的动画效果，往往更加精彩纷呈；运用动作脚本语言，还可以让一些复杂繁琐的制作过程得到有效的简化。在Flash中添加动作脚本可以分为两种方式，一是为“帧”添加动作脚本，二是向“对象”添加动作脚本。“帧”动作脚本，是指在时间轴的“关键帧”上添加的动作脚本。“对象”动作脚本，是指在“按钮”元件和“影片剪辑”元件的实例上添加的动作脚本。而 “图形”元件上是不能添加动作脚本的。1、动作脚本概念动作脚本就是 Flash MX 为我们提供的各种命令,运算符以及对象,使用动作脚本时必须将其附加在按钮、影片剪辑或者帧上，从而使单击按钮和按下键盘键之类的事件时触发这些脚本。以便实现所需的交互性。2、动作脚本面板当我们为帧,按钮或影片剪辑指定动作时必须使用动作面板,点击浏览该文件基本动作控制命令（1）停止命令格式; stop();说明动作；停止播放头的移动（2） 播放命令格式;play();说明动作；在时间轴中向前移动播放头。（3） 转移命令gotoAndPlay(scene, frame)参数scene 播放头将转到的场景的名称。frame 播放头将转到的帧的编号或标签。动作；将播放头转到场景中指定的帧并从该帧开始播放。如果未指定场景，则播放头将转到当前场景中的指定帧。以上三个命令是动作脚本中最常用的基本动作,它们通过对时间轴上播放头的控制实现的特定功能,3、在对播放头实施控制时一般有多种方法可供选择,但最常用的是在坐标系内部实施控制和在不同坐标系之间实施控制,前者直接使用命令就可以实现目的,后者则必须使用目标路径才能实现控制功能。 4、按钮：使用按钮元件可以在影片中创建响应鼠标点击、滑过或其它动作的交互式按钮。可以定义与各种按钮状态关联的图形，然后指定按钮实例的动作。请参阅为按钮指定动作。在单击或滑过按钮时要让影片执行某个动作。您必须将动作指定给按钮的一个实例；该元件的其它实例不受影响。当为按钮指定动作时，必须将动作嵌套在 on 处理函数中，并指定触发该动作的鼠标或键盘事件。当在标准模式下为按钮指定动作时，会自动插入 on 处理函数，然后您可从列表中选择一个事件。您也可用动作脚本 Button 对象的事件在发生按钮事件时执行脚本。注释1:命令中的圆括号(1) 圆括号一般用来放置函数的参数以便传递这些参数,我们所学习的各种命令,也都可以称为函数.例如gotoandplay(2);数字"2"只有放在圆括号内,才能进行传递(2)表示运算符优先级当在同一语句中使用两个或多个运算符时，一些运算符会优先于其它的运算符。动作脚本按照一个精确的层次来确定首先执行那个运算符。例如，乘法总是先于加法执行；但是，括号中的项目会优先于乘法。因此，如果没有括号，动作脚本会在下面的示例中首先执行乘法： to = 2 + 4 * 3; 结果为 14。 但是当加法运算在括号内时，动作脚本会首先执行加法： total = (2 + 4) * 3; 结果为 18。 5、简化语句例如使用括号评估点语法中点左侧的表达式。例如，在下面的语句中，括号会使 new Color(this) 评估并创建一个新的 Color 对象： onClipEvent(enterFrame) (new Color(this).setRGB(0xffffff); 如果不使用括号，则需要添加一个语句来评估该表达式： onClipEvent(enterFrame) myColor = new Color(this); myColor.setRGB(0xffffff); 注释2 分号" ; "动作脚本语句是用分号结束的。例如，下面的语句是用分号结束的： _root.getDay();如果省略了结束分号，Flash 仍然能够成功地编译脚本。但是，使用分号是一个很好的脚本撰写习惯。 4.系统的详细设计4.1 素材准备设计动画时，创意很重要，吸引浏览者驻足的诀窍在于作品的创意新颖。此外，还应让动画与界面风格统一。一个好的展示动画会用到许多元素，最好对所有用到的元素分门别类，相应的组件放在相应的目录里。4.1.1.音乐素材的准备 在FLASH主要支持的是wav 和mp3格式的音乐，再这里选择的是mp3格式的音乐，因为这样的容量要相对来说要小。4.1.2.图象元件的准备 有了基本的声音素材后，主要考虑到这是运用于mtv的素材，为了减少总的容量，大都是采用的是矢量图，都是在flash里进行手绘的。应该说我这次是在素材方面是很下了功夫，很多的素材都是自己亲手绘制，花了不少时间。4.1.3导入音效和图片素材将准备好的音效素材存放到自己建立的一个文件夹中，暂时命名为出界.mp3， 新建一个电影文件，将新建个电影文件命名为“0”，在新建立的文件里，选择“文件”（file）->导入（import),在对话框里，找到歌曲文件，点击“确定”。 激活Library（图库），方法是：打开“窗口(window)”->"图库library"。 在library中，可以看到出界.mp3已经成为这个flash电影中的一个物件了。同样的方法把所需要的图片素材导入到本flash中。 4.2 主要的场景制作这是出界MTV的主界面，在这里把不同的元件放在不同的图层上，为了使界面上的字体好看，之前就应该在字体网站上下载一些比较好看的字体。到时候需要选择的时候就方便了。我在做之前就准备了很多适合在动画里用的字体。大家看到再画面的上下都用黑色的框遮住，这是为其达到一种电影影片的效果。为了使画面看起不死板，在这里特别运用了风车的影片剪辑，这样增强画面的动感。这个转动的影片剪辑的制作过程很简单，只需要一个图层，设置的属性如下：整个风车的程序如下：在主界面上有个“play”，这是播放按钮，当点击的时候，变进入歌曲的状态。它是一个按钮文件，如下图所示：。这只是对按钮的外观设计，最主要的是在它的作用。因此设置的代码是必不少的，代码如下：on (release) /当被按下的时候 gotoAndPlay(226) ; / 指针将指向场景里的第226帧 在场景中，当用鼠标放在mtv的界面上时，变会有移动的星星的出现，运用的是鼠标跟随的效果。制作的方法如下：首先先在库里创建一个隐形按钮“button 4”，如下图：然后再创建一个影片剪辑“sprite 7”， 分别建立2个引导层，引导线就是下图的曲线，在图层1放在隐型按钮“button 4”，在脚本层的第一帧输入代码 stop();因为我们要实现的是当鼠标在按钮上时，有很多的小星星出现，因此这需要再按钮的代码上体现：on (rollOver) /当鼠标放在上面的时候 gotoAndPlay(2); /指针指向第二帧 在该影片剪辑中的第二帧实现的是星星跟着引导现的方向下落。如下图：: 再把这些做好的隐形的按钮拖放到场景里，就会出现当鼠标移在上面的时候，出现鼠标跟随效果。如下图：使得这些影片剪辑布满整个画面，这样使得放在任何地方都有响应。4.3 歌词与音乐同步 由于这是mtv，大家都知道。应该出现的歌词和歌曲的歌词同步。对于制作flashmtv这是比较重要的方面，如果歌词的出现没有和歌曲同步，那么就没有达到做mtv的目的。 在这里要用到一个很好的标记的东西，那就是帧标签。当歌曲开始的时候，唱完一句的时候，就立刻按空格键，然后插入关键桢，然后在帧标签上标注。以这样的方式就可以使得歌词与歌曲同步。虽然歌词我是这样标注的，但是我由于经验不足，还是犯了一个错误，我把整首歌放在了按钮的按下时刻的关键桢里。这样当我按按钮的时候，歌曲在播放，但是按空格的时候，鼠标停了，但是音乐继续，因此我在配歌词的时候花了很多的时间，每一句歌词都得从新放歌。为此我特异查询了资料。对于这样的情况，最好的发法是把导入的音乐设置为数据流的形式，意思是只有当鼠标触及的时候才有响应，当没有触及时，音乐也会停止。以后再做的时候就有经验了。如下图：对歌词的标注4.4 主要的元件制作 在这个mtv中的元件基本都是自己手绘的，极少部分是找的jpg图片素材。对于夜空的背景，如图：背景是一个渐变的颜色，同过渐变填充实现，上面的房子都是用很简单的矩形工具绘制而成。 在绘制月亮的时候，之前的线条是直的，运用箭头工具使其弯曲。总之再复杂的图形在flash里都可以绘制的，仅仅是用那几个工具。对于人物的绘制，我参考的是网上的教程，边学边画的，也只是运用了很简单的直线和箭头工具，在填充颜色的过程中要注意，如果不是完整的封闭图形大部分是不可能用油漆桶填充的。在这里就不一一列举了，总之，在flash里绘画是一个及其享受的过程，当你画出满意的图片来之后，往往是直线和箭头工具就可以把基本的轮廓搞定。在以后的过程中还要多多练习。其余的制作过程涉及的动画都是移动渐变之类的，在超作方面也是很简单的。5 开发经验与收获 首先我对flash动画又有了新的认识，它让我对flash的陌生逐渐让我对它产生了学习的热情。看到自己亲手所做出的作品，尽管做的效果不是很理想，但这毕竟包括了我的汗水。是一点点积累而成的。它使沃对flash产生了浓厚的兴趣，在以后的学习中要经常看看闪客高手的教程，多学多做。6 总 结 经过两个多月的实际软件开发，我学会了许多的知识。首先，感触最深的一点就是，在从事开发软件的过程中，一定要先进行分析和构思整个设计的基本思路，整体的角度出发来设计。从我自身的亲身体验中，我认为在设计过程中，技术虽然很重要，但是设计之前的准备工作更为重要，如果准备的不是很充分，没有完整的设计思路和大量的设计素材，将浪费大量的人力物力，有时候还会前功尽弃。所以准备工作做的好，那么整个设计过程将会比较顺利。在设计初期我准备了大量的素材和资料，在设计中虽然也遇到了一些问题，但是有了这写充足准备和老师同学的帮助，整个设计还是顺利的完成了。但是在设计中开始由于没有养成良好的保存习惯，浪费掉了大量的时间。由于是第一次独立制作flash动画，并且是一首歌曲，首先得对歌曲进行全面的理解才能创造故事情节。但是由于本身水平有限，且时间仓促，构思的故事情节偏有点简单，在设计上没有多大的新意。希望老师能够理解，在今后的设计中会一定会逐渐改进。7 致 谢毕业设计即将结束，通过这次的毕业设计，使我有了一次理论知识与实践相结合的机会，不但巩固了理论知识，又丰富了实践经验，为将来的学习和工作打下了坚实的基础。可以说是收获丰盛！我这次的设计的指导老师是XXX老师，她给了我很多的指点与帮助，并给我提出了很多有用的建议，提供了许多宝贵的资料和参考文献。在设计思路上和论文的撰写上给予我的指导，使得毕业设计能够顺利地进行。无论在ASP网页设计的知识和数据库理论知识，还是在实际编程技巧上都有很高的造诣，给了我很大的帮助，并且每天都到设计室对我进行指导，是一位尽职尽责的好老师。在此特别对热情，认真帮助我的XXX老师，表示衷心的感谢，同时也向大力支持我的其他老师，同学们表示感谢。即将毕业了，我又将去面对一个新的环境，我很感谢我这几年的大学生活，也感谢这个的毕业设计，我相信会利用这次设计学习的知识所积累的知识和经验，在以后的学习、工作中做得更好，去创造新的更大的辉煌，也应了我刚来XXX大学立下的誓言：“今天我以学校为荣，明天学校以我为荣”。8 参考文献1 蒙坪、俞慎泉，FlashMX 2004动画设计师标准案例教程，机械工业出版社，2005.12 蔡翠平，FlashMX 网络编程案例教程，清华大学出版社，2004.33 翟长霖、武新华，FlashMX2004 精彩实例制作，清华大学出版社，2004.84Brian Underdahl著-天宏工作室译,FlashMX2004 基础教程,清华大学出版社，2004.65李宇鸿,FlashMX2004 标准教程,清华大学出版社,2004.86 崔亚量,FlashMX 专家培训教程,电子科技大学出版社,2003.97 张立浩、陈伟，FlashMX2004 游戏制作精彩实例,2004.58 计算机专业英语. 西安电子科技出版社, 2002.29 朗文英汉词典.上海外文出版社,2000.410 王丽芳.最新计算机专业英语.西安.西安电子科技出版社,2003.611 孔令德. 毕业设计实例教程.国防工业出版社，2007.2