《毕业论文-计算机.doc》由会员分享，可在线阅读，更多相关《毕业论文-计算机.doc（31页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-date毕业论文-计算机毕业论文-计算机安徽农业大学经济技术学院 毕 业 论 文（设计）论文题目 FLASH网站的设计与实现 姓 名 徐浩 学 号 06538074 院 系 经济技术学院 专 业 计算机科学与技术指导教师 范国华、吴国栋 职 称 助教 、副教授 中国合肥二o一o年 六 月 安徽农业大学学士学位论文（设计）开题报告课题名称Falsh网站的设计与实现课题来源指导老
2、师学生姓名徐浩专业计算机科学与技术学号06538074指导教师姓名范国华，吴国栋职称助教，副教授研究内容1关于FLASH CS3中关于网站制作的特殊优势，以及PHP语言 在FLASH网站的制作的应用。2对于FLASH网站整体外观的设计流程的研究。3对于FLASH网站各个模块的图层的功能以及作用的研究。4对于FLASH网站的测试与发布的研究。研究计划2009121 - 12.15 做整体的需求分析并完成开题报告；201011- 1.10 完成网站的初步建模；201022 -3.15 对网站制作的素材的制作与收集；2010511 - 5.20 总结毕业设计结果并书写毕业设计说明书。特色与创新该课题
3、以基于FLASH CS3以及php编程语言的个人网站，为纯FLASH制作。主要为针对个人的信息网站，集文字浏览，图片浏览，视频播放。音乐播放为一体的多媒体网站。加入人性化设计留言系统。指导教师意见教研室意见院系意见主要领导签名：年 月 日目 录摘要11 引言11.1 FLASH网站阶段11.1.1 FLASH网站特性11.1.2 FLASH 在未来的互联网中的发展趋势22 FLASH网站制作的基础知识32.1 FLASH 网站制作的基本流程32.2 Flash CS3的工作环境32.2.1 工作区域32.2.2 舞台32.2.3 场景42.2.4 时间轴窗口42.2.5 Action Scri
4、pt 的工作界面52.3 工具面板52.4 符号和实体53 FLASH网站的设计及制作过程63.1 FLASH网站的设计思路63.2 FLASH 网站的详细制作过程63.2.1 FLASH 文档的创建63.2.2 FLASH 网站舞台的制作73.2.3 进度条以及音乐播放的实现113.2.4 导航条的制作113.2.5 网站内容的制作124 FLASH网站的测试185 FLASH网站的发布186 小结18参考文献18致谢19-Flash网站的设计与实现 作者：徐浩 指导老师：范国华，吴国栋（安徽农业大学 经济技术学院 合肥230036）摘要早期的网站只有一些简单的表格构成，显的很单调，且不够美
5、观，再加上功能的局限性，很难吸引住人们的眼球。在网络带宽不断增加的今天，Flash动态网站已经成为网站设计的未来趋势，同时也是多媒体网页设计的最佳解决方案，应用广。本文介绍了Flash网站制作中最基础的知识以及在Flash CS3软件环境下制作FLASH网站的应用方法。在图片处理方面使用了Photoshop CS3,并且采用了图片合成的方法完成了图片的后期制作。整个网站中的布局设置，场景切换等都是采用比较传统的选择等场等。关键字：Flash;动态网站;设计;网络1 引言1.1 FLASH网站阶段1.1.1 FLASH网站特性 随着互联网的不断普及以及网络技术的不断发展，人们已经不再满足于静止呆
6、板的网站页面，FLASH的出现正好弥补了这个缺陷，他逐渐成为人们开发与设计站点的首选工具，它与现有的网站开发相比，具有优良的特性。首先具有无与伦比的动态效果，用其制作的动态效果与其他专业软件相比，生成的文件非常小，从而适于网络传播 。过去设计站点需要使用Photoshop 或 Firework 进行设计和切图，再用Dreamweaver 整合页面排版，制作网页代码，最后使用其他工具或手工添加JavaScript代码进行客户端处理。使用这种方法使各个软件都占有重要地位，而使用Flash只需要一种软件就可以。制作成本也相对低廉，使用Flash可以实现原本需要多种技术才可以实现的效果这样一来就使设计
7、过程简化了，降低成本，且是风格统一，运行流畅。Flash本身的动画功能，可以更加丰富页面效果，对于电子商务网站来说，可以对商品进行更加详细的介绍。例如可以实现虚拟现实技术，将他插入到网页的各个角落，而使用一般的虚拟现实技术就会显得厚重，不像Flash那样轻松，灵活，所以对电子商务网站的建设，使用Flash可以更加方便的展示产品，进而促进用户购买。使用Flash设计网站不再需要HTML的介入，因此与数据库连接程序简化到了仅与数据库直接连接就可以了。 1.1.2 FLASH 在未来的互联网中的发展趋势 Flash被称为是“最为灵活的前台”，由于其独特的时间片段分割（TimeLine）和重组（MC嵌
8、套）技术，结合ActionScitp的对象和流程控制，使得在灵活的界面设计和动画设计成为可能，同时它也是最为小巧的前台。Flash具有跨平台的特性（这点和Java一样），所以无论你处于何种平台，只要你安装了支持的Flash Player，就可以保证它们的最终显示效果的一致，而不必像在以前的网页设计中那样为IE或NetSpace各设计一个版本。同Java一样，它有很强的可移植性。Flash作为网上动画制作软件佼佼者，已经广泛地运用于网页设计、广告设计、游戏开发等基于Web的各个领域，并逐步向多媒体、影视视频、产品展示、远程教育等各种传统领域渗透。由于Flash易学易用，短时间内涌现出一批Flas
9、h爱好者，能制作各类相当逼真的动画如卡通、商业片头、MTV作品和教学课件等。Flash动画的盈利点一是娱乐平台，尤其是儿童娱乐平台。现在能让孩子浏览的网站太少了，如果做得好，会有很多儿童产品商家来做广告。如：WWWsuflashCOM(超闪网)上面提供Flash音乐、游戏、短片等。Flash广告制作公司。Flash以其制作成本低，会成为电视、网站等媒体广告的首选。另一方面，手机从打电话到发短信，再到听MP3等，逐渐成为个人娱乐平台，自然也不会少了Flash，其文件不大，也可以动态传播。随着目前手机功能的增加以及对无线网络的支持，已经有越来越多的手机支持Flash Player了。正是因为在未来
10、互联网中，Flash正是因为其广泛的应用被更多的人所接触和接受，它独特的风格也一定会在未来的互联网中占有自己更多的空间。2 FLASH网站制作的基础知识2.1 FLASH 网站制作的基本流程首先要根据自己的建站要求，包括站点的基本情况，网站栏目结构，网站的基本功能，网站的页面设计风格等；然后整理自己的需求结构，确定网站的类型，依据网站的类型对网站结构进行规划，确定网站栏目的设置。依据网站的类型搜集整理相关素材，包括所需要的文字，图像，声音，视频资料等。设计网站的界面，将网站中各个界面绘制到纸上或使用绘图工具绘制，也可以直接使用Flash直接将其制作出来。将各个场景通过Action Script
11、脚本连接起来，并为相关的按钮设置Action Script脚本动作。测试Flash网站，并对错误进行改正。发布Flash网站，并在互联网上进行传播。2.2 Flash CS3的工作环境2.2.1 工作区域工作区域就是Flash的工作平台，它是一个比较大的区域，实际上涵盖了下面要说的舞台以及画图和编辑动画的工作对象，可以把它看作是后台和舞台的结合。2.2.2 舞台舞台是Flash动画中各个元素的表演平台，舞台将显示当前选择的帧的内容。与工作区域不同的是：动画发布后只有在舞台上的内容才能被看到，而舞台之外的工作区域中的内容就如同在后台的演员和工作人员一样不会被观众看见2.2.3 场景就像戏剧可以有
12、几幕一样，舞台上也可以放下几个场景。注意在舞台的右上部分，有两个小按钮，其中的第一个就是场景切换的按钮。可以通过不同的场景之间的交互性，来创作出非常复杂的动画。2.2.4 时间轴窗口时间轴窗口用于对Flash的两个基本元素层和帧进行操作。在系统缺省设置下，时间轴窗口以编辑栏的形式出现在舞台的上面，紧靠上边框。使用者可以根据需要或爱好，用鼠标拖动该编辑栏到Flash界面的其它位置，甚至将其拖出边框，使之成为可自由移动的浮动窗口。时间轴控制窗口分为左右两个区域，它们分别是层控制区和时间轴控制区。Flash的层与Photoshop中的层的概念是差不多的，它们都是透明的，只不过在Photoshop中是
13、指图层，而在Flash中是指动画层。使用层可以设定动画中各元素的上下叠放次序。层控制区位于时间轴窗口的左边，是进行层显示和操作的主要区域，由几个层功能操作示意列和按钮组成。当前舞台中正在编辑作品的所有层的名称、类型、状态都会按照层的放置顺序排列在层示意列中。在层控制区中，不但可以显示当前作品的层及所属信息，还可以对某一个或部分层进行操作，如新增层、删除层、改变层的放置顺序等。有关层的操作请参见层的操作。这里要提醒大家的是，层的使用不会增加文件的规模，相反，合理地使用层可以在设计时使各个层层次清晰且易于编辑，所以最好在初学的时候就养成使用层的习惯。时间轴窗口的右半部分是时间轴控制区域，该区域主要
14、由若干行与左边层示意列对应的帧序列、示意列、时间轴标尺、信息提示栏以及一些用于控制动画显示和操作的工具按钮组成。它用于对各帧的播放和放置进行有效的控制. 利用时间轴窗口安排好素材的空间位置和时间位置能够制作出比较好的动画效果。2.2.5 Action Script 的工作界面 Action Script的工作界面分为语言库、元件库、以及代码区、函数库中重要存放了关于代码中一些常用的动作、变量、函数等等、元件库中则是一些需要定义的元件，例如按钮，影片剪辑等等。则个代码区有分为代码编辑区以及相关的动作条。这个工作界面功能齐全，也是FLASH CS3可以独立工作的一个总要原因。2.3 工具面板如果没
15、有看见工具面板，可选菜单Windows- Toolbar。在弹出的对话框里选Drawing就可以了。Flash的工具面板包括Flash所有选择工具和绘图工具。工具栏包括两个区域：一个是选择区，它在工具面板的上半部，用于选择所需要的工具；另一个是属性区，是用于对所选工具进行一些属性的设定。2.4 符号和实体 对于大多数刚刚接触Flash的人来说，符号（Symbol）和实体(Instance）是一对比较特别的概念，但是它们并不难理解。简而言之，符号是可以重复利用的图像（Graph)、按钮（Button）或是动画(Movie Clip)；实体则是符号在舞台上的具体体现。如果先创建了一个动画符号，把它
16、放在舞台上，那么舞台上的这个动画就叫做实体。 引人符号的概念对于动画的设计人员是大有好处的。首先，在处理大量元素时，不会手忙脚乱。如果电影中有大量的重复元素，而要对它们进行修改时，就不再需要对每一个实体进行修改，只要改变符号就可以了，因此，编辑工作大大简化了。此外，符号的使用可以显著减小文件的规模，保存经常使用的符号所需要的空间要比保存所有数据的小得多。比如，多个场景中使用了同一个背景符号，就不需要保存全部场景中的背景图像，而只要保存几个引用信息就可以了。使用符号对在网络上播放的动画来说还有一个好处就是在用户观看时，符号下载到用户端只要一次，而不用重复下载多个同样的元素，这样可以大大加快动画的
17、播放速度。3 FLASH网站的设计及制作过程3.1 FLASH网站的设计思路我设计一主要倾向于个针对个人的一个网站，主要用于关于个人一个展示，如果关于自己的性格来看，个人感觉网站的内容应该简介，清晰，颜色要显的沉稳，所以这个网站的整体颜色采用了比较沉稳的蓝色以及沉稳而生动的银色，如果整个网站中全部使用蓝色又会显得呆板，所以在其中配备了小规模的黄色于绿色来增强了网站的活力，同时也提高了网站的亲和力。在网站结构上采用了网站设计常用的上，中，下的结构形式，在网站的上面，为网站的BANNER条与导航条，在中间的也称为内容区，为网站所要表达的内容区域，点击导航条中的不同按钮，此区域会出现不同的内容，是网
18、站最重要的部分，在最下面为网站的地步区域，一般用于网站设置的联系方式以及一些相关的联系信息。由于我设计的是多媒体网站，我想网站的内容应该包括文字，图片，视频音乐为一体的多功能网站，所以我给自己的导航条设立了4个板块，分别是自我介绍，照片，视频，留言板。3.2 FLASH 网站的详细制作过程3.2.1 FLASH 文档的创建因为一个动态多媒体网站的应用的相关命令与组建主要在于Action Script2.0,所首先打开Flash CS3创建一个为Action Script2.0的Flash文档，如图1。图1 Flash文件创建3.2.2 FLASH 网站舞台的制作在文档属性里设置一个600*60
19、0且背景为蓝灰色，帧数为30的背景，如图2。图 2 背景的设置新建3个名为“白色底”，“黑色底”，“蓝色底”的图层，在其中分别用矩形工具绘制3个大小为420*500，420*500，400*450的圆角矩形。在“白色底”中将矩形的背景颜色设置为白灰色，帧频为30，在形状面板中柔化填充边缘，最后转换成影片剪辑，如图3。图3 白色底的创建在“黑色底”中将矩形背景色设为黑色，帧数为30，转换成影片剪辑，然后在滤镜中添加模糊效果，如图4。图4 黑色底的发光效果在“蓝色底”中矩形的背景色设置为蓝色，然后调整其位置，转换成影片剪辑，然后在滤镜中添加模糊效果，如图5。图5 蓝色底背景继续创建名为上图，下图的
20、2个图层。在“上图”中导入图片“paper1”并调整其大小以及位置，并将其转换为影片剪辑如，如图6。图6 上图在“下图”中导入图片“paper2”,并调整其大小以及位置，并将其转化成影片剪辑 ，如图 7。图 7 下图在上图中在创建个“遮盖”图层，然后将“蓝色底”中的蓝色矩形的影片剪辑复制进去，选则粘贴到当前位置，然后将该图层设置成遮盖层。然后将“上图”和“下图”两个图层分别拖到“遮盖”图层的下方，则可以完成遮盖效果。在遮盖上增添一个图层“底条”，并在该图层绘制一个矩形颜色为灰白色，将其Alpha调整为20%，转换成影片剪辑，如图8。图8 底条在“底条”上添加一个名为“底条文字”的图层，并在“底
21、条”图层矩形位置输入文字“welcome to my home”,转换成影片剪辑，如图9。图9 底条文字 新建个“底条”的文件夹，拖入“底条”和底条文字“两个图层，便于管理。至此，网站背景大致完成。3.2.3 进度条以及音乐播放的实现 在“底条”文件夹上新增个“进度条”图层，并在上绘制一个进度条，并将其转换为影片剪辑元件，如图10。图10 进度条在进度条上新建一个图层“声音播放”，并拖入公用库里面的按钮，用做音乐播放，停止两功能，选择播放按钮，为其添加行为，选择加载的音乐URL为“sound2.mp3”,选择停止按钮，同样在行为面板中为其添加行为“停止所有声音”自次便完成了，音乐进度条的以及音
22、乐播放的实现，如图11。图11 声音播放3.2.4 导航条的制作新建图层“导航底”，绘制一个Alpha为80%的矩形，如图12。图12 导航条的创建分别在导航底的16，17，19，20帧处创建关键帧。在第1帧将其大小调至靠左最小，16帧处恢复大小，在1到16帧处创立一个形状补间动画，缓动100。17帧处将矩形向左略微缩小，在19帧处恢复原来大小，并在17创立形状补间动画，缓动100。20帧矩形不变，整体帧，如图13。图13 创立补间动画在导航底上创建一个新的图层“介绍”，创建一个内容为“Introduction”文字影片剪辑，效果如图14。图14 介绍在导航条上创建一个新的图层“about m
23、e”,在其上创建一个名为“about me”的按钮元件，制作一个）的导航条按钮，用同样的方法创建同样名为“picture”, “picture”，“leave word”的导航条图层及其按钮，效果如图15。图15 导航条内容在“about me”， “picture”， “picture”， “leave word”图层的20，30帧插入关键，并在之间创建补间动画。创建一个名为“导航条”的文件夹，并且将以上4个图层突入该文件夹。自此导航条完成。3.2.5 网站内容的制作About me内容的制作创建一个名为“内容文字”的图层，在该层84帧擦入关键帧。用文本工具创建一个动态文本框，进入属性面板，
24、设置变量为about_me,实例名称为textarea.将此动态文本框转换为影片剪辑元件，如图16。图16 动态文本框然后进入该影片剪辑元件编辑界面，插入组件面板中名为“UIScrollbar”的下拉组件拖入相应位置。并设置该组件的相应参数为 textarea。然后选择文本框和该组件，转换为影片剪辑元件。并在该影片剪辑元件属性面板设置其实例名称为“wenzi”。且为该影片剪辑图层1第一帧中添加动作脚本：onClipEvent(load) this.loadVariables(site.txt);onClipEvent(data) about_us=txt;进入该影片剪辑编辑界面，同样在图层1的
25、15帧处加入该代码。然后在图层一的1到15帧创建动作补间动画。新建图层2，在15帧插入关键帧，并在该帧输入代码Stop();然后进入场景，将about_me目录下的所有图层在90帧处插入空白关键帧，从而使动画播放到此为止。在图层“帧标记”上创建一个“action”的图层，并在该图层89帧处插入关键帧，然后在89帧出输入动作“Stop（）;”下面我们进入“picture”内容的制作，首先我们先在“帧标记”图层中90帧插入关键帧，然后在属性面板中的帧标签中输入“picture”。 然后新建一个“导入图像”图层在97帧处插入关键帧。在该图层上绘制白色图像，并转换为影片剪辑元件，如图3-18，之后分别
26、在104.105.106帧处插入关键帧，97帧处的图像大小调为10%，104帧处为105%，105帧处比例变为96%，然后在97到104帧处创建一个补间动画，如图17。图17 图片浏览框 继续创建一个名为“替换图像的影片”，在106帧处插入关键帧。然后将“导入图像”106帧处的图像复制到该图层106帧处，然后在119帧处插入关键帧，并将该帧的影片剪辑的Alpha调为0%，然后在106到109帧处创建动作补间动画。再创建一个名为“遮罩”的图层，同样在106帧处复制，然后将该层设置为遮罩层。以上都为“picture”内容的图层，然后依次在他们的120帧处插入空白关键帧即可。同样，在“帧标记”119
27、帧处插关键帧，也需要在“Action”图层的第119帧处插入“stop();”如果要完成图片的浏览则需要在“Action”图层106帧输入以下代码 i=1;loadMovie(a+i)+.jpg, mov);在按钮图层中向左的按钮输入以下代码：on(release)gotoAndPlay(tu);if(i=2)i-;loadMovie(a+i)+.jpg, mov);elsei=1;gotoAndStop(tu1); 在按钮图层中向右的按钮输入以下代码：on(release)gotoAndPlay(tu);i+;if(i4)i=4;gotoAndStop(tu1);loadMovie(a+i)
28、+.jpg, mov);下面关于“video”内容的制作与“picture”制作的原理相同，只是该内容是一个119到140帧的行为，所以要在”Action”图层的140帧处插入：Stop（）;且为PLAY和STOP两个按钮分别在行文面板中添加播放镶入动画和停止播放动画的行为。将电影的影片剪辑拖入舞台并调整其大小和位置，如图18。图18 动画遮盖的位置调整最后是关于“Leave word”内容的制作创建一个名为“留言内容”的图层，在内分别用矩形工具和T工具绘制，如图19，然后将其转换为影片剪辑工具。图19 留言进入该影片剪辑编辑界面，创建个“文字”图层，分别绘制文本框，分别设置其变量名为user
29、name,mail,leave。创建个“ Action”图层，在第一帧输入代码stop();username=;mail=;leave=;第二帧输入代码stop();再创建按钮图层，添加“ 清除”“发送”两个按钮。“发送为“清除”按钮添加动作代码：on (release) username=; mail=; leave=;为“发送”按钮添加动作代码on (release) if (username=) txtmessage = 请输入您的姓名.; else if (mail=) txtmessage = 请输入您的邮件地址.; else if (leave=) txtmessage = 请您留
30、言; else loadVariablesNum(leave.php, 0, POST);txt= username+您好,+您的留言已发送;gotoAndStop(2);在第二帧中的返回按钮加入代码on (release) gotoAndStop(1);最后进入场景在“action”图层的180帧处添加动作代码stop();以上步骤即完成了对网站内容的制作。最后进入导航条内容，为30帧的about me按钮添加代码on (release) gotoAndPlay(about);同理分别为其他按钮添加以上代码，借此完成对网站各部分内容的连接。4 FLASH网站的测试 打开控制测试影片，即可观看
31、网站效果，对网站内容进行修改。5 FLASH网站的发布打开 文件-发布设置，在发布的格式中选则swf和html两种类型单击“发布设置”的FLASH选项卡，版本为“Flash Player 9” 。“Action Script”版本为“Action Script 2.0”完成后单击“发布”即完成该网站的发布。6 小结 我用了一个月时间制作了这个FLASH网站，并且在后期，在界面上做了些改进，当然也借鉴了一些网站的动画效果，网站的制作不是很复杂，但是制作前的准备以及制作后的改进花费了我大量的时间，也希望这个作品可以为我大学四年划上一个完美的句号。 亲爱的老师们，这个作品可以当做我在大学的最后一次考
32、试，也是我向你们告别的方式，对你们我很留恋，也很敬佩，但是天下没有不散的宴席，我要离开学校了，我会记住你们的教导，去开创自己的一片天。参考文献1孙宝国； Flash CS3基础教程 ；西北工业大学出版社；2008.72徐保民；PHP编程基础及应用实例；南京工业大学出版社；2005.63胡菘； FLASH CS3特效设计150例；中国青年电子出版社；2008.84 Derksen.N Berg；ActionScript2.0编程；清华大学出版社；2006.55 Robert.panner FLASH CS3的编程与实现；清华大学出版社；2007.8英文摘要Design and Realizati
33、on of Flash WebsideStudent:Xu Hao teacheers:Fan GuoHua,Wu GuoDongABSTRACT ：The early site constitutes only some simple form, which was very monotonous, and not beautiful, combined with functional limitations, it is difficult attracted peoples attention. In todays ever-increasing network bandwidth, F
34、lash dynamic web site design has become the future trend, but also the best multimedia web design solutions.This article describes the most basic Flash site of knowledge production and the environment in flash CS3 software，the application of methods of production FLASH website. In the image processi
35、ng used PhotoshopCS3, and image synthesis method used to complete the picture of post-production. The layout of the site settings, scene changes and so are more traditional choices such as farms.Keywords: Flash; Dynamic Website; Design; Internet致谢在网站的设计制作过程中，由于本人是初次制作，在知识和经验方面都存在着不足，另外时间也比较仓促，因此存在着很多方面的缺陷和不足。因为以前只有初略学过这方面的知识，对FLASH制作过程的不熟练，因而可能远远达不到老师的要求，请老师见谅。在本次毕业设计的制作过程中，指导老师范国华老师给了我很大的帮助，在细节上的关键性问题都会及时清楚的帮我解答，在大的方面上整个毕业设计的思路和设计方向上都及时的纠正许多我不清楚的地方，通过这次毕业设计我从指导老师和书籍上学到了很多以前课本上没学到的东西，极大的充实了我的知识量，为日后步入社会又增加了一条路，在此，特别感谢指导老师范国华老师的耐心辅导。