动漫主题网站设计论文.docx

1、动漫主题网站设计论文毕业设计说明书课题名称动漫主题网站设计系/专 业 计算机与软件学院/动漫设计与制作班 级动漫0721学 号0702213231学生姓名姚波波指导教师：梁菊华 20010年 5 月 28日信息工程系毕业设计（论文）诚信承诺 我谨在此承诺：本人所写的毕业论文动漫主题网站设计，系本人独立完成，没有抄袭行为，凡涉及其他作者的观点和材料，均作了注释与说明，若有不实，后果由本人承担。承诺人（签名）： 年 月 日摘要本论文主要论述了本人所做毕业设计课题动漫主题网站设计的技术背景、设计理念、概要设计、详细设计以及最后效果展示等方面内容，详细的介绍了本人对于设计简单Flash网站的一整套设计

2、过程和相关技术难点的解决方法。关键词：网站设计；flash；AbstractThis paper mainly discusses the graduation design which I do the Anime Web Design Theme of technical background, design concept design, detailed design, summary and display effect etc, detailed introduces himself to design a simple Flash web design process and r

3、elated technical difficulties in solving methods.Key Words：Web Design；flash；Flash web design；第一章 绪论1.1 Flash网站设计的简单介绍Flash网站设计是指用用Flash软件制作的网站，网页内容多数甚至全部是flash。全Flash网站基本以图形和动画为主，所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、网络游戏、个性网站等。 在因特网飞速发展的今天，多姿多彩的网络页面总是让我们目不暇接，创建富有个性的个人主页更是每一个网络爱好者的梦想。作为一个优秀

4、的多媒体网页设计平台，Flash从众多的网页设计软件中脱颖而出，成为大多数网络爱好者设计网页的首选工具。能够为大多数人所认同的东西总有它的独特之处，Flash正是以其独特的魅力征服了网络发烧友。 首先，Flash的一个很重要的特点是创建的文件体积很小，Flash是完全基于矢量的动画处理技术，而矢量图形就是用少量的向量数据来描述一个复杂的对象，存储时只占很小的空间，而且图像的质量也很高。想必许多网友们也曾对自己挂在网上的一些动画作品的体积担心，那么，用Flash来创建网络动画作品也正是我们的首选。 其次，Flash使用的是插件的工作方式，用户只要安装一次插件，以后就可以快速启动并观看动画，而不必

5、像Java那样，每次都要花费大量的时间启动虚拟机。 再次，Flash动画采用的是“流式”的动画播放技术，用户不必等到动画下载完全再去欣赏动画，而是一边下载一边欣赏。 最后，Flash简单易学，尽管它不能像一门高级语言一样进行编程，但功能还是很广泛的。使用内置的ActionScript语句结合JavaScript，也可以制作出互动性很强的主页来。 1.2 Flash网站，Flash与网页的结合1.2.1 Flash的介绍Flash是美国Macromedia公司所设计的一种二维矢量动画软件（现Adobe公司产品），用于设计和编辑Flash文档，最新版本为：Adobe Flash CS5。Flash

6、通常也指Macromedia Flash Player（现Adobe Flash Player），用于播放Flash文档。档案格式:“swf ”这是一个完整的影片档，无法被编辑。有时会被念做“swiff”。Swf在发布时可以选择保护功能，如果没有选择，很容易被别人输入到他的原始档中使用。然而保护功能依然阻挡不了为数众多的破解软件，有不少闪客专门以此来学习别人的程序代码和设计方式。 “fla ”是Flash的原始档，只能用Macromedia Flash打开编辑或Adobe Flash CS3及更高版本打开编辑。 Actionscript是一种程序语言的简单文本文件. FLA档案能够直接包含 A

7、ctionscript, 但是也可以把它存成AS档做为外部连结档案(如定义ActionScript类则必须在写在as文件里,再通过import加入类)，以方便共同工作和更进阶的程序修改。Flash解析Flash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序Flash 特别适用于创建通过 I

