基于Flash茶主题网站前台的设计与开发.doc

1、FLASH动画制作泉州师范学院毕业论文（设计）毕业论文题目基于FLASH茶主题网站前台的设计与开发姓名学号100402024系别教育技术系专业教育技术学年级10级指导教师2014年4月20日FLASH动画制作基于FLASH茶主题网站前台的设计与开发教育科学学院教育技术学专业100402024指导教师郑深讲师【摘要】本次设计通过FLASH软件来实现茶主题网站前台的设计，其界面设计主要采用PHOTOSHOP进行图像编辑和FLASH进行动画制作。【关键词】茶网站FLASHACTIONSCPRINT1前言福建省茶叶生产历史悠久，得益于自身得天独厚的地理环境气候类型，茶的类型多种多样，乌龙茶、绿茶、红茶

2、等已走入寻常百姓的家。泉州安溪的铁观音，武夷山的大红袍更是远近闻名。随着生活水平的逐步提高，茶文化渗透到生活中的各个方面，茶叶贸易日益渐盛，泡茶聊天，斟茶饮酒更是成为人们生活中不可缺少的一部分。本次设计利用FLASH制作茶网站，网站内容包括常见茶种类及功效，茶的时事新闻，让用户对茶有较系统的认识，旨在传递丰富的信息，同时给人以美的艺术享受。2茶主题网站构思的整体设计本次主要是关于茶主题网站的前台设计，该网站主要包括开场动画、网站首页、产品展示、新闻动态、新品推荐、联系我们6个模块，每个模块内设置不同的内容表现形式，提供关于茶的不同信息，用户在此可了解关于茶的最新动态信息，通过网络联系。本次网站

3、的设计理念如下（1）明确设计内容内容将决定形式，明确本次设计的内容是进行其他工作的基础。在明确了本次设计的内容后，开始调查、搜集处理资料，为接下来的工作做好准备。2草图的设计及网站的规划在调查准备好资料的基础上，进行网站的规划，形成一个初步的设计草图，并根据构思在计算机上制作网站。3把握色彩，突出设计模块用户是否选择这个网站，第一印象很重要。为了更好吸引用户的眼球，同时突出“茶”主题，要把握好色彩的使用和搭配，首先在开场动画中以标志的绿色茶园做为整体界面，予人以清新鲜艳的视觉感受，并以此为主线贯穿始终，利用PHOTOSHOP软件对图片进行颜色的加工，色差的调节，使整个网站的颜色搭配给人以舒服清

4、新的感觉。（4）网站优化美化设计网站优化是在所有的工作的做好的基础上进行的，参考优秀网站，根据审美、本次的主题、用户的需求等对网站做出调整。在首页当中有最新新闻、最新产品、联系方式等模块，方便用户在第一时间内看到最新动态和茶产品功效，内页针对不同的栏目，变现形式不同，同时详细页也很好的考虑到了用户体验。图21是本次设计流程图FLASH动画制作图213茶主题网站功能模块的设计俗话说“好的开始是成功的一半”,在制作过程中，材料的搜集准备处理是成功的基石。好的设计注重的不只是图像场景嵌合的整体感觉，更要在细节处多花心思，做到自然、和谐。在这个阶段不仅要花大量时间和精力在搜寻素材上，很多时候更要亲手制

5、作成所需的样子，譬如利用PHOTOSHOP处理各种图片，添加滤镜效果，利用FLASH制作各种元件等。本网站中涉及的多种特效及动画效果，大部分都是利用元件做成的。FLASH中元件类型包括图形、按钮、影片剪辑三种。元件置于“库”里，需要时只要将元件从“库”中拖放到场景上，一个元件可以多次使用。使用元件可以有效减小影片文件的所占容量大小，加快影片的播放速度，并且实例本身具备自己的个性，它的更改不会影响库中的元件本身。在本次设计中多次用到按钮元件，按钮元件是对鼠标事件作出响应的相互按钮，能够使观众与动画更贴近。开场动画网站首页界面产品展示界面点击进入返回目录新闻动态界面点击详情返回目录新品展示新品推荐

6、界面点击详情返回目录联系我们联系我们界面返回目录FLASH动画制作31开场动画场景FLASH既为创作工具，可实现文稿演示、动画制作修改、网站规划设计等。利用FLASH所制作的作品文件所占容量相较于其他软件较小，色彩鲜艳生动，且下载速度较快，将FLASH作为网页动画设计的首选工具已成为潮流。同时在FLASH中可以通过ACTIONSCRIPT添加脚本语言，实现交互性，实现真正意义上的面向对象，使FLASH具有更大的设计自由度。本次网站的设计包含开场动画和5个功能模块，由于所包含模块较多，为了更清晰地展示，设计了6个场景。所谓场景，是专门用来存放各种对象包括视音频图片等的场所，同时也是进行动画播放的

