学院网站设计-基于网站的flash设计---本科学位论文

《学院网站设计-基于网站的flash设计---本科学位论文》由会员分享，可在线阅读，更多相关《学院网站设计-基于网站的flash设计---本科学位论文（29页珍藏版）》请在装配图网上搜索。

1、毕 业 设 计（论 文）设计（论文）题目： 学院网站设计基于网站的flash设计系 别：电子工程学院专 业：电子信息工程技术班 级：姓 名：学 号：指导教师：完成时间： 目 录 1引言42 使用软件52.1 软件简介52.2 Flash CS6新功能62.3 Flash CS6的操作界面72.3.1 菜单栏72.3.2 工具箱72.3.3 时间轴82.3.4 舞台和场景82.3.5 调整图像亮度和对比度92.4 Flash动画在网页设计中的应用113 Flash的设计制作过程123.1首页主导航栏123.1.1 “电子工程学院”五个字逐字显示123.1.2 关于学校的建筑的图片淡化切换143.

2、1.3 导航字栏的文字鼠标悬停变色163.1.4 导航字栏的透明方块实现鼠标跟随173.2首页图片滚动193.2.1实现效果193.2.2实例制作193.3 首页图片切换展示213.3.1实现效果213.3.2实例制作21结 论24致 谢25参考文献26附 录1：其它FLASH作品展示27附录2：在flash中进行链接28附录3：解决flash导入dreamweaver里尺寸的问题29基于网站的flash设计张洪新摘要：针对关于电子工程学院网站制作FLASH，在设计时主要从应该网站的内容定位、模块结构、外观设计三方面着手进行制作。基于系科网站的FLASH主要包括网站导航栏页眉、照片切换展示、照

3、片滚动展示等。其中运用了 flash CS6、网页设计工具Dreamweaver 8、fireworks等软件。通过分析对于网站相关的FLASH需求进行制作，综合运用 逐帧动画、补间动画（运动补间和形状补间）、遮罩动画、引导线动画、交互动画等来制作FLASH，以此来满足系科网站的基本要求。关键词： flash ； fireworks软件； Dreamweaver 8； 扬州职业大学毕业设计（论文） 第29页共29页 1引言作为即将踏入大学的莘莘学子，选好学校固然重要，但是专业的选择也是不容忽视的，它将会决定你以后的发展方向，所以很多人在毕业选择专业时都是再三考虑。通过各种渠道进行了解要选的专业

4、情况，所以作为学院来说，拥有一个好的网站也能够给学生更多的了解本系的实际情况，能够正确选择自己的专业。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。面对日益加快的生活节奏和信息社会日新月异的变化，学院

5、极需要一种快捷，便利的平台来对外宣传学院的形象,详细介绍专业情况和学院条件。如何运用现代化信息技术完成“让学生全面了解学院，正确选择专业”这一目标，已成为学校学院中应该解决的重要课题之一，本网站正是为这一目标设计制作的。2 使用软件2.1 软件简介Flash，是一种动画创作与应用程序开发于一身的创作软件，到2013年1月24日为止最新的零售版本为AdobeFlash Professional CS6(2012年发布，本次的毕业设计作品也是基于Adobe Flash Professional CS6)。Adobe Flash Professional CS6为创建数字动画、交互式Web站点、桌面

6、应用程序以及手机应用程序开发提供了功能全面的创作和编辑环境。Flash广泛用于创建吸引人的应用程序，它们包含丰富的视频、声音、图形和动画。可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或Illustrator）导入它们，快速设计简单的动画，以及使用Adobe AcitonScript 3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您也

7、可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。要在Flash中构建应用程序，可以使用Flash绘图工具创建图形，并将其它媒体元素导入Flash文档。接下来，定义如何以及何时使用各个元素来创建设想中的应用程序。在Flash中创作内容时，需要在Flash文档文件中工作。Flash文档的文件扩展名为.fla（FLA）。Flash文档有四个主要部分： 1舞台。舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash基础中将对舞台做详细介绍。 2、时间轴。时间轴用来通知Flash显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层

8、中的图形显示在较低图层中的图形的上方。 3、库面板。库面板是Flash显示Flash文档中的媒体元素列表的位置。 4、ActionScript.。ActionScript代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash包括两个版本的ActionScript，可满足创作者的不同具体需要。Flash包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将ActionScript添加到文档的内置行为，以及可以添加到媒体对象的