8、nternet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。1.2.2 普通网站设计的特点网站设计要注意的两个要点：整体风格和色彩搭配。 一、确定网站的整体风格 网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。 风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI

9、（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。 在这里，我提供给大家一些参考经验： (1)将你的标志logo，尽可能的放在每个页面上最突出的位置。 (2)突出你的标准色彩。 (3)总结一句能反映贵站精髓的宣传标语！ (4)相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！ 二、网页色彩的搭配 无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离

10、显示屏较远的时候，我们看到的不是优美的版式或美丽的图片，而是网页的色彩。 关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。 (1)用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。 (2)用两种色彩。先选定一种色彩，然后选择它的对比色。 (3)用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区： (1)不要将所有颜色都用到，尽量控制在三至五种色彩以内。 (2)背景和前文的对比尽量要大(绝对不要

11、用花纹繁复的图案作背景)，以便突出主要文字内容。1.2.3 Flash网页、网站Flash网站具有设计精美，拥有更多声效、动画、流媒体剪辑、美术效果及兼顾互动性等特征，非常适合公司作在线产品展示。Flash网站基本以图形和动画为主，所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、网络游戏、个性网站等。 制作全Flash网站和制作html网站类似，事先应先在纸上画出结构关系图，包括：网站的主题、要用什么样的元素、哪些元素需要重复使用、元素之间的联系、元素如何运动、用什么风格的音乐、整个网站可以分成几个逻辑块、各个逻辑块间的联系如何、以及你是否打算用F

12、lash建构全站或是只用其做网站的前期部分等等，都应在考虑范围之内。 实现全Flash网站效果多种多样，但基本原理是相同的：将主场景作为一个舞台，这个舞台提供标准的长宽比例和整个的版面结构，“演员”就是网站子栏目的具体内容，根据子栏目的内容结构可能会再派生出更多的子栏目。主场景作为舞台基础，基本保持自身的内容不变，其它演员身份的的子类、次子类内容根据需要被导入到主场景内。 1.3 本网站的特点站名：动漫主题网站网址：构架：以flash为主要框架页面，结合一般的html网页构成。风格：主体颜色为棕色，有金属感、复古感。（如图1-1）页面间切换时有动画效果，菜单、按钮、目录等也做了动态效果。主页共

13、分迷你游戏、赏漫软件、精品动画、酷站导航、酷炫漫画、关于作品等六个导航按钮，每一个导航按钮指向一个具有独立内容的子页面。（如图1-2）图1-1 主界面风格图1-2 导航条第二章 网站涉及的开发工具与开发语言2.1 网站使用的开发工具2.1.1 Adobe Photoshop CS2作为Adobe公司出品的最出色的图形图像处理软件，Photoshop以其强大的功能向我们证明着它的名至实归。在falsh网站设计时一些图片素材如背景图片、按钮、LOGO等在载入flash库前有必要用Photoshop做适当的处理。（如图2-1）图2-1 一些被PS过的图片素材2.1.2 Macromedia Flas

14、h 8.0 ProMacromedia Flash 8.0 Pro相对于Macromedia Flash MX 2004增强了为移动设备开发的功能,方便创建Flash Web增强的网络视频。虽然有更高的版本，但是Macromedia Flash 8.0 Pro仍是现在最主流的flash制作软件，配合其内置的ActionScript 2.0能够完美实现网站设计中所需要的各种动态效果和交互效果，而我此次所做的flash网站就是在Macromedia Flash 8.0 Pro的环境下制作。（如图2-2）图2-2 Macromedia Flash 8.0 Pro 界面2.1.3 Adobe Drea

