毕业论文9

目录

摘要 (1)

ABSTRACT (2)

第1章绪论 (3)

1.1 Flash网站简介及制作技术 (3)

1.2 Flash网站优势 (3)

1.3 Flash网站研究现状及未来发展趋势 (4)

第2章网站需求分析 (6)

2.1 网站的界面需求 (6)

2.2 网站的功能需求 (6)

2.3网站制作目标 (7)

2.4 网站可行性分析 (7)

2.5网站前台页面分析 (8)

2.6 网站后台数据流程分析 (8)

第3章网站设计 (10)

3.1 网站结构图 (10)

3.2 网站开场动画设计 (10)

3.3 网站一级页面设计 (11)

3.4 网站二级页面设计 (13)

3.5 网站三级页面设计 (14)

3.6 各数据表结构 (15)

3.7 数据库的连接 (16)

3.8 数据读取页面功能 (16)

第4章网站测试 (18)

4.1 网站运行环境 (18)

4.2 测试结果及分析 (18)

第5章总结 (21)

参考文献 (22)

附录一 (22)

致谢...................................................................... 错误!未定义书签。

摘要

Flash网页的优势在于其良好的交互性,能给用户带来全新的互动体验和视觉享受。通常,很多网站都会引入Flash元素,以增加页面的美观性来提高网站的宣传效果,如网站中的导航菜单、产品展示、Banner等。有时也会通过Flash来制作整个网站。本次课题通过制作Flash网站展示了中国汉字文化的悠久历史,浏览者在浏览网站内容的同时,还可以进入论坛在线进行交流。本论文的撰写是基于Flash网站的设计。制作该网站使用了Flash、ActionScript2.0脚本编程、图像处理、https://www.360docs.net/doc/0918899404.html,等技术。通过本次课题网站的制作,让我学到了更多复杂动画的制作流程,让我明白想要提高自己的技术水平,需要付出更多的努力。

关键词:Flash网站;汉字;Flash技术;在线论坛

ABSTRACT

Flash Webpage advantage lies in its good interactivity, Can give users a new interactive experience and visual enjoyment, Usually, many sites will introduce Flash elements, In order to increase the aesthetic of the page to improve website publicity effect, If the site navigation menu, product display, Banner etc.Sometimes making the site by Flash,This design through the production of Flash website displays the long history and culture China Chinese characters,Visitors to browse the site content at the same time, also can enter the forum online communication,This paper is to design a Flash based web site,Making the site using the Flash, the ActionScript2.0 script programming,Image processing, https://www.360docs.net/doc/0918899404.html, Technology.By making this project site.Let me learn more complex animation production process.Let me know want to improve their technical level,More efforts need.

Key words: Flash website;Chinese characters;Flash technology;online communit

第1章绪论

本次设计是基于Flash的汉字网站,使用FlashCS4技术完成,Flash网站多以动漫动画为主要表现形式,在视觉效果上和互动效果上与普通网站相比显得更加美观动感,能够获得较高的用户体验[1]。

1.1 Flash网站简介及制作技术

Flash网站又称纯Flash网站或者Flash全站,是指利用Flash工具设计网站框架通过XML读取数据的高端网站。与其他通过HTML、PHP或者Java等技术制作的网站不同,Flash网站在视觉效果、互动效果等多方面具有很强的优势。被广泛的应用在房地产行业、汽车行业和奢侈品行业高端行业等[2]。

AS3.0即ActionScript3.0的简称。是针对Adobe Flash Player运行时环境的编程语言,它在Flash内容和应用程序中实现了交互性、数据处理以及其它许多功能。

ActionScript是由Flash Player中的ActionScript虚拟机(A VM)来执行的。ActionScript代码通常被编译器编译成"字节码格式"(一种由计算机编写且能够为计算机所理解的编程语言),如Adobe Flash CS3 Professional或Adobe®;Flex?Builder?的内置编译器或Adobe®、Flex?SDK和Flex?Data Se rvices中提供的编译器。字节码嵌入SWF文件中,SWF文件由运行时环境Flash Player执行[3]。