9、特殊效果。这些功能使Flash不仅功能强大，而且易于使用。 完成Flash文档的创作后，可以使用“文件”“发布”命令发布它。这会创建文件的一个压缩版本，其扩展名为.swf（SWF）。然后，就可以使用FlashPlayer在Web浏览器中播放SWF文件，或者将其作为独立的应用程序进行播放。2.2 Flash CS6新功能Adobe Flash CS6软件是用于创建动画和多媒体内容的强大的创作平台。设计身临其境、而且在台式计算机和平板电脑、智能手机和电视等多种设备中都能呈现一致效果的互动体验。新版flash professional cs6附带了可生成sprite表单和访问专用设备的本地扩展。可以

10、锁定最新的adobe flash player和air运行时以及android和ios设备平台 。1新增html5支持2生成Sprite表单3广泛的平台和设备支持4高效处理代码片断5Adobe AIR移动设备模拟6锁定3D场景7ActionScipt 编辑器8与Flash Builder集成2.3 Flash CS6的操作界面要正确、高效地运用Flash CS6软件来制作动画，必须了解Flash CS6的工作界面及各部分功能。Flash CS6的工作界面继承了以前版本的风格，只是看起来更加美观、使用起来更加方便快捷了。Flash CS6的工作界面由菜单栏、工具箱、【属性】面板、时间轴、舞台和面

11、板组等组成，如图2-1。图2-12.3.1 菜单栏菜单栏是最常见的界面要素，它包括【文件】、【编辑】、【视图】、【插入】、【修改】、【文本】、【命令】、【控制】、【调试】、【窗口】和【帮助】等一系列菜单，根据不同的功能类型，可以快速地找到所要使用的各项功能选项，如图2-2。图2-22.3.1 工具箱利用工具箱中的工具可绘制、选择和修改，给图形填充颜色，改变场景的显示，或者设置工具选项等，如图2-3。图2-32.3.3 时间轴时间轴面板以图层和时间轴方式组织文档内容，与电影胶片类似。Flash动画的基本单位为帧，多个帧上的画面连续播放，便形成了动画。图层就像堆叠在一起的多张幻灯片，每个图层都有独

12、立的时间轴。这样，多个图层的综合运用，便能形成复杂的动画，如图2-4。图2-42.3.4 舞台和场景舞台是Flash创作的工作区域，舞台是绘制和编辑动画内容的区域，这些内容包括矢量插图、文本框、按钮、导入的位图图形或视频剪辑等。动画在播放时仅显示舞台上的内容，对于舞台之外的内容是不显示的，如图2-5。 图2-52.3.5 调整图像亮度和对比度面板的内容取决于当前选定的内容，可以显示当前文档、文本、元件、形状、位图、视频、帧或工具的信息和设置。1,【属性】面板，如图2-6。2【库 】面板，如图2-7。3【颜色】面板，如图2-8。图2-6图2-7图2-82.4 Flash动画在网页设计中的应用（1

13、）Flash动画在网页设计中的部分应用在网页设计中，Flash动画作品除了以“流式播放动画”播放以外，如:Flash动画短片、FlashMV，还具有一定交互性特点的形式。有些网站的引导界面做成Flash动画形式，一般由Dreamweaver软件来完成，做成静态页面。当然，大部分这类页面全部是静态，但也有某些网站做出以下设计。如:网页中的Flash网络广告、Flash形象展示动画、网站导航栏动画、图片展示动画、Flash交互动画，及由Flash制作完成的网站注册、登陆、计算等系统。在静态页面中，如果把这些做成动画形式的话，无疑能起到生动、装饰的作用，对浏览者具有充分调动的作用。但是不宜太花、太乱

14、，否则，就会起到反作用，不但使浏览者眼花缭乱、烦躁，而且会给企本网站效应大打折扣，显得烦乱，缺乏信任。（2） Flash动画在整站网页设计中的应用 前文中提到过，除了采用Flash制作相关的贞面外，也有一些网站，为了展示自己的个性，使用Flash来制作整个站点。整个站点从概念上就己经包括所有视听元素部分及版式的设计。网站引导界面的设计估且不说，由其引导进入的内页面这整个系统都是由Flash软件来制作，就包括上文列举的视频、Flash广告动画、Flash交互动画、网站的Flash形象展示动画、网站各级导航栏、图片展示、文字、链接、色彩、音乐、声音、游戏及网站注册、登陆、计算系统等。这样的Flas

