第11章纯FLASH网站制作.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,浙江经济职业技术学院 信息与控制学院,网站建设与网页制作案例教程,按一下以编辑母片,第二层,第三层,第四层,第五层,按一下以编辑母片标题样式,*,第一章,10,纯,lash,网站制作,第一章,（理论,4,课时，实践,4,课时）,教 学 要 求 与 内 容,应知目标,应会目标,了解,Flash,网站的基本布局,了解,Flash,网站的按钮制作,了解,Flash,网站的的页面切换,能够独立布局真个网站,能够独立制作网站按钮和文本的加载,能够掌握每个页面的加载和切换技术,教 学 要 求 与 内 容,预备知识,熟悉,Flash CS3,的,AS,命令,掌握,Flash CS3,工具箱中各种功能强大的绘图、编辑和辅助工具的使用,了解元件、实例和库的概念，掌握图形、影片剪辑和按钮这三种元件的制作方法,教 学 要 求 与 内 容,课时安排,项目,学时,教学方式（参考）,预习,课余,课堂讲解,4,学时,Flash,网站的基本布局,Flash,网站按钮的制作,Flash,网站,Loading,的制作,Flash,网站全站页面的切换,Flash,网站的调试与常见问题,实践,4,学时,Flash,全站“赣江宾馆”网站部分页面的制作实例。,第二部分,:,课堂讲解,10.1Flash,网站制作的基础技术知识,做出一个优秀的,flash,站的重要前提是什么？首先是对美的理解，再次是用户界面的合理性。,曾经见过很多全站，充斥着各种动态效果以及技术模块，但是效果却不尽如人意，看起来很有土洋结合的味道，同时也看过很多国外的源文件，我发现里面用到的技术并非非常复杂的,as,程序。但是无论是界面配色以及动态效果都非常的不错。可以说一个,flash,站是否有视觉冲击力是它价值的首要体现，而缺乏基本的美术功底，做出来的东西就必然缺乏美观。所以，任何软件或者技术都是为了实现目的而服务的，在我们努力学习,as,语言的同时，也应该不断的加强自己的艺术修养，而这个对美判断的能力显然需要比学任何计算机语言都要付出更多的时间去积累和沉淀。否则就算熟透,as3,，驾驭了,air,。我们同样永远也做不出优秀的作品,10.1.1 flash,网站的基本布局,图,10-1,网站的基本布局,10.1.1 flash,网站的基本布局,一般来说，这个结构是我最常用的,flash,全站结构，在,flash,中，我会根据不同的页面元素进行分类，然后分布在各个层中，并且起上相应的名字，便于操作，在源文件中建议养成良好的命名习惯，通常一个全站在成型之前，这个文件，我们会对他操作,n,次，所以为了提高工作效率以及方便日后调用，良好的结构非常重要。如上图所示，,as,脚本层放置在最上方，页面中的所有元素都根据实际的深度排列到相应的层中。,bg,也就是页面背景放置在最下方。,10.1.1 flash,网站的基本布局,1,：通常影片的场景大小，我设置成,1002*620,，以适应各种显示器分辨率，帧率设置成,30,，根据需要也可以进行调整。,2,：,loading,通常放在第一帧，而且除了背景以外，并不安排其他元素在第一帧内，这样可以保证第一帧的数据量很小。便于,loading,动画的正确显示。,3,：每个大型的深层次,mc,，以及经常需要切换到内部的,mc,，比如页面的,mc,，导航部分的,mc,，等等，我通常会在场景外做一个入口，也就是一个色块，因为有的,mc,并非在内部的第一帧就有内容，在外层的时候他是空白的，所以为了便于操作，在内部的第一帧建立一个色块，便于随时双击进入操作。,10.1.1 flash,网站的基本布局,4,：不要把所有的动画和内容都安排在主时间轴里，这样的操作会让你在以后的施工中非常的难于调整，甚至无法增添内容。我认为，应该把内容分成大类，然后相应的做成原件，根据内容的树状结构，相应的安排,mc,的嵌套。然后在各个时间轴里，用写在某个位置的,as,来控制各个时间轴的衔接。,比如,mc1,和,mc2,都是内部有非常复杂动画的,mc,，我们要,mc1,动画完毕后开始,mc2,，这时候就不要把两个,mc,的内部动画放在一个时间轴内，最好是分别,mc1,mc2,各一帧，同时在,mc1,内部的最后一帧上写,_parent.gotoandplay(mc2,所在的帧,),。,10.1.2loading,的制作,关于,loading,的制作，有好几种方式，这里介绍一个最常用的做法。,loading,原件通常安排在主时间轴上，内部的动画一定要打包成,mc,，呵呵，这个,loading,的内部动画安排成,100,帧，形式可以随意。只要是个,100,帧的动画就可以了。,图,10-2Loading,的命令,10.1.3,有关于按钮,其实,flash,站,80%,的功能都是基于鼠标事件来完成的，所以按钮在网站中的地位不言而喻，一个,flash,全站无非就是通过一些按钮的导向来播放不同位置的,mc,。按钮有两种方式可以实现。一种是按钮元件，一种是影片剪辑元件，这两个原件中。按钮只有,4,帧，而影片剪辑没有限制，所以如果需要一个有动画效果的按钮的时候，我们就只能用影片剪辑也就是,mc,来实现。事实上，我认为，,mc,在大部分时间里都可以替代按钮，通过脚本控制,mc,来实现按钮的功能要比按钮灵活的多,。,10.1.3,有关于按钮,这是一个最通常的动画按钮的内部结构：,图,10-3,动画按钮的内部结构,10.1.3,有关于按钮,提示：这里需要提示的是关于帧标签的概念：上图中时间轴里标注的,s1,与,s2,是帧标签，在帧的属性栏里可以输入，使用了帧标签可以用,gotoAndPlay,等等语句来播放该帧标签所开始的位置，过了该帧标签的范围后，不会停止。用帧标签的好处是你无需理会关键桢的数值，在任何地方播放这段动画，都可以含义明了的操作，并且容易解读和记忆,。,10.1.3,有关于按钮,在这个按钮,mc,所在的帧上（上图的外层）写上如下脚本，这个按钮就生效了。,btn1.onRollOver=function()btn1.gotoAndPlays1;,btn1.onRollOut=function()btn1.gotoAndPlays2;,btn1.onRelease=function();,10.1.3,有关于按钮,可以看出在用脚本对,btn1,按钮添加了,onRollOver,，,onRollOut,，,onRelease,事件后，也就是经过，离开，点击，这个,mc,就拥有了一个按钮的,3,种状态，至于点击并不松手这种状态，通常并不常用，所以就没有添加，如果需要的话，那么只需要在对应的帧上写,onPress,事件就可以了,需要注意的是：利用这样的写法来实现的按钮，时间轴不能过长，也就是说，动作效果不能动画太长，如果时间很长的话，当你的鼠标划过的时候，这个按钮会执行,s2,部分，而这么长的动画，你并不是想要播放的，这个按钮已经可以说是一段用鼠标事件激活的动画了，不该用鼠标经过这样的事件来激活,10.1.3,有关于按钮,在全站中经常有这样的情况，即是很多按钮都要实现类似或者同一种类的功能，那么一一写,onRollOver,等等就烦琐了。如图,10-4,：,图,10-4,10.1.3,有关于按钮,这时候我们就需要用循环的功能了，如果看不懂，你可以去深究到底是怎么写法，我们先把他粘贴过去，然后把我们需要的部分修改掉。,假如有,5,个按钮，按钮的名字是,pm1,，,pm2-pm5,当鼠标经过这些,mc,的时候，如果经过的不是已经点过的,mc,的话，就播放这个,mc,的“,s1”,部分，鼠标离开的时候，满足同样条件就播放“,s2”,部分，点击这个,mc,的话，上一个被点的,mc,播放,s2,部分（通常也就是回到初始的状态）。,10.1.3,有关于按钮,stop();functionrollover()if(_root.a!=this.indexNum)this.gotoAndPlay(s1);functionrollout()if(_root.a!=this.indexNum)this.gotoAndPlay(s2);functionrelease()this._parentpm+_root.a.gotoAndPlay(s2);/,上一个被点的按钮执行播放,s2 _root.a=this.indexNum;/,上面的代码顺序不能错。代码执行也是有顺序的，,/,点击后需要做的事情写在这里。,for(vari:Number=1;i6;i+)thispm+i.onRollOver=rollover;thispm+i.onRollOut=rollout;thispm+i.onRelease=release;thispm+i.indexNum=i;,10.1.3,有关于按钮,这段代码很简单，是,as,比较基础的语句，关于,for,，以及,if,语句的用法，请自己在网上找，有的是。其实，做,flash,站，最常用的语句就是这两个，应该理解透。新手朋友需要注意的是,if,后面的条件要用,=,来判断，如果只写一个,=,，那么这个条件就永远都成立，因为,=,是赋值的意思，而,=,才是判断，这里的,for(var i:Number=1;i6;i+),部分，如果你有,5,个按钮那么,i6,，如果,6,个就,i7,。,10.1.3,有关于按钮,需要非常重视的是这个东西,_root.a,，这是一个变量，我叫这个东西为“标志位”，当然也可以叫做,_root.abcde,，在这里利用这个,_root.a=,来记录当前鼠标事件的对象，当点了,btn1,的时候，这个,_root.a=1,，,_root,在,as,里是顶级的位置，我们写,_root.a=1,就是表明在主时间轴建立一个变量值为,1,，之所以用顶级位置，就是因为调用起来简单，方便，在任何地方都可以用，这里涉及到路径和层级的知识，总之在我们需要记录一个数据，比如页数，比如按钮序号，等等的时候，这个“标志位”使用起来是很方便的。在下面我们还会用到。,10.1.4,文本内容的显示,任何网站中都要有文字，,flash,网站中的文字，我们在制作的时候有,3,中选择，一种是静态文本，一种是动态文本，一种是输入文本，静态文本可以使用任何字体，在发布后，浏览者可以看到你源文件中使用的文本，在网站中不需要经常更新的部分，大可用静态文本来写，因为不需要浏览者也拥有你的字体，所以，很方便你对页面所做的美工。,10.1.4,文本内容的显示,动态文本，通常用来显示后台程序所提供的文本内容，或者,flash,中动态生成的文字，比如建立一个空白的动态文本，,id,名起为,mytext,，那么在他的所在帧上写如下脚本就可以让他显示出指定的文字,mytext.text=Flash,动画设计与制作,发布后，这个文本框就会显示出相应的文字，因为是动态文本，所以通常在我们需要他的场合都是例如留言本，新闻发布等需要经常更新和变化的部分。所以如何动态的读入文字就是动态文本使用的目的。如果你的工作伙伴中有程序员，那么你可以要求他的后台给你传递一个,xml,文件，然后你在,flash,端让你的动态文本显示这段,xml,，你的,flash,就拥有了相应后台的数据功能,10.1.4,文本内容的显示,动态文本与输入文本的区别在于它不能直接接受用户输入。但是，动态文本可以用来显示不同样式和字体的文本，和输入文本一样，使用文本工具可以创建动态文本框，只需在属性面板中选择“,动态文本,”即可，如图,10-5,所示。,图,10-5,动态文本的属性面板,10.1.4,文本内容的显示,要让动态文本框动态地显示文本，就需要在属性面板中为其设置变量名。如图,10-1,所示，将动态文本的变量名设为,myDynamicText,。在,Flash,影片播放时，只需改变动态文本变量的值，就可以改变动态文本框中显示的文本。动态文本有,3,种基本格式：单行、多行和多行不换行。,通过,ActionScript,可以调用,Flash,影片外部文本文件中的变量。从外部文件中获取变量的方法非常有用，它可以在不改变,Flash,文件的基础上对,Flash,影片的内容作出修改。例如要用,Flash,制作一个天气预报动画，如果每天都对,Flash,文件进行修改就太麻烦了。而使用外部变量就只需要对文本文件作出修改。,10.1.4,文本内容的显示,要从外部文件中获取变量需要用到的命令是,loadVariables,，如下所示：,loadVariablesNum(loadtxt.txt,0);,System.useCodepage=true;,其中，第,1,个参数是,Flash,影片要获取变量的文件位置，第,2,个参数是文本变量要加载到的位置，可以是,_root,，也可以是某个影片剪辑或深度级别。,Flash,将来自外部文件中的变量值加载到与指定位置中具有相同变量名的文本字段中。,第二句话是为了变量能显示中文而设定的，如果变量是中文一定要家上这句话，不然很有可能会出现乱码。,10.1.4,文本内容的显示,使用,loadVariables,命令要注意的是，指定的文本应以,Flash,影片中的文本变量名开始，否则不能被加载。本例,loadtxt.txt,中的内容如下所示：,text=FLASH,动画设计与制作,打开光盘文件：载入变量,|,载入变量,.fla,。如图,10-6,：,图,10-6,文件夹中文件的安排,10.1.4,文本内容的显示,在主时间轴中有一个动态文本框，其变量名与,loadtxt.txt,中的文本字段相同，当运行前面的脚本时，该文本框中显示：,FLASH,动画设计与制作,如果在文本文件中为变量指定多行字符串，,Flash,将自动识别换行符，从而实现自动换行。,您可以修改文本文件中的内容，,Flash,中动态文本显示的内容也将作出相应的改变。,10.1.5flash,的调试与常见问题,ctrl+,回车我们每做一个全站都不知道要按几百遍，在预览的窗口中“视图”,|“,模拟下载”选项，点击后可以查看影片的一些基本数据，比如体积，帧数，等等，其中影片尺寸在调试中，我们应当时刻注意体积的变化，以提早发现异常的体积变化，同时窗口中，还可以查看每一帧的体积，我们尤其应该注意第一帧的体积，如果体积超过,100k,，那么就应该找原因了，因为这样有可能造成,loading,失效。另外模拟下载的选项也可以测试,loading,。“视图”,|“,宽带设置”选项中，我们可以选择模拟下载的带宽。道理很简单，不再复述。如图,10-7,：,10.1.5flash,的调试与常见问题,图,10-7,10.1.5flash,的调试与常见问题,常见问题：,发布的时候，发现,loading,完全没有出现，而后面的网页也断断续续的，那么应该是你的主时间轴，忘记了写上一个（）,.,发布的时候，发现已经过了大半才出现，那么说明你第一帧的数据体积过大。,如果在发布的时候发现编译速度非常慢，并且最后影片的体积超过几十兆大，那么非常有可能是影片中的动态文本嵌入了字体，如果没有有意嵌入字体的话，就要把字体属性中的,embed,选项打开，然后将里面嵌入的部分完全去掉，就可以解决这个问题。其实中文网站嵌入字体的用处并不大，因为一个中文字体，一般都,3,兆左右，体积太大，而英文网站就相对好很多，动态文本完全可以嵌入一个美术字体来实现效果，不过嵌入字体有个作用就是控制输入的字符类型，比如一个输入文本是输入电话号码的，那么只嵌入数字字体的话，那么这个文本框就只可以输入数字类型的字符。,10.2,纯,FLASH,网站的一般制作流程,一、规划框架,制作网站好比盖高楼，没有设计图纸，没有规划好结构，盲目建造的结果往往是倒塌，也好比文章，构思好提纲，才不至于逻辑混乱，虎头蛇尾，选定好制作题材之后，不要立刻开始制作，可以先把网站内容用树状结构罗列出来，全面仔细地规划一下网站内容的结构及其链接关系，网站内容的框架可为树形，也可为星形或网状结构，框架规划的好坏也是判别一个网站优劣的重要标志，链接混乱、层次不清的网站会造成浏览困难，影响网站目的的实现。,为了提高浏览的速度和效率，方便网站内容的呈现，一般网站框架采用“蒲公英”式的较多，即所有的主要内容都链接在主页上，每个主要内容再分别展开，主要内容之间还相互链接。,10.2,纯,FLASH,网站的一般制作流程,二、准备素材,首先要考虑的是网络的传输速度与媒体的呈现质量。,一般来说，优秀的,FLASH,网站必然包含文本、图片、活动视频、动画及声音等多种媒体信息，媒体质量越高，占用的数据量就越大，为了使网站资源丰富，同时又能保证网络访问的快速，最大限度地吸引学生，制作人员必须在考虑网站呈现质量的同时考虑它所占用的数据量，谨慎选择媒体的文件格式，有时甚至不得不牺牲媒体的呈现质量及尺寸大小来减小其数据量，提高网络的访问速度，以免浏览者访问时失去等待网页下载的耐心。,一般情况下，主页上的图形应力求简朴，主页上的颜色最好不超过六十四种，单张图片不要超过,30K,，每页图片总量不要超过,60K,，较大的图片可以分割成小图片，,Flash,等动画不超过,15K,，把,avi,格式的活动视频转换为,mpeg,格式，色彩鲜艳、分辨率高的图片用,jpg,格式，色彩单调、分辩率低的图片用,gif,格式。以,14.4kbps,的连接速度而言，每页不超过,60K,图片的网页，其下载的速度是可以让人接受的。,10.2,纯,FLASH,网站的一般制作流程,三、编制网页,利用,FLASH,软件可以将制作好的表现教学内容的各种教学媒体如文字、图片、视频、,flash,动画、,gif,动画等整合到各个页面之中。,最好先制作有代表性的主页内容，将页面的结构、图片的位置、链接的方式统统设计周全，如在页面的上端显示标题、版权、版本信息、电子邮件地址（信箱）、在线问答、留言板、联络资料及与教学内容有关的友情链接，在页面的下端设置“上一页”、“下一页”、“返回主页”等链接；在页面的左侧显示主要内容菜单（一级菜单），点击一级菜单，采用下拉弹出式展开二级菜单，在页面的中部显示图文结合的教学内容。,完毕之后，可拷贝成多个页面，再填入相应的内容，这样制作页面，速度快，整体性强。制作完毕，请备份源程序及素材，以防不测。,10.2,纯,FLASH,网站的一般制作流程,四、版面设计,可以先在,PHOTOSHOP,等图形设计软件里设计好每一个页面，再根据需要，把每个图形导出来，最后再导入,FLASH,里面。,在制作页面时，请注意页面排版，确定页面风格，对页面文字、图片色彩的表达方式仔细斟酌，才能设计出庄重大方、简洁淡雅、整齐美观的页面来。,主页的作用好比一本书的封面，因此，主页的设汁应以醒目为上、令人一目了然，主页上最好有醒目的图像、新颖的画面、美观的字体，使其别具特色，令人过目不忘。但切勿堆砌太多不必要的细节，或使画面过于复杂。,从版面设计来讲，一个有特色的主页，主要包含有四个要素：文字、图片、排列方式和主色调，这四者相辅相成，缺一不可。,10.2,纯,FLASH,网站的一般制作流程,1.,文字的排版,网上阅读不同于看书，不能密密麻麻，长篇累牍，网上的文字内容可采用分屏的形式，每页内容分两屏左右，还可提供下载的方式，最好采用列表的形式。,2,图片,图片的内容应包含一定的教学信息，切忌虚饰浮夸。最佳的图片足集美观与传讯于一身。注意图画可以弥补文字的不足，但并不能够完全取代文字。,一些诸如哲学类、英语类、文学类的教材，浏览者关心的更多的是页面的文字内容，有些时候他们反而觉得放置图片影响了访问的速度，相反，一些医学类、历史地理类、美术摄影类的教材，图片则是一个极为重要的元素，缺少了图片，整个页面就会黯然失色，就不是一个完整的页面，也不利于内容的表达。所以，是否放置图片需根据网站内容表达的需要而定。但要制作出精美的图片，需借助于,Photoshop,、,CorelDraw,等图形编辑软件才能完成。,。,10.2,纯,FLASH,网站的一般制作流程,但要制作出精美的图片，需借助于,Photoshop,、,CorelDraw,等图形编辑软件才能完成。,制作好图片之后，最好为图片加上注解，因为图片的下载速度较慢，在图片没有显示出来时注解的标注有助于让浏览者知道这是关于什么的图片、是否需要等待、是否可以点击，特别是导航按纽和大图片更应如此。,为图片加一个注解，这是细节的考虑，可体现网页制作者的制作水准。,3,排列方式,页面的排版设计和图文的排版有相通之处，排列的方式取决于页面的内容，一个严肃的主题，需要采用规规矩矩的排列方式，这样显得庄重大方，而一些活泼的主题，则可以大胆排列，生动鲜明,。,10.2,纯,FLASH,网站的一般制作流程,4.,色彩,有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图象也不复杂，这主要是色彩运用得当，所以，在表现一般内容的页面中，建议尽量使用看上去比较淡雅、简洁的色彩，比如背景尽量少用灰暗、深沉的色彩（除非特殊需要），并且根据页面的主题来选择主色调。当然一些游戏类网站和另类的个人网站的颜色可以适当夸张。,10.2,纯,FLASH,网站的一般制作流程,我们在制作,江西赣江宾馆,网站中，考虑到对方喜欢古典园林的风格，色彩大多采用了赭石等偏黄的色调。,简洁即为美，一个好的,FLASH,网站的是以内容为主，形式与内容的完美结合，对于初学者来说，不应过分追求复杂的表现形式。,五、网站宣传,制作完毕，为吸引大众来浏览，使主页易于寻找，需尽量将网址传播开去，使之出现在,Internet,和所有传统媒体上、例如书刊广告、公关文件、宣传品等。,10.2.1,本实例网站的结构规划,确定网站主题，网站的具体名字和设计风格。如果是商业网站，需要了解具体客户的需要，第一时间要跟客户交流，了解客户的想法和对该网站的需求和制作网站的最终目的。例子上江西赣江宾馆是为服务类行业的客户所制作的网站，客户的需求是用该网站达到宣传自己宾馆的目的和方便客户的网上订购所需。,分析客户的想法和该网站的具体设计思路和制作方案，赣江宾馆在设计思路上体现的是客户所要求的体现自己江南园林那种幽静秀美的特色，在水字上面下足功夫。设计上运用图片，动画，音乐来营造这种气氛，由于该网站的受众人数不是太庞大，所以对网站速度要求可以适当放低。所以为了动画的精彩，网站的文件可以制作的适当大点。,10.2.1,本实例网站的结构规划,为该网站绘制树状结构图。了解客户对网站的内容需求，积极跟客户沟通，即时掌握客户要放置的内容信息，把客户所需的信息汇总分析，然后为这些信息归类，制定比较合适的页面数量。赣江宾馆网站在信息归类上，把主要内容分别归为九大类：,宾馆介绍，包含宾馆概况，宾馆沿革，企业文化三部分内容。,餐饮服务，包含餐厅介绍，经典菜肴，宴会专题，美食点评，名厨名菜，宴会预定六部分内容。,客房服务，包括标准房，单人房，套房，客房预定四部分。,会议服务，包括多功能宴会厅，大会议室，小会议室，酒店服务，会议预定五部分。,10.2.1,本实例网站的结构规划,最新信息，优惠信息，宾馆通讯，人才招聘三个部分。,在线预定，会员，一般客户，常客计划三个部分。,其他产业，包括赣江商场，赣江旅行社，赣江酒店工程有限责任公司，赣江酒店用品销售中心四部分。,康乐服务，包括一枝春茶园，芬兰浴，斯诺克室，健身房，美容厅五部分。,联系我们，包括联系我们，电子邮件两部分,注意：内容的归类没有具体的方法可寻找，在分类上既要听从客户的要求，也要按照一般人的思维去归类，不可太标新立异，让人摸不着头脑。对每个页面的进行合理的内容布局是网站设计的很重要的一块，在平的时候要多学会分析内容，经验的积累很重要。,10.2.1,本实例网站的结构规划,网站包括片头动画，主页面，九个子页面。绘制的结构图如图,10-8:,10.2.1,本实例网站的结构规划,收集资料。为我们的网站收集所需的文字，图片的资料,页面的文字资料基本由客户提供，而且客户也会告知文字资料的来源。我把赣江宾馆里面用到的文字资料整理起来按照一定的级别次序放在,Word,文件里面，具体可以打开文件夹“导航设置，文字内容”里面的“网页设置内容”,Word,文档进行参照。,图片资料，如果该公司有网络上现成的图片资料，我们可以直接下载来用。而一些实际的照片资料，我们可以去实际拍摄，比如宾馆的各个客房,商店，餐厅，公园等；为了使真个网站文件不至于太大，也是加快图片在网站里的调入速度。我们要将拍摄来的图片进行图片压缩，把图片文件缩小，图片的文件控制在,40KB,以内，把图像的大小都设为,320*240,像素。设置的方法我们在,Photoshop,与,Flash,图形图像制作整合,这一章节里提到过了，这里就不做细说了。将处理过的文件一一放在各自的文件里，具体看“处理过的图片”文件夹,10.2.1,本实例网站的结构规划,网站是由一个个网页组成，首先我们新建一个文件夹，命名为“赣江宾馆”。网站当中的一切文件都放置在这个文件夹中。我们的网站包括一个片头动画，我们命名为“,index”,。一个网站首页，我们命名为“,main”,。下面包括九个子页面，分别为：宾馆介绍、客房服务、餐饮服务、会议服务、康乐服务、在线预定、最新信息、其他产业、联系我们。,Flash,文件名分别命名为：“,aboutus”,“cate”,“contact”,“entertainment”,“guestroom”,“meeting”,“news”,“order”,“,Servation“,。,为这九个子页面分别新建一个文件夹，放置每个子页面的文字内容，和一些影片剪辑。,我们首先把第一个文件夹命名为,aboutus,，用来放置宾馆介绍页面的文字内容。,10.2.1,本实例网站的结构规划,第二个文件夹命名为“,cate”,，用来放置餐饮服务的文字内容和一些影片剪辑。,第三个文件夹命名为“,contact”,，放置联系我们页面的文字内容。,第四个文件夹命名为“,entertainment”,，放置康乐服务页面的文字内容。,第五个文件夹命名为“,guestroom”,，放置客房服务页面的文字内容。,第六个文件夹命名为“,meeting”,放置会议服务页面的文字内容。,第七个文件夹命名为“,news”,，放置新闻信息页面的文字内容。,第八个文件夹命名为“,order”,，放置在线预定页面的文字内容等文件。,第九个文件夹命名为“,servation”,放置其他产业的文字内容等文件。,再分别新建两个文件夹,image,和,loading,。,Image,文件夹主要是放置一些用到的图片，,loading,文件夹主要放置等待页面的一些小图片,10.2.1,本实例网站的结构规划,文件放置方法如图,10-9,：,图,10-9,10.2.1,本实例网站的结构规划,新建一个“,aboutus_3”,文本文件，将企业文化内容放入在里面。文本文档里面，在开头写入,语句，将宾馆概况的内容放置在该语句后面，并且以,结尾。同样的方式新建一个文本文档，命名为“,aboutus_2”,开头同样写入,语句，将宾馆沿革的内容放置在里面，并且以,结尾。,以同样的方法将其他的网页文字内容放入在各个不同的文件夹里。如图,10-10,：,10.2.1,本实例网站的结构规划,图,10-10,10.2.1,本实例网站的结构规划,注意：文件夹与,Flash,文件都是一一对应的，一个页面对应一个文件夹。文字的放置要按照顺序与每个,Flash,文件页面对应，不可把这个页面的文字内容放置在,另外一个文件夹里。,10.2.2,首页场景,Main.Swf,的制作,首先要说明的是，我们制作的,main.fla,文件，他是一个类似于平台一样的页面，本身里面只包含导航条、大的背景和每个页面切换时候的过度动作，页面本身是没有具体内容的，他的作用是通过命令把每个子页面都调用进来。,main.fla,文件要和其他的文件一起都放置在同一个文件夹之间，便于调用时候能够找到路径。,打开光盘中的,psd,文件：“赣江宾馆,psd”|“,赣江首页”。,把文件里的每个图层都导出来，存成透明的,PNG,格式。方法我们,Photoshop,与,Flash,图形图像制作整合,中已经详细讲解过，这里就不做重复了。,10.2.2,首页场景,Main.Swf,的制作,源文件参考请打开光盘中的文件：,FLASH,网站,-main.fla,。,新建一个,Flash,文档，在属性面板中大小设定为,:1002*617,，背景为灰色。将图层,1,命名为,yellow,将库里面的,yellow_bg.jpg,拖入到场景，,x,轴设为,0,，,y,轴设定为,14,，并且点击右键把他转化为影片剪辑，命名为,yellow bg,。,如图：,10-11,10.2.2,首页场景,Main.Swf,的制作,图,10-11,10.2.2,首页场景,Main.Swf,的制作,新建一层命名为,loading_mc,，在第,135,帧地方插入一个空白关键帧，在这里我们可以放入一个等待条影片剪辑元件，（具体制作方法可以参考书本以前,Lading,的制作方法，点击选中这个影片剪辑，在属性面板里命名为,loading_mc,，（注意：不是点击帧，不然的话是给帧命名，不是在给这个影片剪辑命名。,),如图：,1012-2,10.2.2,首页场景,Main.Swf,的制作,1012-2,10.2.2,首页场景,Main.Swf,的制作,新建一层命名为,loadMovie,，用矩形工具绘制一个宽：,848.0,，高：,473.0,，,x,轴：,77.0,，,y,轴：,56.5,的矩形。打开颜色面板，把他的透明度,Alpha,设定为,0,，并且右键点击这个矩形，转化为影片剪辑，并将这个影片剪辑在属性面板里命名为,loadmovie,，在时间轴,135,帧处，右键点击插入帧。,10.2.2,首页场景,Main.Swf,的制作,10.2.2,首页场景,Main.Swf,的制作,4.,新建一层，命名为“,under_bg”,将图片,under_bg,从库中拖入到场景，右键将它转化为影片剪辑，,135,帧处，右键插入帧。,5.,新建一个遮罩层，命名为：,mask,，用矩形工具绘制一个宽,875,，高：,494,的，,x,轴：,76.3,，,y,轴：,56.3,。在第,60,帧的地方插入一个关键帧，形状保持不变。将这一层的第一帧的形状设为宽：,875,，高：,0,，并且把补间设为形状动画。在,70,帧插入一个关键帧，补间设为形状补间，在,123,帧插入一个关键帧，把矩形的宽设为：,875,，高设为：,3.0,，再在,135,帧处插入一个关键帧，将矩形设为宽：,875,，高：,10,，,x,轴：,76.3,，,y,轴：,537.8,，同样在两个关键帧之间创建形状补间。选定这一层，右键，把遮罩层给,勾选上。,10.2.2,首页场景,Main.Swf,的制作,10.2.2,首页场景,Main.Swf,的制作,6.,新建一层命名为“,bg”,，把库里的,main_bg,图形元件拖入到场景，,x,轴：,-12,，,y,轴：,-61,。,7.,新建卷轴移动的层，命名“为,juanzhou_move”,，新建一个卷轴的图形元件，插入,|,新建元件,|,图形,|,命名为“,juanzhou”,，卷轴的总长度是,874.2,，高度是：,16.0,，按照下面的图例绘制卷轴的两端，,10.2.2,首页场景,Main.Swf,的制作,回到场景，把“,juanzhou”,图形元件拖到这一层的第,1,帧，设定,x,轴：,65.2 y,轴：,532,。在第,11,帧的地方插入关键帧，设定该图形元件,X,：,65.2,，,Y,：,384.3,。在第,1,帧到第,11,帧之间插入动画补间，设置缓动,100,。,在,60,帧处插入关键帧，把图形元件移至,x,轴：,65.2 y,轴：,56,。在第,11,帧和第,60,帧帧之间创建动画补间。,在,70,帧的地方插入关键帧，该图形的,X,轴：,65.2,，,Y,轴：,56,，在第,75,帧插入关键帧，把图形元件移至,x,轴：,65.2 y,轴：,59,。在第,70,和,75,帧之间创建动画补间。,在,123,帧处插入关键帧，把图形元件移至,x,轴：,65.3 y,轴：,551.6,关键帧之间创建动画补间。在第,75,帧和,123,帧之间创建动画补间，设定缓动,-100,。,10.2.2,首页场景,Main.Swf,的制作,在,135,帧处插入关键帧，把图形元件移至,x,轴：,65.2 y,轴：,532.0,。在,123,和,135,帧之间创建动画补间。,10.2.2,首页场景,Main.Swf,的制作,8.,新建一层，命名“,juanzhou”,，把“,juanzhou”,图形元件拖到这一层的第一帧，设定,x,轴：,65.2 y,轴：,-1,，在,135,帧处插入帧。,9.,新建一层按钮层，命名为“,btn”,，把位图,btn.png,从库中拖至层，鼠标右键转换为按钮元件，在“指针经过”和“按下”，“点击”处，插入关键帧，把“弹起”帧的矩形删除掉，把按钮复制九个，放置在顶部，在“窗口”打开“对齐”面板，上对齐，水平居中分布。,10.2.2,首页场景,Main.Swf,的制作,10.2.2,首页场景,Main.Swf,的制作,10.2.2,首页场景,Main.Swf,的制作,在场景里选中第一个按钮，在属性面板里命名为“,btn_1”,依照这个方法，把后面几个依次命名为“,btn_2”“btn_3”“btn_4”“btn_5”“btn_6”“btn_7”“btn_8”“btn_9”,。,为按钮添加命令。选中第一个按钮，在动作里写入：,on(release),gotoAndPlay(2);,flag=1;,选中第二个按钮，在动作写入：,on(release),gotoAndPlay(2);,flag=2;,选中第三个按钮，在动作写入：,on(release),gotoAndPlay(2);,flag=3;,10.2.2,首页场景,Main.Swf,的制作,这样依次为另外六个按钮写上动作，“,flag=”,的值依次为,4.5.6.7.8.9,。,这边要注意顺序，因为在,135,帧处，我们要按照次序来加载每一个影片剪辑，并且与这里的每一个导航按钮来对应。例如：“,flag=1”,与之对应的是：,case 1:,mcLoader.loadClip(aboutus.swf,_root.loadmovie);,break;,而“,flag=2”,与之对应的是：,case 2:,mcLoader.loadClip(guestRoom.swf,_root.loadmovie);,break;,10.2.2,首页场景,Main.Swf,的制作,10.,新建一层，命名为,leader-word,，把“宾馆介绍”，“客房服务，餐饮服务，会议服务，康乐服务，在线预定，最新信息，其他产业，联系我们，这些文字依次放到按钮的上面。如图：,10.2.2,首页场景,Main.Swf,的制作,11.,新建一层，命名为,bg_out,，为了防止动画在放大时候露出页面舞台外面的东西，我们在这一层绘制两个黑的矩形，分别防止在顶部和底部。如图,10.2.2,首页场景,Main.Swf,的制作,12.,为了避免按钮在影片切换的时候也出现点击链接的效果，我们应当在按钮层上面做一个屏蔽层，让按钮在场景里的内容之间切换的动作发生时失去点击链接的效果。,新建一层，命名为“,pingbi-btn”,，第,1,帧我们让他空白，在第,2,帧插入空白关键帧，绘制一个宽：,850,，高：,35,的矩形，放置在按钮的上方，遮住下面层的全部按钮，在,134,帧的地方插入帧。,鼠标右键点击该矩形，把他转换为“按钮”元件。双击这个按钮，进入按钮元件内部，在“点击”的下面插入关键帧，并且把矩形的颜色改为跟底部一样的灰色,#666666,，将“弹起”下面关键帧的矩形删除掉，变为空白关键