Flex是一个高效、免费的开源框架,可用于构建具有表现力的Web应用程序,这些应用程序利用Adobe Flash Player和Adobe AIR,运行时跨浏览器、桌面和操作系统实现一致的部署。虽然只能使用Flex框架构建Flex应用程序,但Adobe Flash Builder?(之前称为Adobe Flex Builder?)软件可以通过智能编码、交互式遍历调试以及可视设计用户界面布局等功能加快开发[4]。

1.2 Flash网站优势

1. 视觉优势

Flash网站给用户的第一感觉就是酷炫,这不仅仅是因为Flash网站添加了很多动画动漫元素。更重要的是Flash网站在构架和创意上给人一种不可思议的感觉,这是一种更深层次的带有艺术感的感觉。不管是Flash网站的结构和页面布局都与普通网站有很大不同,这不仅仅因为制作Flash网站需要开发者投入更多的精力和创意,更因为Flash网站制作技术给开发者提供了一个展现自己创意的一个平台和技术[5]。

Flash网站开发,我们可以尽情的去添加我们想要的元素表达我们想要表达的创意和想法:我们可以添加3D效果,可以给用户带来高端的立体感受。可以让我们的网站成为一个大气高雅具有艺术感的优雅环境。我们可以给我们的产品做一个全新的装饰,增加网站的广告特性,我们还可以添加一些自己喜欢的个性元素,让网站成为一个展现个性的窗口。总之,Flash网站以效果和创意为最大卖点,是其他普通网站很难比拟的[6]。

2.互动优势

Flash网站另一个非常明显的优势就是网站与用户的互动性。在用户浏览网站的过程中,Flash网站可以加入互动元素,轻易实现网站与用户互动,吸引用户注意力[7]。我们简单对比一下:Flash网站中的动漫动画就像是一个游戏,我们添加互动元素用户想看什么我们通过像游戏一样的操作来展现。比如说3D效果,我们需要用户移动鼠标来实现视觉转换这样不仅提高了用户的兴趣还能使用户把精力放在网站上面,实现我们展示信息的功能。而这一点,与普通网站的超链接点击展示相比能够给用户带来更多的新鲜感,能够获得用户更多的关注度。

3.创意优势

Flash网站是创意和艺术的结合。每个Flash网站除了需要投入精力和时间外,更需要添加自己的创意[8]。不管是视觉冲击力,还是互动的娱乐性都需要网站开发人员从用户的角度出发设计出符合用户体验的Flash高端网站。Flash高端网站给网站设计者提供了一个展示自己艺术和创意的平台。

1.3 Flash网站研究现状及未来发展趋势

现如今,Flash已经逐渐被国内用户所认识和接受,并随之出现一大批忠实的追随者。在网络上,对FLASH动画贡献最大的要数那些“闪客”们了,无数年轻人借助FLASH技术实现了他们的创意和梦想。目前利用Flash开发出了许多夸平台的网络游戏,甚至可以匹敌大型MMOR,在3G时代到来以后,我们很快可以在手机上玩到大型网络游戏,现有的Flash制作网络游戏有:SLG类(热血三国),体育类(热血球球),RPG类(凡人修真),桌面(德州扑克),TD类(保卫家园)等等。在日本和美国,动画和游戏这一类的技术超出国内比较多,日本的动漫位居世界前列是众所周知的[9]。

未来是一个高用户体验的互联网时代,普通的网站已经很难满足日益高涨的用户

需求。Flash网站就是在这种形式下成为了网站发展的一种趋势[10]。越来越多的高端企业用户在选择网站时都更加的趋向于Flash网站,尤其是在一些对用户体验较高的行业。随着Flash网站技术的普及、网络带宽的提高、网站优化技术的逐渐成熟以及企业对用户需求的重视,Flash网站会被越来越多的企业接受成为网站技术的主流。

第2章网站需求分析

一个网站项目的确立是建立在各种各样的需求上面的,这种需求往往来自于用户的实际需求或者是出于公司自身发展的需要,其中用户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网站开发拥有不同知识层面的用户,项目的负责人对用户需求的理解程度,在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求,并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员,保证开发过程按照满足用户需求为目的正确项目开发方向进行,是每个网站开发项目管理者需要面对的问题[11]。

2.1网站的界面需求

