《flashcs3动画制作基础与案例教程教学课件作者温俊芹教学讲义第11章综合案例制作－纯ｆlash网站》由会员分享，可在线阅读，更多相关《flashcs3动画制作基础与案例教程教学课件作者温俊芹教学讲义第11章综合案例制作－纯ｆlash网站（55页珍藏版）》请在金锄头文库上搜索。
1、第十一章 综合案例制作纯Flash网站第十一章 综合案例制作纯lash网站第一部分 学习要求一 应知目标1. 了解Flash网站的基本布局2. 了解Flash网站的按钮制作3. 了解Flash网站的的页面切换二 应会目标1. 能够独立布局真个网站2. 能够独立制作网站按钮和文本的加载3. 能够掌握每个页面的加载和切换技术三 预备知识1. 熟悉Flash CS3的AS命令。2. 掌握Flash CS3工具箱中各种功能强大的绘图、编辑和辅助工具的使用3. 了解元件、实例和库的概念，掌握图形、影片剪辑和按钮这三种元件的制作方法四 课时安排项目学时教学方式（参考）1预习课余2课堂讲解4学时. Flas
2、h网站的基本布局. Flash网站按钮的制作. Flash网站Loading的制作. Flash网站全站页面的切换. Flash网站的调试与常见问题3实践4学时Flash全站“赣江宾馆”网站部分页面的制作实例。第二部分 课堂讲解11.1 Flash网站制作的基础技术知识做出一个优秀的flash站的重要前提是什么？首先是对美的理解，再次是用户界面的合理性。曾经见过很多全站，充斥着各种动态效果以及技术模块，但是效果却不尽如人意，看起来很有土洋结合的味道，同时也看过很多国外的源文件，我发现里面用到的技术并非非常复杂的as程序。但是无论是界面配色以及动态效果都非常的不错。可以说一个flash站是否有视
3、觉冲击力是它价值的首要体现，而缺乏基本的美术功底，做出来的东西就必然缺乏美观。所以，任何软件或者技术都是为了实现目的而服务的，在我们努力学习as语言的同时，也应该不断的加强自己的艺术修养，而这个对美判断的能力显然需要比学任何计算机语言都要付出更多的时间去积累和沉淀。否则就算熟透as。我们同样永远也做不出优秀的作品。11.1.1 Flash网站的基本布局图11-1 网站的基本布局一般来说，这个结构是我最常用的flash全站结构，在flash中，我会根据不同的页面元素进行分类，然后分布在各个层中，并且起上相应的名字，便于操作，在源文件中建议养成良好的命名习惯，通常一个全站在成型之前，这个文件，我们
4、会对他操作n次，所以为了提高工作效率以及方便日后调用，良好的结构非常重要。如上图所示，as脚本层放置在最上方，页面中的所有元素都根据实际的深度排列到相应的层中。bg也就是页面背景放置在最下方。（1）通常影片的场景大小，我设置成1002*620，以适应各种显示器分辨率，帧率设置成30，根据需要也可以进行调整。（2）loading通常放在第一帧，而且除了背景以外，并不安排其他元素在第一帧内，这样可以保证第一帧的数据量很小。便于loading 动画的正确显示。（3）每个大型的深层次mc，以及经常需要切换到内部的mc，比如页面的mc，导航部分的mc，等等，我通常会在场景外做一个入口，也就是一个色块，因
5、为有的mc并非在内部的第一帧就有内容，在外层的时候他是空白的，所以为了便于操作，在内部的第一帧建立一个色块，便于随时双击进入操作。（4）不要把所有的动画和内容都安排在主时间轴里，这样的操作会让你在以后的施工中非常的难于调整，甚至无法增添内容。我认为，应该把内容分成大类，然后相应的做成原件，根据内容的树状结构，相应的安排mc的嵌套。然后在各个时间轴里，用写在某个位置的as来控制各个时间轴的衔接。比如mc1和mc2都是内部有非常复杂动画的mc，我们要mc1动画完毕后开始mc2，这时候就不要把两个mc的内部动画放在一个时间轴内，最好是分别mc1、mc2各一帧，同时在mc1内部的最后一帧上写_pare
6、nt.gotoandplay(mc2所在的帧)。11.1.2 Loading的制作关于loading的制作，有好几种方式，这里介绍一个最常用的做法。 loading原件通常安排在主时间轴上，内部的动画一定要打包成mc，呵呵，这个loading的内部动画安排成100帧，形式可以随意。只要是个100帧的动画就可以了。如图11-2所示。图11-2 Loading的命令11.1.3 有关于按钮其实Flash站80%的功能都是基于鼠标事件来完成的，所以按钮在网站中的地位不言而喻，一个flash全站无非就是通过一些按钮的导向来播放不同位置的mc。按钮有两种方式可以实现。一种是按钮元件，一种是影片剪辑元件，
7、这两个原件中。按钮只有4帧，而影片剪辑没有限制，所以如果需要一个有动画效果的按钮的时候，我们就只能用影片剪辑也就是mc来实现。事实上，我认为，mc在大部分时间里都可以替代按钮，通过脚本控制mc来实现按钮的功能要比按钮灵活的多。这是一个最通常的动画按钮的内部结构：如图，11-3所示。提示：这里需要提示的是关于帧标签的概念：上图中时间轴里标注的s1与s2是帧标签，在帧的属性栏里可以输入，使用了帧标签可以用gotoAndPlay等等语句来播放该帧标签所开始的位置，过了该帧标签的范围后，不会停止。用帧标签的好处是你无需理会关键桢的数值，在任何地方播放这段动画，都可以含义明了的操作，并且容易解读和记忆。
8、图11-3动画按钮的内部结构btn1.onRollOver=function()btn1.gotoAndPlays1;/ 鼠标移入，播放btn1影片剪辑的“s1”帧。btn1.onRollOut=function()btn1.gotoAndPlays2; / 鼠标移入，播放btn1影片剪辑的“s2”帧。btn1.onRelease=function();在这个按钮mc所在的帧上（上图的外层）写上如下脚本，这个按钮就生效了。可以看出在用脚本对btn1按钮添加了onRollOver，onRollOut，onRelease事件后，也就是经过，离开，点击，这个mc就拥有了一个按钮的3种状态，至于点击并
9、不松手这种状态，通常并不常用，所以就没有添加，如果需要的话，那么只需要在对应的帧上写onPress事件就可以了需要注意的是：利用这样的写法来实现的按钮，时间轴不能过长，也就是说，动作效果不能动画太长，如果时间很长的话，当你的鼠标划过的时候，这个按钮会执行s2部分，而这么长的动画，你并不是想要播放的，这个按钮已经可以说是一段用鼠标事件激活的动画了，不该用鼠标经过这样的事件来激活。在全站中经常有这样的情况，即是很多按钮都要实现类似或者同一种类的功能，那么一一写onRollOver等等就烦琐了。如图11-4所示。图11-4这时候我们就需要用循环的功能了，如果看不懂，你可以去深究到底是怎么写法，我们先
10、把他粘贴过去，然后把我们需要的部分修改掉。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; /上面的代码顺序不能错。代码执行也是有顺序的， /点击后需要做的事情写在这里。
11、for(vari:Number=1;i6;i+) thispm+i.onRollOver=rollover; thispm+i.onRollOut=rollout; thispm+i.onRelease=release; thispm+i.indexNum=i; 假如有5个按钮，按钮的名字是pm1，pm2-pm5,当鼠标经过这些mc的时候，如果经过的不是已经点过的mc的话，就播放这个mc的“s1”部分，鼠标离开的时候，满足同样条件就播放“s2”部分，点击这个mc的话，上一个被点的mc播放“s2”部分（通常也就是回到初始的状态）。这段代码很简单，是as比较基础的语句，关于for，以及if语句的用
12、法，请自己在网上找，有的是。其实，做flash站，最常用的语句就是这两个，应该理解透。新手朋友需要注意的是if后面的条件要用=来判断，如果只写一个=，那么这个条件就永远都成立，因为=是赋值的意思，而=才是判断，这里的for (var i:Number = 1; i6; i+) 部分，如果你有5个按钮那么i6，如果6个就i7。需要非常重视的是这个东西_root.a，这是一个变量，我叫这个东西为“标志位”，当然也可以叫做_root.abcde，在这里利用这个_root.a=来记录当前鼠标事件的对象，当点了btn1的时候，这个_root.a=1，_root在as里是顶级的位置，我们写_root.a=
13、1就是表明在主时间轴建立一个变量值为1，之所以用顶级位置，就是因为调用起来简单，方便，在任何地方都可以用，这里涉及到路径和层级的知识，总之在我们需要记录一个数据，比如页数，比如按钮序号，等等的时候，这个“标志位”使用起来是很方便的。在下面我们还会用到。11.1.4 文本内容的显示任何网站中都要有文字，Flash网站中的文字，我们在制作的时候有3种选择，一种是静态文本，一种是动态文本，一种是输入文本。静态文本可以使用任何字体，在发布后，浏览者可以看到你源文件中使用的文本，在网站中不需要经常更新的部分，大可用静态文本来写，因为不需要浏览者也拥有你的字体，所以，很方便你对页面所做的美工。 动态文本，
14、通常用来显示后台程序所提供的文本内容，或者flash中动态生成的文字，比如建立一个空白的动态文本，id名起为mytext，那么在他的所在帧上写如下脚本就可以让他显示出指定的文字mytext.text=“Flash动画设计与制作”发布后，这个文本框就会显示出相应的文字，因为是动态文本，所以通常在我们需要他的场合都是例如留言本，新闻发布等需要经常更新和变化的部分。所以如何动态的读入文字就是动态文本使用的目的。如果你的工作伙伴中有程序员，那么你可以要求他的后台给你传递一个xml文件，然后你在flash端让你的动态文本显示这段xml，你的flash就拥有了相应后台的数据功能。动态文本与输入文本的区别在
15、于它不能直接接受用户输入。但是，动态文本可以用来显示不同样式和字体的文本，和输入文本一样，使用文本工具可以创建动态文本框，只需在属性面板中选择“动态文本”即可，如图11-5所示。图11-5动态文本的属性面板要让动态文本框动态地显示文本，就需要在属性面板中为其设置变量名。如图10-1所示，将动态文本的变量名设为myDynamicText。在Flash影片播放时，只需改变动态文本变量的值，就可以改变动态文本框中显示的文本。动态文本有3种基本格式：单行、多行和多行不换行。通过ActionScript可以调用Flash影片外部文本文件中的变量。从外部文件中获取变量的方法非常有用，它可以在不改变Flash文件的基础上对Flash影片的内容作出修改。例如要用Flash制作一个天气预报动画，如果每天都对Flash文件进行修改就太麻烦了。而使用外部变量就只需要对文本文件作出修改。