7、场所。当动画使用对象较多、动画较庞大时就需要多个场景。为了便于设计与浏览，在本次设计中每个功能模块各占用一个场景，开场动画既为第一场景。当用户点击播放时，即可进入开场动画。在开场动画中，以“山水茶园”为背景，总括了本次设计的主旨，突出了茶“绿”，色彩在网页所占比重很大，是用户一眼就能看到的东西。页面的整体色彩搭配是为网站加分的关键因素，具有一眼就可分辨的主题色是突出主旨的首选考虑。动画中有一片茶叶缓缓飞来，点明主题。利用引导层来设置茶叶的运动轨迹，所谓引导层就是运动对象的运动轨迹。在舞台上，选择T工具，输入文字“心随流水去，身与风云间”、“一段品味人生的旅程”、“点击进入ENTER”等文字。为

8、了使文字呈现不会太单调，采用了遮罩动画添加水波效果。同时在“点击进入ENTER”上插入按钮元件，并为其添加脚本语言ENTADDEVENTLISTENERMOUSEEVENTCLICK,ENT1FUNCTIONENT1EMOUSEEVENTVOIDGOTOANDPLAY1,“ONE“当点击该鼠标时，页面会实现跳转，跳转到“ONE”场景，也就是网站首页的界面。开场动画场景的基本结构如图31图3132网站首页场景点击开场动画上的网站首页，进入网站首页场景。网站首页实质上就是网页，从版面设计来说，一个较成功的网页要包含文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。网页实质FLASH动画制作就

9、是一种版面，因此既需文字的描述又要有图片的展示辅以装饰。文字有大小字体颜色之分，图片有大小摆放位置出现时间之别。观众同时接收图片和文字，如果只是简单地罗列在一页面上，则难以吸引观众的眼球。在网站首页的顶上设置了产品展示、新闻动态、新品推荐、联系我们等不同模块的子页面。浏览首页即可以清晰地的了解整个网站的整体结构设计，体现了“所见即所得”理念。同时规划好场景各个位置其他图片文字的位置，如安溪茗茶、最美茶田图片的展示，下方图片的切换改变了图片的透明度、文字的呈现使用了遮罩动画，都是经过设计（动画帧如图321），给予用户最舒服的享受。网站首页场景基本结构如图322所示。图321图322网站将各个模块

10、关键字展示在界面的上端，用户可对其进行直接选择。并在各个模块中添加一个按钮元件，并对元件添加代码事件。用户通过点击不同的按钮实现跳转到不同的页面，具体的代码如下BTN_1ADDEVENTLISTENERMOUSEEVENTCLICK,O1BTN_2ADDEVENTLISTENERMOUSEEVENTCLICK,O2FUNCTIONO1EMOUSEEVENTVOIDGOTOANDPLAY1,“ONE“FUNCTIONO2EMOUSEEVENTVOIDGOTOANDPLAY1,“TWO“FLASH动画制作在网站首页这个界面中，除了可以实现不同场景的切换，还添加了背景音乐。为了呈现出动态的感觉，在这

11、个场景中多次用到了图片的切换，运用渐变，即改变ALPHA值，遮罩动画，添加补间动画或补间形状来实现图片的切换，如图323。图323动作帧33产品展示场景既是关于茶的网站，就要呈现关于茶的基本信息。在产品展示的界面中主要的效果就是茶叶产品图片的切换。为了使图片切换的效果更佳，有的图片要多次用到，因此将图片做成了图形元件、按钮元件、影片剪辑以便重复使用。进行图片搜集时，不仅要考虑与主题相符，图片的大小和图片本身的质量色彩，是否能够很好的吸引用户的兴趣也是选择的依据之一。在使用图片时，原始的图片素材存在LOGO，水印等问题，不能直接使用。利用PHOTOSHOP等图片编辑软件去除LOGO，添加滤镜等效

12、果，使得图片更加完善。在这个场景中图片切换的方式多种，但如果只是简单的图片切换容易引起视觉审美疲劳，对此在图片切换过程中需要采用不同的切换效果，动作帧如图331，比如改变ALPHA值，逐渐放大缩小，淡入淡出，图片移动，旋转变形，图片缓缓呈现，风吹等效果。图331动作帧制作图片缓缓呈现的效果时，将图形元件从库中取出放在舞台，在30帧处插入关键帧，点击第一帧，将原图拉大，并将其的ALPHA改为0，创建补间动画，使其达到缩小效果及图片缓缓呈现的效果。同样的，从库中取出图形元件放入舞台，在第49帧和第93帧中插入关键帧。在第49帧将图形移出舞台外，第93帧将图形放入舞台中适当的位置，最终做出渐入效果。

