基于纯flash的动画网站的设计与实现文档格式.docx
《基于纯flash的动画网站的设计与实现文档格式.docx》由会员分享，可在线阅读，更多相关《基于纯flash的动画网站的设计与实现文档格式.docx（20页珍藏版）》请在冰点文库上搜索。
计算机网络的产生和发展是人类社会科学技术进步和发展的一个重要标志，其产生的主要动力之一是社会应用需要。
随着计算机技术的发展和应用领域的不断扩大，独立的计算机信息处理已经无法满足人们对远距离信息处理和信息共享的需求。
这种需求的驱动和计算机技术、通信技术以及微电子技术的发展、渗透和融合，成为计算机网络产生的主要动力。
在60年代中期，计算机与计算机通信的实现为计算机网络的形成和产生打下了良好的基础，ARPANET网络就是这一时期的典型代表。
如今计算机网络正朝着集成化、高速化、智能化和多媒体化等多个方向发展
1.2flash网站的现状
随着互联网技术的迅猛发展，网站数量与日俱增。
有的昙花一现，有的经久不衰。
究其原因，与浏览者的欣赏水平和网页的设计水平高低密切相关。
现在的浏览者对网站的网页设计水平要求已越来越高，已经不仅仅满足于被动浏览，更有跃跃欲试的冲动。
因此，动态交互网页=已经成为网页设计的必然趋势。
Macromedia公司的flash软件的正式发布，就是宣告了动态的网站将走入人们的生活。
这个新产品更加易用，效率更高，支持动态视频功能，赋予了富媒体Web内容和应用以更多创意，更是使动态交互网页设计如虎添翼，纯Flash动画的的网页也频频出现。
精彩的动画与丰富的内容巧妙结合，把浏览者的目光牢牢抓住，访问量也随之迅速上升。
精彩的网页动画不仅吸引了广大浏览者，更是吸引了众多的网页设计者。
正因为它的视觉冲击力和互动性，做为商品的展示能使得商品更具有真实感，从而吸引了很多的商家[1]。
2．flash网站的开发环境和相关技术
2.1flash网站开发的环境
MacromediaFlash为创建和发布丰富的网页内容，提供了所需的所有功能；
另外，利用它还能生成强大的应用程序。
不管是在动画设计方面还是在制作出功能强大的应用程序，Flash都可以提供创作优秀作品的丰富工具，并且为不同的用户着想，提供很多个选项。
Flash是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。
Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。
通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。
您可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。
Flash特别适用于创建通过Internet提供的内容，因为它的文件非常小。
Flash是通过广泛使用矢量图形做到这一点的。
与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。
位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示[2]。
Flash包含了许多功能，如拖放用户界面组件、给文档添加动作脚本从而添加行为，甚至可以添加到对象的特殊效果……这些功能令Flash成为功能强大且易于使用的一种工具软件。
在Flash中编辑创作时，是在Flash的源文档中工作，即保存时文件扩展名为.fla的文件；
在发布时，会同时创建一个扩展名为.swf的文件，这个文件将在FlashPlayer运行。
在默认情况下，运行.swf应用程序的MacromediaFlashPlayer会随Flash一起安装。
FlashPlayer确保可以在各种平台、浏览器上以统一的方式来查看和使用所有的SWF内容。
2.2flash网站开发的相关技术
在Flash基本动画制作中，主要有帧动画和遮罩动画的制作。
帧动画是一种比较原始的制作动画的方法。
它采用的原理实际上就是传统的动画片制作原理，先把动画中的分解动作一帧一帧地制作出来，然后再把它们连续播放，利用人们视觉停留效果，就会形成连续播放的动画了。
在Flash中制作帧动画有两种方式，一种就是在Flash中逐帧逐帧地制作分解动作，另一种方法是导入在其他绘图软件中制作出来的分解动作的连续文件。
打个比方，一个图层就像一张透明的纸张，透过上面的图层可以清晰地看到下面的图层。
但是遮罩图层则不同，它就像不透明的纸张一样，将下面的被遮罩层遮住，被遮罩层若要能够显示，必须在上面的遮罩图层上挖一个洞，通过这个洞才能看清楚下面的图形。
遮罩图层只对它下面的被遮罩图层起作用。
利用遮罩层可以实现水中倒影和波浪文字等效果。
当遮罩层作用于某个普通层时，普通层上内容就会透过遮罩层上有内容的部分显示出来。
将多个层结合到一个遮罩层，可以创建出很复杂的效果。
除此之外，用户还可以为遮罩层制作移动的行为，以实现看到的普通层上的物体动起来的效果。
遮罩层可以将和它结合在一起的普通层上面的内容隐藏起来，只有遮罩层上有内容的地方才会显示普通层上的内容。
应用Flash动作脚本语言编写动作脚本，可以创建具有高度交互性的动画。
要创作复杂的交互动画，需要掌握本章介绍的高级技术，包括控制动画播放、建立自定义光标、获取鼠标位置、捕获按键、建立滚动文本框、设置颜色值、建立声音控制、检测碰撞和创建画线工具等。
本章后面还通过一个实例，介绍这些技术的综合应用。
交互动画可以与用户互动。
用户可以使用键盘、鼠标或二者操作，中转到动画的不同部分，移动对象、输入信息、单击按钮、以及执行其它交互操作。
通过编写在指定事件发生时执行的一些动作脚本，可以创建交互动画。
当播放头到达某帧时，当影片剪辑载入或卸载时，或者当用户单击一个按钮或按下键盘上的按键时，触发动作脚本的事件将发生，动作脚本将告诉Flash当特定的事件发生时要执行什么动作。
要创作出具有高度交互性的动画，需要用到一些高级技术。
2.3ActionScript相关知识
ActionScript是Flash的脚本语言。
正是由于Flash中增加、完善了ActionScript，才使创作出来的动画具有很强的交互性。
在简单动画中，Flash按顺序播放动画中的场景和帧。
而在交互动画中，用户可以使用键盘或无懈可击与动画交互，大大增加了用户的参与感，同时也大大增加了Flash动画的魅力。
例如，用户可以单击动画中的按钮，然后使动画跳转到不同部分继续播放；
可以移动动画中的对象，如移动手中的枪，使射出的子弹准确击中目标；
可以在表单中输入信息，反馈对公司的意见等等。
总之，使用ActionScript可以控制Flash动画中的对象，创建导航元素和交互元素，扩展Flash交互动画和网络应用的能力[3]。
有了ActionScript，就可以通过设置动作来创建交互动画。
动作就是指用ActionScript（动作脚本）编写的、当特定事件发生时执行的一组指令。
触发动作的事件可以是播放头到达某帧，或用户单击一个按钮，或用户按下键盘上的键。
在Flash中，在动作面板中可以编写的有帧动作、按钮动用和影片剪辑动作。
使用NormalMode（标准模式）动作面板上的控件，无需编写任何动作脚本就可以插入动作。
如果已经熟悉ActionScript，也可以使用ExportMode（专家模式）动作面板编写自己的脚本。
指令的形式可以是一个动作（如指令动画停止播放），也可以是一系列动作（如首先计算条件，然后执行一个动作）。
很多动作的设置只要求读者具有少量的编程经验，而其他一些动作的应用则要求比较熟悉编程语言，用于高级开发。
ActionScript中的对象可以包含数据或作为影片剪辑以图像形式出现的编辑区中。
所有的影片剪辑都是预定义类MovieClip的实例。
每个影片剪辑实例均包含MovieClip类的所有属性（例如_height、_rotation、_totalframes）和所有方法（如gotoAndPlay、loadMovie、startDrag）。
在面向对象的脚本编写中，依据指定的顺序，类可以相互接收属性和方法，这称为继承。
利用继承可以扩展或重定义一个类的属性和方法。
从其他类继承而来的类称为子类，传递属性和方法到另一个类的类称为父类。
一个类可以是子类，也可以是父类。
3．网站设计的前期规划
3.1网站的名称
Lancome兰蔻。
本网站是一个商业型的网站，做网站的目的就是为了提高公司的知名度，让公司的产品推广出去，让更多的消费人郡知道这个公司的存在。
兰蔻主要是推出化妆品。
运用flash技术去做商品展示型的网站，可能让用户更直观的了解产品，并且给用户一种视觉的享受，让用户可以和计算机之间有一个交互的过程。
3.2网站素材收集
兰蔻是法国的一个知名品牌，在全国各地都有销售，兰蔻也有自己的网站。
因此网络成为了获取信息的一个最佳路径。
通过在网上查找一些兰蔻产品的图片和文字信息，同时根据设计的需求，做一些相应的背景和小动画为网页做陪衬。
素材收集完后，再把图片在photoshop的处理，做一些文字效果。
最后进行设计，将图片加上文字解说放入网站中，运用flash技术做出动态的效果。
3.3网站的色调及风格
化妆品主要是针对的广大女性，因此选用了紫色和白色相结合的色调，给人一种高贵优雅的感觉。
网站的风格简单大方，运用渐变的色块将网站分为了三大块，分别是logo导航、内容和版权信息。
3.4网站的布局及栏目
网站的布局：
首先在上部放入网站的左边logo和兰蔻的标志，中间放入导航，右边放上背景音乐的播放动画。
网站中间的部分为网站的主要内容部分，点击导航中的菜单，相应的内容就会也现在中间的版块中。
最后是页面下部分为网站的版权信息。
如图3-1所示：
图3-1
本网站的栏目主要分为首页、推荐、彩妆、护肤、香水、男士、论坛七个栏目。
如图3-2所示。
图3-2
3.5网站的框架
网站具体框架如图2-3所示
护理系列
图3-3
4．flash网站的页面设计
4.1开场动画的设计
开场动画中的图片切换用了逐帧动画，每隔一帧放一张图片。
而线的残影效果的实现的实现过程如下：
1）新建一个影片剪辑，画一个矩形将它的四分之三的部分去掉，将其转换为
片剪辑，命名为bk,新建一层，复制粘贴帧，点击“修改”——“变形”——“水平翻转”，将图层2中的图形翻转过来和图层1中的图形相对，将两个图形移到中间刚好是个矩形，在第10帧的位置插入关键帧，将两个图形分别向外移动，移到刚好容下一张变换的图片为止，为它们创建形状补间动画
2）新建一个影片剪辑，将影片剪辑bk拖入，新那一层，复制粘贴帧，点击“修改”——“变形”——“水平翻转”，将图层2中的图形翻转过来和图层1中的图形相对，将它们移动到中间的位置刚好放下切换的图形，在第5帧的位置插入关键帧，将图形分别缩小，再20帧的位置插入关键帧，将图形分别向外移动并将它们的透明度变为0。
3）新建一个影片剪辑，将1）中建的影片剪辑拖入，将其实例化为bkuang延长到第10帧，新建一个动作层，1——10帧都插入关键帧，如图4-1所示
图4-1
在第2帧上都写入如下代码：
duplicateMovieClip（"
bkuang"
"
bkuang1"
1）;
setProperty（"
_alpha,90）;
其中第2帧上的alpha的值相对于上一帧都要低，而且复制的新影片剪辑的名字依次为bkuang1——bkuangN，名字不可以一样。
透明度也要相对应它的前一帧要降低。
4.2彩妆栏目的设计
4.2.1二级面页的设计
彩妆页面主要分为了眼部彩妆、唇部彩妆和肤色。
在这一页面中，我彩用了缓动的方法，分别将兰蔻公司具有代表性的三个彩妆系列来做为二级页面的主要内容。
并且兰蔻全球创意总监AaronDeMey作为该栏目的一部分进行介绍。
彩妆页面每一个图片上都有一上透明的按钮，而文字的显示则是用了按钮事件onRollOver和onRollOut来进行调用。
到于点击图片就会进入相应的三级页面，是在该场景中放入了一个空的影片剪辑，并将其实例化，通过loadMovie来调用外部文档。
打开彩妆页面和进入三级页面的图片的进入和退出用到的是缓动。
进入时的主要代码如下：
importmx.transitions.Tween;
importmx.transitions.easing.*;
myTween=newTween（mc1,"
_y"
Elastic.easeOut,600,10,0.8,true）;
为了让它们出现逐个进入的效果，只需将它们的速度改变一个即可，也就是修改0.8的值，数值越大表示出现的越慢。
退出时是设计了一个函数，代码如下：
functiondown（mc,time）{
myTween=newTween（mc,"
Back.easeIn,30,500,time,true）;
}
用是只需调用并改变它们的影片剪辑的名字和速度就可以为了，也就是mc和time的值。
4.2.2三级页面的设计
4.2.2.1按钮的设计
三级页中的按钮用的是补间动画。
本页面中的按钮为透明按钮。
主要用到了按钮事件中的onRollOvert和onRollOut，当鼠标移到按钮上时影片剪辑开始播放并且在某一帧停下来，当鼠标移开时，再播放后面的帧。
具体步骤如下：
1）新建一个图形元件，画一个矩形，不要边框。
2）新建一个影片剪辑，将做好的矩形图形元件拖入制作一个两帧的逐帧动画
将第一帧和第二帧的透明度改成不一样的。
3）新建一个影片剪辑，将做好的矩形图形元件拖入，做一个从小到大且从透明度0到100的补间动画具体设置如图所示（前10帧）。
在第11帧处拖入第二步所建的影片剪辑，并在该帧处加入stop（）动作。
复制1——10帧，在第12帧处插入关键帧，粘贴帧，然后翻转帧。
如图4-2所示。
图4-2
4.2.2.2图片的显示
本页面中的图片是单独的一个swf文件，当点击相应的按钮时就会用loadMove来调用一个相应的swf文件。
图片的显示用到了补间动画。
然后创建逐帧的动画，如图4-3所示：
图4-3
1）将要用到的图片转换为元件。
新建一个影片剪辑，将图片元件拖入，在25帧插入关键帧。
2）新建一层，在第5帧处插入关键帧，复制上面的帧。
创建逐帧动画，如图4-3所示，在第6帧的处插入关键帧，点击元件在“属性”面板中的“颜色”框中选择“高级”,在弹也的对话框中设置如图4-4所示。
后面的帧依次降低它的alpha值和RGB值。
RGB的值降到1。
图4-4
3）新建一个图层，在第3帧的位置插入关键帧，复制第一层上的第1帧，将图片缩小，创建逐帧动画，如图4-3所示，选中元件，在“属性”面板中选择“颜色”一栏中的“高级”，点击“设置”，在弹出的对话框中设置如图4-5所示。
后面的帧上的内容设置依次提高alpha的值和RGB的值，RGB的值最后一帧设为-1，并且图片要逐渐变大。
计算机毕业论文资源网QQ:
953825995
图4-5
4）新建一个图层，复制第一层的第1帧，将图片放大，创建逐帧动画，如图4-3所示，选中元件，在“属性”面板中选择“颜色”一栏中的“高级”，点击“设置”，在弹出的对话框中设置如图4-6所示。
后面的帧上的内容设置依次提高alpha的值和RGB的值，RGB的值最后一帧设为1，并且图片要逐渐变小。
图4-6
5）将第一层拖到最上方，将它设为遮罩层，将其它的三层都设为被遮罩层。
6）新建一个动作层，在最后一帧的位置写入stop（）；
动作指令。
4.2.2.3文字的显示
这里的文字显示是用到了一个逐帧动画。
文字下方是一个用逐帧制作的动画，文字是在这个动画显示完后，然后显示到上面的。
4.3男士页面的设计
男士页面主要包含了清洁、防晒、护理三个系列的产品。
其中三个系列的产品的出现方式的制作方法如下：
1）将产品的图片制作成一个补间动画。
如图4-7和图4-8所示
图4-7图4-8
选择第1帧，选中影片剪辑，在“属性”面板中，“颜色”一栏中选择“高级”，点击旁边的“设置”按钮，在打开的对话框中设置的数值如图4-9所示。
图4-9
第20帧插入关键帧，将影片剪辑水平上移一定的位置。
选中影片剪辑，在它的“属性”面板中，“颜色”一栏中选择“高级”，点击旁边的“设置”按钮，在打开的对话框中设置的数值如图4-10所示。
最后在第20帧上加入动作stop（）。
图4-10
2）新建一个影片剪辑，将刚做的影片剪辑拖进来，新建一层，在上面画一个宽270，高45（注：
宽要比拖进来的影片剪辑宽一点，高要为相对的比它低）的长方形，不要边框。
将它设为遮罩层。
将这两个图层选中复制多个按图所示摆放，直到摆放的高度超过图片的高度。
而且复制的两层也要相对下一个图层往后拖放一点。
效果如图
4-11所示
。
图4-11
5．网站的合成
网页设计完成后要想成为一个完整的网站需要把所做的网页连接到一起。
这就需要用到ActionScript语句，这里我主要用到了MovieClip.loadMovie。
还在说明的是，本网站中所用到的按钮均为透明的按钮。
5.1路径的使用
我们在使用ActionScript语句的时候，首先要弄懂的就是路径的问题，在制作网站的过程中，我就遇到了很多这样的问题，很多时候套的影片剪辑越多，路径往往越不好掌握。
在这里针对这一问题我要特别说明一下。
路径分为绝对路径和相对路径。
5.1.1绝对路径
绝对路径以文档加载到其中的层名开始，一直延续到显示列表中的目标实例。
也可以使用别名_root来指示当前层的最顶层时间轴。
例如，影片剪辑california中引用影片剪辑oregon的动作可以使用绝对路径_root.westCoast.oregon[4]。
在FlashPlayer中打开的第一个文档是加载到第0层。
您必须给其它每个加载的文档分配层号。
在ActionScript中使用绝对引用来引用一个加载的文档时，可以使用_levelX的形式，其中X是文档加载的层号。
例如，在FlashPlayer中打开的第一个文档叫做_level0；
加载到第3层的文档叫做_level3。
要在不同层的文档之间进行通信，必须在目标路径中使用层名。
下面的例子显示portland实例如何定位georgia影片剪辑上的atlanta实例（georgia与oregon位于同一层）：
_level5.georgia.atlanta
您可以使用别名_root表示当前层的主时间轴。
对于主时间轴，当_root别名被同在_level0上的影片剪辑作为目标时，则代表_level0。
对于加载到_level5的文档，当该文档被同在第5层上的影片剪辑作为目标时，则_root等于_level5。
例如，如果影片剪辑southcarolina和florida被加载到同一层上，从实例southcarolina调用的动作就可以使用以下绝对路径来指向目标实例florida：
_root.eastCoast.florida
简单的说就是，绝对路径是以主时间轴开始的，只要前面加入_root一定是绝对路径。
5.1.2相对路径
相对路径取决于控制时间轴和目标时间轴之间的关系。
相对路径只能确定FlashPlayer中它们所在层上的目标的位置。
例如，在_level0上的某个动作以_level5上的时间轴为目标时，不能使用相对路径。
在相对路径中，使用关键字this指示当前层中的当前时间轴；
使用别名_parent指示当前时间轴的父时间轴。
您可以重复使用别名_parent，在FlashPlayer同一层内的影片剪辑
升级会员 