15、h动画网站，感觉都十分炫，具有很强很独特的个性，基本上能完全调动浏览者的积极性，给人以活跃的心理感受。 为了提高网站的美观性，和一些广告厂商的利益获取性，我们经常会看到好多内嵌式或漂浮式的广告，吸引我们的注意。因此，好的动画，需要有好的设计，需要我们潜心去研究、思考，既能使网站充分利用其生动活泼的优势，又不会因其一些限制因素，而使浏览者产生不好的心理感受，以至于影响到网页和浏览者的互动。3 Flash的设计制作过程3.1首页主导航栏3.1.1 “电子工程学院”五个字逐字显示（1） 打开flash,新建一个动画图层，命名为“字体”。（2） 选择工具栏中的文本工具，在图层中分别建立文本框，输入“电

16、子工程学院”，分别将六个字转换为原件，如图3-1。图3-1（3） 以15帧为一个单位，在“字体”图层创建6个关键帧，如图3-2。图3-2（4） 在每个关键帧后逐字删除，第一帧后放“电”字原件，第二帧后放“电子” 字原件，第三帧后放“电子工”，以此类推，最后一帧放“电子工程学院”字原件，然后创建传统补间动画，如组图3-3。组图3-33.1.2 关于学校的建筑的图片淡化切换（1） 首先运用firework，对图片进行处理。运用魔术棒工具将图片除了所需要的建筑外全部删除，如图3-4。图3-4（2） 选择文件/图像预览，在图像预览界面中的左下角下拉菜单中选择索引色透明，然后导出图像预览，如图3-5。图

17、3-5（3） 打开页眉的flash，新建一个图层，命名为图片。将用firework编辑好的图片导入到flash库中，如图3-6。图3-6（4） 将图片一放置于舞台的所需位置，并且转换为影音剪辑元件，以15帧为一个单位，依次创建6个关键帧。在第一个关键帧处将影音剪辑元件的透明度效果处理为0%，即右侧的效果框中的色彩效果，样式的Alpha度选择为0%，如图3-7。图3-7（5） 依次在各个关键帧中创建传统补间动画，实现效果如组图3-8。组图3-83.1.3 导航字栏的文字鼠标悬停变色（1） 在页眉flash中，单击“属性”面板的“编辑”按钮，弹出“文档设置”对话框，设置“尺寸”为“500像素*40

18、0像素”，“背景颜色”为蓝色。“帧频”为12。（2） 新建一个名称为“按钮”的“图形”元件。（3） 按钮对象本来就有四个帧组成的（4种不同的状态）。分别是弹起（正常），划过（鼠标经过），按下（鼠标按下），还有个热点区的帧（可以不放东西）。（4） 第一个帧（弹起）是放置白色的“网站首页”，将第一个帧复制到第二个区块（划过），然后把第二个区块的字色修改为黄色，其他不变，如图3-9。图3-93.1.4 导航字栏的透明方块实现鼠标跟随(1) 要考虑两方面即： 1.方框的移动：会用到鼠标移动时把方块的位置移动，2.设置移动的区域，(2) 实例制作：1. 将事先做好的按钮放置到导航栏的相应位置。2. 具体

19、的代码如下：var sp:Sprite = new Sprite();/那行网站首页、院系介绍那栏我们设为spvar fang:Sprite = new Sprite();/那个透明方块var r:Rectangle = new Rectangle(x,y,width,0);sp.graphics.beginFill(0xFFCC0);填充颜色。例:0xFFCC0sp.graphics.drawRect(x,y,width,height);/x，y值及长度宽度sp.alpha = 1.0 /透明度值 1.0为不透明 0.0为完全透明stage.addChild(sp);fang.graphic

20、s.beginFill(0xFFCC0);填充颜色。例:0xFFCC0fang.graphics.drawRect(x,y,width,height);/x，y值及长度宽度fang.alpha = 1.0 /透明度值 1.0为不透明 0.0为完全透明fang.visible = false;/一开始把那个透明方块隐藏掉sp.addChild(fang);sp.addEventListener(MouseEvent.MOUSE_OVER,OverFun);sp.addEventListener(MouseEvent.MOUSE_OUT,OutFun);function OverFun():voi

21、dfang.visible = true;fang.x = 0;fang.y = 0;fang.startDrag(false,r);function OutFun():voidfang.visible = false;fang.stopDrag();3.2首页图片滚动3.2.1实现效果将7张图片以滚动的横向动态的形式滚动展示。3.2.2实例制作(1) 打开flash，新建一个1002像素*200像素的舞台，颜色选择“灰色”（符合网站整体背景颜色）如图3-10所示。图3-10(2) 将选择好的图片导入到flash库选项中，如图3-11所示。图3-11(3) 将7张图片大小重新编辑，无缝放置于舞