15、mweaver CS3Adobe公司有一款著名于世的软件，Dreamveaver是一款功能强大的网站制作和维护工具，利用Dreamveaver能够实现所见即所得式的网页制作制作方式，只需像Word一样编辑页面，Dreamveaver会在后台自动生成其相应的HTML语句，大大方便了网页的制作，即使是完全不懂HTML的菜鸟也能在第一时间掌握它并利用它制作出精美的网页出来。在设计flash网站是我们会利用Dreamveaver设计一些简单的页面配合flash设计的网站主体形成更加内容丰富、更加具有实用性的网站。 2.2 网站开发语言2.2.1 ActionScript 2.0Macromedia F

16、lash Professional 8.0 是专业的标准创作工具，可以制作出极富感染力的 Web 内容。ActionScript 是用来向 Flash 应用程序添加交互性的语言，此类应用程序可以是简单的 SWF 动画文件，也可以是更复杂的功能丰富的 Internet 应用程序。您不必使用 ActionScript 就可以使用 Flash，但是，如果您要提供基本或复杂的与用户的交互性、使用除内置于 Flash 中的对象之外的其它对象（例如按钮和影片剪辑）或者想以其它方式让您的 SWF 文件具有更可靠的用户体验，则可能需要使用 ActionScript。 2.2.2 HTMLHTML（Hyper

17、Text Markup Language）即超文本标记语言或超文本链接标示语言，它是一种计算机程序语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要内容。HTML文件是用ASCLL代码编写成的，可以保存为最简单的TXT文本文件，这样用任何一个文字处理软件都可以进行编写，这也是他能够迅速迅速普及，并十分受欢迎的一个原因。第三章 网站设计中的各种技术解析3.1 主页界面设计解析3.1.1 flash网站加载时的进度条设计(1)新建flash文档index.fla，设置舞台的大小为550*550像素，设置背景的颜色为#786e28。(2)建立进度条设计主要是帮助观察flash网站载入的进度

18、，建立进度条设计样式如图3-1，时间轴上各层设计如图3-2。图3-1 进度条图3-2 进度条在时间轴上各层Actions：帧1代码：total = _root.getBytesTotal();loaded = _root.getBytesLoaded();baifenshu = int(loaded/total)*100);baifenbi = baifenshu+%;setProperty(jindutiao, _xscale, baifenshu);Actions：帧2代码：if (baifenshu = 100) gotoAndPlay(4); else gotoAndPlay(1);3

19、.1.2 网站LOGO与站名设计网站LOGO设计：(1)新建图形元件“元件42”。(2)利用矩形工具建立一个白色矩形，在矩形正中建立一稍小些的背景色矩形形成白色矩形框。(3)利用任意变形工具将白色矩形框变形成为白色平行四边形框。用线条工具进行分割裁剪，旋转变换得到要设计的网站LOGO。（如图3-3）图3-3 网站logo站名设计：(1)新建图形元件“元件17”。(2)利用文本工具输入本站名称“动漫主题网站”，另起一行输入网址“”。(3)选中站名将字体字号设为29，字体颜色白色，字体样式选华文行楷得到本站使用的站名LOGO，选中网址将字体字号设为21，字体颜色为白色，字体样式选择华文新魏得到本站

20、使用的网址LOGO，上下居中对齐。（如图3-4）图3-4 站名、网址3.1.3 网站导航条的设计(1)新建图形元件“元件22”（如图3-5），作为导航条背景。图3-5 导航条背景(2)建立6个图形元件分别在各元件中设计各导航按钮文字，字体样式雅黑，字号12，颜色黑色，分别载入各影片剪辑做出动态效果，对应每个影片剪辑做一个与影片剪辑等大的按钮，按钮与影片剪辑放于不同层叠加在一起均匀排列与导航条上（如图3-6）。图3-6 导航按钮(3)给每个按钮附加动作。（如图3-7）图3-7 按钮b1动作目录代码如下：图层4：帧1：stop();元件11：on (rollOver) gotoAndPlay(2)

