Flash网站 毕业论文.doc

宁 德 师 范 学 院毕 业 论 文 (设 计)专业 计算机应用技术 （多媒体与图像处理方向） 指导教师 缪 丰 羽 学生 张 辉 学号 2010101305 题 目 Flash网站制作 高达Seed主题网站 2013年5月25日Flash网站制作高达Seed主题网站摘要：Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。因此，Flash特别适用于网站的创建，不仅因为它的文件非常小，更是因为它具备普通网站所不具备的视觉冲击力和互动力。它的互动性能是普通网站所无法比拟的。本次的网站设计为纯Flash网站，通过内置的AS代码控制整个网站的运行，包括调用外部图像，视频与音乐，控制按钮来实现不同页面间的切换等。整个网站由多个swf文件组成，通过主体中的AS代码调用其余的swf文件来构架一个完整的Flash网站。关键词：网站 Flash Action Script目 录第1章 引言- 1 -1.1 Flash网站设计概述- 1 -1.2 设计意义- 1 -第2章 文献综述- 1 -2.1 Flash介绍- 1 -2.1.1 简介- 1 -2.1.2 构成- 2 -2.2 ActionScript2.0介绍- 2 -第3章 方案设计与论证- 3 -3.1 计划阶段- 3 -3.2 需求分析- 3 -3.2.1 网站的功能模块- 3 -3.2.2 网站的结构分析- 4 -第4章 设计与实践- 5 -4.1 整体设计- 5 -4.2 素材收集- 5 -4.3 网站制作- 5 -4.3.1 主页制作- 5 -4.3.2 人物页面制作- 6 -4.3.3 视频页面制作- 7 -4.3.4 图库页面制作- 10 -4.3.5 整合成网站- 14 -第5章 结果与评价- 17 -5.1 测试注意事项- 17 -5.2 制作过程中遇到的问题和解决方法- 17 -5.3 网站改进方向- 18 -结束语- 18 -致谢- 19 -参考文献- 19 -计算机系毕业设计研究报告第1章 引言1.1 Flash网站设计概述Flash网站又称纯Flash网站或者Flash全站，是指利用Flash工具设计网站框架通过XML读取数据的高端网站。与其他通过HTML、PHP或者Java等技术制作的网站不同，Flash网站在视觉效果、互动效果等多方面具有很强的优势。被广泛的应用在房地产行业、汽车行业和奢侈品行业高端行业等。1.2 设计意义Flash 网站多以动漫动画为主要表现形式，在视觉效果上和互动效果上与普通网站比显得更加美观动感，能够获得较高的用户体验。Flash网站的出现使网站页面脱离了HTML网页那种死板的条条框框，让网页变得更加生动有去。网站追求视觉冲剂和时尚感受，它能够表达企业鲜明形象，展示精品产品。它是针对企业开发设计，融合企业形象，利用前沿的Flash技术，配合2D、3D动画表达一定设计理念的设计制作方式。Flash在游戏网站、营销网站、艺术网站、个人网站等有需要丰富视觉效果、强烈感染力、动态演示的网站开发方面有这得天独厚的优势。第2章 文献综述2.1 Flash介绍2.1.1 简介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)。2012年8月15日，Flash退出Android平台，正式告别移动端。Flash特点：(1)使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以边播放边下载，从而缓解了网页浏览者焦急等待的情绪。(2)通过使用关键帧使得所产生的动画(.swf)文件非常小，几K字节的动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间里就得以播放。(3)把音乐、动画、音效、交互方式融合在一起，越来越多的人已经把Flash作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影)效果。而且在Flash4.0的版本中已经可以支持MP3的音乐格式，这使得加入音乐的动画文件也能保持小巧的“身材”。(4)强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画，通过ACTION和FS COMMAND可以实现交互性，使Flash具有更大的设计自由度。2.1.2 构成在Flash中创作内容时，需要在Flash文档文件中工作。Flash文档的文件扩展名为.fla（FLA）。Flash文档有四个主要部分：(1)舞台舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash基础中将对舞台做详细介绍。(2)时间轴时间轴用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。(3)库面板库面板是Flash显示Flash文档中的媒体元素列表的位置。(4)ActionScriptActionScript代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash包括两个版本的ActionScript，可满足创作者的不同具体需要。有关编写ActionScript的详细信息，请参阅“帮助”面板中的学习Flash中的ActionScript3.0”。2.2 ActionScript2.0介绍Flash是一个交互多媒体的开放平台，它的交互就是由ActionScript程序来实现的。ActionScript是Flash独有的一种脚本程序，属于面向对象(OOP)的编程，类似于高级语言，但它不是高级语言。ActionScript经历Flash5.0的1.0版本不支持OOP技术，Flash MX的1.5版本支持OOP技术，到了Flash MX 2004的2.0版本与Java相差无几。虽然如今ActionScript3.0已经开始普及，但鉴于之前学习的是2.0，所以本次网站所运用的依然为2.0版本。制作Flash网站常用到的ActionScript函数包括：(1)gotoAndPlay();将比方头转到场景中指定的帧并从该帧开始播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。例如改写成“root. gotoAndPlay();”则将跳转到主场景的指定帧。(2)gotoAndStop();将比方头转到场景中指定的帧并停止播放，如果未置顶场景，则播放头将赚到当前场景中的指定帧。例如改写成“root. gotoAndStop();”则将跳转到主场景的指定帧。(3)loadMovie();在播放原始swf文件的同时将swf文件或jpeg、mp3、mp4等文件加载到Flash Player中。第3章 方案设计与论证3.1 计划阶段制作网站之前，首先需要明确网站的定位。需要手机相关的资料，对其进行整理并找到重点，如网站的主题是什么、用什么样的元素、元素之间要如何联系、元素要如何运动、用什么风格的音乐等。结合网站定位来决定网站的栏目需要有哪几项。然后用同样的方法来决定二级栏目下的子栏目，对它进行归类，并逐一确定每个二级栏目的主页面需要有哪些距听日，二级栏目下面的每个小栏目需要放置哪些内容。3.2 需求分析3.2.1 网站的功能模块该网站为动漫主题网站，网站主页主要内容包括人物资料、机体资料、图片文件和视频文件四大类。如图3-1图 3-13.2.2 网站的结构分析(1)主页主页采用动画效果，由若干个小矩形组成，时隐时现中呈现幕后的画面，这样在进入站点前给用户耳目一新的感觉。(2)导航菜单与传统的导航菜单不同的是，该网站的导航菜单并没有挤成一排或一竖，而是四下分散，随着背景音乐的奏响而渐渐显露出来。人物介绍该动漫中的主要人物，按阵营进行分类，让用户更易查找了解。机体介绍该动漫中的主要机体，由于动漫中机体种类太少，于是并没有进行分类，免去用户多余的操作。图库该图库收集了56张高清大图，每8张为一组，以不同与主页的变换方式呈现给用户。视频网站收录了该动漫视频全集，用户可通过标题来选择要观看的内容。第4章 设计与实践4.1 整体设计万事开头难，在准备开始制作一个网站时，特别是在明确了网站的主题内容后，需要做的第一件事就是构思一个主页。就如封面对一本杂志的重要性一样，主页的成功与否同样影响着用户对网站的第一印象。该网站主页的创意来源于街头的高炮广告牌，广告面板由多个条状木板组成，随着时间的流逝而自动翻转，从而变换出另一条广告。主页的雏形也是这样，后来发现Flash的开放性完全可以不必拘泥于常理，于是换成了效果更好的小矩形来进行变换。一旦主页的问题得到解决，接下来的一切都变得那么顺理成章：为了搭配主页风格而制作的矩形按钮；为了搭配主页框架而制作的二级页面等等。4.2 素材收集由于对该动漫有较多的接触，素材的收集也显得得心应手，网络上能很容易找到所需要的一切。文字资料和图片被收集起来备用，没有直接进行修改。在网站需要用到素材的地方完成之后，再根据该处的属性来对素材进行修改。例如相册所用的图片比例是4:3，此时再对收集来的图片进行修改，以达到最好的效果，而不会出现比例失调的情况。4.3 网站制作4.3.1 主页制作(1)新建一个AS2.0的Flash文档，像素设置为1024x600，FPS为30，命名为“home.fla”。(2)导入需要出现在主页的三张图片“01”,“02”,“03”，并在Flash中创建影片剪辑“网格”，画出如下图像，尺寸为855x329。如图4-1图 4-1(3)创建影片剪辑“遮罩01A1”，在“遮罩01A1”中的图层1放上图片“01”，并在图层2制作一个大小为106x54的矩形遮罩，放置于坐标点53 27处并添加Alpha效果。如图4-2图 4-2(4)重复(3)的步骤直至作出下图效果。如图4-3图 4-3 (5)最终回到主场景，分别放置各个遮罩，并在最后一帧添加代码gotoAndPlay(1);以进行循环播放。4.3.2 人物页面制作(1)新建一个AS2.0的Flash文档，参考4.3.1的数据，命名为“renwu.fla。”(2)制作大量按钮以供应该页面大量文字图片查阅，翻页。主要使用的代码为：on (release)_root.gotoAndPlay(129);该代码可使用户在点击特定按钮后跳转到主场景的指定帧并进行播放。on (release) tellTarget (jilawz) prevFrame(); 该代码则是在用户阅读文本信息时所用的翻页代码，“jilawz”为文本名。如图4-4图 4-4 (3)机体页面与人物页面结构相同，可用同样的方法制作。4.3.3 视频页面制作(1) 新建一个AS2.0的Flash文档，参考4.3.1的数据，命名为“index.fla。”(2)新建一个影片剪辑“开场视频”，将修改好的视频文件“kc”导入库中，并放置于图层kc中，在“命令”图层的最后一帧添加代码：_root.gotoAndPlay(163);stop();以使“开场视频”在播放完“kc”后能跳转到主场景指定帧进行播放。如图4-5图 4-5(3) 新建一个影片剪辑“视频背景”，将修改好的图片文件“spbj”导入库中，并放置于图层1中。每5帧为一区间，取10个区间共51帧，如图4-6图 4-6对图片“spbj”进行旋转变换，并在图层2的最后一帧添加代码：_root.gotoAndPlay(165);stop();如图4-7图 4-7(4)回到主场景，新建以下场景并将“开场视频”与“视频背景”按图中位置放置在时间轴上，第162帧以前的全为空白。如图4-8图 4-8(5)将图片“freedom”导入库中并放置于时间轴“freedom”中，设置Alpha渐隐效果。如图4-9图 4-9(6)创建多个按钮用于播放视频，并在每个按钮上添加代码on (release) _root.page = x_root.play();其中x代表着该按钮将会播放第几集视频。再用同样的方法作出按钮“返回主页”与两个箭头一样的翻页按钮。如图4-10图 4-10(7)新建一个视频剪辑“Video”，并放置于时间轴“Video”上；在视频剪辑“Video”中新建4个图层，在“图层1”中填充黑色背景；在“图层2”中添加Flash软件自带的实例“FLVPlayback”，设置参数如图4-11 图 4-11在“图层3”添加数字“1”“48”的按钮与一个返回上一级的“返回”按钮；在“图层4”中，在每一帧的场景中都用文字输入该集的标题；如图4-12图 4-12(8)回到主场景，依照各影片剪辑的属性对时间轴进行细整，并在时间轴“Act2”上各关键帧处添加代码stop();如图4-13图 4-134.3.4 图库页面制作(1)新建一个AS2.0的Flash文档，参考4.3.1的数据，命名为“xiangce.fla。”(2)新建一个影片剪辑“图库小”，在“图库小”中创建如下时间轴，如图4-14图 4-14(3)在“图层1”中画一个矩形，属性如图4-15图 4-15(4)在图层2的每一帧中放置新建的空白影片剪辑“mymc”，并将实例名也改成“mymc”，再添加代码mymc.loadMovie(pic/xxx.jpg)其中pic/为图片所在文件夹，xxx.jpg为图片名字。(5)在“图层3”放置一个150x90大小的透明按钮，并添加代码on (release) _root.page = this._currentframe;_root.play();此代码可以让用户在点击“图库小”之后让主场景继续播放。(6) 新建一个影片剪辑“图库大”，新建两个图层，在“图层1”中新建一个矩形，并在第一帧添加代码stop();属性如图4-16图 4-16“图层2”的做法同“图库小”的“图层2”(7)制作三个按钮，“左箭头”“右箭头”“返回”，在“返回”按钮中添加代码on (rollOver)gotoAndPlay(2);on (releaseOutside, rollOut) gotoAndPlay(11);on (release)unloadMovieNum(12);_root.play();造型如图4-17图 4-17(8)回到主场景，创建以下11个图层：“tk1”，“tk2”，“tk3”，“tk4”，“tk5”，“tk6”，“tk7”，“tk8”，“相册动作”，“上一张”，“下一张”。(9)在“tk1”到“tk8”上的每一个时间轴放置影片剪辑“图库小”，并将实例名称分别改为“tk1”到“tk8”，添加Alpha效果，舞台摆放位置如图4-3-17，时间轴设置如图4-18图 4-18图 4-3-18(10)在“tk7”的第88帧放置按钮“返回”，到第118帧消失。(11)在“tk8”的第88帧放置“图库大”，将实例名称修改为“tkd”，设置属性使其在第88帧到第103帧由小变大，Alpha由0变100；再设置属性使其在第103帧到第118帧由大变小，Alpha由1000变0。(12)在时间轴“相册动作”中，于第20、24、28、32、36、40、44、48帧添加代码第20帧为tk1.gotoAndStop(1);第24帧为tk2.gotoAndStop(2);依此类推。于第88帧添加代码tkd.gotoAndStop(page);于第103帧添加代码stop();于第118帧添加代码gotoAndPlay(1);(13)在时间轴“上一张”和“下一张”上分别放置按钮“左箭头”和“右箭头”，范围为第1帧至第52帧与第103帧。(14)在第119帧、第237帧、第355帧、第473帧、第591帧、第709帧重复步骤4.3.4（9）至4.3.4（13）。4.3.5 整合成网站(1)打开“index.fla”，4.3.3（4）中曾空出第162帧之前的位置，(2)新建图层“背景色”，填充黑色背景，范围为第1帧至第161帧。(3)新建图层“home”，放置一个空白影片剪辑，将实例名称修改为“home”，范围为第15帧至第161帧，并在第15帧处添加代码loadMovie(home.swf,home);(4)新建4个按钮，分别为“人物”、“机体”、“图库”、“视频”，并新建4个图层来分别放置这4个按钮。在“人物”按钮中添加代码on (rollOver)gotoAndPlay(2);on (releaseOutside, rollOut) gotoAndPlay(11);on (release)_root.gotoAndPlay(61);“机体”代码同“人物”，但需要修改上述代码中的61为102；“相册”代码同“人物”，但需要修改上述代码中的61为143；“视频”代码同“人物”，但需要修改上述代码中的61为161；四个代码在舞台上的位置如图4-19图 4-19(5)新建图层“renwu”，在第61帧处添加代码loadMovieNum(renwu.swf,11);(6)新建图层“jiti”，在第102帧处添加代码loadMovieNum(jiti.swf,12);(7)新建图层“xiangce”，在第160帧处添加代码loadMovieNum(xiangce.swf,13);(8)新建图层“停止”，在第60帧、第101帧、第142帧、第160帧处添加代码stop();(9)新建按钮“主页”，并新建图层“主页按钮”，在第79帧处放置按钮“主页”，范围为第79帧至第101帧，第120帧处也放置一个按钮“主页”，范围为第120帧至142帧，两者都添加代码on (rollOver)gotoAndPlay(2);on (releaseOutside, rollOut) gotoAndPlay(11);on (release)_root.gotoAndPlay(16);on (press) unloadMovieNum(11); unloadMovieNum(12);(10)新建图层“音乐”，放置空白影片剪辑，范围为第15帧至第161帧，并修改实例名称为“my_sound”。(11)新建图层“音乐控制”，在第15帧添加代码my_sound = new Sound();my_sound.onLoad = function(ok:Boolean):Void if (ok) my_sound.start(0, 10); else trace(加载失败!); ;my_sound.loadSound(bjyy.mp3, false);其中“bjyy.mp3”为网站背景音乐，此代码加入了判定语句，避免了音乐重叠播放和只播放一次的情况。第5章 结果与评价5.1 测试注意事项由于该网站由加载外部swf文件组成，在测试时需要分别打开“index.fla”、“renwu.fla”、“jiti.fla”、“xiangce.fla”，并按下Ctrl+Enter键来分别生成“index.swf”、“renwu.swf”、“jiti.swf”、“xiangcswf”，最终双击“index.swf”来测试网站效果测试swf文件效果最好的为Adobe Flash Player，其它软件例如QQ影音，暴风影音等会造成打开swf文件后跳转到二级页面的情况。5.2 制作过程中遇到的问题和解决方法(1)网站体积过大刚完成这个网站时，整体文件加起来有180M之大，指导老师指出“一个合格的Flash网站体积不应该会这么大，最好将图片、音乐、视频等文件放在本地文件夹而不是直接导入库中”。利用代码进行所有多媒体文件的外部加载之后，我发现网站体积缩减到了120M，但这远远超出我的预期。百度了很多方法无果后，群里一个网友告诉了我一个最经常被忽视的地方Flash缓存。原来在制作修改网站时，我们在Flash上进行的所有操作都会被软件记录下来，以便于“撤销”、“历史记录”、“自动恢复”等功能的实现，这些缓存占用了文件绝大部分的体积。于是我新建了一个空白的Flash文件，将之前“臃肿”的内容全部复制过来后发现120M的大小如今只剩下8.4M。(2)代码添加位置错误在制作按钮时，经常会出现添加了代码却没有效果的情况。一开始以为我代码写错了，但是经过反复验证就是没问题。后来加入了一个学习AS语言的群后才被告知按钮的代码要直接写在按钮上，而不是像我那样写在帧上。(3)音乐的重叠播放与重复播放背景音乐在第一次添加时使用的代码是my_sound = new Sound();my_sound.loadSound(bjyy.mp3, true);my_sound.start(0,999);经测试发现该代码在AS2.0环境下无法循环播放，也就是只能播放一次。更大的缺陷是，当时间线再次经过该代码所在帧时，网站会在音乐还在播放时再次播放该音乐，导致几首音乐同时播放的重叠现象。之后又试着把音乐导入库中来进行控制，虽然解决了所有问题，但是体积却增加了4M。最后从一段关于视频重叠播放的代码中找到门路，经过修改后套用到音乐文件中，通过该代码来加载外部音乐文件完美解决所有问题。my_sound = new Sound();my_sound.onLoad = function(ok:Boolean):Void if (ok) my_sound.start(0, 10); else trace(加载失败!); ;my_sound.loadSound(bjyy.mp3, false);5