13、图片缓缓呈现的效果如图332FLASH动画制作图332风吹效果的制作相对较繁琐点。导入素材到库，将图片三次从库中取出，放入第八图层、第九图层、第十图层等三个不同图层，在图层十的第334帧至第342帧间转为关键帧。然后利用“变形工具”，在工具栏中选择任意变形工具，在工具面板的属性选项区域中选择“旋转与倾斜”，并对选取的图形进行相应的变形。至此，风吹效果制作完成。风吹效果如图334，动作帧如图335。图334FLASH动画制作图335动作帧34新闻动态场景新闻动态场景在首页展示了关于茶的主要热点新闻的概述，随机选择其中一条新闻会链接到相应的详细新闻。在这个场景中使用到大量的元件，类似前面场景中制作

14、元件的步骤，制作按钮元件和“茶”字的影片剪辑元件。将“茶”字影片剪辑拖放到舞台上（图341），制作出星星闪烁的效果（图342）。图341图342首先新建影片剪辑，并命名为MC1。用矩形工具在其画出一个长为520，随意的长方形，在第一帧上长方形的长为520像素，宽为52像素。在第15帧上长方形的长为520像素，宽25像素，新建ACTION图层，在第15帧上插入关键帧，打开动作面板，写入STOP（）；在使用形状补间是该长方形由窄变宽的效果。接着，在创建的按钮元件中的鼠标经过插入影片剪辑MC1。然后，新建文字图层，用文字工具T在舞台上写入相关的新闻目录。最后，新建按钮图层，将做好的按钮放入，并将按钮

15、覆盖文字上。动画帧如图343FLASH动画制作图343用户根据自己的需要进行选择，当点击新闻目录时，会弹跳出相应的新闻内容，对此利用帧标签来实现。使用帧标签可以很方便的完成跳转，进行播放。具体的代码如下STOPB_TADDEVENTLISTENERMOUSEEVENTCLICK,BACFUNCTIONBACEMOUSEEVENTVOIDGOTOANDPLAY1,“ONE“BN_XINADDEVENTLISTENERMOUSEEVENTCLICK,BNXINFUNCTIONBNXINEMOUSEEVENTVOIDGOTOANDPLAY1,“FOUE“NEW1ADDEVENTLISTENERMOU

16、SEEVENTCLICK,NW1NEW2ADDEVENTLISTENERMOUSEEVENTCLICK,NW2NEW3ADDEVENTLISTENERMOUSEEVENTCLICK,NW3NEW4ADDEVENTLISTENERMOUSEEVENTCLICK,NW4NEW5ADDEVENTLISTENERMOUSEEVENTCLICK,NW5FUNCTIONNW1EMOUSEEVENTVOIDGOTOANDPLAY3新闻动态场景基本结构如图344图344新闻动态场景基本结构FLASH动画制作35新品推荐场景新品推荐场景通过茶产品图片的展示，让用户选择所想要了解茶的功效与作用，茶产品图片的选择是

17、较具代表性的茶品牌，如红茶、绿茶、白茶、黑茶、乌龙茶，这些茶品牌在日常生活中比较常见，但是用户对这些茶的功效并不是都很了解。通过这个场景可以让用户对茶有更进一步的认识。这个场景主要是根据鼠标事件来完成各个动画间的联系。类似前面的场景制作图片元件、按钮元件、影片剪辑，制作元件，背景图片以绿色为基本色，突出“茶绿”，茶的图片缓缓进入舞台。茶产品图片展示和产品展示场景类似，利用改变ALPHA值实现淡入淡出、添加补间动画等实现。具体帧动作如图351图351当用户点击某种产品时，通过按钮元件会跳转到介绍这种产品的功效作用的界面，相关代码如下STOPFXIA1ADDEVENTLISTENERMOUSEEV

18、ENTCLICK,FXI1FUNCTIONFXI1EMOUSEEVENTVOIDGOTOANDPLAY35FBACADDEVENTLISTENERMOUSEEVENTCLICK,FBAC2FUNCTIONFBAC2EMOUSEEVENTVOIDGOTOANDPLAY1,“ONE“PIC1ADDEVENTLISTENERMOUSEEVENTCLICK,PI1FUNCTIONPI1EMOUSEEVENTVOIDGOTOANDPLAY185为了方便用户，在这个场景中也可以实现返回目录，或者返回到上一场景或下一场景，具体代码如下FBACADDEVENTLISTENERMOUSEEVENTCLICK,F

