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