1、第9章 网站设计综合实例,9.1 网站规划 9.2 制作首页场景 9.3 制作装载（Loading）动画 9.4 制作二级页面动画 9.5 整合 相关知识 本章小结 思考与练习,学习目标,了解Flash网站和单个Flash作品的区别 掌握Loading的制作方法 掌握常用的Action Script控制代码 掌握文本导入的方法,引例,一家宠物商店因业务拓展，需要建设一个宠物介绍网站，该商店主要经营范围包括宠物猫和宠物狗。网站制作要求界面美观且具有动感效果，必须包括商店和主要经营品种的介绍网页，页面上显示用于联系的E-Mail和新到宠物信息。,9.1 网站规划,一个网站的成功与否与建站前的网站规
2、划有着极为重要的关系。在建立网站前应明确建立网站的目的，确定网站的功能、规模等。只有详细的规划，才能避免在网站建设中出现的很多问题，使网站建立能顺利进行。,9.1.1 需求整理,网站规划的第一项任务就是对用户的需求进行整理，明确用户的建立目标。,任务1 确定一级栏目,任务要求对用户提出的具体要求进行整理，确定一级栏目。 任务分析一个网站由多级栏目构成，一级栏目是直接显示在主页上的链接，通过对用户的实际业务开展情况进行整理，可以确定网站的一级栏目。,边学边做,请分析个人网站的一级栏目应有哪些？,任务2 确定二级页面风格,任务要求根据“任务1”确定的一级栏目，确定二级页面的总体风格，并且保证整个网
3、站风格统一，丰富多彩。 任务分析二级页面是单击主页上一级栏目链接后，展示一级栏目详细内容的页面。二级页面的风格有多种，根据实际需求确定它的风格至关重要。如果显示的内容不是很多，可以选用图片为主风格的二级页面，否则需要选用以显示文字链接为主风格的二级页面。,边学边做,请分析个人网站的二级栏目应有哪些，采用何种风格较为妥当？,9.1.2 结构规划,根据用户需求整理出网站建设过程中需要设计的一级栏目和二级页面风格后，需要对网站进行结构规划，大体确定需要多少个页面。,任务3 规划网站结构,任务要求根据上一小节整理出的一级栏目，确定规划网站结构，绘制出结构规划图。 任务分析网站结构规划的主要任务是确定网
4、站需要多少个页面，以及页面之间的关系。Flash制作网站还需要确定主场景、次场景和按钮的个数。网站栏目：关于我们（商店介绍）、宠物猫猫、宠物狗狗、新到宠物、联系我们,边学边做,请设计一个个人主页的网站结构。,9.2 制作首页场景,Flash网站由主场景、子场景、次子场景等构成，与制作html网站类似，一般先制作一个主场景“index.swf”，主要内容包括：长宽比例、背景、栏目导航按钮、网站名称等首页信息。最后发布成一个html文件，或者通过网页设计工具制作一个html页面，插入“index.swf”。,9.2.1 设置背景,利用Flash制作网站的第一步是布置好舞台，以保证整个网站简洁、实用
5、风格统一。,任务4 设置舞台大小,任务要求新建一个Flash文档，设置舞台大小为800600像素，背景白色，保存文档，命名为Index.fla。 任务分析常见的计算机的分辨率是800600像素或1024768像素，将舞台大小设置为800600像素通用性较强。,任务5 背景过渡,任务要求新建一个图形元件，并制作淡入背景动画。 任务分析体现出背景过渡效果，可以新建一个图形元件。在元件中绘制一个填充色与背景颜色不同的图形，设置图形元件的透明度，生成“动画”补间，体现出背景过渡效果。,任务6 底部导航背景,任务要求新建一个图形元件，并将其拖动到舞台底部，作为一级栏目导航按钮的背景。 任务分析通过颜色可
6、以体现出主页功能分区，与“任务5”类似。新建一个名称为“BG_Black”的图形元件，并在元件中绘制一个矩形，填充色黑色、无边框、边脚半径0点、宽度800像素、高度10像素，底部边与舞台重合。在“场景1”中插入一个名称为“BG_Black”的图层，选中该图层的第1帧，将“BG_Black”图形元件拖拽至舞台底部，使其底边与舞台重合。,边学边做,请自己创意，设计配色方案填充舞台背景。,任务7 边框,任务要求新建一个背景图形元件，在元件中绘制大小合适的边框，并在图形元件中添加版权信息和公司名称。 任务分析与前面几个任务类似，新建一个名称为“BG_Border”的图形元件，并在元件中绘制一个矩形，无
7、填充色、黑色边框、边脚半径15点，删除左、右边线，使其与舞台融为一体。利用“文本工具”输入版权信息和公司名称，合理调整宽度使其位于舞台内部，并且具有恰当的边距，简洁美观。,边学边做,请用户自己创意，设计一个Logo（公司标志）添加至“BG_Border”图形元件中。,9.2.2 创建按钮,首页上需要显示全部一级栏目的链接，这一小节将创建一系列与一级栏目相关的按钮。 任务8 创建主页按钮,任务要求,创建一个图标与主页相关的按钮，当鼠标经过和按下按钮时显示文字提示主页，完成后的状态如图9-5所示。,任务分析,几乎所有网站的导航栏上都有主页按钮或链接，Flash的公共库中提供了很多典型的按钮，用户可
8、以对这些典型按钮进行修改以满足实际需求。,边学边做,1.制作“关于我们”按钮元件，命名为“Index_Aboutus”，放置在独立图层上。 2.制作“联系我们”按钮元件，命名为“Index_Email”，放置在独立图层上。,任务9 创建一级栏目按钮,任务要求 在网页底部放置“宠物猫猫”、“宠物狗狗”和“新到宠物”三个按钮，当鼠标指针指向按钮时突出显示按钮上的文字。,任务分析,按钮元件有弹起、指针经过、按下、点击四个状态，当鼠标指向按钮时文字放大效果，只需要将弹起状态文字的字号设置小一些便可实现，完成状态如图9-7所示。,边学边做,1.制作“宠物狗狗”按钮元件，命名为Index_Dog，放置在独
9、立图层上。 2.制作“新到宠物”按钮元件，命名为Index_New，放置在独立图层上。 3.将三个一级栏目按钮放置在主页右下角，底端对齐。,9.2.3 制作动画,完成首页的背景设置和基本按钮制作后，接下来制作首页动画。,任务10 创建导航按钮动画,任务要求制作“主页”、“关于我们”和“E-Mail”按钮的淡入效果动画，淡入顺序为主页按钮、关于我们按钮、E-Mail按钮。 任务分析元件的“Alpha”属性由低变高的动画补间可以实现淡入效果。通过移动不同图层帧的播放顺序控制元件淡入的顺序，例如“主页”按钮应在“背景过渡”图层动画播放完毕并且持续一段时间后再开始起作用，所以主页按钮淡入动画的第1帧就
10、需要放在第15帧或更大帧处。下面以主页按钮和关于我们按钮为例介绍制作方法。,边学边做,完成“E-Mail”按钮的动画效果制作。 完成“宠物猫猫”、“宠物狗狗”和“新到宠物”按钮淡入效果的制作。 设置三个按钮的播放顺序，使它们逐一出现。 延长其他图层的帧，使动画播放画面和谐一致。,9.3 制作装载（Loading）动画,SWF格式的Flash影片可以实现边下载边播放，由于受到当前网络传输的制约，对于大容量的影片，这种实时播放并不理想。为避免用户尴尬的等待，Flash制作人员往往设计一个装载(Loading)的画面，等待影片的全部字节下载到本地后再播放，从而保证影片的播放质量。这一节将介绍一种Lo
11、ading制作方法。,9.3.1 制作影片剪辑元件,任务11 制作飘动效果的Loding影片剪辑 任务要求在“index.fla”文件中新建一个名称为“场景0”的场景，在该场景中制作一个飘动文字效果的影片剪辑，完成状态如图9-9所示。,任务分析,影片在装载过程中需要不断播放一段动画，影片剪辑元件是一段独立的简单动画，只要整个影片不停止，它就会不断循环播放。飘动文字效果是通过将单个文字放置在独立图层上，在图层上制作单个文字位置变化的动画，最后让每个图层动画的播放具有一定时间差而实现的，完成状态如图9-10所示。,边学边做,参照操作步骤，完成其他字母和符号的动画制作。 延长帧，使所有层的动画播放长
12、度一致。 测试影片剪辑。 在“场景0”中新建一个名为“装载”的图层，将“Loading”影片剪辑放置在舞台中心，并延长至第30帧。,9.3.2 合成影片,任务12 添加帧标签任务要求请为首页场景（场景1）添加的帧标签“End”，以便在Loading动画显示过程中判断主场景是否装载完毕。任务分析因为swf格式的Flash影片可以实现边下载边播放，所以通过判断标志帧是否已经下载，来控制Loading动画播放状态。Flash允许用户为帧添加标签，以便Action Script编程中访问帧方便。首页场景（场景1）完全加载完毕的状态是最后一帧被加载。但是等待最后一帧加载完毕会产生一定的延迟，一般情况下，
13、将最后一个关键帧作为加载结束标志。单击选中一帧后，可以在“属性”面板上设置这一帧的帧标签的名称、锚记、注释,边学边做,请在“场景1”中任选一个图层，为该图层的第二帧设置帧标签“Start”。 请在“场景0”中新建一个图层，在第30帧处插入一个关键帧，并且设置帧标签“Play”。,任务13 编写Action Script语句,任务要求 编写Action Script语句实现影片的动态装载。,任务分析,实现动态装载主页场景的思路是：播放Loading动画的同时不断的判断主页场景的“End”帧是否已经加载；如果已经加载，则跳转至Loading动画的结束帧（Play）帧，如图9-12所示。,9.4 制
14、作二级页面动画,制作出首页场景后，网站的骨架已经搭建完毕，首页上的按钮应该链接至具有统一风格的二级页面上，这一节以“宠物猫猫”动画为实例学习二级动画页面的制作方法。,9.4.1 创建二级主文件,任务14 创建场景和按钮 任务要求 新建一个Flash文档，命名为“Cat.fla”.根据用户的要求，制作“宠物猫猫”的二级动画页面，该页面仅包括4个显示宠物猫缩略图片的图形按钮和一个标题，并且单击相应按钮可以导入介绍宠物详细信息的动画文件。,任务要求,请建立场景和所需要的全部按钮，布置好舞台，完成状态如图9-13所示。,任务分析,“宠物猫猫”二级动画页面是单击首页场景动画上的按钮后转到的页面。制作二级
15、页面时要保证其大小与首页场景的大小完全一致。,边学边做,请创建Cat2、Cat3、Cat4按钮，并放置在新建的同名图层上。 排列好四个按钮。,任务15 创建按钮淡入动画,任务要求 创建Cat1Cat4按钮依次淡入的动画效果，完成状态如图9-14所示。,任务分析,按钮已经分布在不同的图层上，只需要先在每个图层上制作按钮淡入动画，然后移动帧播放位置即可实现。,边学边做,完成Cat2Cat4图层动画制作。 排列动画播放顺序，使动画播放和谐。 在整个影片的最后一帧编写Action Script语句使动画自动停止播放。,9.4.2 创建宠物详细信息动画,任务16 创建宠物详细信息动画 任务要求为每个宠物
16、新建一个Flash文档，介绍宠物猫的详细信息，动画中包含淡入效果的宠物图片，供二级主动画调用。,任务分析,因为二级主动画中的按钮均分布在舞台的左侧，宠物详细信息需要加载至二级页面中显示，所以制作动画时要将宠物信息和介绍文字放置在舞台的右侧。,边学边做,制作Cat2-Cat4详细信息动画，每个动画一个文件，保存至“Cat”文件夹中，并发布swf文件。,任务17 加载宠物介绍文字,任务要求在每个宠物下方，显示介绍详细信息的文字，将文字存放在文本文件中。,任务分析,Flash提供了“loadVariables”函数，该函数可以从外部文件（例如文本文件或由 ColdFusion、CGI 脚本、Acti
17、ve Server Page (ASP)、PHP 或 Perl 脚本生成的文本）中读取数据，并设置目标影片剪辑中变量的值，修改时只需要修改txt文本内容就可以实现Flash相关文件的修改。,边学边做,完成Cat2-Cat4介绍动画的制作。,9.5 整合,将首页场景、二级和三级动画场景整合成一个整体后，网站才能与用户见面，这一节主要完成整合工作。,9.5.1 二级页面整合,任务18 整合二级页面 任务要求将所有的二级页面和宠物详细信息介绍动画整合起来。,任务分析,二级页面仅包括4个显示宠物猫缩略图片的图形按钮和一个标题，单击相应按钮可以导入介绍宠物详细信息的动画文件。整合的主要任务是编写按钮的A
18、ction Script代码。,边学边做,完成Cat2-Cat4动画的整合。,9.5.2 首页场景整合,任务19 整合首页场景 任务要求将首页场景上所有按钮与二级页面整合起来。 任务分析与二级页面整合类似，采用“LoadMovieNum”函数装载二级页面的swf文件。两者的区别是：首页装载新的二级页面时需要保留主场景，并且需要卸载掉已装载的其他二级页面的子页面（即详细信息页面）。,边学边做,完成其他二级页面的整合。,相关知识,运用Flash进行网站设计的相关知识如下： 场景运用方法。 影片剪辑、图形、按钮元件的制作和使用方法。 网站规划和设计方法。 帧标签的设置方法。 gotoAndPlay、
19、ifFrameLoaded、loadMovieNum和unloadMovieNum函数的使用方法。 绝对路径和相对路径的概念和运用。 元件的复制和实例交换操作。,本章小结,本章以宠物在线网站制作为实例，介绍了利用Flash进行网页制作的一般方法。制作全Flash网站和制作Html网站类似，事先应先确定网站的结构关系，包括网站的主题、哪些基本元素、需要重复使用的元素、元素之间的联系、元素如何运动、用什么风格的音乐、整个网站可以分成几个逻辑块、各个逻辑块间的联系如何、以及是否打算用Flash建构全站或是只用Flash做网站的前期部分等等，都应考虑到。 实现“全Flash”网站的方法有多种，但基本原理是相同的。即将主场景作为一个“舞台”，这个舞台提供标准的长宽比例和整个的版面结构；“演员”就是网站子栏目的具体内容，根据子栏目的内容结构可能会再派生出更多的子栏目。主场景作为“舞台”基础，基本保持自身的内容不变，其它“演员”身份的子类、次子类内容根据需要被导入到主场景内。多掌握一些swf文件和影片剪辑装载和控制的语句对制作“全Flash”网站会有一定帮助。,思考与练习,编写宠物在线网站的主页按钮的代码。 完成宠物狗狗和新到宠物二级页面的制作，并整合至主场景中。 完成E-Mail按钮的代码。,