网站的界面颜色,根据我们网站的主题是史说汉字网站,整个动画节奏比较悠扬高雅,所以我们选择比较暗的颜色作为主色调,我们选择的暗色和网站主题正相吻合,体现出中国汉字的博大精深。

根据我们制作的网站主题,在界面排版上,根据调查用户需求的结果,我们在每个栏目页面都会有部分图片展示,再配以适当的文字说明,能够让访问者更加了解中国汉字文化的博大精深和历史悠久。

网站界面的动画要求,因为是Flash网站,所以整个网站的flash动画效果非常多。几乎没有静态的东西,正文都是滚动内容,还有交互效果,这样用户就可以自己点击,提高了网站的灵活性,也可以使用户对网站产生更多的兴趣。

2.2网站的功能需求

生活、工作中我们处处都需要资源。做网站也一样也是需要很多的资源。这些资源既可以充实网站又可以提供给用户。前提是我们要弄清楚用户的需求。

中国汉字文化博大精深,历史悠久,但是越来越多的人使用键盘书写,用惯了电脑的人手写汉字的能力会下降,我们的汉字那么美,传承又那么重要,因此开发这个网站的目的是达到宣传中国汉字文化,让人们对汉字有更多的认识和更多的了解。根据中国汉字文化的特点,我们分了七个栏目进行详细制作。

1.汉字听写:这是央视一档很火的节目,一代代孩子参加,成为全民关注的带有民族性质、国家精神的活动,这个栏目主要是宣传这个活动。

2.汉字艺术:中国汉字博大精深,这个栏目主要由各式各样的汉字图片来展现

出中国汉字的艺术魅力。主要是让大家来欣赏的。

3. 汉字历史:这一栏目主要讲述了汉字的起源,汉字的故事,汉字的演变,让人们对汉字有一个初步的了解。

4. 汉字文化:这一栏目主要介绍了汉字风俗,汉字遗存,汉字书法,描述了汉字的博大精深。

5. 汉字专题:这一栏目主要对甲骨文、金文、大篆小篆、楷书隶书做了详细介绍,让人们进一步的去了解汉字。

6.汉字资源:这一栏目主要介绍了汉字字体,汉字特点,汉字字典,图文并茂,让人们更深入的了解汉字。

7. 汉字论坛:给广大用户提供一个交流和探讨的平台,方便中国的汉字文化的传播。

2.3网站制作目标

随着越来越多的人使用键盘来敲打汉字,用手书写汉字逐渐被人们遗忘,所以本网站的主要任务是制作一个宣传中国传统文化汉字网站,并实现在线交流的功能。这个网站面向的用户可以是网络上的任何人,所以本网站的目的旨在宣扬中国博大精深的汉字文化。

我们对这个网站进行了七个方面的介绍,分别有汉字听写,汉字艺术,汉字历史,汉字文化,汉字专题,汉字资源,汉字论坛,在七个大方面下又各自分有子栏目。在前台,是对汉字文化各个方面和层次的细致介绍。后台是要实现在线交流发帖功能,网站还设置了管理员权限,管理员可以在管理界面内对浏览者所发的帖子进行回复、修改、删除等操作。

2.4网站可行性分析

首先,在技术方面,我们所做的网站是用Flash、PhotoShop和https://www.360docs.net/doc/0918899404.html,技术来实现的,数据库使用的是SQL Sever 2005。这些技术所使用到的软件在市场上销售价格较低,网络上也有下载版本,在网站开发中已经被大量使用,比较成熟,技术上是可行的。

其次,在适用性方面,因为我们做的是史说汉字网站,介绍的是中国汉字文化,所以汉字的博大精深和历史悠久一定要显现出来。我们在进入页面就把主题很鲜明的

突出来,再次是首页,首页中间分别用“惊天动地,博大精深,汉字独创,最新热讯”这四个词总的概括了汉字的特点,并且每个词旁边还配有相应的图片,最后是各个二级页面和三级页面,我们将整个网站分成以下七个方面来介绍,分别有汉字听写,汉字艺术,汉字历史,汉字文化,汉字专题,汉字资源,汉字论坛,这样既可以让用户对中国汉字的博大精深和历史悠久有一定了解,又可以让用户知道关于汉字的最新动态,所以,在技术上,适用性上,都是可行的。