21、;on (press) tellTarget (/) loadMovieNum(index101.swf, 100); 元件11：on (rollOut) gotoAndPlay(1);on (press) tellTarget (/) loadMovieNum(index101.swf, 100); 图层4：帧9：Stop（）；元件11：on (rollOut) gotoAndPlay(1);on (press) tellTarget (/) loadMovieNum(index101.swf, 100); 3.1.4 进入主页界面前动态效果设计(1)新建图形元件“元件29”，创建长条图行，

22、作为三个小窗口推荐酷站、本站作品、站内更新的上框（如图3-8）。建立三个图形元件分别制作各个小窗口的名称（如图3-9）。 图3-8 小窗口的上框 图3-9 小窗口的名称(2)新建图像元件，在其上创建与小窗口等大的白色和背景色的矩形色块，在不同图层中各小窗口的上框和窗体依次在时间轴上载入并做形状补间动画（如图3-10）。时间网页小窗口界面的动态载入。（如图3-11至3-17）图3-10 小窗口动态载入效果时间轴设置图3-11 小窗口动态载入1 图3-12 小窗口动态载入2 图3-13 小窗口动态载入3 图3-14 小窗口动态载入4图3-15 小窗口动态载入5 图3-16 小窗口动态载入6(3)导

23、航条、网页头尾的图片条以相同方式在时间轴上依次载入并做形状补间效果（如图3-18），就可以完全载入主页界面获得完整的主页框架界面。（如图3-19）图3-18 导航条、网页头尾的图片动态载入效果时间轴设置图3-19 完整的主页框架界面3.1.5 进入主页时的音效设置(1)挑选合适的音效载入库中。(2)选择适当的音效添加到时间轴上的适当位置（如图3-20），使动态效果更具表现力。图3-20 在时间轴上添加声音效果主页框架界面到现在已经基本上设计完成了，主页框架界面为一个独立的flash文档，发布之后形成index.swf文件。此外，我们还要针对各个导航卡设计其对应的swf文件，各swf文件之间通过

24、as代码连接形成一个整体，则构成了本flash网站的主体结构，再通过as代码连接一些必要的网页就构成了一个完整flash网站。以下几章我将对各个导航卡所对应的.swf文件及它们所链接的网页页面的制作做进一步的详细说明。3.2 “迷你游戏”flash子页面设计3.2.1 子页面载入特效设计子页面载入特效在多个页面中都有应用，现在在本章做一下介绍，以后几章涉及到这方面的内容将不再赘述。和主页的载入特效相仿，此处的特效所采用的技术依然是依次在时间轴的适当位置利用图形元件的alpha值、亮度的调节及形状的改变做成补间动画来实现的。（如图3-21）图3-21 子页面载入特效的时间轴设置具体步骤：(1)

25、新建空白fla文件，命名为index001。创建大小为550*270颜色为白色的矩形图形元件，拖到图层26上做形状补间动画。在时间轴的适当位置利用图形元件的alpha值、亮度的调节及形状的改变做成补间动画实现连续变化动态效果。（如图3-22至3-25）图3-22 动态效果变换1图3-23 动态效果变换2图3-24 动态效果变换3图3-25 动态效果变换43.2.2 “迷你游戏”子页面游戏菜单设计与加载“迷你游戏”子网页内的游戏分为三大类的游戏所以就需要三个游戏目录，而在该子页面内只有一个游戏目录，目录内的内容可以点击目录上部的三个按钮来进行切换，现在我们来看看该游戏菜单是如何设计实现的。（1）

26、 设计游戏目录的轮廓和背景形状1. 新建图形元件，用黑色线条勾勒出游戏菜单的轮廓。（如图3-26）图3-26 游戏菜单的轮廓2. 新建图像元件，根据菜单轮廓做出与轮吻合的背景图形元件。（如图3-27）图3-27 游戏菜单的背景（2） 设计游戏菜单的表格新建图形元件，用颜色比背景稍深的长矩形条间隔着排列，获得游戏目录的表格。（如图3-28）图3-27 游戏目录的表格（3） 设计菜单按钮和游戏按钮游戏菜单按钮和游戏按钮的设计原理是一样的不同的是游戏按钮最后要集中排列到一影片剪辑中。现在我们以一个菜单按钮为例来说明按钮制作的过程。1. 在Photoshop中设计好按钮文字的图片素材，在入到flash

