闽南茶文化网站——广告展示模块的设计及实现---毕业论文

本 科 毕 业 论 文闽南茶文化网站广告展示模块的设计及实现Design and Implementation of Advertisement and Display Module for the Website of Minnan Tea Culture姓 名： 学 号：学院：软件学院系：软件工程专 业：软件工程年 级：指导教师： 年 月摘要Flash技术在网页设计中的应用十分广泛，运用Flash的结合，将广告与网站主题进行融合，可以更好的多元化的表达主题，动态的阐述永远比静态的更生动也更形象。Flash主题的突出性与一般的不同，它可以给浏览者留下深刻的印象，当然这也是因为Flash在动态方面、速度、面积以及色彩的合理运用可以给人带来强烈的震撼。在突出明确主题的同时，也让人对整个网站的印象更加深刻。本课题是为闽南茶文化网站制作广告展示的Flash。想让浏览者更好地全面了解产品，单单靠文字和图片达不到最好的效果。Flash的互动可以完美地将广告与娱乐结合起来，在娱乐的同时全面了解产品，使得浏览者对产品有更立体的感觉。文化区别普通的产品，从元素上说，文化没有可触摸的现实实体，为文化做广告要把抽象形象化；从目的上说，文化广告的目的是向浏览者介绍文化，达到传播流传的效果。如此，闽南茶文化网站中的广告展示Flash首先向浏览者展示清楚闽南茶文化的茶艺茶德，形象的把闽南茶文化中的“和”文化表现出来。本文首先介绍了Flash及AE技术背景，Flash技术在网页设计中的作用。然后介绍了闽南茶文化的背景，制作闽南茶文化网站的目的，广告展示模块的设计目标，并详细介绍了设计实现过程。最后，对闽南茶文化网站中的Flash广告进行总结、展望。关键词：闽南茶文化；广告；Flash；AE AbstractFlash is widely used in web design, by exerting flash, we can mix the theme of advertisement and website together in to express it more comprehensively because a dynamic exposition is livelier than the static one. The feature of the theme of Flash is different from others. It can give browsers deep impression arising from the rational using of Flash among dynamic, speed, square and color.This issue is a advertisement flash for the website of the tea culture of the southern part of Fujian Province. If you want the browser to get to know the product better, words and pictures are not enough. The interaction of Flash can perfectly join advertisement and entertainment together. Realizing the product when people are having fun, then they will get a more stereoscopic feeling about the product. Culture is different from ordinary products. In the aspect of element, culture its a touchable substance, which means we have to visualize the abstract concept of culture. In the aspect of purpose, the aim of culture advertisement is introducing and spreading culture to people. So the Flash of the website shows people the tea art and the tea culture at first, then vividly demonstrates the culture “he”.This article introduces the technical background of Flash and AE, and the function of flash in web design at first. Then it presents the background of tea culture in Southern Fujian, the purpose of making the website of Southern Fujians tea culture, the aim of advertisement module designing, and the whole process of accomplishment. The last part of this article is the summary and expectation of the advertisement flash in the website of Southern Fujians tea culture.Key words: Minnan tea culture; advertisement; Flash;AE目 录第一章 绪论11.1引言11.2 相关技术介绍11.2.1 Flash简介11.2.2 Flash CS3功能简介21.2.3 AE简介31.3 论文组织结构5第二章 闽南茶文化网站广告展示模块的设计方案62.1 闽南茶文化网站设计目标62.1.1 总体设计目标62.1.2 网站模块划分62.2 广告展示模块剧本设计72.1.1 广告展示模块设计目标72.1.2 广告展示模块剧本设计82.3 本章小结9第三章 广告展示模块的技术实现103.1 AE片头制作103.2 Flash片头场景实现133.3 Flash视频中其他镜头的实现163.4 Flash视频中泡茶过程的实现193.5 Flash视频中体现“和”文化的实现263.6 Flash视频中背景音乐的实现273.7 本章小结27第四章 Flash视频测试及网站测试运行结果294.1 Flash视频测试及运行结果294.2 Flash视频优化304.3嵌入网站测试及运行结果314.5 本章小结32第五章 总结与展望335.1 论文总结335.2 工作展望33参考文献34致 谢35ContentChart 1 Preface11.1 Introduction11.2 Introduction of Flash technology11.2.1 Brief introduction of Flash11.2.2 Functional description of Flash CS321.2.3 Introduction of AE technology31.3 The structure of this paper5Chart 2 The Design of the Advertisement and Display Module in Website of Minnan Tea Culture62.1 The design goal of the website of Minnan tea culture62.1.1 The total design goal62.1.2 The partition of web module62.2 The script design of the Advertisement and Display Module72.1.1 The design goal of the Advertisement and Display Module72.1.2 The script design of the Advertisement and Display Module82.3 Summary9Chart 3 Display and Advertising Design and Implementation103.1 Implementation of AE titles103.2 Implementation of Flash titles133.3 Implementation of other shots of Flash163.4 Implementation of the brewing process in Flash193.5 Implementation of the expression of “he” culture in Flash263.6 Implementation of the background music in Flash273.7 Summary27Chart 4 Tests of Flash and the Website and the Results294.1 The tests and results of the Flash294.2 The optimization of the Flash304.3 The tests and results of the website314.5 Summary32Chart 5 Summary and Future Works335.1 Summary of this paper335.2 Improvements and future works33References34Acknowledgements3533致 谢第一章 绪论1.1引言目前，Flash发展主要涉及到的领域很多，有动画游戏制作、网络构件、广告设计、工程界面等。Flash在网络中的应用也很多，不仅用来制作网站宣传片、产品广告、多媒体课件，还可以用来代替传统的HTML网页成为网站中的一部分。Flash在网页设计中的应用中提出：Flash技术在网页设计中的应用十分广泛，远不止动画短片和音乐MV的程度，有些网站为了追求美观和互动性，将整个首页全部用Flash方式设计。运用Flash的结合，将广告与网站主题进行融合，可以更好的多元化的表达主题，动态的阐述永远比静态的更生动也更形象。Flash主题的突出性与一般的不同，它可以给浏览者留下深刻的印象，当然这也是因为Flash在动态方面、速度、面积以及色彩的合理运用可以给人带来强烈的震撼。在突出明确主题的同时，也让人对整个网站的印象更加深刻1。想让浏览者更好地全面了解产品，单单靠文字和图片达不到最好的效果。Flash的互动可以完美地将广告与娱乐结合起来，在娱乐的同时全面了解产品，使得浏览者对产品有更立体的感觉。Flash动画在网页设计中的互动性研究一文中提出：“某种程度上说，Flash给广告制造了一个更高的起点，与Flash结合的广告，不再只是以一个阐述者的身份出现在浏览者面前，而是一个可以与之沟通的身份2。”Flash网络动画的创意是对生活中、自然中的形象，根据动画需要进行提炼、概括、选择、综合。本课题是为闽南茶文化网站制作广告展示的Flash。文化区别普通的产品，从元素上说，文化没有可触摸的现实实体，为文化做广告要把抽象形象化；从目的上说，文化广告的目的是向浏览者介绍文化，达到传播流传的效果。如此，闽南茶文化网站中的广告展示Flash是要给浏览者展示文化的精髓，介绍闽南茶的特点，并达到给人耳目一新的感觉。1.2 相关技术介绍1.2.1 Flash简介Flash是美国Macromedia公司所设计的一种二维矢量动画软件（现Adobe公司产品），用于设计和编辑Flash文档。以前，虽然也有很多种多媒体格式，但是，按照这些所制作出来的媒体文件都是很庞大的，动辄以十兆、百兆计，让这样大的文件在有限的带宽资源中传输，仿佛让骆驼穿过针眼。Flash解决了这个问题。它采用了Shockwave技术，按照“流”方式传输音频和视频文件，可以边下载边播放，用户无需等待；同时，Flash使用矢量技术制作和生成动画，使文件大大“减小”，其他格式的两分钟媒体文件可能需要几十兆字节，而Flash只需要几十千字节就可以了。Flash的交互性是它的又一大特色。在Flash中可以通过加入按钮来控制页面的跳转和链接，按钮还可以发声，丰富网页上的表现手段。Flash的易用性也许是让更多的人喜欢它的真正原因。只要使用过Windows的画笔，就会使用Flash绘图，因为Flash的绘图工具和Windows画笔中的绘图工具非常相似，但是功能更强大。Flash中的动作很容易理解，即使是初学者，通过一段时间的摸索之后也可以创造出很精彩的动画演示和交互游戏。1.2.2 Flash CS3功能简介在FlashCS3中，用户可以导入Photoshop的PSD文件，并保留图层等内部信息。Photoshop中的文本在Flash CS3中仍然可以编辑，甚至可以指定发布时的设置。现在可以更方便地使用Flash CS3与其他各种软件进行协同配合工作。Flash CS3可以和Illustrator完美地协同工作。通过综合的控制和设置，在Flash CS3中可以决定导入Illustrator文件中的哪些层、组或对象，以及如何导入它们。可以选择导入的Illustrator图层分别作为Flash的独立图层，还是合成一层，或者成为一个Flash的关键帧。以可视化的方式制作动画，然后将动画转换为可以重用，易于编辑的ActionScript代码。Flash动画制作CS3板精品教材一书中介绍：“在Flash CS3中，时间轴不见动画可以即时转换为ActionScript3.0代码，并应用其他的元件。这个可以节约大量时间的新功能可以支持很多属性，缩放、旋转、倾斜，颜色、滤镜等等。不但如此，它还为那些对ActionScript不是十分熟悉的用户提供了一个非常好的途径掌握这种非常流行的语言3。”用户可以在各种CS3软件中使用相同的工作界面。相似的工具，熟悉的图标，以及相同的键盘快捷键可以使用户顺畅地在各种软件之间切换。方便的面板组织方式可以使用户灵活地优化下自己的工作界面，并且将个性化的工作界面保存起来。Flash CS3界面如图1-1。图表的前后各留一行，全文查一遍！图1-1：Flash CS3界面1.2.3 AE简介介绍整体的之后介绍下用到的几个主要的功能，如层叠加模式等AE全称After Effect，是Adobe公司开发的一个视频剪辑及设计软件，用于高端视频特效系统的专业特效合成。它借鉴了许多优秀软件的的成功之处，将视频特效合成上升到了新的高度。After Effects CS4完全自学手册一书中有如下总结：在AE中可以利用遮罩与路径工具可以为图像层创建任意形状、任意大小的遮罩，使其产生裁切或选择区域，方便素材的融合与影片合成；AE本身自带了许多的标准滤镜特效，不仅能够对影片进行丰富的艺术加工，还可以提高影片的画面质量和效果；AE中的颜色校正可以将导入的素材进行颜色和其他信息上的调节，使其产生最受人欢迎的视觉效果4。AE同样保留有Adobe优秀的软件相互兼容性。新版本还能将二维和三维在一个合成中灵活的混合起来。用户可以在二维或者三维中工作或者混合起来并在层的基础上进行匹配。使用三维的层切换可以随时把一个层转化为三维的；二维和三维的层都可以水平或垂直移动；三维层可以在三维空间里进行动画操作，同时保持与灯光，阴影和相机的交互影响。并且AE支持大部分的音频，视频，图文格式，甚至还能将记录三维通道的文件调入进行更改。AE界面如图1-2。图1-2：AE界面Flash这项极具创意的网页动画开发软件提供了互动性和动画功能，而AE提供了使用简便的视觉特效与动态影像。对于Flash动画设计者来说，AE可以在平面动画上将他们的作品带入另一个层次。它可以为Flash动画设计值提供各种不同类别的视觉效果，而这些效果在Flash中要不是困难重重，就是几乎达不到。在AE中，让这些复杂的效果轻松拖曳几下即可实现。AE也结合了人物动画工具，得以轻松牵引并带动多层图层的图案动画。另外，AE也整合了一个3D引擎，可以让动画师在背景中加入景深。1.3 论文组织结构本论文共分为五章，论文首先分析了网站中Flash视频的作用，闽南茶文化网站广告的特点。紧接着介绍了相关技术，包括Flash CS3，AE。然后结合闽南茶文化背景引出Flash视频设计目标。接着详细介绍了制作实现过程，包括用AE制作动态的背景，用Flash完成场景构建、文字介绍、背景音乐。最后，对本课题所做工作进行总结与展望。论文具体安排如下：第一章 简单介绍了闽南茶文化网站制作背景及相关技术。第二章 结合闽南茶文化背景和网站需求提出了毕业设计的背景和目标。概述了总体设计思路。第三章 详细介绍了闽南茶文化网站中广告展示模块的设计实现过程。第四章 展示了Flash视频测试及运行结果，并提出了Flash视频优化的方案。第五章 最后总结了毕业设计所做的工作，并且指明了下一步的改进计划。第二章 闽南茶文化网站广告展示模块的设计方案在绪论中，介绍了Flash技术在网页设计中的重要地位，用Flash制作的广告相比一般广告具有的优势，闽南茶文化广告的特殊之处。下面将介绍闽南茶文化的背景和广告展示模块设计思路。这一章主要是在讲广告展示模块的方案设计。2.1 闽南茶文化网站设计目标先介绍网站总体设计目标，简要介绍下整个网站的模块划分，然后把2.1.2那部分放入第二节，这一节集中介绍广告展示模块的设计方案，当然也可以将设计方案分成2-3节来介绍，自己先改看看。2.1.1 总体设计目标闽南茶文化已有上千年的历史。茶在闽南人家早已是必不可少的了。茶，乃天地间之灵物，生于明山秀水之间， 与青山为伴，以明月、清风、云雾为侣，得天地之精华，而造福于人类。闽南茶文化的精华是茶艺，它讲究五境之美，即茶叶、茶水、茶具、火候、环境。闽南茶文化深沉而隽永。数千年的历史积淀和文明传承，使绚丽多彩的华夏文明又添上的华丽的一笔。然而，闽南特有的茶文化特色，如“功夫茶”，“茶米”，“茶心”等特有名词，以及茶水在闽南习俗中的用处，如结婚时以茶水敬天公，敬长辈等等的一些文化，并不被很多人所熟知，不知道这些的闽南本地人也大有所在。而且，随着经济的发展，各地文化的大融合，闽南的茶文化虽然被更多的人所熟知，但同时也使人忽略了一些闽南所特有的茶文化。2.1.2 网站模块划分闽南茶文化网站包括闽南茶文化广告展示模块，新闻模块，网站论坛模块，闽南茶品交易模块及相应的后台管理模块共5个模块。其中，闽南茶文化广告展示模块的功能就是充分展示闽南茶文化，改变以往的静态的产品广告形式，给人耳目一新的感觉。系统模块图如图2-1所示。图2-1：系统模块功能图2.2 广告展示模块剧本设计2.1.1 广告展示模块设计目标广告展示模块主要由Flash视频构成，作为闽南茶文化网站的一部分，该模块Flash视频的风格要与整个网站风格一致；作为整个网站的点睛之笔，给浏览者留下耳目一新的印象的前提下，还需展示完全闽南茶文化的特点。包括介绍茶艺的五境之美，闽南茶文化的深层内涵。在韦伯斯特辞典中，解释为广告是指在通过直接或间接的方式强化销售商品、传播某种主义或信息、召集参加各种聚会和集会等意图下开展的所有告之性活动的形式5。该模块的目的便是推广传播闽南茶文化，向浏览者展示闽南茶文化的精髓，以广告的模式推广信息，让更多的人走进闽南，走进茶文化。问及茶在人印象中的颜色，第一反应肯定是绿色。清新脱俗的绿色带给人亲近自然、和谐安定的感觉，加之网站界面的主色调，在风格上选择了以绿色为主，模糊羽化照片为主体风格。在动画部分，选择由简单线条绘制的茶具为载体。2.1.2 广告展示模块剧本设计饮茶是闽南人生活中的一大享受。过去，在闽南有一种说法：“抽啦叭烟，听南音乐，泡功夫茶，其乐无穷。”闽南茶文化的精华是茶艺，它讲究五境之美，即茶叶、茶水、茶具、火候、环境。 那么如何泡好一壶茶，如何享受一盏茶呢？这是需要技艺和艺术的，这就是茶艺。 泡茶最讲究茶叶、水和茶具。 本视频会分别阐述闽南茶文化中的茶叶、水和茶具都有什么讲究。茶以新为贵，而且要优质茶叶。闽南人喜欢喝乌龙茶，因为乌龙茶是介于不发酵茶（绿茶）与全发酵茶（红茶）之间的一类茶叶，它外形色泽青褐，所以称“青菜”。乌龙茶经冲泡后，叶片上有红有绿，汤色黄红，口味醇厚。而乌龙茶茶中最负盛名的是安溪铁观音，铁观音如青橄榄，入口略有苦涩，入喉后渐渐回甘，韵味无穷。 泡茶对水有严格的要求，因为水有软硬之分，凡每公升水中钙、镁含量不到8毫克的称为软水，反之则称硬水。泡茶要用软水，用硬水泡茶，茶味变涩，茶香变浊，茶汤变色。 闽南人泡茶爱选用有加盖的陶器茶具，因为它会“保香”和“保味”。最喜欢“孟公壶”和“若深杯”。“孟公壶”又称 “孟臣罐”，容量只有50一100毫升，小的如早桔，大的似香瓜。小的茶杯就叫“若深杯”或“若深瓯”，只有半个乒乓球大小，只能容4毫升茶水，通常1个“孟公壶”与4个“若深杯”一起放在圆形茶盘中，显得很有艺术欣赏价值。 看闽南人泡茶可以说是享受，泡茶的程序非常讲究，所费的时间可比喝茶的时间多，所以被称为“功夫茶”。 整个泡茶过程分为8步，分别为白鹤淋浴（洗杯）、乌龙入宫或观音入宫（落茶）、悬壶高冲（冲茶）、春风拂面（刮泡沫）、关公巡城（倒茶）、韩信点兵（点茶）、鉴尝汤色（看茶）、品啜甘霖（喝茶）。本视频用动画的形式，展示泡茶的整个过程。茶艺是茶文化的精髓，而茶道又是闽南茶文化的另一境界，闽南茶文化的茶道精髓体现在“和”。2008年举世瞩目的北京奥运会上，中国就向全世界展示了中国的“和”文化。何为“和”？和中和中再论中国传统文化的和谐精神及其审美特征中提出：“由于和的思想反映了事物的普遍规律，因而它能够随着时代的变化而不断变化，随着社会的发展而不断丰富其内容。现在，我们所说的和包括了和谐、和睦、和平、和善、祥和、中和等含义，蕴涵着和以处众、和衷共济、政通人和、内和外顺等深刻的处事哲学和人生理念6。”闽南茶文化中的“和”，主要是“和为贵”，“和而解”。这也就是“茶话会”调解纠纷的来源。若上升到茶德的高度，闽南茶文化又体现了“合”的思想，使饮茶者追求一种收敛奢欲、洗心涤烦、振作向上、自整合、人伦和谐、其乐融融的精神境界。2.3 本章小结本章介绍了闽南茶文化的茶艺，茶道，茶德；闽南茶文化中的“和”与“合”文化；阐述了整个视频制作的设计思路，由介绍闽南茶文化的背景知识引出整个泡茶的过程，最后上升到闽南茶文化中的“和”文化。第三章 广告展示模块的技术实现3.1 AE片头制作AE片头中，以一张茶园的照片为蓝本进行效果处理，用飘动的丝带和飘动的茶叶来增加画面的动感，引出闽南茶文化。首先，在AE中对背景装饰板用钢笔进行切割并添加Mask(遮罩)效果，羽化值越大，表示羽化的程度越大，边缘过渡的画面更大。参数如图3-1所示，效果如图3-2所示。图3-1：遮罩效果参数图3-2：灰色版背景效果图在新的一层中对照片用钢笔进行切割、羽化边缘，如图3-3所示。图3-3：背景切割、羽化效果图分别在新的层中加入在PS中制作好的装饰线条、标题、茶文化的psd文件，在时间轴上，用添加关键帧的方法，调整装饰线条、标题的位移动作及透明度变化，效果选图如图3-4。图3-4 茶叶及飘带动态效果参数及效果选图分别在新的层中加入在PS中制作好的动态图片组（.tga格式），调整层的叠加模式，在AE中，各个层的叠加使图案或颜色在现有像素上叠加，同时保留基色的明暗对比。不替换基色，但基色与混合色相混以反映原色的亮度或暗度。如图3-5。图3-5：各层叠加模式参数图最后，在顶层制作几层游走光线，辅助光效，使画面更动感，参数如图3-6。游走光线示例移动效果如图3-7。图3-6：游走光线特效参数图3-7：游走光线路径效果图片头效果选图如图3-8所示。 (a) (b)图3-8：AE片头效果选图3.2 Flash片头场景实现在AE片头中，引入闽南茶文化，在Flash片头中将介绍闽南茶文化的背景。分为“茶叶”、“水”和“茶具”三个部分，主要运用了Flash中的文字淡入效果介绍背景，用按钮技术实现三个部分的跳转。首先，在Flash底层创建一个背景层，如图3-9。图3-9：背景层效果图把在AE中制作完成并渲染完成的片头（avi格式）导入Flash库中，在新的一层上，加入片头，片头结束处，新建图层，在帧上添加要显示的文字，添加淡入效果，如图3-10。图3-10：片头文字效果选图文字播放结束后，选择“茶叶”，“水”和“茶具”为接下来展开的三个元素，截出这个三个词汇，制作放大、居中的动态效果，再制作3个按钮元件，效果合成如图3-11。图3-11：按钮元件在该帧上添加AS动作语句，先stop（）；再分别给按钮添加跳转指令，如图3-12图3-12：Flash中动作面板及跳转指令这三个按钮控制视频播放进度，在每一段结束后都会出现，点击即可选择观看相关段落。3.3 Flash视频中其他镜头的实现“茶叶”介绍AE特效制作实现茶叶生长的特效，之后加上茶叶翻滚的效果，在Flash中加上相应的文字介绍。AE特效制作如图3-13，整体效果选图如图3-14。图3-13：“茶叶”介绍AE特效选图图3-14：“茶叶”介绍效果选图“水”介绍AE特效，在处理后的照片的基础上，加上飘动的丝带增加动感效果，并有茶叶运动特效，在Flash中加上相应的文字介绍。AE特效制作如图3-15，整体效果选图如3-16。图3-15：“水”介绍AE特效选图图3-16：“水”介绍效果选图 “茶具”介绍中，AE制作场景特效，飘动的茶叶围绕照片中的茶具，茶叶飘走后，淡入显示相应文字介绍，效果选图如图3-17图3-17(a)：“茶具”介绍效果选图图3-17(b)：“茶具”介绍效果选图3.4 Flash视频中泡茶过程的实现首先，确定泡茶过程中的8个步骤所需要的动作素材，之前已定由简笔绘制，便在PS中画出几个需要的素材，如图3-18。图3-18：素材图然后，分析泡茶过程的具体步骤。第一步白鹤淋浴，这是洗杯的步骤。把茶具放到热水中洗涤，宛如一美丽的白鹤在享受天降甘露的淋浴。在AE中，绘制由一张白鹤的真实照片为蓝本的场景，并绘制好茶具在水中洗涤的动画动作。导入Flash场景中，加上相应的文字说明，调整播放的帧的位置。在AE中绘制背景，导入一张合适的白鹤图，用钢笔工具进行切割并调整羽化值，然后在时间轴上调整位移变化。背景效果如图3-19。图3-19：白鹤淋浴背景效果图导入茶具素材，在关键帧做出位移动作及旋转，如图3-20。图3-20：白鹤淋浴茶具动作效果图第二步乌龙入宫或观音入宫，这是落茶的步骤。把茶叶放到洗好的茶具中，一般放到杯子的1/5左右即可。乌龙即为乌龙茶，观音即为铁观音，所以这两种叫法皆可。在AE中，绘制由乌龙的图片为背景的场景，并绘制好往茶具中放茶的动画动作。导入Flash场景中，加上相应的文字说明，调整播放的帧的位置。AE中制作乌龙背景，并调整透明度变化、大小变化及动作位置，效果如图3-21所示。图3-21：乌龙背景效果图制作茶叶从龙的嘴中落到茶具中的动作，效果如图3-22所示。图3-22：乌龙入宫效果选图第三步悬壶高冲，这是冲茶的步骤。把茶壶中烧好的热水，从比较高的地方倒入放好茶叶的茶具中，使茶叶在茶具中翻滚。在AE中，绘制由一张瀑布的照片为背景的场景，并绘制好茶叶在茶具中翻滚的动画动作。导入Flash场景中，加上相应的文字说明，调整播放的帧的位置。AE中制作瀑布背景，并调整透明度变化、大小变化及动作位置，效果如图3-23所示。图3-23：瀑布背景效果制作茶壶往杯中倒水，茶叶在茶具中翻滚的动画。如图3-24所示。图3-24：悬壶高冲选效果图第四步春风拂面，这是刮泡沫的步骤。用茶壶盖把泡好的茶上层的泡沫刮掉，犹如春风拂面般心旷神怡。在AE中，绘制由春风的图片为背景的场景，并绘制好刮泡沫的动画动作。导入Flash场景中，加上相应的文字说明，调整播放的帧的位置。AE中制作春风背景图，再加上茶盖刮泡沫的动作与泡沫动作，效果选图如图3-25所示。图3-25：春风拂面效果选图第五步关公巡城，这是倒茶的步骤。把泡好的茶导入小杯中，手法犹如关公捋着美髯，在巡视城池。在AE中，绘制由关公相关图片为背景的场景，并绘制好倒茶的动画动作。导入Flash场景中，加上相应的文字说明，调整播放的帧的位置。AE中绘制关公背景图，调整位移与大小的变化；并加上倒茶时茶具的动作变化和茶水的变化。效果选图如图3-26所示。图3-26：关公巡城效果选图第六步韩信点兵，这是点茶的步骤。当倒茶时茶水不多时，把茶水的精华挨个滴到茶杯中。在AE中，绘制由韩信点兵相关图片为背景的场景，并绘制好点茶的动画动作。导入Flash场景中，加上相应的文字说明，调整播放的帧的位置。AE中绘制韩信背景图，调整位移与大小的变化；并加上点茶时茶具的动作变化和茶水的变化。效果选图如图3-27所示。图3-27：韩信点兵效果选图第七步鉴尝汤色和第八步品啜甘霖，是喝茶的过程。茶泡好后，茶香飘出，引出下一个镜头场景。在背景中，导入茶杯素材，放在场景中。然后在Flash中导入烟雾素材，在时间轴中绘制茶香飘出的效果，如图3-28所示。图3-28：茶香飘出效果图3.5 Flash视频中体现“和”文化的实现“和”具有和谐之义，为了能形象的表现这层理念，取“茶香”这个元素，制作出飘动的茶香，在整个地球的背景下飘动。地球上本有很多地方在发生争执，小至吵架，大至战争，用红色的“争”字代表这个含义。茶香围绕“争”字的轨迹飘动，红色渐渐淡去，同时，“争”字慢慢变成“和”字。选择一张地球图片作为背景，在新的层中写入红色的“争”字。模拟茶香飘动的烟雾效果，飘过覆盖掉“争”字，在Flash中设置合适的烟雾素材为元件，加路径动作，大致围绕“争”字飘动，很难实现茶香的精确路径。为了实现茶香覆盖效果，在PS中，把“争”字切割成笔画，茶香飘过的笔画在Flash调整透明度为0。效果选图如图3-29所示。图3-29：茶香飘过效果选图在同样的地球背景下，写入“和”字，笔画透明度20%，在用合适的烟雾元件或笔刷对“和”字进行描边代替处理，形成一个由茶香构成的“和”字。效果如图3-30所示。图3-30：“和”字呈现效果图把这制作完全的场景分别导入Flash中，进行整合处理，在茶香都覆盖完“争”字后，制作由茶香变换到“和”字的动画，最后调整两个动作的时间差，完成整个动画。3.6 Flash视频中背景音乐的实现在画面都完成后，加上背景音乐等音乐效果也是必不可少的。本视频主要背景音乐采用“高山流水”，把该mp3文件导入Flash中最底层，作为背景音乐。并给按钮和需要的元件加上相应的音效，为介绍部分的三个按钮添加按钮音效、为洗杯的元件添加水洗的音效、为倒茶的元件添加倒茶的音效。3.7 本章小结本章详细的介绍了闽南茶文化网站广告展示模块设计。首先确定整个视频的风格和路线。然后介绍制作AE及Flash片头的实现过程，在AE中制作富有动态的背景，导入Flash中完成场景的制作。又详细介绍了表现闽南茶文化茶艺的泡茶的整个步骤过程，在AE中绘制场景背景及动画效果，导入Flash中添加说明文字及音效完成制作。最后，介绍了体现“和”文化的制作实现。第四章 Flash视频测试及网站测试运行结果4.1 Flash视频测试及运行结果Flash视频制作完，一定要经过测试，检查Flash中有没有漏洞，画面中有没有不和谐的地方，所以Flash视频的测试以人工测试为主。首先，运用Flash CS3中自带的调试器，总体测试Flash视频中的每个帧有没有出错情况。如图4-1。图4-1：ActionScript调试器其次，用Flash中自带的发布预览功能，测试观看整个视频。最后，导出视频，测试导出不同格式的视频有哪些效果差别，如图4-2。图4-2：导出的多种格式图4.2 Flash视频优化在导出不同格式的视频后，发现不同格式的视频文件大小大相径庭。而文件的大小直接影响了嵌入网站后的播放速度，于是引出Flash视频优化的问题。关于优化Flash影片的探讨文章中提出优化Flash视频的主要方法8：（1）多使用Symbol，对出现超过一次的元素制作成符号。由于Flash只储存一次的图形数据，所以重复使用符号不会明显增加文件大小。（2）优化动画模式，多使用以运动动画（Create Motion Tween）的方式产生动画效果，限制关键帧的变化区域，让动画发生在尽可能小的范围内。（3）避免使用过多的位图元素，尽量不用位图做全景式的长距离动画。（4）优化图形中的线条，使用命令（修改最优化），以最大限度的精简用以刻画形状的分割线的数量。（5）适当选择点阵图的压缩方式，应用不同的压缩设定。（6）优化声音，尽量使用MP3格式的文件格式，可以用8kbps来压缩。（7）优化文本和字体。（8）优化颜色，多用纯色，少用渐变色。（9）优化播放模式，尽量不用以透明背景的模式显示。（10）清除文件内垃圾，选择“库”右上角的下拉菜单里的“选择未用项目”，再点击删除。设计进行到此时，出现了视频文件过大，而导致在网站上播放不流畅的问题，因此，对其进行优化。使用了上述方法中的第一、六、九、十方法。4.3嵌入网站测试及运行结果嵌入网站后的Flash视频选图如图4-3所示。图4-3：在网站中播放选图4.5 本章小结本章首先介绍了测试的方法是采用人工测试的方法，由于这部分是直接放在网站上供浏览者光看，因此如果出了问题浏览者立马就能发现，所以这部分的测试相当重要。其次，展示了Flash视频测试及优化Flash视频的方法。最后，展示了嵌入到网站中后播放测试及结果。第五章 总结与展望5.1 论文总结本论文主要完成了以下工作：从flash技术在网站制作中的功能和作用入手，引出制作闽南茶文化广告展示视频的两个主要技术：After Effects