22、台中，填满舞台 ，如图3-11所示。图3-11(4) 将图片全选，右击整体转换为原件，如图3-12所示。图3-12(5) 在第1060帧处设置关键帧，同时将元件平行拖入到舞台左侧合适位置，如图3-13所示。图3-13(6) 再将第一帧的原件平行拖入到舞台右侧，直至舞台中正好看不见元件，右击创建传统补间动画即可，如图3-14所示。图3-143.3 首页图片切换展示3.3.1 实现效果实现4张图片淡化切换效果3.3.2 实例制作(1) 打开flash，新建一个544像素*247像素的舞台，颜色选择“灰色”（符合网站整体背景颜色）如图3-15所示。图3-15（2） 将选择好的图片导入到flash库中

23、，如图3-16所示。图3-16（3） 将图片放置于舞台中，充满整个舞台，如图3-17所示。图3-17（4） 将图片转换为影片剪辑元件，如图3-18所示。图3-18（5） 将图片一放置于舞台的所需位置，并且转换为影音剪辑元件，以20帧为一个单位，依次创建6个关键帧。在第一个关键帧处将影音剪辑元件的透明度效果处理为0%，即右侧的效果框中的色彩效果，样式的Alpha度选择为0%，如图3-19所示。图3-19结 论通过这个毕业设计的制作，我感到自己在flash制作方面有很多的不足之处。比如：代码的运用，场面特效的运用等都有很大的差距。但也不是没有收获。当这个设计做完之后，在感到浑身轻松之时，我才知道通

24、过这个这个设计，我不但把以前学过的已经忘记的知识再次强化了一遍，把本来没有接触的场景转化和特效动画学到了自己的腰包之中。实际上，制作flash并不需要太多的代码，也可以制作很炫的动画效果，不过要是能吧代码学好，再加上自己的画画功底，最后再加上你的创意，那么，你完全可以制作一部绚丽多彩，丰富多姿的动画。如果不会画画，就像我一样，也不像重新学习画画的话，我建议你多上网收集一些图片素材，照着图片制作自己所学要的元件。当然，最好学会画画。这次的论文设计让我重新了解了很多在学校所学不到的东西，也借此回顾了一下我大学所学的知识。它让我掌握了很FLASH设计的知识，让我对我所学过的知识有所巩固和提高。在整个

25、过程中，我学到了新知识，扩大了知识面。也让我认识到了学海无涯的真正含义，我将会不断的学习新的知识，让自己的能力得到进一不的提升。在论文的设计中它不仅培养了我严谨的思维方法，更造就了我积极乐观的生活态度。而且还要做到稳重但又不失创新，开朗但不浮躁，兴趣广泛，思路开阔，办事沉稳，团结合作的精神。 总之，在这次毕业设计中，我们学会了许多的知识，是大学三年来所学知识的综合运用，切实感受到设计的苦与乐。在这里希望各位老师提出意见和建议，我们定会努力学习改进，争取作出更大的进步 。 致 谢三年的读书生活在这个季节即将划上一个句号，而于我的人生却只是一个逗号，我将面对又一次征程的开始。三年的求学生涯在师长、

26、亲友的大力支持下，走得辛苦却也收获满囊，在论文即将付梓之际，思绪万千，心情久久不能平静。天下没有不散的宴席，虽然大学三年的生活多半时间还是呆在学校里，但是论文致谢语写就的那一刻也真正标志着我与这所学校就此别离了，没有 伤感，更多的是遗憾，但是总归不如意事十有八九，过去的不能挽回，人应该大胆向前看，所以这段文字应该像它的标题一样充满感恩和致谢，感谢三年来在我的成长道路上扶持过我，指点过我的人。这篇论文所涉及的议题是和我的指导老师朱海星老师交流后定下的，在前期的实习积累经验，到中期的修改和讨论，及最后的反复斟酌，我希望能尽自己最大的努力，写出一篇具有现实意义的论文。但是在具体实施的过程中，我还是遇

