FLASH拔苗助长成语故事设计与制作毕业论文.docVIP

摘摘 要要 现今的社会是一个信息飞速发达的社会，其中在信息的交流当中，互联网占据着 一个非常重要的位置。电脑替代了传统的笔墨，移动的图象和声音同样表达了动画艺 术家的情感，FLASH 不可否认已经成为了一种新的艺术表现形式，作为新的事物它 的应用非常广泛，主要用于网络，FLASH 网站片头，FLASH 演示动画，FLASH 网 站，FLASH 故事教学，FLASH 商业广告等等！这些表示 FLASH 的确是一个非常好 的传播载体。能够以多样的效果和形式来充分体现产品或企业形象。 本课题以 Flash 以绚丽的画面和动感，以及优秀的用户的体验让 Flash 在互联网 中站住脚！本课题从对 Flash 的发展及其技术上的操作，和一些动画理念结合起来。 跟大家共同学习，互补互助。 关键字：Flash 故事，FLASH 动画，ActionScript3.0 1 ABSTRACT Along with societys progress, the networking development provides a piece of brand- new space for the business community, the traditional propaganda technique has been unable to satisfy the present to divide the work obviously, the competition fierce time demand, then the enterprise product demonstrated the website system has become another propaganda magic weapon which the enterprise developed continually, established own independence vivid website, touches the net comprehensively, played not merely enhances the enterprise the social well-knownness role, could use the advanced information method, the development service, bequeathed as far as possible the company brand each customer, thus finally created oneself bigger benefit. This article has first analyzed the topic design goal and the significance, introduced emphatically the correlation technology like FLASH technology characteristic, the function, the principle of work and so on, simultaneously introduced Microsoft Access database some characteristics as well as the development tool and so on, as well as system database design, system functional analysis, realization function module. KeyKey wordswords：Flash Classes；Flash Motion；ActionScript 3.0 2 目 录 摘摘 要要0 0 ABSTRACTABSTRACT1 1 第第 1 1 章章绪论绪论5 5 1.1选题背景和意义-5 第第 2 2 章章相关技术简介相关技术简介6 6 2.1Flash 技术简介-6 2.2AS3 技术简介-6 2.3动画技术简介-7 第第 3 3 章章需求分析需求分析9 9 3.1故事功能需求分析-9 3.2素材的收集-9 3.3故事模块结构设计-9 第第 4 4 章章详细设计详细设计1010 4.1制作过程-10 4.2开始画面-17 4.3播放界面设计-18 4.4场景设计-20 第第 5 5 章章系统运行和测试系统运行和测试2323 5.1测试运行情况-23 5.2故事有待改进方面-23 结论结论2424 参考文献参考文献2525 致谢致谢2626 3 绪论绪论 1.1选题背景和意义 Flash 被称为是“最为灵活的前台” ，由于其独特的时间片段分割（TimeLine） 和重组（MC 嵌套）技术，结合 ActionScitp 的对象和流程控制，使得在灵活的界面 设计和动画设计成为可能，同时它也是最为小巧的前台。Flash 具有跨平台的特性 （这点和 Java 一样） ，所以无论你处于何种平台，只要你安装了支持的 Flash Player，就可以保证它们的最终显示效果的一致，而不必像在以前的网页设计中那样 为 IE 或 NetSpace 各设计一个版本。由于其独特的跨平台特性、灵活的界面控制以及 多媒体特性的使用，使得用 Flash 制作的应用程序具有很强的生命力。在与用户的交 流方面具有其它任何方式都无可比拟的优势。 寓言故事多用借喻手法，使富有教训意义的主题或深刻的道理在简单的故事中体 现， “揠苗助长”这则寓言告诉我们客观事物的发展自有它的规律，纯靠良好的愿望 和热情是不够的，很可能效果还会与主观愿望相反。动画的精髓之处在于通过动作、 姿态来表达人物个性和剧情深意。我选择用 Flash 设计制作一个寓言故事“揠苗助长” ，运用动画的形式把它的情节展示出来，增加它的可读性和趣味性，使更多的人无论 文化水准高低，都能在简练明晰的故事中悟出道理。 4 第 1 章 相关技术简介 2.1Flash 技术简介 Flash 是一种用于互联网的动画编程语言。它采用了网络流式媒体技术，突破了 网络带宽的限制，可以在网络上更快速地播放动画；实现动画交互，发挥个人的创造 性和想象力；提供更为精美的网页界面。 以前，虽然也有很多种多媒体格式，但是，按照这些所制作出来的媒体文件都是 很庞大的，动辄以十兆、百兆计，让这样大的文件在有限的带宽资源中传输，仿佛让 骆驼穿过针眼。Flash 解决了这个问题！它采用了 Shockwave 技术，按照“流”方式 传输音频和视频文件，可以边下载边播放，用户无需等待；同时，Flash 使用矢量技 术制作和生成动画，使文件大大“减小” ，其他格式的两分钟媒体文件可能需要几十兆 字节，而 Flash 只需要几十千字节就可以了！ Flash 的交互性是它的又一大特色。在 Flash 中可以通过加入按钮来控制页面的 跳转合链接，按钮还可以发声，丰富网页上的表现手段。Flash 的易用性也许是让更 多的人喜欢它的真正原因。只要使用过 Windows 的画笔，就会使用 Flash 绘图，因为 Flash 的绘图工具和 Windows 画笔中的绘图工具非常相似，但是功能更强大。Flash 中 的动作很容易理解，即使是初学者，通过一段时间的摸索之后也可以创造出很精彩的 动画演示和交互游戏。 有人曾经说过：下个世纪的网络设计人不会用 Flash，必将被淘汰出局！ Flash 是由 Macromedia 公司出品的，目前已出版 4.0 版，它在网络多媒体应用上 优势使其深受喜爱，国际上越来越多的人、越来越多的网站开始使用 Flash，随着互 联网日益宽带、多媒体化，它的技术优势愈加明显，在互联网软件领域至关重要的地 位将会不断加强。目前 Flash 在国内的发展落后于国外，但是在一些喜爱互联网的年 轻人当中，学习、研究、使用 Flash 已形成时尚，他们中的佼佼者有一个很酷的名字 “闪客“。虽然现阶段国内大多数主流商业网站并不多见使用 Flash 进行页面设计， 但是随着国内网络带宽的增加，以及其他方面的进步，网络设计的 Flash 时代必将到 来 2.2AS3 技术简介 ActionScript 是针对 Adobe Flash Player 运行时环境的编程语言，它在 Flash 内容和应用程序中实现了交互性、数据处理以及其它许多功能。ActionScript 是由 Flash Player 中的 ActionScript 虚拟机 (AVM) 来执行的。ActionScript 代 码通常被编译器编译成“字节码格式“（一种由计算机编写且能够为计算机所理解的编 5 程语言） ，如 Adobe Flash CS3 Professional 或 Adobe Flex Builder 的内 置编译器或 Adobe Flex SDK 和 Flex Data Services 中提供的编译器。字节 码嵌入 SWF 文件中，SWF 文件由运行时环境 Flash Player 执行。 ActionScript 3.0 提供了可靠的编程模型，具备面向对象编程的基本知识的开发人员对此模型会感 到似曾相识。ActionScript 3.0 中的一些主要功能包括：一个新增的 ActionScript 虚拟机，称为 AVM2，它使用全新的字节码指令集，可使性能显著提高一个更为先进的 编译器代码库，它更为严格地遵循 ECMAScript (ECMA 262) 标准，并且相对于早期的 编译器版本，可执行更深入的优化一个扩展并改进的应用程序编程接口 (API)，拥有 对对象的低级控制和真正意义上的面向对象的模型一种基于即将发布的 ECMAScript (ECMA-262) 第 4 版草案语言规范的核心语言一个基于 ECMAScript for XML (E4X) 规范（ECMA-357 第 2 版）的 XML API。E4X 是 ECMAScript 的一种语言扩展，它将 XML 添加为语言的本机数据类型。一个基于文档对象模型 (DOM) 第 3 级事件规范的 事件模型 2.3动画技术简介 Flash 动画设计的三大基本功能是整个 Flash 动画设计知识体系中最重要、也是 最基础的，包括：绘图和编辑图形、补间动画和遮罩。这是三个紧密相连的逻辑功能， 并且这三个功能自 Flash 诞生以来就存在。 1绘图和编辑图形：绘图和编辑图形不但是创作 Flash 动画的基本功，也是进 行多媒体创作的基本功。只有基本功扎实，才能在以后的学习和创作道路上一帆风顺。 使用 Flash Professional 8 绘图和编辑图形这是 Flash 动画创作的三大基本功 的第一位。在绘图的过程中要学习怎样使用元件来组织图形元素，这也是 Flash 动画 的一个巨大特点。 2补间动画：补间动画是整个 Flash 动画设计的核心，也是 Flash 动画的最大 优点，它有动画补间和形状补间两种形式。用户学习 Flash 动画设计，最主要的就是 学习“补间动画”设计。在应用影片剪辑元件和图形元件创作动画时，有一些细微的 差别，你应该完整把握这些细微的差别。 3遮罩 ：遮罩是 Flash 动画创作中所不可缺少的这是 Flash 动画设计三大 基本功能中重要的出彩点。使用遮罩配合补间动画，用户更可以创建更多丰富多彩的 动画效果：图像切换、火焰背景文字、管中窥豹等都是实用性很强的动画。并且，从 这些动画实例中，用户可以举一反三创建更多实用性更强的动画效果。遮罩的原理非 常简单，但其实现的方式多种多样，特别是和补间动画以及影片剪辑元件结合起来， 可以创建千变万化的形式，你应该对这些形式作个总结概括，从而使自己可以有的放 6 矢，从容创建各种形式的动画效果。 Flash 动画的根本就是“遮罩+补间动画+逐帧动画”与元件（主要是影片剪辑） 的混合物，通过这些元素的不同组合，从而可以创建千变万化的效果。 JSP 容器的 角色。 7 第 2 章 需求分析 3.1故事功能需求分析 以动画的形式呈现小学语文课本中揠苗助长的故事，通过形象生动的画面和 语言，更好的帮助学生理解和掌握课文的寓意，在学习的课文的同时普及关于禾苗的 成长过程，通过动画使学生更快的掌握生字词，设计分析步骤如下： 1. 收集整理“揠苗助长”的文本。 2. 分析剧本，整理设计好分镜头文稿 3. 根据分镜头文稿，收集相关素材 4. 设计人物，场景画面 5. 运用 Flash 合成，制作动画 6. 测试，调试完成揠苗助长动画的设计 3.2素材的收集 收集动画设计制作中，相关的素材，音效，音乐，录制人物对白，旁边 3.3故事模块结构设计 故事系统的主要功能模块及其关系，如图 4-1 所示： d 图 4-1 故事流程 动画开始界面动画开始界面 播放播放 场景一场景一 场景四场景四 场景三场景三 场景二场景二 场景五场景五 故 事 结 束 8 第 3 章 详细设计 4.1制作过程 4.1.1 形状补间动画的概念 在 Flash 的时间帧面板上，在一个时间点（关键帧）绘制一个形状，然后在另一 个时间点（关键帧）更改该形状或绘制另一个形状，Flash 根据二者之间的帧的值或 形状来创建的动画被称为“形状补间动画”。 4.1.2 构成形状补间动画的元素 形状补间动画可以实现两个图形之间颜色、形状、大小、位置的相互变化，其变 形的灵活性介于逐帧动画和动作补间动画二者之间，使用的元素多为用鼠标或压感笔 绘制出的形状，如果使用图形元件、按钮、文字，则必先“打散”再变形。 4.1.3 形状补间动画在时间帧面板上的表现 形状补间动画建好后，时间帧面板的背景色变为淡绿色，在起始帧和结束帧之间 有一个长长的箭头，如图所示 9 4.1.4 创建形状补间动画的方法 在时间轴面板上动画开始播放的地方创建或选择一个关键帧并设置要开始变形的 形状，一般一帧中以一个对象为好，在动画结束处来源:论文天下论文网 创建或选择一个关键帧并设置要变成的形状，再单击开始帧，在【属性】面板上单击 【补间】旁边的小三角，在弹出的菜单中选择【形状】，此时，时间轴上的变化如图 3-3-1 所示，一个形状补间动画就创建完毕。Flash 的【属性】面板随鼠标选定的对象 不同而发生相应的变化。当我们建立了一个形状补间动画后，点击时间帧，【属性】 面板如图所示。 10 4.1.5 歌词的制作 4.1.6 元件的制作与素材的引用 5.7 flash 音乐导入与播放控制 11 音乐的播放和停止 (1)首先从外部导入一个音乐，也就是用 FileImport 导入。或直接从 WindowCommon LibraieSounds 中拖一个到舞台上。 (2)然后选择 WindowLibrary。从中选中你刚导入的音乐，并按鼠标右键，选中 其中的 Linkage,如下图： (3)在跳出的 Symbol Linkage Properties 对话框中,在 Linkage 中选 Export this symbol，在 identifier 中输入你想要取的音乐名字，如“likesound“。如果你用的是 flash mx，则选择 Export for ActionScript。如下图： (4)接着从库中选择两个按钮，并放在舞台上，如下图： (5)在第一个开始按钮上捆绑如下代码： 12 on (release) s=new Sound(); s.attachSound(“likesound“); s.start(0,6); (6)在第二个停止按钮上捆绑如下代码： on (release) s.stop() 2 音量的控制 (1)从库中选一个按钮放在舞台上，把这个按钮转换成 MovieClip。这样做的目的 是能把这个按钮既可以接受电影事件也能接受按钮事件，如下图： (2)在这个按钮的电影剪辑上加入以下代码: onClipEvent (load) top = _y; left = _x; right = _x; bottom = _y+100; 13 onClipEvent (enterFrame) if (dragging=true) _root.s.setVolume(100-(_y-top); 3 调节声音的平衡 (1)从库中选一个按钮放在舞台上，把这个按钮转换成 MovieClip。这样做的目的 是能把这个按钮既可以接受电影事件也能接受按钮事件。（此例是最下的那个按钮， 既横向的那个)做好后如下图： (10)在这个按钮的电影剪辑上加入以下代码 onClipEvent (load) top = _y; bottom = _y; left = _x-50; right = _x+50; center = _x; onClipEvent (enterFrame) 14 if (dragging=true) _root.s.setPan(_x-center)*2); (11)通过双击这个电影剪辑，或通过选中这个电影后再选 EditEdit Symbol，进 入该电影剪辑地编辑状态，选中按钮本身，在这个按钮上捆绑以下代码(和上次的操 作完全相同）。 on (press) startDrag (“, false, left, top, right, bottom); dragging = true; on (release) stopDrag (); dragging = false; 15 4.2开始画面 开始画面设计一个开幕的效果，根据现实生活中的电影幕布设计，如下图所示： 图 5-1 开始界面 时间轴上运动原理： 图 5-2 时间轴实现动画界面 添加全局代码如下： /处理音乐的加载 var music:Sound; var control1:SoundChannel=new SoundChannel(); function loadMusic(addr:String):void var url:URLRequest; url=new URLRequest(addr); music=new Sound(); music.load(url); 16 control1 = music.play(); /处理 swf 文件的价值 var loader:Loader; function loadSwf(adrr:String):void var url:URLRequest =new URLRequest(adrr); loader = new Loader(); loader.load(url); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,finishLoadSwf); function finishLoadSwf(e:Event):void addChild(loader); loadMusic(music/bj.mp3); 4.3播放界面设计 目录模块主要是方便用户快速的浏览各个故事模块，他是各个模块的一个桥梁， 界面主要通过时间轴上实现动画，用户交互通过用户事情机制实现，界面效果图如下： 17 图 5-3 播放界面 1、动画实现时间轴： 图 5-4 播放界面时间轴 2、用户交互实现，首先将目录制作成按钮元件，并分别命名为：play_btn 并为这个 个按钮添加监听，代码如下所示： stop(); play_btn.addEventListener(MouseEvent.CLICK,startPlay); 18 function startPlay(e:MouseEvent) control1.stop(); play(); 4.4场景设计 场景一剧本：古时候有个农夫，他巴望着自己田里的禾苗长得快些，天天到田边 去看。可是一天，两天，三天，禾苗好像一点儿也没有长高 场景一人物设计：农夫 农田设计： 19 时间轴实现： 回目录按钮和下一节按钮，首先分别设置按钮名称如下图： 代码如下： reback2_btn.addEventListener(MouseEvent.CLICK,reback2Click); next2_btn.addEventListener(MouseEvent.CLICK,next2Click); 20 function reback2Click(e:MouseEvent) gotoAndPlay(75,“场景 1“);