于基纯flash的动画网站的设计与实现-学位论文.doc
《于基纯flash的动画网站的设计与实现-学位论文.doc》由会员分享,可在线阅读,更多相关《于基纯flash的动画网站的设计与实现-学位论文.doc(21页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、基于纯flash的动画网站的设计与实现_毕业论文1目录内容摘要1ABSTRACT1KEY WORDS11绪论21.1研究背景21.2 flash网站的现状22FLASH网站的开发环境和相关技术32.1 flash网站开发的环境32.2 flash网站开发的相关技术32.3 ActionScript相关知识43网站设计的前期规划53.1 网站的名称53.2网站素材收集63.3网站的色调及风格63.4 网站的布局及栏目63.5网站的框架74FLASH网站的页面设计74.1开场动画的设计74.2彩妆栏目的设计84.3男士页面的设计125网站的合成145.1 路径的使用145.2 loadMove的介
2、绍166小结17参考文献19致 谢201内容摘要:随着信息技术的不断发展,信息的获取也是多种多样,然而当今时代信息传播最快的莫过于通过网络平台。网站也就成为了每个个体和企业宣传自己的一个平台。网站的形式也是多种多样,本研究课体主要是介绍运用现在流行的flash技术来做商业型的网站。现在大多数的网站都是静态的html网站,很是平凡,也很难吸引人的眼球,这时就有人发明了flash,起初flash只是做一些小型的动画,为html网站做一个banner、logo或是一个开场动画,正是因为网站中添加了这些使人们眼前一亮的小动画,网站的浏览量也随之提高了。然而这还不能满足我们的眼球,于是纯flash网站就
3、此诞生了。对于商业网站主要是为了商品的展示,以做到宣传作用。Flash网站可以为客户提供一个交互的平台。本网站主要是对法国化妆品兰蔻网站的设计和实现做了具体的分析。关键词:FLASH网页制作商品展示Abstract:As information technology continues to evolve, access to information is also varied, but the present era of information dissemination than the fastest network platform. Web site has become the
4、 business of each individual and promote their own platform. Site on many forms, the main body of this study is to introduce the use class is popular flash-based web site technology to do business.Now most sites are static html site, it is trivial, it is difficult to attract the eye, then someone in
5、vented the flash, at first just do some small flash animation, html website to make a banner, logo or is an opening animation, it is because the site added these people shines a small animation, the site also will increase page views. However, this does not meet our eyes, so pure flash website on so
6、me born. For commercial sites primarily for the display of goods in order to achieve publicity.Flash website can provide customers with an interactive platform. This site mainly for the French cosmetics - Lancome website design and implementation is also in the specific analysis.Key words:FLASHPage
7、CreatorCommodityexhibition1绪论1.1研究背景随着计算机网络技术的迅猛发展和信息基础设施的不断完善,网络已渗透到社会生活的方方面面,它不仅改变了人们的工作、生活、学习和交流方式,而且已经对整个社会的政治、经济 、科学、技术、文化和教育等领域产生了深刻影响。计算机网络为人们跨越时间、空间的信息传输、加工处理和共享提供了可能。计算机网络的产生和发展是人类社会科学技术进步和发展的一个重要标志,其产生的主要动力之一是社会应用需要。 随着计算机技术的发展和应用领域的不断扩大,独立的计算机信息处理已经无法满足人们对远距离信息处理和信息共享的需求。这种需求的驱动和计算机技术、通信技
8、术以及微电子技术的发展、渗透和融合,成为计算机网络产生的主要动力。在60年代中期,计算机与计算机通信的实现为计算机网络的形成和产生打下了良好的基础,ARPANET网络就是这一时期的典型代表。如今计算机网络正朝着集成化、高速化、智能化和多媒体化等多个方向发展1.2 flash网站的现状 随着互联网技术的迅猛发展,网站数量与日俱增。有的昙花一现,有的经久不衰。究其原因,与浏览者的欣赏水平和网页的设计水平高低密切相关。现在的浏览者对网站的网页设计水平要求已越来越高,已经不仅仅满足于被动浏览,更有跃跃欲试的冲动。因此,动态交互网页=已经成为网页设计的必然趋势。Macromedia公司的flash 软件
9、的正式发布,就是宣告了动态的网站将走入人们的生活。这个新产品更加易用,效率更高,支持动态视频功能,赋予了富媒体Web内容和应用以更多创意,更是使动态交互网页设计如虎添翼,纯Flash动画的的网页也频频出现。精彩的动画与丰富的内容巧妙结合,把浏览者的目光牢牢抓住,访问量也随之迅速上升。精彩的网页动画不仅吸引了广大浏览者,更是吸引了众多的网页设计者。正因为它的视觉冲击力和互动性,做为商品的展示能使得商品更具有真实感,从而吸引了很多的商家1。2flash网站的开发环境和相关技术2.1 flash网站开发的环境Macromedia Flash为创建和发布丰富的网页内容,提供了所需的所有功能;另外,利用
10、它还能生成强大的应用程序。不管是在动画设计方面还是在制作出功能强大的应用程序,Flash都可以提供创作优秀作品的丰富工具,并且为不同的用户着想,提供很多个选项。Flash 是一种创作工具,设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常,使用 Flash 创作的各个内容单元称为应用程序,即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果,构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容,因为它的文件
11、非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比,矢量图形需要的内存和存储空间小很多,因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大,是因为图像中的每个像素都需要一组单独的数据来表示2。Flash包含了许多功能,如拖放用户界面组件、给文档添加动作脚本从而添加行为,甚至可以添加到对象的特殊效果这些功能令Flash成为功能强大且易于使用的一种工具软件。在Flash中编辑创作时,是在Flash的源文档中工作,即保存时文件扩展名为.fla的文件;在发布时,会同时创建一个扩展名为.swf的文件,这个文件将在Flash Player运行。在默认情况下,运行.swf应
12、用程序的Macromedia Flash Player会随Flash一起安装。Flash Player确保可以在各种平台、浏览器上以统一的方式来查看和使用所有的SWF内容。2.2 flash网站开发的相关技术在Flash基本动画制作中,主要有帧动画和遮罩动画的制作。帧动画是一种比较原始的制作动画的方法。它采用的原理实际上就是传统的动画片制作原理,先把动画中的分解动作一帧一帧地制作出来,然后再把它们连续播放,利用人们视觉停留效果,就会形成连续播放的动画了。在Flash中制作帧动画有两种方式,一种就是在Flash中逐帧逐帧地制作分解动作,另一种方法是导入在其他绘图软件中制作出来的分解动作的连续文件
13、。打个比方,一个图层就像一张透明的纸张,透过上面的图层可以清晰地看到下面的图层。但是遮罩图层则不同,它就像不透明的纸张一样,将下面的被遮罩层遮住,被遮罩层若要能够显示,必须在上面的遮罩图层上挖一个洞,通过这个洞才能看清楚下面的图形。遮罩图层只对它下面的被遮罩图层起作用。利用遮罩层可以实现水中倒影和波浪文字等效果。当遮罩层作用于某个普通层时,普通层上内容就会透过遮罩层上有内容的部分显示出来。将多个层结合到一个遮罩层,可以创建出很复杂的效果。除此之外,用户还可以为遮罩层制作移动的行为,以实现看到的普通层上的物体动起来的效果。遮罩层可以将和它结合在一起的普通层上面的内容隐藏起来,只有遮罩层上有内容的
14、地方才会显示普通层上的内容。应用Flash动作脚本语言编写动作脚本,可以创建具有高度交互性的动画。要创作复杂的交互动画,需要掌握本章介绍的高级技术,包括控制动画播放、建立自定义光标、获取鼠标位置、捕获按键、建立滚动文本框、设置颜色值、建立声音控制、检测碰撞和创建画线工具等。本章后面还通过一个实例,介绍这些技术的综合应用。交互动画可以与用户互动。用户可以使用键盘、鼠标或二者操作,中转到动画的不同部分,移动对象、输入信息、单击按钮、以及执行其它交互操作。通过编写在指定事件发生时执行的一些动作脚本,可以创建交互动画。当播放头到达某帧时,当影片剪辑载入或卸载时,或者当用户单击一个按钮或按下键盘上的按键
15、时,触发动作脚本的事件将发生,动作脚本将告诉Flash当特定的事件发生时要执行什么动作。要创作出具有高度交互性的动画,需要用到一些高级技术。2.3 ActionScript相关知识 ActionScript是Flash的脚本语言。正是由于Flash中增加、完善了ActionScript,才使创作出来的动画具有很强的交互性。在简单动画中,Flash按顺序播放动画中的场景和帧。而在交互动画中,用户可以使用键盘或无懈可击与动画交互,大大增加了用户的参与感,同时也大大增加了Flash动画的魅力。例如,用户可以单击动画中的按钮,然后使动画跳转到不同部分继续播放;可以移动动画中的对象,如移动手中的枪,使射
16、出的子弹准确击中目标;可以在表单中输入信息,反馈对公司的意见等等。总之,使用ActionScript可以控制Flash动画中的对象,创建导航元素和交互元素,扩展Flash交互动画和网络应用的能力3。有了ActionScript,就可以通过设置动作来创建交互动画。动作就是指用ActionScript(动作脚本)编写的、当特定事件发生时执行的一组指令。触发动作的事件可以是播放头到达某帧,或用户单击一个按钮,或用户按下键盘上的键。在Flash中,在动作面板中可以编写的有帧动作、按钮动用和影片剪辑动作。使用Normal Mode(标准模式)动作面板上的控件,无需编写任何动作脚本就可以插入动作。如果已经
17、熟悉ActionScript,也可以使用Export Mode(专家模式)动作面板编写自己的脚本。指令的形式可以是一个动作(如指令动画停止播放),也可以是一系列动作(如首先计算条件,然后执行一个动作)。很多动作的设置只要求读者具有少量的编程经验,而其他一些动作的应用则要求比较熟悉编程语言,用于高级开发。ActionScript中的对象可以包含数据或作为影片剪辑以图像形式出现的编辑区中。所有的影片剪辑都是预定义类MovieClip的实例。每个影片剪辑实例均包含MovieClip类的所有属性(例如_height、_rotation、_totalframes)和所有方法(如gotoAndPlay、l
18、oadMovie、startDrag)。在面向对象的脚本编写中,依据指定的顺序,类可以相互接收属性和方法,这称为继承。利用继承可以扩展或重定义一个类的属性和方法。从其他类继承而来的类称为子类,传递属性和方法到另一个类的类称为父类。一个类可以是子类,也可以是父类。 3网站设计的前期规划3.1 网站的名称Lancome兰蔻。本网站是一个商业型的网站,做网站的目的就是为了提高公司的知名度,让公司的产品推广出去,让更多的消费人郡知道这个公司的存在。兰蔻主要是推出化妆品。运用flash技术去做商品展示型的网站,可能让用户更直观的了解产品,并且给用户一种视觉的享受,让用户可以和计算机之间有一个交互的过程。
19、3.2 网站素材收集兰蔻是法国的一个知名品牌,在全国各地都有销售,兰蔻也有自己的网站。因此网络成为了获取信息的一个最佳路径。通过在网上查找一些兰蔻产品的图片和文字信息,同时根据设计的需求,做一些相应的背景和小动画为网页做陪衬。素材收集完后,再把图片在photoshop的处理,做一些文字效果。最后进行设计,将图片加上文字解说放入网站中,运用flash技术做出动态的效果。3.3 网站的色调及风格化妆品主要是针对的广大女性,因此选用了紫色和白色相结合的色调,给人一种高贵优雅的感觉。 网站的风格简单大方,运用渐变的色块将网站分为了三大块,分别是logo导航、内容和版权信息。3.4 网站的布局及栏目网站
20、的布局:首先在上部放入网站的左边logo和兰蔻的标志,中间放入导航,右边放上背景音乐的播放动画。网站中间的部分为网站的主要内容部分,点击导航中的菜单,相应的内容就会也现在中间的版块中。最后是页面下部分为网站的版权信息。如图3-1所示:图3-1本网站的栏目主要分为首页、推荐、彩妆、护肤、香水、男士、论坛七个栏目。如图3-2所示。图3-23.5 网站的框架网站具体框架如图2-3所示主页推荐产品彩妆产品论坛护肤产品香水男仕新品口碑产品畅销排行眼部保湿系列璀璨香水清洁系列肤色唇部抗皱系列美白系列珍爱香水奇迹香水梦魅香水防晒系列修复系列防晒系列护理系列图3-34flash网站的页面设计4.1开场动画的设
21、计开场动画中的图片切换用了逐帧动画,每隔一帧放一张图片。而线的残影效果的实现的实现过程如下:1) 新建一个影片剪辑,画一个矩形将它的四分之三的部分去掉,将其转换为片剪辑,命名为bk,新建一层,复制粘贴帧,点击“修改”“变形”“水平翻转”,将图层2中的图形翻转过来和图层1中的图形相对,将两个图形移到中间刚好是个矩形,在第10帧的位置插入关键帧,将两个图形分别向外移动,移到刚好容下一张变换的图片为止,为它们创建形状补间动画2) 新建一个影片剪辑,将影片剪辑bk拖入,新那一层,复制粘贴帧,点击“修改”“变形”“水平翻转”,将图层2中的图形翻转过来和图层1中的图形相对,将它们移动到中间的位置刚好放下切
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- flash 动画 网站 设计 实现 学位 论文
限制150内