2.5网站前台页面分析

网站前台分为开场动画,首页,二级页面,三级页面。

在色彩上,网站整体以暗色为主色调,符合中国汉字的特点,这样更容易展现中国汉字的内涵和魅力。网站以介绍中国汉字的起源及文化为主,加上网站的最新热讯,把最近所推出的关于汉字的热点如:汉字英雄,汉字听写大会等,也给展现出来。

在总体板式上,首页和各二级页面为独立板式。三级页面,每个栏目下的子栏目为统一板式,但不同栏目下的子栏目板式不一样。

在每个二级页面里,除了导航可以进入三级页面外,各二级页面也加入了按钮链接,更方便进入三级页面。

因为我们选取的课题是关注社会热点话题文化传播类的汉字网站,颜色就不能太过华丽,所以在色彩上用了暗色为主色调,看起来更和汉字特点相呼应。虽然没有使每个页面的板式不一样,但各栏目下的三级页面统一,简单而不失单调,这样更能给人整齐一致的感觉,也使访问者一目了然,不浮夸。

2.6网站后台数据流程分析

根据网站在线交流功能的要求,建立数据库,以下是表的各数据项[12]。

1.用户登录信息表:dbo.tb_Admin

标识:AdminID。

用户登录信息表:用户登录ID号(AdminID),用户名(AdminName),密码(AdminPwd)3个字段。

2.论坛模块表:dbo.tb_Module

标识:ModuleID。模块信息表:模块号(ModuleID),模块名称(ModuleName),创建模块日期(ModuleDate)3个字段。

3.帮助表:dbo.tb_Help

标识:HelpID。

帮助信息表:帮助序号(HelpID),帮助名称(HelpName),帮助内容(HelpConcent),3个字段。

第3章 网站设计

Flash 网站以其效果明显、内容丰富的特点在互联网上越来越为大家所熟识并接受。Flash 可以将音乐、动画、视频等诸多元素加入原本枯燥的网站页面,呈现的效果深受网友喜爱[13]。

Flash 网站设计包括的内容有:网站的主题、要用什么样的元素,哪些元素需要重复使用、元素之间的联系、元素如何运动、用什么风格的音乐、整个网站可以分成几个逻辑块、各个逻辑块间的联系如何等[14]。

3.1 网站结构图

整个网站结构整齐,分为开场动画,首页,二级页面和三级页面。二级页面有“汉字听写”、“汉字艺术”、“汉字历史”、“汉字文化”、“汉字专题”、“汉字资源”、“汉字论坛”,在每个二级栏目下又细分了3到4个三级栏目。 图1 网站结构图

3.2 网站开场动画设计

勿庸置疑,开场动画在网站中所占的地位是非同小可的,因为好的开场动画可以

首页

汉字听写

汉字艺术 汉字历史 汉字文化 汉字专题 汉字资源 汉字论坛

节目简介

节目赛制

相关新闻

汉字设计 汉字图片 汉字头像 汉字演变 汉字起源 汉字故事 汉字书法

汉字遗存

汉字风俗 甲骨文专题 金文专题 大小篆专汉字特点 汉字字典 汉字字体

对整个网站起到极佳的推动作用,会给浏览者留下极深的印象,使整个网站的层次有所提高。

开场动画,我们设计的比较有中国文化特色。打开网站后,优雅的古筝音乐开始响起,首先映入大家眼帘的是我们整个网站的logo。先由墨水画成一个半圆,紧接着中间出现史说汉字四个字,logo背后是一幅风景画,给人一种高山流水的感觉,天上飘着朵朵白云,时不时还有大雁飞过,给人一种非常逼真的感觉,下方是整个动画的倒影,这是整个网站的特色之处,右下角是进入首页按钮,点击就可以进入首页。

网站开场动画伴随着琴声和笛声缓缓展开,流畅的动画将网站界面展示给浏览者,能给浏览者清新优雅的感觉,整个开场画面风格古朴,给浏览者留下深刻的印象。网站开场动画如图2所示:

图2 开场动画

3.3网站一级页面设计