27、到了相当多当初没有预料的困难，也曾经令我迷茫和彷徨，论文最终的定稿，也没有我当初设想的那么完美，但是总归是通过老师同学的帮助和自己的努力完成的。论文得以顺利完成，要感谢的人实在太多了。首先要衷心地感谢我的指导老师朱海星，您严谨的治学态度，开阔的思维，循循善诱的指导一直给我很大的帮助。当我对论文的思路感到迷茫时，您为我理清思路，指导我往一条比较清晰的思路上进行修改。在论文的不断修改中，我也努力做到及时积极地跟胡老师交流，因为我觉得这样可以使得我的论文更加完善。还有就是我的FLASH课程老师黄昱栋老师，要是没有朱老师的帮助和知道，也没有这篇论文的诞生。在不断完善和修改的过程中，也让我更加懂得“一分

28、耕耘才有一分收获”的道理。感谢所有教育过我的老师！你们传授给我的专业知识是我不断成长的源泉，也是完成本论文的基础。师恩伟大，无以回报！感谢我的母校扬州职业大学给了我在大学三年深造的机会，让我能继续学习和提高。扬州职业技术学院，在这里度过了三年愉快充实美好的大学时光。感谢扬州职业大学的所有老师和同学们三年来的关心和鼓励。老师们课堂上的激情洋溢，课堂下的谆谆教诲；同学们在学习中的认真热情，生活上的热心主动，所有这些都让我的三年充满了感动，这些必将成为我以后人生道路上无比宝贵的财富。还有在大学三年期间认识的那些十分重要的师姐师兄、师弟师妹们，以及我结识的朋友们。他们不仅在学术上给予我指点，同时也是我

29、生活中一起同行的人，在交往的过程中我们建立信任、彼此鼓励、互相支持与帮助。最后要感谢的是我的父母和家人，我永远都不会忘记你们的良苦用心和一如既往的支持与鼓励。特别要感谢我的爸爸妈妈，焉得谖草，言树之背，养育之恩，无以回报，你们永远健康快乐是我最大的心愿。三年来，快乐的事情因为有你们的分享而更快乐，失意的日子因为有你们的关怀能忘却伤痛，坚强前行。无论我成功与否，你们总以鼓励的言语告诉我很棒，谢谢你们，我会继续努力。现在的自己已经不再是刚进大学时的那个小男生了，三年的磨砺让我的肩头多了一份责任和承担，已经踏入社会开始工作的我，面临的抉择和困难也非常之多，但是不管前途多么的未知和艰难，我会毫无畏惧地

30、前行。三年寒窗，所收获的不仅仅是愈加丰厚的知识，更重要的是在阅读、实践中所培养的思维方式、表达能力和广阔视野。很庆幸这些年来我遇到了许多恩师益友，无论在学习上、生活上还是工作上都给予了我无私的帮助和热心的照顾，让我在诸多方面都有所成长。感恩之情难以用语言量度，谨以最朴实的话语致以最崇高的敬意。 “长风破浪会有时，直挂云帆济沧海。”这是我最喜欢的诗句。就用这话作为这篇论文的一个结尾，也是一段生活的结束。希望自己能够记取少年时的梦想，永不放弃。参考文献1张菲菲 徐爽爽 编著，FLSAH CS5 动画制作技术，化学工业出版社。本版号：ISBN 978712210755 . 2011.62百度知道：3

31、 天极网：4站长之家flash素材：5我要自学网：6百度文库：附 录1：其它FLASH作品展示（1） 学生会导航栏，如图4-1所示。图4-1实现效果：1.学生会图片出皇冠闪动效果（遮罩方式） 2.导航栏字处鼠标悬停特效（按钮悬停制作）（2） 首页图片展示，如图4-2所示。图4-2实现效果：照片淡化切换（制作方式同首页导航栏建筑图片的淡化切换）（3） 学生会图片展示，如图4-3所示。图4-3实现效果：点击按钮图片弹动切换（按钮热点的制作和代码语言共同实现）（4） 院系介绍图片，如图4-4所示。图4-4实现效果：照片淡化切换（制作方式同首页导航栏建筑图片的淡化切换）附录2：在flash中进行链接（1） 如果你是要发到网上，不要写本地地址，其他人收不到，点击要连接的按钮元件，打开“代码”栏，直接输入on (press) getURL(网页地址); 注意必须关掉输入法！网页地址请自行替换，格式为：就像地址栏里面写的（2） 要是链接到本地网页的话代码同上格式为file:E:xxxxxx附录3：解决flash导入dreamweaver里尺寸的问题在flash背景图层的第一帧，按快捷键F9，输入代码“Stage.scaleMode = noScale”，即可解决flash导入dreamweaver里后不能按需求缩放大小。