毕业设计（论文）-Flash动画短片设计与制作论文.doc

第一章 绪 论第一章 绪 论Flash网站有着着更高的界面维护能力和你的整站的架构能力。但它带来的好处也异常明显：全面的控制；无缝的导向跳转；更丰富的媒体内容；更体贴用户的流畅交互；以及跨平台和小巧客户端的支持以及与你的其它flash应用方案的无缝连接集成。Flash网站是指利用Flash工具设计网站框架、与其他通过HTML、PHP或者Java等技术制作的网站不同，Flash网站在视觉效果、互动效果等多方面具有很强的优势。被广泛的应用在房地产行业、汽车行业和奢侈品行业高端行业等。1.1设计的目的与意义 Flash 网站多以动漫动画为主要表现形式，在视觉效果上和互动效果上与普通网站比显得更加美观动感，能够获得较高的用户体验。Flash网站的出现使网站页面脱离了HTML网页那种死板的条条框框，让网页变得更加生动有去。网站追求视觉冲剂和时尚感受，它能够表达企业鲜明形象，展示精品产品。它是针对企业开发设计，融合企业形象，利用前沿的Flash技术，配合2D、3D动画表达一定设计理念的设计制作方式。Flash在游戏网站、营销网站、艺术网站、个人网站等有需要丰富视觉效果、强烈感染力、动态演示的网站开发方面有这得天独厚的优势。Flash是一种交互式矢量多媒体技术，创建漂亮的、可改变尺寸的、以及极其紧密的导航界面、技术说明、以及其他奇特的效果。同时它有很强的可移植性。Flash是集动画、声音、图片为一体的，所以可以结合Photoshop等软件进行技术实现，以增强课件的艺术效果。它的特点是设计思想好，界面美观、和谐，有较高的欣赏性，适合它所面向的对象，同时有交互性，操作简单、快捷。1.2国内外现状研究关于 Flash 和网站在现今科技发展飞快的时代，网络以其压倒性的优势急速发展，大规模的侵蚀着各种传统媒体。其主要表现载体网页，也伴随着茁壮成长起来。随着网络带宽的提高，网页中开始应用各式各样的Flash 动画，大大增强了网页的可观性。但是，目前国内Flash软件基本上只是担当着矢量动画大师的角色，伴随着Action Script的发展，也为Flash的未来发展铺设道路。国外的著名大公司，例如Sony、Nike、可口可乐等都是以Flash web的形式来制作网站主页的。早在八九十年代，HTML静态页面网站就已盛行，但大多数都是一些文字和图像形式表现，随着互联网技术的发展flash也得到了很好的发展，网站的设计者开始寻求了更为美观的设计，flash设计慢慢的融进了网页设计中，也使HTML网站开始更为美观、生动、形象起来。在2000年以后全球网站设计者开始用flash设计。flash与HTML静态页面网站相比，Flash网站更具有亲和力和交互性等多媒体特性。网站是企业的窗口，flash网站更能很好的了解企业的文化和产品，同时还能收集客户的需求和反馈信息，通过分析这些数据信息并能很好的了解客户的需求，并及时调整策略以达到利润的最大化 。31第二章 开发环境第二章 开发环境2.1 Flash介绍Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是Future Wave公司的Future Splash，是世界上第一个商用的二维矢量动画软件，用于设计和编辑Flash文档。1996年11月，美国Macromedia公司收购了Future Wave，并将其改名为Flash。后又被Adobe公司收购。Flash通常也指Macromedia Flash Player(现Adobe Flash Player)。Flash特点：(1)使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。(2)通过使用关键帧使得所产生的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。(3)把音乐、动画、音效、交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的“身材”。(4)强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FS COMMAND可以实现交互性，使Flash具有更大的设计自由度。在Flash中创作内容时，需要在Flash文档文件中工作。Flash文档的文件扩展名为.fla（FLA）。Flash文档有四个主要部分：(1)舞台:舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash基础中将对舞台做详细介绍。(2)时间轴:时间轴用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。(3)库面板:库面板是Flash显示Flash文档中的媒体元素列表的位置。(4)ActionScript:可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。2.2 ActionScript2.0介绍ActionScript是Flash的脚本语言。正是由于Flash中增加、完善了ActionScript，才使创作出来的动画具有很强的交互性。在简单动画中，Flash按顺序播放动画中的场景和帧。而在交互动画中，用户可以使用键盘或无懈可击与动画交互，大大增加了用户的参与感，同时也大大增加了Flash动画的魅力。例如，用户可以单击动画中的按钮，然后使动画跳转到不同部分继续播放；可以移动动画中的对象，如移动手中的枪，使射出的子弹准确击中目标；可以在表单中输入信息，反馈对公司的意见等等。总之，使用ActionScript可以控制Flash动画中的对象，创建导航元素和交互元素，扩展Flash交互动画和网络应用的能力3。有了ActionScript，就可以通过设置动作来创建交互动画。动作就是指用ActionScript（动作脚本）编写的、当特定事件发生时执行的一组指令。触发动作的事件可以是播放头到达某帧，或用户单击一个按钮，或用户按下键盘上的键。在Flash中，在动作面板中可以编写的有帧动作、按钮动用和影片剪辑动作。使用Normal Mode(标准模式)动作面板上的控件，无需编写任何动作脚本就可以插入动作。如果已经熟悉ActionScript，也可以使用Export Mode(专家模式)动作面板编写自己的脚本。指令的形式可以是一个动作（如指令动画停止播放），也可以是一系列动作（如首先计算条件，然后执行一个动作）。很多动作的设置只要求读者具有少量的编程经验，而其他一些动作的应用则要求比较熟悉编程语言，用于高级开发。ActionScript中的对象可以包含数据或作为影片剪辑以图像形式出现的编辑区中。所有的影片剪辑都是预定义类MovieClip的实例。每个影片剪辑实例均包含MovieClip类的所有属性（例如_height、_rotation、_totalframes）和所有方法设计Flash网站常用到的ActionScript2.0函数包括：(1)gotoAndPlay():将比方头转到场景中指定的帧并从该帧开始播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。例如改写成“root. gotoAndPlay();”则将跳转到主场景的指定帧。(2)gotoAndStop():将比方头转到场景中指定的帧并停止播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。例如改写成“root. gotoAndStop();”则将跳转到主场景的指定帧。(3)loadMovie():在播放原始swf文件的同时将swf文件或jpeg、mp3、mp4等文件加载到Flash Player中。2.3 Dreamweaver 8 简介Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver 8的发布，更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS支持CSS可视化设计、CSS检查工具；动态跨浏览器验证；强大的WEB站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。开发环境支持HTML、ASP、ASP.NET、JSP等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后台程序的交互。第三章 系统设计第三章 系统设计3.1 可行性研究 关于Flash网站建设从设计艺术和人性化操作角度，确定网站整体创意风格，动画，版面编排，色彩搭配，图片处理方式等依据网站功能策划和技术实现方案，为企业量身定做最适合企业的网站建设，实现企业建设网站的商业目的，加大宣传力度，标志公司形象和企业文化，增加效益等预期效果。我司科学的项目管理、严谨的质量管理体系，专业的网站建设团队，全方位的网络安全维护，保障企业网站安全运行，确保公司机密安全。解决企业一切后顾之忧！（1）主动与互动：flash网站建设所面对不再是“被动”的读者 , 而是有目地的“主动”。客户将透过 Internet主动的找到企业网站，要求他们所需要的服务。能给予使用者需求，甚至达到双向的沟通，这是一般传统媒体所做不到的。（2）无限延伸：容量不受限制，产品资讯、图片等任何您想要提供给客户的资料皆可输入。随时提供服务。它的地点不受限制。（4） 多功能：flash网站在现代及未来的资讯社会将成为不可缺少的企业识别标志之一。 3.2 系统需求分析3.2.1总体设计规划Flash网站的结构规划，一般来说Flash网站基本包括Logo、导航系统、网站主题、联系方式、及板块内容等元素。Flash网站的层次结构规划。Flash是由一个个影片或者影片剪辑组成，影片或影片剪辑是由时间轴、变量、数组、函数、元件等变量组成并通过信息元件沟通和交换。3.2.2 网站的功能模块该网站为西电Flash网站，网站主页主要内容包括简介、西电动态、校园图片、联系方式和留言五大类，如图3.1所示。 图3.1 西电网站架图 3.2.3功能模块简介(1)主页: 网站首页是网站的第一内容页，整个网站是网站访问者第一眼看到的地方，在美观上应该给访问者留下深刻的印象，主页应采用简洁的设计，以达到美观和谐统一；在制作上采用动态页面，使整个网站时时充满生机和活力。(2)导航菜单:主要是给浏览着引导，方便访问者更好的了解网站的内容。 西电简介：介绍网站的的主要事物，让访问者更易查找了解。西电动态：向访问者介绍网站最新的信息，并让访问者更好的了解网站内容。校园图片:用图文的方式访问者了解信息。联系栏目：本栏目包括联系我们、友情链接栏目，发布基地的位置，联系方式等信息。第四章 详细设计第四章 详细设计 4.1加载设置(1)新建一个Flash文档，文件名为main.fla，像素设置为1400x920px，帧频设置为30，背景颜色设置为：#ECEDF0。（2）导入素材到库中。（3）新建影片剪辑为loading，设置实例名为mcLoad，该影片剪辑主要在加载页面时作为缓存页面内容，并新建文本设置实例名称为txtLoad，如图4.1所示。图4.1 加载影片剪辑图在场景中第一帧中按F9中添加动作代码如下：stop ();total = _root.getBytesTotal();/获取该flash文件的总字节数mcLoad.onEnterFrame = function () loaded = _root.getBytesLoaded();/获取已下载的字节数 percent = int(loaded / total * 100); /求出下载数据的百分比。即 已下载字节数/字节总数，这个数字是一个小于1的数. mcLoad.txtLoad.text = percent; if (loaded = total) gotoAndPlay(2); delete this.onEnterFrame; / end if; 4.2导航栏设置（1）新建影片剪辑mcmenu、mcbtmenu、mcbttxt、mc_btmenu、mc_btmenu1、mc_btmenu2、mc_btmenu3。（2）在mcbttxt新建动态文本设置实例名为：_txt。（3）新建图形元件img_btmenu1、img_btmenu2、img_btmenu3并从库中导入相关的图片，并把图形元件导入到相应的影片剪辑中。（4）设置影片剪辑mcbtmenu的动作按钮 在Action Layer的第一帧和最后一帧设置动作stop（）；在Label Layer层的第2帧设置标记帧over，在26帧设置out标记帧，如图4.2所示。图4.2 mcbtmenu动作按钮图图4.3 导航按钮图（5）设置导航按钮事件，flash网站80%的功能都是基于鼠标事件来完成的，所以按钮在网站中的地位不言而喻，新建mcmenu影片剪辑，设置按钮动作效果，设置导航如图4.3所示，在最后一帧设置stop（）事件，显示效果如图4.4，在第一帧设置代码如下。_root.link = 1;_bg.setMask(_mask);var my_array = new Array();my_array0 = 西电简介;my_array1 = 西电动态;my_array2 = 校园图片;my_array3 = 联系我们;var i = 0;while (i = 6) var butNum = thisb + i; butNum.index = i; butNum._mc1._txt.text = my_arrayi - 1; butNum._mc2._txt.text = my_arrayi - 1; butNum._mc3._txt.text = my_arrayi - 1; butNum._mc4._txt.text = my_arrayi - 1; butNum._mc5._txt.text = my_arrayi - 1; butNum.onRollOver = function () if (this.index != _root.link) this.gotoAndPlay(over); / end if ; butNum.onRollOut = butNum.onReleaseOutside = function () if (this.index != _root.link) this.gotoAndPlay(out); / end if ; butNum.onRelease = function () if (this.index != _root.link & _root.sel != true) _root.MC_menub + _root.link.gotoAndPlay(out); _root.link = this.index; _root.MC_content.play(); / end if ; +i; / end while 图4.4 导航效果图4.3内页设置新建mc_main、mc_index、mc_news、mc_images、mc_contact影片剪辑，在mc_main的第一帧至第四帧分别插入mc_index、mc_news、mc_images、mc_contact影片剪辑，在mc_main的第一帧中加入stop（） mc_main的框架图，如图4.5所示。 图4.5 mc_main的框架图4.4设置MC_INDEX影片剪辑 新建影片剪辑mc_jianjie_you、mc_tuwen，并分别设置影片剪辑的效果，分别建立mc_xid、mc_sf、mc_sf1、mc_sf3，并分别设置影片剪辑的实例名称为mcContent、mcMask、mcDragField、mcDrager，导入到影片剪辑mc_jianjie_you，使用同样的方法建立mc_tuwen如图4.6所示。图4.6 剪辑mc_jianjie_you图 4.5设置Flash滚动条 设置一个遮罩元件，用来控制显示内容区域的大小，设置mc_sf影片剪辑的实例名mcMask，设置mc_sf影片剪辑的实例名mcDrager，设置mc_xid影片剪辑的实例名mcContent，代码如下，代码写在mc_jianjie_you的第一帧上面。效果图4.7所示。图4.7 Flash滚动条图function renewScroll() delete mcContent.onEnterFrame; mcDragger._y = dragTopY; mcContent._y = contentTopY; _positionCont = dragTopY; _ratio = (mcContent._height - mcMask._height) / draggingHeight; contentBottY = -_ratio * draggingHeight; if (mcContent._height contentTopY) _positionCont = contentTopY; mcDragger._y = dragTopY; / end if if (_positionCont contentBottY) _positionCont = contentBottY; mcDragger._y = dragBottY; / end if this._y = this._y + (_positionCont - this._y) / _deceleration; if (Math.abs(_positionCont - this._y) dragTopY) mcDragger._y = mcDragger._y - _step; else mcDragger._y = dragTopY; / end else if ;btnBott.onPress = function () onEnterFrame = function () var _loc1 = mcDragger._y + _step; if (_loc1 dragBottY) mcDragger._y = mcDragger._y + _step; else mcDragger._y = dragBottY; / end else if ;btnTop.onRelease = btnBott.onRelease = function () delete onEnterFrame;4.6设置在线留言栏目新建影片剪辑mc_lxwm_luyan，选择文本工具建立文本，设置文本属性宽高、字体和实例名。实例名设置txtFied1，以同样的方法设置其他的如图4.8所示。设置clear和send按钮事件设置clear按钮的实例名为btnClear，send按钮的实例名为btnSubmit，在mc_lxwm_luyan影片剪辑的第一帧加入如下代码，整体效果图如4.9所示。function clearField() txtField1.text = label1; txtField2.text = label2; txtField3.text = label3; txtField4.text = label4; Selection.setFocus(_focus); / End of the functionlabel1 = Your name*:;label2 = E-mail*:;label3 = Phone:;label4 = Message*:;btnClear.onRollOver = function () this.gotoAndPlay(over);btnClear.onRollOut = btnClear.onReleaseOutside = function () this.gotoAndPlay(out);btnClear.onRelease = function () clearField();btnSubmit.onRollOver = function () this.gotoAndPlay(over);btnSubmit.onRollOut = btnSubmit.onReleaseOutside = function () this.gotoAndPlay(out);btnSubmit.onRelease = function () if (txtField1.text = label1 | txtField2.text = label2 | txtField4.text = label4) gotoAndStop(3); else _parent.contactform.loadVariables(email.html, POST); gotoAndStop(2); / end else if;图4.8 文本框属性图图4.9 在线留言图4.7网站实现 用Dreamweaver 8新建页面index.html 并插入xidian.swf文件，显示