27、库中。（如图3-28）图3-28 载入flash库中的按钮文字图片素材2. 将名为“休闲益智”的图片素材在如到按钮q11，创建一个与按钮文字等宽等高的白条滚动效果影片剪辑载入到按钮q11的第二帧（即“指针经过”帧）。（如图3-29）图3-29 “休闲益智”按钮制作（4） 游戏按钮的排列新建3个影片剪辑，将分类好的游戏按钮依次排列在此3个影片剪辑内。（如图3-30）图3-30 一个排列游戏按钮的影片剪辑3.2.3 目录转换、滑动和按钮连接网页的实现代码（1）游戏目录转换实现，需要先将三个游戏目录载入到时间轴的不同时间段上面（如图3-31），然后给菜单按钮附加一个动作，以休闲益智按钮为例其动作代码

28、为：on (press) gotoAndPlay(85);图3-31 游戏目录切换时间轴（2）目录滑动的实现1.目录滑动既是实现通过按钮上下滑动游戏目录，顾名思义我们要先创建一个箭头或三角形的按钮，再将按钮分上下两个方向在如影片剪辑（如图3-32），做三个这种影片剪辑以和三个游戏目录对应。图3-32 作为目录滑动按钮用的影片剪辑2将三个集合游戏目录的影片剪辑分别做成逐帧向下移动的影片剪辑a1、a2、a3，在各个目录滑动视频剪辑控制内的两个按钮分别附加一些动作，动作代码如下。箭头向上的按钮附加代码：on (press, dragOver) tellTarget (/counter) prevFr

29、ame(); 箭头向下的按钮附加代码：on (press, dragOver) tellTarget (/counter) nextFrame(); （3）游戏按钮连接网页游戏的实现代码，在游戏按钮上加AS代码：on (press) getURL(此处最好填网页游戏文档的相对URL地址, _blank);3.3 “赏漫软件”flash子页面设计3.3.1 “赏漫软件”目录的制作“赏漫软件”子页面载入效果和“迷你游戏”子页面相仿不再赘述。赏漫软件目录的制作大体上与游戏目录相仿，所不同的是不需要转换和滑动，也就比游戏目录要好做多，同时目录中软件按钮的制作也和游戏目录中按钮一样，再此不在赘述目录和按

30、钮的制作方法。我们来看一下做好的目录的大概形状样式（如图3-33），用以上做目录的经验可以轻松做好。按钮附加动作代码：on (press) unloadMovieNum(3); loadMovieNum(此处最好填所连接swf文件的相对位置, 2);图3-33 软件目录样式3.3.2 赏漫软件的图片文字介绍部分制作该部分是以一个小的swf文件单独存在的，在点击软件按钮时会载入相应的swf文件在界面的适当位置。接下来我们来做一下这个小swf文件，就那ACDSee图片浏览软件所对应的swf文件来说明吧。（1）新建空白fla文件，命名.fla。将通过Photoshop设计好ACDSee软件的图片素材，载入到s2库中。并生成影片剪辑。以影片剪辑动态效果实现是通过逐帧动画方式完成的（如图3-34至3-37）图3-34 本影片剪辑动态效果的时间轴设置图3-34 本影片剪辑动态效果1图3-35 本影片剪辑动态效果2图3-36 本影片剪辑动态效果3图3-37本影片剪辑动态效果43.4 “精品动画”flash子页面设计“精品动画”flash子页面是一个与前几个子页面略有不同的子页面，页面的设计风格与前几个页面有些许差异，不规则的背景