首页动画是整个网站的重点内容,一进入首页时,清脆优雅的琴声便开始响起,首页的左上角是网站的logo,右上角是音乐控制按钮,点击可以播放暂停音乐。最有看点的是中间的内容,中间有四个大字,分别是“地,深,创,讯,”并且每个字下方还有倒影,滑动鼠标到每个字的旁边,就会出现相应的内容,例如将鼠标滑动到创字旁边,就会出现完整的词语汉字独创,并且会有相应的图片出现,图片内容是先出现一个慢慢生长的竹子,等竹子长完以后,会飞过来两只小鸟,小鸟先飞到竹子上,

再飞到地下,并且鸟还会叫,竹子下面坐着一位老人在弹琴,随后鸟飞走,竹子向右移。其他三个字同创类似,中间内容最大的特色就是非常的灵活,可以滑动鼠标到任何一个字的旁边,欣赏内容。

网站主页分上中下三部分展示:左上方是网站的logo,右上方是音乐控制按钮,中间左边是网站的导航,导航也很有特色,导航是由一条弯曲的线穿成的,线上有忽明忽暗的小圆点,为整个导航添加了几分神秘色彩,忽明忽暗的小圆点旁边就是网站的二级栏目。把鼠标放到二级栏目上,二级栏目下就会出现三级栏目,中间是文字和图片,上面已做详细介绍,这里就不在做介绍了,下方是网站的版权信息。

如图3所示为首页效果图及部分代码:

图3一级页面

Active_x = 0;

Status_x = 0;

_root.onState= false;

