动漫毕业论文-动漫主题网站设计

本论文主要论述了本人所做毕业设计课题《动漫主题网站设计》的技术背景、设计理念、概要设计、详细设计以及最后效果展示等方面内容，详细的介绍了本人对于设计简单Flash网站的一整套设计过程和相ThispapermainlydiscussesthegraduationdesignWebDesignThemeoftechnicalbackground,designconceptdesign,detaileddesign,summaryanddisplayeffectetc,detailedintroduceshimselftodesignKeyWords:WebDesign线第一章绪论 1 1 1 11.2.2普通网站设计的特点 2 41.3本网站的特点 4第二章网站涉及的开发工具与开发语言 62.1网站使用的开发工具 6 6 62.1.3AdobeDreamweaverCS3 72.2网站开发语言 7 7 8第三章网站设计中的各种技术解析 93.1主页界面设计解析 93.1.1flash网站加载时的进度条设计 9 3.1.3网站导航条的设计 3.1.4进入主页界面前动态效果设计 3.1.5进入主页时的音效设置 3.2.1子页面载入特效设计 3.2.2“迷你游戏”子页面游戏菜单设计与加载 3.2.3目录转换、滑动和按钮连接网页的实现代码 3.3.2赏漫软件的图片文字介绍部分制作 3.4.1动画按钮设计 23 参考文献 第一章绪论以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、网络游戏、个性网站等。在因特网飞速发展的今天，多姿多彩的网络页面总是让我们目不暇接，创建富有个性的个人主页更是每一个网络爱好者的梦想。作为一个优秀的多媒体网页设计首选工具。能够为大多数人所认同的东西总有它的独特之处，Flash正是以其独特的量的动画处理技术，而矢量图形就是用少量的向量数据来描述一个复杂的对象，存储时只占很小的空间，而且图像的质量也很高。想必许多网友们也曾对自己挂在网上的一些动画作品的体积担心，那么,用Flash来创建网络动画作品也正是我们的速启动并观看动画，而不必像Java那样，每次都要花费大量的时间启动虚拟机。Flash是美国Macromedia公司所设计的一种二维矢量动画软件(现Adobe公司产品),用于设计和编辑Flash文档，最新版本为：AdobeFlashCS5。Flash通常也指MacromediaFlashPlayer(现AdobeFlashPlayer),用于播放Flash文档。线“swf”这是一个完整的影片档，无法被编辑。有时时可以选择保护功能，如果没有选择，很容易被别人输入到他的原始档中使用。然而保护功能依然阻挡不了为数众多的破解软件，有不少闪客专门以此来学习别人的“fla”是Flash的原始档，只能用MacromediaFlash打开编辑或AdobeFlashCS3Actionscript,但是也可以把它存成AS档做为外部连结档案(如定义ActionScript类则Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。Flash是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组网站设计要注意的两个要点：整体风格和色彩搭配。网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。象”包括站点的CI(标志、色彩、字体、标语)、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等等诸多因素。举个例子：我们觉得(4)相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那中出现的所有标题字的阴影效果的设置应该是完全一致的!二、网页色彩的搭配屏较远的时候，我们看到的不是优美的版式或美丽的图片，而是网页的色关于色彩的原理有许多，在此我们不可能一一阐述，大家可以看看相关设计书籍，有利于系统地理解。在此我们仅仅想告诉大家一些网页配色时的小技巧。(1)用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱(3)用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，(2)背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景),以便突出Flash网站具有设计精美，拥有更多声效、动画、流媒体剪辑、美术效果及兼顾所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。如：企业品制作全Flash网站和制作html网站类似，事先应先在纸上画出结构关系图，包括：网站的主题、要用什么样的元素、哪些元素需要重复使用、元素之间的联系、元素如何运动、用什么风格的音乐、整个网站可以分成几个逻辑块、各个逻辑块间的联系如何、以及你是否打算用Flash建构全站或是只用其做网站的前期部分等等，台",这个舞台提供标准的长宽比例和整个的版面结构，“演员”就是网站子栏目的具体内容，根据子栏目的内容结构可能会再派生出更多的子栏目。主场景作为“舞台“基础，基本保持自身的内容不变，其它"演员"身份的的子类、次子类内容根据需要站名：动漫主题网站构架：以flash为主要框架页面，结合风格：主体颜色为棕色，有金属感、复古感。(如图1-1)页面间切换时有动画效果，菜单、按钮、目录等也做了动态效果。主页共分迷你游戏、赏漫软件、精品动画、酷站导航、酷炫漫画、关于作品等六个导航按钮，每一个导航按钮指向一个----的地去决金限风力油鸿填之以上是本证是设计价图1-1主界面风格线线第二章网站涉及的开发工具与开发语言平行平行TT西格记西静记》#签件间#问照年MacromediaFlash8.0Pro仍是现在最主流的flash制作软件，配合其ActionScript2.0能够完美实现网站设计中所需要的各种动态效果和交互效果，而我线维护工具，利用Dreamveaver能够便了网页的制作，即使是完全不懂HTML的菜鸟也能在第一时间掌握它并利用它制作出精美的网页出来。在设计flash网站是我们会利用Dreamveaver设计一些简单的MacromediaFlashProfessional类应用程序可以是简单的SWF动画文件，也可以是更复杂的功能丰富的Internet或复杂的与用户的交互性、使用除内置于Flash中的对象之外的其它对象(例如按钮和影片剪辑)或者想以其它方式让您的SWF文件具有更可靠的用户体验，则可第三章网站设计中的各种技术解析|线3.1主页界面设计解析(1)新建flash文档index.fla,设置舞台的大小为550*550像素，设置背景的颜色如图3-1,时间轴上各层设计如图3-2。…图3-1进度条图3-2进度条在时间轴上各层Actions:帧1代码：total=_root.getByteloaded=_root.getBybaifenshu=int((loaded/total)*100);baifenbi=baifenshu+"%";setProperty("jindutiaActions:帧2代码：if(baifenshu=100){线网站LOGO设计：(2)利用矩形工具建立一个白色矩形，在矩行分割裁剪，旋转变换得到要设计的网站LOGO。(如图3-3)(2)利用文本工具输入本站名称“动漫主题网站”,另起一行输入网址“”。(3)选中站名将字体字号设为29,字体颜色白色，字体样式选华文行楷得到本站使用的站名LOGO,选中网址将字体字号设为21,字体颜色为白色，字体样式选择华文新魏得到本站使用的网址LOGO,上下居中对齐。(如图动浸至意网站动浸至意网站图3-4站名、网址(1)新建图形元件“元件22”(如图3-5),作为导航条背景。##图3-5导航条背景(2)建立6个图形元件分别在各元件中设计各导航按钮文字，字体样式雅黑，字号12,颜色黑色，分别载入各影片剪辑做出动态效果，对应每个影片剪辑做一个与影片剪辑等大的按钮，按钮与影片剪辑放于不同层叠加在一起均匀排列与导航条上(如图3-6)。元件11元件11元件11图层4:帧1:元件11:loadMovieNum("index元件11:loadMovieNum("index元件11:|loadMovieNum("index(1)新建图形元件“元件29”,创建长条图行，作为三个小窗口推荐酷站、本站作品、站内更新的上框(如图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)导航条、网页头尾的图片条以相同方式在时间轴上依次载入并做形状补间效果(如图3-18),就可以完全载入主页界面获得完整的主页框架界面。(如图3-19)图3-18导航条、网页头尾的图片动态载入效果时间轴设置图3-19完整的主页框架界面(2)选择适当的音效添加到时间轴上的适当位置(如图3-20),使动态效果更具口图层21口图层49en图3-20在时间轴上添加声音效果主页框架界面到现在已经基本上设计完成了，主页框架界面为一个独立的flash文档，发布之后形成index.swf文件。此外，我们还要针对各个导航卡设计其对应的主体结构，再通过as代码连接一些必要的网页就构成了一个完整flash网站。以下子页面载入特效在多个页面中都有应用，现在在本章做一下介绍，以后几章涉和主页的载入特效相仿，此处的特效所采用的技术依然是依次在时间轴的适当位置利用图形元件的alpha值、亮度的调节及形状的改变做成补间动画来实现的。(如图3-21)口□厚]·图3-21子页面载入特效的时间轴设置(1)新建空白fla文件，命名为index001。创建大小为550*270颜色为白色的矩形图形元件，拖到图层26上做形状补间动画。在时间轴的适当位置利用图形元件的22至3-25)图3-22动态效果变换1图3-23动态效果变换2图3-24动态效果变换3图3-25动态效果变换4该子页面内只有一个游戏目录，目录内的内容可以点击目录上部的三个按钮来进行图3-26游戏菜单的轮廓2.新建图像元件，根据菜单轮廓做出与轮吻合的背景图形元件-线图3-27游戏菜单的背景新建图形元件，用颜色比背景稍深的长矩形条间隔着排列，获得游戏目录的表游戏菜单按钮和游戏按钮的设计原理是一样的不同的是游戏按钮最后要集中排列到一影片剪辑中。现在我们以一个菜单按钮为例来说明按钮制作的过程。1.在Photoshop中设计好按钮文字的图片素材，在入到fash库中。(如图3-情绪发泄望小猴跳墩副本图3-28载入flash库中的按钮文字图片素材2.将名为“休闲益智”的图片素材在如到按钮q11,创建一个与按钮文字等宽等高的白条滚动效果影片剪辑载入到按钮q11的第二帧(即“指针经过”帧)。(如图3-29)g2图3-29“休闲益智”按钮制作新建3个影片剪辑，将分类好的游戏按钮依次排列在此3个影片剪辑内。(如图3-30)和区人林术天小本本族国后央感比项状年师林图3-30一个排列游戏按钮的影片剪辑(1)游戏目录转换实现，需要先将三个游戏目录载入到时间轴的不同时间段上面(如图3-31),然后给菜单按钮附加一个动作，以休闲益智按钮为例其动作代码②数理25口期20自2中止&0图3-31游戏目录切换时间轴(2)目录滑动的实现线箭头或三角形的按钮，再将按钮分上下两个方向在如影片剪辑(如图3-32),做三图3-32作为目录滑动按钮用的影片剪辑2.将三个集合游戏目录的影片剪辑分别做成逐帧向下移动的影片剪辑al、a2、a3,在各个目录滑动视频剪辑控制内的两个按钮分别附加一些动作，动作(3)游戏按钮连接网页游戏的实现代码，在游戏按钮上加AS代码：getURL("此处最好填网页游戏文档的相对URL地址","_blank");“赏漫软件”子页面载入效果和“迷你游戏”子页面相仿不再赘述。赏漫软件目录的制作大体上与游戏目录相仿，所不同的是不需要转换和滑动，也就比游戏目录要好做多，同时目录中软件按钮的制作也和游戏目录中按钮一样，再此不在赘述目录和按钮的制作方法。我们来看一下做好的目录的大概形状样式(如图3-33),E三中E三中正三更新中该部分是以一个小的swf文件单独存在的，在点击软件按钮时会载入相应的接下来我们来做一下这个小swf文件，就那ACDSee图片浏览软件所对应的片素材，载入到s2库中。并生成影片剪辑。以影片剪辑动态效果实现是通过逐帧动画方式完成的(如图3-34至3-37)图3-34本影片剪辑动态效果的时间轴设置图3-34本影片剪辑动态效果1图3-35本影片剪辑动态效果2图3-36本影片剪辑动态效果3图3-37本影片剪辑动态效果4“精品动画”flash子页面是一个与前几个子页面略有不同的子页面，页面的设计风格与前几个页面有些许差异，不规则的背景使得页面整体显得翘起生动。(如图3-38)子页面载入动态效果及显示出动画按钮前的动态效果在前面都有涉及不在赘(1)新建空白fla文件，命名为index003。将通过Photoshop设计好动画按钮图片素材，大小50*50像素，载入到index003库中。(2)新建图形元件，将图片载入图形元件中并在图片上面覆盖一层多半透明的与图片等大的色块。(如图3-39)图3-39图像上覆盖了透明色块的图形元件(3)将图像元件做成按钮，按钮元件第一帧是将该图形元件透明度略调高一些(如图3-40),在第二三帧恢复正常(如图3-41)。图图口弹起]指针经过按下「点击0☑图器图3-40动画按钮第一帧图层10【]2口图3-41动画按钮第二三帧}线其中对网站的图片展示和介绍部分同“赏漫软件”子页面中的小swf文件制作绝大部分和“赏漫软件”子页面中的设计保持一致，右侧的图片展示部分也没太多的改变，完全可以仿照其设计制作不再赘述。再次提本网页就只有一个文字面板，文字面板的设计和其他页面中目录的设计比较相似，都是先在图形元件中设计好其轮廓和背景，再在时间轴上通过形状、亮度、透明度改变进行形状补间最终获得文字面板(如图3-44)。再次提供该子网站设计好图3-44文字面板设计在时间轴上的设置aahaah月站设计是指用h软件制作的动志网站，网页内容多数基至全部是Hahv全A、h网基有以田形和动画为主，所以比较适合做据些文手内容不大三，以干面，动面快果力主的应用。如：种拓府然，个性同站等，书wh月站为用ad软牛制性的网结，界面英现大方，界面炉共有动通决果，实现了用一般中面设计方法所不就实规的动感养面，丰网站以发画主勉网站力依托意在主挥avh问N块计相对于一般同述设十所具有的一些优杀，图3-45“关于作品”子网站设计好后的效果Flash网站具有设计精美，拥有更多声效、动画、流媒体剪辑、美术效果及兼顾所以比较适合做那些文字内容不太多，以平面