FLASH MTV毕业论文.doc

毕业论文 1 摘要 flash mtv 设计案例是用 flash 软件和音乐结合做出的动画作品，其最大的特点 是它能够把一些矢量图、位 图和歌词、文字做成交互性很强的动画，不 仅具有视觉和听觉 的双重感受，更具有趣味性和创造性，方便 读者观看。在长达近两个月的整个设计过程中， 由于对 flash 软件和脚本语言的运用并不熟练，在最初的时候遇到了很多问题，如：语言对 象出错、脚本运行错误等。经过这两个月的学习和研究，参考了很多相关书籍，也请教了同 学和前辈，如今已经能够熟 练地运用 flash 制作过程中常用的脚本 语言，尤其是按钮控制。 经过本次设计，我收获了很多宝贵的经验，通 过自己的努力，从最初的无从下手，到后来的 触类旁通，并完成了一个比 较完整的软件应用成果，心理上有些小小的成就感，也 对动画 设计和操作系统都有了深入的了解，人们以能够制作出倍受大家关注的 mtv 作品而感到 骄傲和自豪。本人特别喜欢郑 秀文的音乐，故 选择了 郑秀文的来作为毕业设计题 材，更重要的是给了我很多的自信。 关键字：flash mtv；矢量交互 ；语音同步；脚本语言 毕业论文 2 目 录 引 言 1 1. 需求分析： .1 1.1. flash 简介 1 1.2. flash 的功能特点 .1 2. 系统概要设计 .4 3.相关理论与技术基础 4 3.1 flash 制作技术 4 3.2 flash 动作脚本语言 5 4.系统的详细设计 .8 4.1 素材准备 8 4.1.1.音乐素材的准备 .8 4.1.2.图象元件的准备 .8 4.1.3 导入音效和图片素材 .8 4.2 主要的场景制作 9 4.3 歌词于音乐同步 13 4.4 主要的元件制作 13 5 开发经验与收获 .15 6 总 结 .15 7 致 谢 .16 8 参考文献 .17 毕业论文 3 引 言 计算机技术的飞速发展，为人们的日常生活带了巨大的变化，其出现大大的提高了人 们的物质生活水平和文化生活水平，随着人们文化生活水平的提高，现的今人们已经不仅 仅满足于在网上被动观赏一些自己喜欢的图片，而是通过 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动画，并且是一首歌曲，首先得对歌曲进行全面 的理解才能创造故事情节。 但是由于本身水平有限，且时间