_root.btn_1.onRollOver = function(){

if(!_root.onState || _root.Active_x != 1){

_root.mn_1.gotoAndPlay("start");

_root["mn_"+_root.Active_x].gotoAndPlay("end");

_root.Active_x = 1;

_root.onState = true;

……

代码所代表的含义指的是:这是鼠标经过事件,给加载控件和状态信息的横坐标设为0,没有鼠标经过时,导航无任何状态信息,当鼠标经过导航按钮时,触发事件,控件mn_1调用控件“start”,出现下拉菜单,当鼠标移开导航按钮时触发“end”事件,状态信息为“true”,即下拉菜单不收回,保持原状。

3.4网站二级页面设计

网站的二级页面分为:“汉字听写”,“汉字艺术”,“汉字历史”,“汉字文化”,“汉字专题”,“汉字资源”六个板块。在样式上,每个板块的样式都不同,达到了不同的效果。我们在二级页面的设计上,我们采用的颜色大体统一,新颖而不失美观,简洁而不失大气。并且在二级页面上,除了点击导航上的三级子栏目外,也可以在页面上找到相应的按钮进入三级页面。如图4所示二级页面效果图展示及部分代码介绍,

图4二级页面

下为实现图片展示的部分代码:

onClipEvent (enterFrame) {

//当该影片剪辑的X坐标值大于等于0时,设置该影片剪辑的X坐标值为0

if (this._y>=0) {

this._y = 0;

//当该影片剪辑的X坐标值小于等于-587时,设置该影片剪辑的X坐标值为-587 } else if (this._y<=-563) {

this._y = -563;

}

speedY = -(_root._ymouse-225)/20;

this._y += speedY;

}

上述代码所包含的含义是:当鼠标经过左侧的小图片时,会以设置的速度快速的浏览图片。当点击小图片时,右方相应的大图片也会随之以擦显的方式出现,效果比较特殊。

3.5网站三级页面设计

网站的三级页面,为各栏目下的详细介绍,是将每个二级栏目细分为3到4个子栏目,分别进行详细介绍。在风格上,每个二级页面下的子栏目样式统一,整齐简洁,更能彰显网站的大气。

史说汉字网站展示主要是在“汉字听写”,“汉字艺术”,“汉字历史”,“汉字文化”,“汉字专题”,“汉字资源”六个栏目中进行详细介绍,各个板块下的三级页面形式各异,但是每个板块下的三级页面风格是统一的。

以下截取了“汉字艺术”栏目下的“汉字图片”页面作为展示,如图5所示:

图5三级页面

此页面特色就是形式比较独特创新,在页面中间放置着一个大琵琶,时不时还会有树叶飘落,琵琶中间的图片会来回放映。在图片放映的同时,琵琶右上方会出现相应的文字介绍,琵琶下方还有交互按钮。用户可以点击切换欣赏,琵琶右下方是一个桃花瓣的返回按钮,点击返回可以返回到二级页面。整个页面的效果符合了“汉字艺术”这个主题,展现形式别具一格。

3.6各数据表结构

数据库技术随着数据应用和需求的变化而不断发展。创建数据库的过程就是确定数据库的名称、所有者、大小以及存储该数据库的文件和文件组。以下为数据库的三张表结构:

1.用户登录信息表:dbo.tb_Admin,表中信息如表1所示:

表1用户登录信息表

2.浏览模块信息表:dbo.tb_Module,表中信息如表2所示:

表2浏览模块信息表

3.帮助表:dbo.tb_Help,表中信息如表3所示:

表3帮助表

3.7数据库的连接

数据库是用于存储数据信息的系统,通过其他语言程序可以读取数据库中信息,或将信息存储到数据库中[15]。本网站数据库的连接采用的是https://www.360docs.net/doc/0918899404.html,技术。

我们制作网站的数据库连接将代码写入了Web.Config文件,以下为部分代码:

3.8数据读取页面功能

在“汉字论坛”功能里,主要是提供“在线浏览帖子”、“用户登录”、“发表帖子”,管理员还可以“管理帖子”、“管理模块”、“管理用户”功能。在论坛里,用户可以畅所欲言,有好的关于中国汉字文化的帖子都可以积极发表,在论坛里发现好的帖子也可以好好收藏。

首先是进入系统主页面,如下图6。论坛的首页由浏览版块、浏览帖子、管理版块、管理帖子、管理回帖、管理用户、返回论坛首页、退出论坛八个板块组成,单击用户登陆则进入用户登陆界面;单击注册新用户则进入用户注册界面;单击浏览板块可以对整个网站的总板块进行浏览,可以了解整个论坛的大结构;单击管理帖子和管理回帖,可以对所有用户发表的帖子进行审核管理;单击管理用户可以删除和添加新用户;单击退出论坛将进入整个论坛的前台Flash页面;图6为以管理员身份登录以后的主界面。

图6主界面

第4章网站测试

每一个成功的网站都是需要经过测试的,测试在网站的制作中发挥着不可取代的作用。测试网站的运行结果,各个页面之间能否正常跳转,论坛功能是否实现,数据能否正常录入等功能。

4.1网站运行环境

网站运行环境:

操作平台:Windows XP/ Windows 7。

数据库:Microsoft SQL Server 2005。

运行环境:Microsoft Internet Information Services (IIS) 5.1。

4.2测试结果及分析

1.测试结果

第一,先根据程序说明文档配置IIS,在Microsoft SQL Server 2005里添加数据库后,还需要将本地数据库名称添加到网站数据库安全性用户中,然后进行测试。

第二,片头的测试,片头总共有4个场景的切换,先是出来一个字的页面,音乐伴随这出来,然后出来一个带有人物的画面,接下来出现一个竹简页面,最后出现一个燕子在天上飞并带有字的页面,每个页面都有倒影。首页没有完成原定设计要求,因为有一个页面不好搭配,就把他给删了,就重新做了一个页面。

第三,首页的测试,首页设置效果是先出来LOGO,在出来导航,然后出来各个栏目和整个首页的设置,然后点着哪个栏目,下面的子菜单就会出来,同时首页上的文字和图片也会自由切换,,点击音乐就会播放,在点击音乐就会停止。首页基本上是完成了原定设计要求,就是运行时出错了很多,就把首页又重新做了一遍。

第四,二级页面汉字历史的测试,这个页面是有导航和图片组成的,导航放在页面的左边,这个导航设计的比较有特色,是有LOGO形状组成的,上、左、下是他的三个导航,点击任何一个就可以进入三级页面,右边放了四张介绍汉字的图片依次展开,下面还有倒影,这就是这个页面设置效果。这个二级页面没有完成原定设置效果,本来是要在图片上加交互内容的,但是就是和想象的不一样,做不出来。

三级页面汉字故事的设置效果,先出现一个墨状展开,下来有桃花飘下,墨状展开之后里面有图片自由切换,每切换一张图片旁边就会出现不同的文字介绍,下面还

相关文档
最新文档