19、BAC1FUNCTIONFBAC1EMOUSEEVENTVOIDGOTOANDPLAY1,“ONE“BN_NWADDEVENTLISTENERMOUSEEVENTCLICK,BNNWFUNCTIONBNNWEMOUSEEVENTVOIDGOTOANDPLAY1,“THREE“BN_LIANADDEVENTLISTENERMOUSEEVENTCLICK,BNLIANFUNCTIONBNLIANEMOUSEEVENTVOIDFLASH动画制作GOTOANDPLAY1,“FIVE“新品推荐场景如图352图352新品推荐场景整体图36联系我们场景这个场景主要是以文字为主。首先做一个影片剪辑，取出如下图

20、片图361影片剪辑新建图层，在其画出一个与以上图片一样大小的长方形，将其所在的帧转变为关键帧，在不同的关键帧上随意删除小方块。使其有闪烁的效果，然后用文字工具T,写下公司地址、联系方式、QQ在线等内容，并作出渐出的效果。同样在这个场景中也可以实现返回到首页。用户对于本网站有什么意见或者建议，可以根据这个模块上提供的方式进行联系，便于对网站做出进一步的改正与完善。联系我们场景整体图如图362。FLASH动画制作图3624茶主题网站设计主要技术的说明本网站动画时间较长，可能会出现重复的地方。由于动画使用对象较多，为避免用户在浏览时造成不方便，根据设计构思，对动画的时间和模块进行场景划分，用户可以在

21、窗口中调出场景面板。在此次设计中用到大量的图形图片，图片的要求不仅要与页面内容有关，而且要具有一定的吸引力，因此寻找素材花费了大量时间。但是绝大多数搜集到的原始资料并不能直接拿来用，都要经过PHOTOSHOP等软件进行后期处理去除LOGO，添加滤镜效果或其他处理，这是项较繁琐的工作，虽然技术含量没有很高，但却需要较高的耐心。FLASH动画制作中很多元素都会出现循环，但这些动作并不是适用于所有的情况，需要具体情况作出具体分析。根据本次网站设计的内容进行相应的设置，在网站首页场景中，背景内容相对较少，重复的地方较少，画面延续的时间比较短，在网站中就网站首页场景的动画直接应用到了联系我们场景中，只需

22、对动画稍微做些修改。而当动画重复的较多时，可以做成元件和影片多次使用，而且文件内容所占容量也会减少很多。为了使不同场景之间的过渡能切换自然，在本次设计中为实现这种过渡而大量使用按钮元件，影片剪辑，图形元件。无论是开场动画中进入网站首页，还是在各个场景中实现相互链接，在结束时返回到开头场景，都需要用到按钮元件。而在网站制作过程中，一张图片多次使用，且每次使用呈现方式不尽相同，故将其做成影片剪辑和图形元件，以便多次使用。FLASH制作制作按钮可以已有的按钮，也可自定义，具体操作步骤如下（1）使用公用库中原有的按钮单击菜单栏中的“窗口”“公用库”“按钮”，在弹出的窗口中挑选按钮，并将按钮拖入场景中；

23、FLASH动画制作（2）自定义按钮单击菜单栏中的“插入”“新建元件”“按钮”，自己制作喜欢的按钮图案，拖动到场景中；在原有的FLASH图层的同一帧插入关键帧，对按钮元件添加代码STOP实例名ADDEVENTLISTENERMOUSEEVENTCLICK,函数名FUNCTION函数名（EMOUSEEVENT）VOIDGOTOANDPLAY5总结本课题采用FLASH和PHOTOSHOP为主要工具，制作茶叶商城网站，因为所学知识尚浅，缺乏系统，故还存在着许多不足之处。如脚本语言编写困难，只好翻阅书籍和网上查找。较高水平效果难以实现，放弃而选择类似效果但相对简单的方法。在本次设计中藉由6个模块，让用户

24、对茶有初步的认识。开场动画模块是进入其他5个模块的敲门砖，通过网站首页模块可以进入其他四个模块，网站首页模块是本网站的门面，图片选择、色彩搭配是吸引用户的重要因素。通过网站首页进入其他四个无论哪个模块，都可以实现回到主目录或上一模块或下一模块，各个模块的内容相互独立又相互联系，文字和图片配合呈现，对让用户可以在不同角度对茶有不同方面的认识。参考文献1胡崧，FLASH8标准教程，北京中国青年出版社，20062张希玲，新概念FLASH8教程3卓越科技FLASHCS3动画制作百练成精电子工业出版社,2008104冯晓艳ADOBEFLASHCS3中文版经典教程人民邮电出版社,200835周建国FLASHCS3动画设计与制作实例精讲人民邮电出版社,200866郝春雨，唐有明FLASHCS3典型应用百例电子工业出版社,20086