好文档就是一把金锄头!
欢迎来到金锄头文库![会员中心]
电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

第11章纯FLASH网站制作.ppt

192页
  • 卖家[上传人]:re****.1
  • 文档编号:591295862
  • 上传时间:2024-09-17
  • 文档格式:PPT
  • 文档大小:5.38MB
  • / 192 举报 版权申诉 马上下载
  • 文本预览
  • 下载提示
  • 常见问题
    • 第一章第一章10 10 纯F纯F纯F纯Flashlash网站制作网站制作网站制作网站制作第一章第一章(理论(理论(理论(理论4 4 4 4课时,实践课时,实践课时,实践课时,实践4 4 4 4课时)课时)课时)课时) 教教 学学 要要 求求 与与 内内 容容应应应应知知知知目目目目标标标标应应应应会会会会目目目目标标标标ØØ了解了解了解了解FlashFlashFlashFlash网站的基本布局网站的基本布局网站的基本布局网站的基本布局ØØ了解了解了解了解FlashFlashFlashFlash网站的按钮制作网站的按钮制作网站的按钮制作网站的按钮制作ØØ了解了解了解了解FlashFlashFlashFlash网站的的页面切换网站的的页面切换网站的的页面切换网站的的页面切换ØØ能够独立布局真个网站能够独立布局真个网站能够独立布局真个网站能够独立布局真个网站ØØ能够独立制作网站按钮和文本能够独立制作网站按钮和文本能够独立制作网站按钮和文本能够独立制作网站按钮和文本的加载的加载的加载的加载Ø能够掌握每个页面的加载和切能够掌握每个页面的加载和切换技术换技术 教教 学学 要要 求求 与与 内内 容容预预预预备备备备知知知知识识识识ØØ熟悉熟悉熟悉熟悉Flash CS3Flash CS3Flash CS3Flash CS3的的的的ASASASAS命令命令命令命令 ØØ掌握掌握掌握掌握Flash CS3Flash CS3Flash CS3Flash 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.gotoAndPlay"s1"}; btn1.onRollOut=function(){btn1.gotoAndPlay"s2"}; 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(); function rollover() {     if (_root.a != this.indexNum) {         this.gotoAndPlay("s1");     } } function rollout() {     if (_root.a != this.indexNum) {         this.gotoAndPlay("s2");     } } function release() {     this._parent["pm"+_root.a].gotoAndPlay("s2");//上一个被点的按钮执行播放s2     _root.a = this.indexNum;                //上面的代码顺序不能错。

      代码执行也是有顺序的,                //点击后需要做的事情写在这里 } for (var i:Number = 1; i<6; i++) {     this["pm"+i].onRollOver = rollover;     this["pm"+i].onRollOut = rollout;     this["pm"+i].onRelease = release;     this["pm"+i].indexNum = i; } 10.1.3有关于按有关于按钮§这段代码很简单,是as比较基础的语句,关于for,以及if语句的用法,请自己在网上找,有的是其实,做flash站,最常用的语句就是这两个,应该理解透新手朋友需要注意的是if后面的条件要用==来判断,如果只写一个=,那么这个条件就永远都成立,因为=是赋值的意思,而==才是判断,这里的for (var i:Number = 1; i<6; i++) 部分,如果你有5个按钮那么i<6,如果6个就i<7  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完全没有出现,而后面的网页也断断续续的,那么应该是你的主时间轴,忘记了写上一个stop().§发布的时候,发现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和和loadingImage文件文件夹主要是放置主要是放置一些用到的一些用到的图片,片,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,将,将“弹起起”下面关下面关键帧的矩形的矩形删除掉,除掉,变为空白关空白关键帧如图  10.2.2首首页场景景Main.Swf的制作的制作 10.2.2首首页场景景Main.Swf的制作的制作§13,新建一个命令新建一个命令层,命名,命名为“as”,  10.2.2首首页场景景Main.Swf的制作的制作§选中第一中第一帧,在,在动作里写入:作里写入:stop();var flag=1;import TextField.StyleSheet;var styleObj:StyleSheet = new StyleSheet();styleObj.onLoad = function(success:Boolean) {    if (success) {        //news_txt.styleSheet = styleObj;//trace("success");    }else{trace("error");}    };styleObj.load("style_aboutus.css");gotoAndPlay(2);//------------------------------ 10.2.2首首页场景景Main.Swf的制作的制作§在第在第60帧的地方,插入空白关的地方,插入空白关键帧,写入,写入动作:作:unloadMovie(_root.loadmovie);//mcLoader.unloadClip(target);主要是在主要是在这里卸里卸载用用loadMoive加加载的影片剪的影片剪辑。

      在第在第135帧的地方插入空白关的地方插入空白关键帧,在,在动作面板写入作面板写入动作:作:stop();loading_mc._visible = false;var mcLoader:MovieClipLoader = new MovieClipLoader();var listener:Object = new Object(); 10.2.2首首页场景景Main.Swf的制作的制作listener.onLoadStart = function(target:MovieClip){loading_mc._visible = true;};listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number):Void {load_now = Math.round(bytesLoaded/bytesTotal*100);loading_mc._xscale = load_now;};listener.onLoadInit = function(target:MovieClip):Void {loading_mc._visible = false;};mcLoader.addListener(listener);//------------------// 10.2.2首首页场景景Main.Swf的制作的制作switch (flag) {case 1 :mcLoader.loadClip("aboutus.swf", _root.loadmovie);break;case 2 :mcLoader.loadClip("guestRoom.swf", _root.loadmovie);break;case 3 :mcLoader.loadClip("cate.swf", _root.loadmovie);break;case 4 :mcLoader.loadClip("meeting.swf", _root.loadmovie);break;case 5 :mcLoader.loadClip("entertainment.swf", _root.loadmovie);break; 10.2.2首首页场景景Main.Swf的制作的制作case 6 :mcLoader.loadClip("order.swf", _root.loadmovie);break;case 7 :mcLoader.loadClip("news.swf", _root.loadmovie);break;case 8 :mcLoader.loadClip("servation.swf", _root.loadmovie);break;case 9 :mcLoader.loadClip("contact.swf", _root.loadmovie);break;} 10.2.2首首页场景景Main.Swf的制作的制作§这边要注意的是,根据条件要注意的是,根据条件执行代行代码块::“switch (flag)”这一部分。

      要按照一部分要按照导航条按航条按钮的的顺序分序分别来加来加载目目标影片case 1加加载的是影片的是影片剪剪辑"aboutus.swf"与上面所与上面所说的加的加载到按到按钮的的命令命令“flag=1”对应 ,,case 2加加载的是影片剪的是影片剪辑"guestRoom.swf"与上面所与上面所说的加的加载到按到按钮的命的命令令“flag=2”,, case 3加加载的是影片剪的是影片剪辑"guestRoom.swf"与上面所与上面所说的加的加载到按到按钮的命的命令令  10.2.2首首页场景景Main.Swf的制作的制作§“flag=3”,case 4加加载的是影片剪的是影片剪辑"meeting.swf"与上面与上面所所说的加的加载到按到按钮的命令的命令“flag=4”,case 5加加载的是影片的是影片剪剪辑"entertainment.swf"与上面所与上面所说的加的加载到按到按钮的命的命令令“flag=5”, case6加加载的是影片剪的是影片剪辑"order.swf"与上面与上面所所说的加的加载到按到按钮的命令的命令“flag=6”,case7加加载的是影片剪的是影片剪辑"news.swf"与上面所与上面所说的加的加载到按到按钮的命令的命令“flag=7”,case8加加载的是影片剪的是影片剪辑"servation.swf"与上与上面所面所说的加的加载到按到按钮的命令的命令“flag=8”,,case9加加载的是影的是影片剪片剪辑"contact.swf"与上面所与上面所说的加的加载到按到按钮的命令的命令“flag=9”  10.2.2首首页场景景Main.Swf的制作的制作§到此,我到此,我们把把main页完成了,大家可以参照光完成了,大家可以参照光盘中的例子,按照中的例子,按照书中的步中的步骤来来练习制作一下。

      制作一下 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§注意:注意:该章章节主要主要讲解子解子页面的制作,我主要面的制作,我主要选择了了该网站中的其中一个子网站中的其中一个子页面来面来讲解,其他的解,其他的部分就不再一一重复了,在部分就不再一一重复了,在讲解中由于内容解中由于内容较多多较复复杂,所以,所以对一些影片剪一些影片剪辑的制作就不再一步的制作就不再一步一步一步说明了,大家可以明了,大家可以对照源文件照源文件进行学行学习,而,而一些一些较关关键的重要的内容我会仔的重要的内容我会仔细进行行说明,希明,希望大家在看制作步望大家在看制作步骤的的时候也能候也能够对照源文件一照源文件一起起进行学行学习 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§打开打开Flash软件,新建一个件,新建一个Flash文档,命名文档,命名为::aboutus把大小设定定为848*473像素,像素,帧频为20fps,背景,背景颜色色设为#cccccc 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§新建一新建一层,命名,命名为“mo”,我,我们用用绘图工具工具绘制一个墨滴,填充放射制一个墨滴,填充放射渐变,将左,将左侧的的标签颜色改色改为#999999,右,右侧标签的的颜色色为#000000。

      用填充用填充变形工具将形工具将颜色的中心点移至墨点的偏右下部分,色的中心点移至墨点的偏右下部分,让人感人感觉光光线是从右下方打上去的感是从右下方打上去的感觉如图  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在第一在第一帧的的时候将墨点大小候将墨点大小设为::宽:20.6,高,高:36.0,,x:188.6,,y:-55在第15帧的地方插入一个关的地方插入一个关键帧,,宽:17.4,高,高:36.0,,x:192.7,,y:235在第一帧插入插入动画画补间 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 插入一个影片剪插入一个影片剪辑,命名,命名为mo_kuosan副本,在第一副本,在第一层的第五的第五帧插插入空白关入空白关键帧,把,把库里的里的图形元件形元件mo_kuosan拖入拖入该帧,把,把该元件元件设为宽::18,高:,高:13.9X轴::-15.9,,Y轴::-70.8把该图形元件的形元件的透明度降透明度降为百分之百分之27,在第,在第54帧的地方插入空关的地方插入空关键帧,把,把该图形元形元件件设为宽::179.9,高:,高:139.8,,X轴::-95.5,,Y轴::-128.7,并且把,并且把透明度透明度设为百分之百分之100。

      在第在第82帧的地方插入关的地方插入关键帧,把,把该图形元件形元件的透明度的透明度设为百分之百分之0在该层上再新建一上再新建一层,在第,在第7帧的地方插入的地方插入一个空白关一个空白关键帧,再次把,再次把图形元件形元件mo_kuosan拖入拖入该帧,,该元件元件设为宽::18,高:,高:13.9,,X轴::-15.9,,Y轴::-70.8,在第,在第56帧的地方的地方插入关插入关键帧,把,把图形元件形元件设为宽::179.9,高:,高:139.8,,X轴::-95.5,,Y轴::-128.7,在第,在第80帧的地方插入关的地方插入关键帧,把,把该元件的透明度元件的透明度设为百分之百分之0在81帧处插入空白关插入空白关键帧,在,在87帧的地方再插入空白关的地方再插入空白关键帧,在,在帧上面放入上面放入stop命令  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§回到回到场景新建一景新建一层命名命名为mask,在第,在第15帧的的地方插入空白关地方插入空白关键帧,把,把刚才的影片剪才的影片剪辑放入放入该帧,在,在该层104帧处插入插入帧。

      10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§插入一个插入一个图层文件文件夹,命名,命名为bg,主要是把放置,主要是把放置背景背景图片的片的层统一放置在一放置在这个个图层文件文件夹便于管便于管理理  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§新建一新建一层命名命名为view,在在50帧的地方插入空白关的地方插入空白关键,把事先做好的水波,把事先做好的水波荡漾和漾和鱼游游动的影片剪的影片剪辑view_mc放入放入该帧,(影片剪,(影片剪辑的具体的制作大的具体的制作大家可以家可以查看源文件,主要用到了遮罩和看源文件,主要用到了遮罩和帧动画,画,这里就不再一一重复了)里就不再一一重复了)设置影片剪置影片剪辑宽::385,高:,高:296X轴::24.9,,y轴::141.3在50帧这里我里我们先把影片剪先把影片剪view_mc的透明度降到最的透明度降到最低,在第低,在第100帧的地方插入关的地方插入关键帧,把他的透明,把他的透明度提高到百分之一百在度提高到百分之一百在219帧的地方插入的地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 为了了给view层增添一些柳絮增添一些柳絮飘动的效果,我的效果,我们在在view层的上面新建一的上面新建一层命名命名为point,在,在99帧的的地方插入一个空白关地方插入一个空白关键帧,把做好的柳絮,把做好的柳絮飘动的的影片剪影片剪辑point_star放入放入这一一帧。

      并在并在219帧的的地方插入地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在view层的上面新建一的上面新建一层,命名,命名为bottom_word,,该层放置的是宣放置的是宣传标语,把,把库里里的的图形元件形元件bottom_pc放置在放置在这一一层的的146帧的的地方,地方,设置他的置他的宽::284.5,高,高42,,X轴::64,,y轴::427.5,先把他的透明度降,先把他的透明度降为0%,在,在155帧的地方插入关的地方插入关键帧,把他的透明度,把他的透明度设为100%最后在最后在219帧的地方插入的地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在point_star层的上面新建一的上面新建一层命名命名为container,在,在165帧的地方插入空白关的地方插入空白关键帧,把影片剪,把影片剪辑container放入放入这一一帧,,设置置宽::543,高:,高:485.2,,X轴::580,,Y轴::5.5,透明度降,透明度降为0%,,在在179帧的地方的地方设定他的定他的X轴::325,,Y轴::5.5,,在在219帧的地方插入的地方插入帧  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在view层的下面新建一的下面新建一层,命名,命名为logo,主要放置公司,主要放置公司的的标志,在志,在140帧的地方插入空白关的地方插入空白关键帧,把,把饮片剪片剪辑logo_mc,放入,放入这个个帧,,设置置宽::139,高:,高:135.8,,X轴::125.5,,Y轴::8.1,最后在,最后在219帧处插入插入帧。

      10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§新建一个新建一个图层文件文件夹,命名,命名为Floder,主要放置,主要放置页面右面右边的文字,按的文字,按钮等;等; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在该文件文件夹新建一新建一层命名命名为word2,在,在172帧的地方插入空白关的地方插入空白关键帧,,把把图形元件形元件word2放入放入这一一帧,,设定定宽::84.3,高,高22.1,,x轴::372.2,,y轴::70.3,透明度,透明度0%,在,在179帧的地方插入关的地方插入关键帧,,x轴::372.4,,y轴::36.3,透明度,透明度100% 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在word2上新建一上新建一层命名命名为word3,在,在174帧插入一个空插入一个空白关白关键帧,用文本工具打入,用文本工具打入“宾馆介介绍”,字体,字体设为18,,颜色色设为“6A3D09”,右,右键把把该文字文字设为图形元件,形元件,宽::76.4,高:,高:24.1,,X轴::460,,Y轴::72.8,把他的透明度,把他的透明度设为0%。

      在在180帧的地方插入关的地方插入关键帧,,X轴设为::460,,Y轴::38.9,透明度,透明度设为::100%,在,在219帧的地方插入的地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在word3层上面新建一上面新建一层,命名,命名为pc1_mc,在,在177帧处插入空白关插入空白关键帧,把,把库里的里的图形元件形元件pc1_mc放入放入该帧,,宽::165,高:,高:78,,x轴::373.9,,y轴::86,透明度,透明度设为0%,在,在184帧的地方插入关的地方插入关键帧,,X轴::373.9,,Y轴::66,,设置透明度置透明度为100%,在,在219帧的地方插入的地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§下面具体来下面具体来讲解解该页面里出面里出现的三个按的三个按钮的制作方法,我的制作方法,我们首先来首先来选取取“宾馆介介绍”这个按个按钮§插入一个影片剪插入一个影片剪辑,命名,命名为menu_宾馆概况,把第一概况,把第一帧命名命名为“bg”用矩形工具用矩形工具绘制一个制一个宽::145,高:,高:15的矩形,把的矩形,把边框去掉,填充色框去掉,填充色设为线性性渐变,左端的,左端的颜色色为::#EFEBE2,右端的,右端的颜色色为::#8D8F87。

      如如图:: 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§右右键把把该矩形矩形转换为图形元件,形元件,设X轴::-48,,Y轴::-0.5在第在第8帧的地方插入关的地方插入关键帧,改,改变他的他的宽为145,高:,高:17.1,,X轴::-48,,Y轴::-6.5,在两个关,在两个关键帧之之间插入插入动画画补间,如,如图:: 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§再在再在15帧的地方插入关的地方插入关键帧,把,把这个矩形框的透明度个矩形框的透明度设为0%,两个关,两个关键帧之之间插入插入动画画补间§新建一新建一层,命名,命名为word,在,在这一一层我我们主要是主要是为这个按个按钮的文字制作位移,首先在第一的文字制作位移,首先在第一帧我我们打如打如“宾馆概况概况”这四个字,字体大小是:四个字,字体大小是:13,,颜色是灰色色是灰色#666666,右,右键把把文字文字转换为影片剪影片剪辑元件,命名元件,命名为“word_宾馆概况概况”,,设X轴::-9.6,,Y轴::-6.5在第10帧插入关插入关键帧,把,把该文字文字的的X轴设为::-17.6,,Y轴设为::-6.5,在两关,在两关键帧之之间插插入入动画画补间。

      在在15帧的地方插入关的地方插入关键帧,,设定定X轴::-9.6,,Y轴::-6.5,在两关,在两关键帧之之间插入插入动画画补间 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 新建一新建一层,命名,命名为“btn”我们这里用制作空的里用制作空的按按钮条的形式来制作条的形式来制作这个按个按钮§注意:用在影片剪注意:用在影片剪辑里面放置空按里面放置空按钮条的形式制条的形式制作按作按钮,可以解决按,可以解决按钮重复制作的麻重复制作的麻烦,同,同时按按钮的效果会更加丰富,在里面也可以添加一些命的效果会更加丰富,在里面也可以添加一些命令这种方式很适合在网种方式很适合在网页中使用,希望大家能中使用,希望大家能够对他引起重他引起重视,学会用,学会用这一种方法来制作按一种方法来制作按钮 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 首先我首先我们在文字上面用矩形工具在文字上面用矩形工具绘制一个制一个宽::129.5,高:,高:15,,X轴::-30.5,,Y轴::-6.3,的矩形,点,的矩形,点击鼠鼠标右右键将它将它转化化为按按钮元件,命元件,命名名为::menu_1_btn,双双击这个按个按钮,,进入入该按按钮元件里面元件里面进行行编辑,,在在“指指针经过”,,“按下按下”,,“点点击”四种状四种状态下分下分别插入关插入关键帧,接下来,接下来再把再把“弹起起”,,“指指针经过”,,“按下按下”这三种状三种状态下的下的帧变为空白关空白关键帧,,主要方法是主要方法是选中中这几几帧,按下,按下删除除键,把,把帧里面的内容里面的内容删除干除干净,只,只剩最后的剩最后的“点点击”状状态下的矩形。

      如下的矩形如图::  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§我我们再回到上一再回到上一级“menu_宾馆概况概况”影片剪影片剪辑里面,里面,这时候我候我们发现,,刚才做的空按才做的空按钮变成了一个成了一个蓝色的框,不色的框,不要担心,要担心,这个只是个只是现实你的按你的按钮的的热区的状区的状态,他的区域,他的区域大小跟你大小跟你刚才在按才在按钮元件里面的元件里面的“点点击”状状态下的矩形是一下的矩形是一样的,不用担心,当你在的,不用担心,当你在预览的的时候候这个个蓝色是不会出色是不会出现的的 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§为了了给这个按个按钮鼠鼠标增加移入移出增加移入移出时的效果,我的效果,我们先在上先在上面新建一面新建一层,命名,命名为“Action Layer”,在第,在第1帧和第和第10帧的地方插入空白关的地方插入空白关键帧. 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在动作面板里分作面板里分别写生写生stop命令再用鼠命令再用鼠标点点击选中中刚才制作的那个空白的才制作的那个空白的按按钮,在属性面板里把他命名,在属性面板里把他命名为“menu_1_btn”,打开,打开动作面板,写入以下作面板,写入以下动作:作:on (rollOver){    gotoAndPlay(2);}on (releaseOutside, rollOut){    gotoAndPlay(11);}on(release){_parent.loadTxt("aboutus/aboutus_1.txt"); _parent.news_txt.scroll=1;}// 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§这里里说明下明下on(release){§_parent.loadTxt("aboutus/aboutus_1.txt"); 主要主要是是让在鼠在鼠标释放后加放后加载aboutus文件文件夹里面的里面的aboutus_1.txt文档里面的文字。

      文档里面的文字这里具体的的一个文里具体的的一个文件件夹的的设定,我在前面章定,我在前面章节已已经讲过了,了,这里就不再重复里就不再重复了而加载的目的目标是是news_txt这个个动态文本§    而而这个个动态文本框的制作,我文本框的制作,我们再次回到再次回到场景里面,景里面,在在Folder1图层文件文件夹下新建一下新建一层,命名,命名为“content”,,在在219帧的地方插入一个空白关的地方插入一个空白关键帧,用文本工具在,用文本工具在场景景里拖出一个里拖出一个宽::431.9,高:,高:280,,X轴::376,,Y轴::155的文本框,在属性面板里把他的文本框,在属性面板里把他设定定为“动态文本文本”,命名,命名为“news_txt”,字体,字体为宋体,字体大小宋体,字体大小为13,,颜色色为#666666如图:: 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在“content”层下面新建一下面新建一层,命名,命名为menu1,在,在194帧的地方插入空白关的地方插入空白关键帧,把,把刚才制作的影片剪才制作的影片剪辑menu_宾馆概况放入概况放入这一一帧,,设定定宽::129.5,高:,高:18.5,,X轴::710,,Y轴::69.3,并且把他的透明度,并且把他的透明度设为0%,在,在201帧的地方插入关的地方插入关键帧,同,同时把把该影片剪影片剪辑的的x轴设为679.6,,Y轴::69.3,透明度,透明度设为100%。

      §用同用同样的方式制作另外两个影片剪的方式制作另外两个影片剪辑“menu_宾馆沿革沿革”和和“menu_企企业文化文化”,在,在“menu1”层的下面新建两个的下面新建两个层,,命名命名为分分别“menu_2”,,“menu_3”把把“menu_宾馆沿革沿革”影片剪影片剪辑放入放入menu2层的第的第195帧,把,把“menu_企企业文化文化”影片剪影片剪辑放入放入menu3层的第的第198帧如图:: 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§最后回到最后回到场景,在最上面新建一景,在最上面新建一层命名命名为“as”,在,在219帧插入空白关插入空白关键帧,打开,打开动作面板写入作面板写入动作新建一作新建一层,命名,命名为as,在在219帧插入空白关插入空白关键帧,在,在动作面板写入以下作面板写入以下动作作:stop();news_txt.multiline = true;   news_txt.wordWrap = true;news_txt.html = true;function loadTxt(htmlname) //define the function of leading the css and html{var my_lv:LoadVars = new LoadVars();  //创建建loadVars对象象 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作news_txt.styleSheet = _root.styleObj;my_lv.onData = function(src:String) {    if (src!=undefined) {   // trace("LoadVars loaded successfully.");news_txt.htmlText =src} else {    trace("An error occurred while loading variables.");    }}my_lv.load(htmlname);}function newsup(){news_txt.scroll--;}function newsdown(){news_txt.scroll++;} 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作§该网网页我我们分两个部分来制作分两个部分来制作:右右侧的的动画和左画和左侧的文字的文字内容的加内容的加载。

      §在在这一章一章节我我们主要主要讲解文字内容加解文字内容加载的的这一部分如一部分如图所示文字部分:所示文字部分: 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作§ 在在场景里我景里我们单独新建一独新建一层,并且把左,并且把左侧的文字的文字加加载部分做成一个部分做成一个单独的影片剪独的影片剪辑放在放在这一一层§    新建一新建一层,命名,命名为container,插入一个影片,插入一个影片剪剪辑,命名,命名m_container_main§首先在首先在该影片剪影片剪辑里面新建一个里面新建一个图层文件文件夹,命,命名名为bg,主要放置一些背景的,主要放置一些背景的图片在该文件文件夹下首先新建一个下首先新建一个层,命名,命名为bg,将制作好的作将制作好的作为背景色的影片剪背景色的影片剪辑m_containerIn_bg放入放入这一一层 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作§在在bg层的上面新建一的上面新建一层,命名,命名为sumiao,在第,在第15帧的地方插入空白关的地方插入空白关键帧,,将位将位图sumiao副本放入副本放入这一一帧,右,右键把他把他转换为元件,元件,设定定宽::421,高:,高:189,,X轴::26,,Y轴::283.5,并且在,并且在这一一帧先把他的透明度降先把他的透明度降为0%,在,在66帧的地方插入关的地方插入关键帧,把,把该影片剪影片剪辑的透明度的透明度设为100%,两关,两关键帧之之间创建建补间动画。

      在画在113帧的地方插入的地方插入帧 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作§绘制下拉制下拉滚动条条§    如如图这个个滚动条,一方面是可以条,一方面是可以进行鼠行鼠标的上下跟的上下跟随,另一方面当你按随,另一方面当你按动向上的箭向上的箭头和向下的箭和向下的箭头的的时候,旁候,旁边动态文本框里面的文字会上下文本框里面的文字会上下滚动,上下,上下滚动条在展示文字内容条在展示文字内容较多,不能一下子在多,不能一下子在页面上完全面上完全展示出来的展示出来的时候,能候,能够起到很好的作用,同起到很好的作用,同时也避免也避免了文字翻了文字翻页带来的麻来的麻烦§在上面新建一在上面新建一层,命名,命名为scroll_btn,在,在这一一层的第一的第一帧上按照如上按照如图所示的所示的样子子绘制一个制一个图形,用右形,用右键把他把他转换为影片剪影片剪辑元件,在属性面板里把元件,在属性面板里把该影片剪影片剪辑命命名名为scrollBar_mc 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作§双双击进入入这个影片剪个影片剪辑,,选中向上的那个小箭中向上的那个小箭头,右,右键转换为按按钮元件,在属性面板里命名元件,在属性面板里命名为down_btn。

       选中向下的那个箭头,右键转换为按钮元件,在属性面板命选中向下的那个箭头,右键转换为按钮元件,在属性面板命名为名为down_btn 10.2.4二二级次次场景景“Cate”次次级文件的制作文件的制作§33.在在图形形层的上面新建一的上面新建一层,,  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在帧里面放入以下命令:里面放入以下命令:stop();up_btn.onRelease = function(){clearInterval(aa_up);};up_btn.onPress = function(){var j=_parent.flag_2;if (j == 0) {aa_up = setInterval(_parent.newsup, 25);}else if (j == 1) {aa_up = setInterval(_parent.son_mc.son_uptxt1, 25);}else {aa_up = setInterval(_parent.son_mc.son_uptxt2, 25);}}; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作up_btn.onDragOut = function(){clearInterval(aa_up);};//----------------------------------------down_btn.onRelease = function(){clearInterval(aa_down);};down_btn.onPress = function()}; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作{var j=_parent.flag_2;if (j == 0) {aa_down = setInterval(_parent.newsdown, 25);}else if (j == 1) {aa_down = setInterval(_parent.son_mc.son_downtxt1, 25);}else {aa_down = setInterval(_parent.son_mc.son_downtxt2, 25);}};down_btn.onDragOut = function(){clearInterval(down_up);}; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作二二.  滚动条随鼠条随鼠标上下跟随上下跟随§1.为了使得影片剪了使得影片剪辑scrollBar_mc能能够在鼠在鼠标上下移上下移动时跟随鼠跟随鼠标上下移上下移动,首先要把,首先要把该影影片剪片剪辑在属性面板里命名在属性面板里命名为scrollBar_mc。

        10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在影片剪在影片剪辑m_cintainer_main的最上面新建一的最上面新建一层命名命名为as,,这一一层主要放置一些主要放置一些帧命令命令 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作在第一在第一帧的空白关的空白关键帧里,我里,我们打开打开动作面板,写入以下命令:作面板,写入以下命令:var flag_2;//var flag_3;function scroll_fun(){var sy = scrollBar_mc._y;var my = _root._ymouse;scrollBar_mc._x = 21;//sy=my-25;if (symy) {sy = sy-(sy-my)/5;} 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作scrollBar_mc._y = sy-17;if (scrollBar_mc._y<7) {scrollBar_mc._y = 7;}if (scrollBar_mc._y>414) {scrollBar_mc._y = 414;}} 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作var mm = setInterval(scroll_fun, 25);scrollBar_mc.onEnterFrame = function(){if (this.hitTest(_root._xmouse, _root._ymouse)) {clearInterval(mm);mm = undefined;}else {if (mm == undefined) {mm = setInterval(scroll_fun, 25);}}};在scroll_btn层的113帧插入帧  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作三三. 菜 菜单按按钮的制作的制作§    菜菜单按按钮的制作,用到的方法是在一个影片剪的制作,用到的方法是在一个影片剪辑里里面放入一个空的按面放入一个空的按钮条,一些命令都加在条,一些命令都加在这个按个按钮条条上面。

      上面这里里选取一个菜取一个菜单按按钮的制作方法来的制作方法来讲解§    1.新建一新建一层,命名,命名为menu1,在第在第32帧的地方插入一的地方插入一个空白关个空白关键帧插入-新建元件新建元件-影片剪影片剪辑,命名,命名为m_containerIn_menu餐餐厅介介绍进入入该影片剪影片剪辑,,第一第一层命名命名为“bg”,在第,在第1帧绘制一个制一个宽::145,高,高1.1,,X轴::-48,,Y轴::-0.5,把填充色,把填充色设为线性性渐变,,左左侧颜色色为#EFEBE2,右,右侧颜色色为#8D8F87,如,如图所所示:示:  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作2.右键点击该图形,将他转换为影片剪辑元件右键点击该图形,将他转换为影片剪辑元件bunner副本 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在第在第8帧的地方插入关的地方插入关键帧,,设定定宽::145,高:,高:17.1,X轴::-48,,Y轴::-6.5,在第,在第16帧的地方插入关的地方插入关键帧,把,把该元件的透明度降元件的透明度降为0%。

      在三个关在三个关键帧之之间插入插入动画画补间 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 3.新建一.新建一层,命名,命名为word,在第一在第一帧用文本工具打入用文本工具打入“餐餐厅介介绍”,,在属性面板在属性面板设为静静态文本,大小文本,大小为13,,颜色色为灰色§4.右右键把他把他转换为影片剪影片剪辑元件名字元件名字为“word-宾馆概况概况”,在第,在第1帧文字的位置文字的位置设为X轴::-9.6,,Y轴::-6.5,第,第10帧插入关插入关键帧,,X帧::-17.6,,y轴::-6.5,并且把,并且把这个影片剪个影片剪辑的透明度的透明度设为0%在第16帧插入关插入关键帧,,x轴::-9.6,,y轴::-6.5,在三个关,在三个关键帧之之间插入插入动画画补间 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§5.新建一新建一层,命名,命名为btn,用来放置空白按用来放置空白按钮条首先在条首先在这一一层的第的第1帧绘制一个制一个宽::129.5,高:,高:15的矩形,的矩形,颜色色为灰色x轴::-30.6,,y轴::-6.3,鼠,鼠标右右键转换为按按钮元件,元件,进入按入按钮元件里面,在鼠元件里面,在鼠标的的“指指针经过”,,“按下按下”,,“点点击”这三种状三种状态里也分里也分别插入关插入关键帧,把,把“弹起起”,,“指指针经过”,,“按下按下”,,这三种状三种状态里的里的东西用西用删除除键进行行删除,只留下除,只留下“点点击”这个状个状态的矩形框。

      的矩形框 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§6.回到回到m_containerIn_menu餐餐厅介介绍影片剪影片剪辑元件,元件,选定定btn层的空白按的空白按钮条,条,这时候它的候它的显示示颜色是色是蓝色,用色,用鼠鼠标点点选它 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作在属性面板里在属性面板里为它命名它命名为menu_1_btn,并且打开并且打开动作面板,写入作面板,写入动作:作:on (rollOver){    gotoAndPlay(2);}on (releaseOutside, rollOut){    gotoAndPlay(11);}on(release){_parent.flag_2=1;_parent.flag_3=1;_parent.gotoAndPlay(81);} 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§7.新建一新建一层,命名,命名为Action Layer,在,在这一一层的第的第1帧,,第第10帧,插入空白关,插入空白关键帧,在,在动作面板里分作面板里分别写入写入stop();命令。

      命令 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§该命令解命令解释,当鼠,当鼠标移入移入该空白按空白按钮条,从第二条,从第二帧开始播开始播放,当鼠放,当鼠标在按在按钮条外面条外面释放,移除按放,移除按钮条的条的时候,从第候,从第11帧开始播放鼠开始播放鼠标释放的放的时候,候,让当前当前m_container_main影片剪影片剪辑,从,从81帧开始播放开始播放§以同以同样的方法制作其他的几个菜的方法制作其他的几个菜单条,包括条,包括经典菜肴,宴典菜肴,宴会会专题,美食,美食评点,名厨名菜,宴会点,名厨名菜,宴会预定定这五大部分分五大部分分别命名命名为::m_containerIn_menu经典菜肴,典菜肴,m_containerIn_menu宴会宴会专题,,m_containerIn_menu美食点美食点评,,m_containerIn_menu名厨名菜,名厨名菜,m_containerIn_menu宴会宴会预定 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作在以上各个菜在以上各个菜单的空白按的空白按钮条的命令放置上,主要的条的命令放置上,主要的变化是化是鼠鼠标释放后放后变量量“_parent.flag_2”的一个的一个值的的变化。

      化在在m_containerIn_menu经典菜肴里典菜肴里为_parent.flag_2 = 2;在在m_containerIn_menu宴会宴会专题里里为   _parent.flag_2 = 3;在在m_containerIn_menu美食点美食点评里里为   _parent.flag_2 = 4;在在m_containerIn_menu名厨名菜里名厨名菜里为   _parent.flag_2 = 5;在在m_containerIn_menu宴会宴会预定里定里为   _parent.flag_2 = 6; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作四四.      menu_1_mc影片剪影片剪辑在在m_container_main里的里的放置放置§     在 在containerIn图层文件文件夹下面新建一下面新建一层,命名,命名为menu_1,在,在32帧的地方插入一个空白关的地方插入一个空白关键帧,把做,把做好的影片剪好的影片剪辑“m_containerIn_menu餐餐厅介介绍”放入放入这一一帧,,设置置X轴::411,,Y轴::64.3,透明度,透明度为0%,,在在39帧的地方插入一个关的地方插入一个关键帧,,这只只x轴::354.6,,Y轴::64.3,在,在这两个关两个关键帧之之间插入插入动画画补间。

      在在105帧的地方插入关的地方插入关键帧同样在在112帧的地方也插入关的地方也插入关键帧,,设置置宽::129.5,高:,高:18.5,,X::391.4,,Y::64.3,透明度透明度0% 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§同同样的方式把其他菜的方式把其他菜单按按钮也都放在各个不同的也都放在各个不同的层里面,他的排列方式如里面,他的排列方式如图所示:所示: 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在在menu_1的上面新建一的上面新建一层,命名,命名为intro,在,在80帧的地方插入一个空白关的地方插入一个空白关键帧,用文本工具拖出,用文本工具拖出一个一个宽::432.6,高:,高:227,,X:50.4,,Y:203,的,的矩形文本框,在属性面板里矩形文本框,在属性面板里选择动态文本,命名文本,命名为“cateIntro_txt”  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§同同时在在as层的第的第80帧也插入一个空白关也插入一个空白关键帧,,  写入以下动作:  写入以下动作:stop();cateIntro_txt.styleSheet = _root.styleObj;cateIntro_txt.multiline = true;cateIntro_txt.wordWrap = true;cateIntro_txt.html = true; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作var my2_lv:LoadVars = new LoadVars();my2_lv.onData = function(src:String){if (src != undefined){cateIntro_txt.htmlText = src;//trace(my1_lv);//trace(my2_lv);}else{trace("error");}}; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作my2_lv.load("cate/cate_intro.txt");flag_2=0;function newsup(){cateIntro_txt.scroll--;}function newsdown(){cateIntro_txt.scroll++;}同同时在在as层的第的第113帧的地方也插入一个空白关的地方也插入一个空白关键帧,写入,写入动作:作:stop(); 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作五五. 三 三级链接,影片剪接,影片剪辑m_containerIn_intro的的制作。

      制作§      该影片剪影片剪辑是放置在影片剪是放置在影片剪辑m_container_main的最后一的最后一帧,内容是点,内容是点击菜菜单时候分候分别出出现的不同的子的不同的子链接接页面§     当我 当我们点点击菜菜单的的时候,跳出的候,跳出的这个子个子链接里面的接里面的页面的画面都是一面的画面都是一样的,都是同一个,的,都是同一个,唯一不一唯一不一样的是的是页面里的文字的面里的文字的变化,化,这种制种制作方法可以省却很多作方法可以省却很多页面重复的制作面重复的制作时间,,对于重复的多于重复的多页面的制作是一种很好的方法面的制作是一种很好的方法  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§(一),子(一),子页面里的菜面里的菜单元件的制作元件的制作    首先我首先我们来看来看该页面面链接的接的树状状结构构图:: 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§1..单个菜个菜单制作(中西自助餐制作(中西自助餐厅))    插入一个影片剪    插入一个影片剪辑元件,命名元件,命名为::m_roomLink_中西自助餐中西自助餐厅B_btn,把第一把第一层命名命名为zi,在第一,在第一层的第的第1帧,用文本工具写入,用文本工具写入“中西自助餐中西自助餐厅”,大,大小小为12,,颜色色为#6A3D09,鼠,鼠标右右键把他把他转换为图形元件,形元件,X轴::-0.2,,Y轴::0,在第,在第10帧插入关插入关键帧,,X轴::-10,,Y::0,在第,在第16帧,,x轴::0,,y轴::0。

      10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 新建一新建一层,命名,命名为btn,在在这一一层放入一个空白按放入一个空白按钮,,宽::68,高:,高:16,,X轴::3,,Y轴::0,鼠,鼠标点点击该空白按空白按钮条,在条,在动作面板写入作面板写入动作:作:on (rollOver) {gotoAndPlay(2);}on (releaseOutside, rollOut) {gotoAndPlay(11);}on(release){_parent._parent._parent.loadmovie_cate("cate/a_room_1.swf");_parent._parent._parent.cate_loadWord("cate/a_intro_1.txt","loadWord_txt");} 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§注意:注意:这里的鼠里的鼠标释放放时候加候加载cate文件文件夹下的下的a_room_1.swf影片剪影片剪辑,同,同时在在动态文本文本loadWord_txt里加里加载cate文件文件夹下的下的a_intro_1.txt。

      这些影片剪些影片剪辑和文本内容都是事先做好和文本内容都是事先做好统一放在一放在cate文件文件夹里面在以后的每个按里面在以后的每个按钮的内容加的内容加载时候,要候,要对应好每一好每一个被加个被加载的内容,在接下去做另外的内容,在接下去做另外别的几个按的几个按钮时候要特候要特别注意,主要就是在注意,主要就是在这几句命令里,要把被加几句命令里,要把被加载的文件名的文件名都得一一修改都得一一修改过§    新建一新建一层,在第一,在第一帧插入空白关插入空白关键帧,在,在动作面板写作面板写入入stop();在第10帧写入写入stop();§    以同以同样的方法制作中的方法制作中“美食楼美食楼”影片剪影片剪辑 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§2.餐餐厅介介绍的菜的菜单制作制作§新建一个影片剪新建一个影片剪辑,命名,命名为“cantingjieshao”在第一在第一层的第的第20帧放入放入“m_roomLink_美食楼美食楼”影片剪影片剪辑设定定宽::14.4,高:,高:17.4,,X::28,,Y::0在第27帧插入关插入关键帧,,设定定宽::71,高:,高:17.4,在两个关,在两个关键帧之之间插入插入动画画补间,在,在30帧插入插入帧。

      以同以同样的方法把的方法把“中西自助餐中西自助餐厅”也放入也放入第二第二层在第三层的的30帧处插入一个空白关插入一个空白关键帧,,在在动作面板写入:作面板写入:stop(); 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 用相同的方法制作好其他的用相同的方法制作好其他的经典菜肴,宴会典菜肴,宴会专题,美食点,美食点评,名厨名菜,宴,名厨名菜,宴会会预定的菜定的菜单栏 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作3.将全部菜将全部菜单按按钮放置在同个影片剪放置在同个影片剪辑里面里面§新建一个影片剪新建一个影片剪辑,命名,命名为“m_containerIn_main_menu”在第一层的第的第一一帧到第六到第六帧分分别插入空白关插入空白关键帧把餐厅介介绍,,经典菜肴,宴会典菜肴,宴会专题,美食点,美食点评,名厨名菜,宴,名厨名菜,宴会会预定的菜定的菜单条按照先后条按照先后顺序分序分别放入每一个空放入每一个空白关白关键帧这里要注意:不要把里要注意:不要把顺序序给颠倒了,倒了,要按照以上我写的要按照以上我写的顺序,依次在每个空白关序,依次在每个空白关键帧里放置。

      在第二里放置在第二层的第一的第一帧写入写入stop();命令 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作4.logo标题的制作的制作§新建一个影片剪新建一个影片剪辑,命名,命名为“m_standard_logo”在一层放入祥云的放入祥云的图片,片,宽::80,高:,高:54.9,,X::54.8,,Y::-4,在第,在第6帧插入插入帧新建一层,在第一,在第一帧打入文字打入文字“餐餐厅介介绍”,第二,第二帧“经典菜肴典菜肴”,第三,第三帧“宴会宴会专题”,第四,第四帧“美食点美食点评”,第五,第五帧“名厨名菜名厨名菜”,第六,第六帧“宴会宴会专题”在第三第三层的第一的第一帧放置放置stop();命令§注意:我注意:我们这里两次使用了在同一个影片剪里两次使用了在同一个影片剪辑内放置放置内放置放置不同的内容,只在不同的内容,只在1第第帧写入停止命令,写入停止命令,这样做的目的是做的目的是让该影片剪影片剪辑在被加在被加载时可以按照可以按照页面不同的内容来面不同的内容来显示示不同的内容比如在点不同的内容。

      比如在点击“餐餐厅介介绍”的的时候,候,让“m_standard_logo”影片剪影片剪辑停留在第停留在第1帧,,让“m_containerIn_main_menu”影片剪影片剪辑停留在第一停留在第一帧  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§在点在点击“经典菜肴典菜肴”的的时候都播放第二候都播放第二帧这样我我们依次依次类推  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作5.制作一个影片剪制作一个影片剪辑,,这个影片剪个影片剪辑是被加是被加载项,,加加载进来的内容都是在来的内容都是在这个舞台上播放新建一个舞台上播放新建一个影片剪个影片剪辑,命名,命名为m_loadMovie_main,用矩用矩形工具,在形工具,在该影片剪影片剪辑的第一的第一层绘制一个制一个宽::360,高:,高:240的矩形,右的矩形,右键将它将它转化化为影片剪影片剪辑,,在属性面板里命名在属性面板里命名btn_mc在他上面我在他上面我们再新再新建几建几层,放置一些装,放置一些装饰用的用的图片,在最后一片,在最后一帧我我们放置一个停止命令,具体大家可以参照源文件,放置一个停止命令,具体大家可以参照源文件,这里就不里就不细讲了。

      了  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作二.插入影片剪二.插入影片剪辑,命名,命名为m_containerIn_intro§10.新建一层,命名为新建一层,命名为bordar1,在第一帧用线条工具,绘制两条实,在第一帧用线条工具,绘制两条实线,上面一条颜色为线,上面一条颜色为#006633,下面一条颜色为,下面一条颜色为#6A3D09,,粗细,,粗细定位定位1选中这两条线,鼠标右键转换为图形元件,命名为选中这两条线,鼠标右键转换为图形元件,命名为g_standard_bordar,设定宽:设定宽:12.1,高,高2.3,,X::2,,Y::24在第10帧插入关键帧,设定图形元件,宽:帧插入关键帧,设定图形元件,宽:450,高:,高:2.3,,X::2,,Y::24在两个关键帧之间插入动画补间在第在两个关键帧之间插入动画补间在第50帧插入一个关键帧,在帧插入一个关键帧,在59帧的地方插入关键帧,把图形元件的透明度降为帧的地方插入关键帧,把图形元件的透明度降为0%,在这两个关键,在这两个关键帧之间插入动画补间。

      帧之间插入动画补间§新建一层,命名为新建一层,命名为bordar2,跟第一层一样,我们也是绘制两跟线条,跟第一层一样,我们也是绘制两跟线条,转换为图形元件设定转换为图形元件设定X轴为轴为442.9,,Y轴为轴为400其他制作形式跟第其他制作形式跟第一层的一样,这里就不重复了一层的一样,这里就不重复了 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§11.新建一新建一层,命名,命名为logo,在第在第10帧插入空白关插入空白关键帧,把影片剪,把影片剪辑m_standard_logo,放入放入该帧,,在属性面板里命名在属性面板里命名为logo_mc设定定宽::134.8,高:,高:54.9,,X::-47,,Y:-4,透明度,透明度0%,在第,在第20帧的地方插入关的地方插入关键帧,,设定定X::0,,Y::-4,透明,透明度度100%,在两个关,在两个关键帧之之间插入插入动画画补间在第第50帧插入关插入关键帧,在第,在第59帧也插入关也插入关键帧,并,并且把且把该帧的影片剪的影片剪辑透明度透明度设为0%,在,在这两关两关键帧之之间插入插入动画画补间。

      10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§12.新建一新建一层,命名,命名为m_roomLink_mainBtn,第,第10帧的地方插入空的地方插入空白关白关键帧,把影片剪,把影片剪辑m_containerIn_main_menu放入第放入第10帧在在50帧和和59帧的地方插入关的地方插入关键帧,把,把59帧的影片剪的影片剪辑的透明度的透明度设为0% 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§ 13.新建一新建一层,命名,命名为return_btn,在第,在第43帧的地方插入的地方插入一个空白关一个空白关键帧,用文本工具打入,用文本工具打入“返回返回”两个字,字体两个字,字体为15,,颜色色为#6A3D09,右,右键点点击该文字,文字,转换为按按钮在指在指针经过,按下,按下时候把候把颜色色设为#000000返回上一返回上一级,,在第在第51帧和和59帧的地方插入各插入一个关的地方插入各插入一个关键帧把第43帧和第和第59帧的按的按钮元件的透明度元件的透明度设为0%。

      三个关三个关键帧之之间分分别插入插入动画画补间鼠标点点选“返回返回”按按钮,在,在动作面板作面板写入:写入:    on(release)    {    gotoAndPlay(50);    } 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§14.新建一新建一层,命名,命名为special,在第,在第10帧插入一个空白关插入一个空白关键帧,用文本工具拖出一个,用文本工具拖出一个动态文本,文本,宽::342.9,高,高322,,X::104,,Y::39,字体大小,字体大小为15,在属性面板里命,在属性面板里命名名为special_txt在第50帧的地方插入的地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§15.新建一新建一层,命名,命名为loadWord,在第,在第10帧插入一个空插入一个空白关白关键帧,用文本工具拖出一个,用文本工具拖出一个动态文本,文本,宽::357.9,,高高118.6,,X:90,Y:276.4,在属性面板命名在属性面板命名为loadWord_txt,字体大小,字体大小为12。

      在第在第50帧的地方插入的地方插入帧 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§16.新建一新建一层,命名,命名为loadmovie,在第在第10帧的地的地方插入空白影片剪方插入空白影片剪辑,把影片剪,把影片剪辑m_loadMovie_main放入放入这一一帧鼠标点点击该影影片剪片剪辑,把他的透明度,把他的透明度设为0%,在属性面板命名,在属性面板命名为standard在第20帧的地方插入关的地方插入关键帧,把影,把影片剪片剪辑的透明度的透明度设为100%在这两个关两个关键帧之之间插入插入动画画补间在第50帧和和59帧各插入关各插入关键帧,,把把59帧的影片剪的影片剪辑的透明度的透明度设为0%,在,在这两个两个关关键帧之之间插入插入动画画补间  10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§17.新建一新建一层,命名,命名为loading,在在50帧的地方插入关的地方插入关键帧,,把事先做好的等待把事先做好的等待动画,影片剪画,影片剪辑loading放入放入这一一帧。

      设定定宽::40,高:,高:40,,X::251,,Y::127,在属性面板命,在属性面板命名名为loadingBar_mc 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作18.新建一新建一层,命名,命名为as,在第,在第10帧的地方插入一个空白关的地方插入一个空白关键帧,在写入,在写入动作:作:on(release){gotoAndPlay(50);}在在50帧的地方插入一个空白关的地方插入一个空白关键帧,写入:,写入:stop();loadWord_txt.styleSheet = _root.styleObj;special_txt.styleSheet = _root.styleObj;function special_loadWord(num1, num2){ 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作var loadWord_lv1:LoadVars = new LoadVars();loadWord_lv1.onData = function(src:String){if (src != undefined) {special_txt.htmlText = src;}else {trace("error");}};loadWord_lv1.load("cate/"+num1+"_intro_"+num2+".txt");}function cate_loadWord(cate_word_txt) 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作var loadWord_lv2:LoadVars = new LoadVars();loadWord_lv2.onData = function(src:String){if (src != undefined) {loadWord_txt.htmlText = src;}else {trace("error");}};loadWord_lv2.load(cate_word_txt);}//-------------------------------------- 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作loadingBar_mc._visible = false;function loadmovie_cate(cate){var myLoader:MovieClipLoader = new MovieClipLoader();var listener:Object = new Object();listener.onLoadStart = function(target:MovieClip){loadingBar_mc._visible = true;standard.btn_mc._visible = false;}; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作listener.onLoadProgress = function(target:MovieClip, bytesLoaded:Number, bytesTotal:Number){var load_now:Number = Math.round((bytesLoaded/bytesTotal)*100);//loadingBar_mc._xscale = load_now;//trace(load_now);};listener.onLoadInit = function(target:MovieClip){loadingBar_mc._visible = false;standard.btn_mc._visible = true;}; 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作myLoader.addListener(listener);myLoader.loadClip(cate, standard.btn_mc);}//_parent.flag_2;function son_uptxt1(){loadWord_txt.scroll--;}function son_downtxt1(){loadWord_txt.scroll++;} 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作function son_uptxt2(){special_txt.scroll--;}function son_downtxt2(){special_txt.scroll++;}在第在第60帧的地方插入一个空白关的地方插入一个空白关键帧,写入:,写入:_parent.gotoAndPlay(10); 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作 10.2.3宾馆介介绍页面(面(aboutus)子)子页面的制作面的制作§19.返回上一返回上一级m_container_main影片剪影片剪辑,新建一,新建一层,命名,命名为inin,在第在第114帧的地方插入空白关的地方插入空白关键帧,把影片剪,把影片剪辑m_containerIn_intro放入放入这一一帧,在属性面板里命名,在属性面板里命名为son_mc,,设定定宽::450,高,高378.3,,X::52,,Y::28。

      第三部分:第三部分:课堂堂总结§本章从本章从纯Flash网站的网站的实际制作方法出制作方法出发,,详细的介的介绍了了纯FLASH网站制作中的理网站制作中的理论知知识,使,使读者者对纯Flash网站有一个全面的了解在第一部网站有一个全面的了解在第一部分分讲解了解了纯Flash网站制作的基网站制作的基础技技术知知识,,讲解在网站制作解在网站制作时要用到的一些具体技要用到的一些具体技术最后通过一个一个综合合实例,将各种技例,将各种技术知知识综合合为一体,一体,全面巩固前面所学的知全面巩固前面所学的知识,做到理,做到理论与与实践相践相结合,便于合,便于读者掌握 第三部分:第三部分:课堂堂总结§本章的重点是本章的重点是纯Flash网站的制作方法和用到的网站的制作方法和用到的技技术知知识,,综合所学知合所学知识来制作一个网站通来制作一个网站通过本章的学本章的学习,,读者需要了解和思考的回是:者需要了解和思考的回是:§制作一个制作一个纯Flash网站需要哪些前期步网站需要哪些前期步骤和需要和需要掌握哪些技掌握哪些技术知知识??§怎怎样把我把我们以前所学的一些以前所学的一些Action知知识综合灵活合灵活的运用到的运用到实际的网的网页制作中去?制作中去?§总的来的来说,本章是全,本章是全书具有具有总结性性质的一章,只的一章,只有牢固的掌握了前几章的基有牢固的掌握了前几章的基础知知识,才能在,才能在这一一章中章中综合灵活的运用合灵活的运用这些知些知识。

      第四部分:技能第四部分:技能训练一一 选择题11.在在对Flash网站的布局上面,网站的布局上面,loading通常放在通常放在该场景的(景的(    )?)?      A  第一第一帧     B  结尾尾帧     C  中中间帧      D   随便哪一随便哪一帧22.通常在我通常在我们网站文字内容里面例如留言本,新网站文字内容里面例如留言本,新闻发布等需要布等需要经常更新和常更新和变化化的部分,我的部分,我们应该用(用(    )?)?      A  静静态文本文本      B  输入文本入文本          C  动态文本文本      D  图形形33.一个一个Flash全站无非就是通全站无非就是通过一些按一些按钮的的导向来播放不同位置的向来播放不同位置的mc按钮有有两种方式可以两种方式可以实现一种是按一种是按钮元件,一种是影片剪元件,一种是影片剪辑元件影片剪元件影片剪辑元件元件要做成按要做成按钮,需要加入空白按,需要加入空白按钮条,空白按条,空白按钮条在制作条在制作时最好最好应该保留(保留(    ))帧的矩形条的矩形条      A  弹起起      B  指指针经过          C  点点击      D  按下按下 第四部分:技能第四部分:技能训练44. 解客 解客户对网站的内容需求,网站的内容需求,积极跟客极跟客户沟通,即沟通,即时掌掌握客握客户要放置的内容信息,把客要放置的内容信息,把客户所需的信息所需的信息汇总分析,分析,然后然后为这些信息些信息归类,然后我,然后我们要做的是(要做的是(    )。

          A 绘制制页面效果面效果图    B 制作制作树状状结构构图    C  直接制作直接制作网站网站    D   制作制作动画画 第四部分:技能第四部分:技能训练第四部分:技能第四部分:技能训练二二 实践践训练根据根据课堂上所堂上所讲的的项目目实例及相关知例及相关知识,制作,制作赣江江宾馆网站网站页面           表           表4-1  实训说明明实训目的通过该全Flash网站的制作,掌握Flash网页制作要用到的基本知识 实训内容 按照例子制作一个全Flash网站 实训课时 4课时,业余时间完成 实训要求 图片,内容在光盘当中找,设计的PSD文件也放在光盘中读者根据源文件,对照课本,来练习该网站几个主要页面的制作  第四部分:技能第四部分:技能训练实训项目效果 1.创建图片变化的逐帧动画2.圆形从左向右移动,移动的同时先放大,后缩小,并且颜色发生变化3.一个矩形从左向右移动,在移动的同时逐渐转变成文字“8” 重点提示 1.打开光盘中的该网站的psd文件,将每一层图形用PNG格式导出2.将导出来的图片全部导入到Flash里面3.制作各个不同的影片剪辑元件4.在场景中制作页面。

      5.写入命令 特别说明  第四部分:技能第四部分:技能训练§三三 职岗演演练1、参考、参考综合合练习,自己构思制作一个全,自己构思制作一个全Flash网站。

      点击阅读更多内容
      关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
      手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
      ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.