全Flash动画网站实现的基础教学.docx

全Flash动画网站实现的基础教学.docx

《全Flash动画网站实现的基础教学.docx》由会员分享，可在线阅读，更多相关《全Flash动画网站实现的基础教学.docx（18页珍藏版）》请在冰豆网上搜索。

全Flash动画网站实现的基础教学

　　本人是设计出身，对语言根本不在行，但是做flash站没有一点as基础，什么效果也出不来，经过一段时间的摸索，和若干业务的锻炼，现在积累了一点经验，不敢独享，把这些真正由实战中得来的东西送给和我一样对程序不在行设计师以及新手朋友。

老鸟们请飘过。

在开始之前，我想说，做出一个优秀的flash站的重要前提是什么？

我认为首先是对美的理解再次是用户界面的合理性，曾经见过很多朋友做过的全站，充斥着各种动态效果以及技术模块，但是效果却不尽如人意，看起来很有土洋结合的味道，同时也看过很多国外的源文件，我发现里面用到的技术并非非常复杂的as程序。

连我都可以轻易看懂。

但是无论是界面配色以及动态效果都非常的不错。

可以说一个flash站是否有视觉冲击力是它价值的首要体现，而缺乏基本的美术功底，做出来的东西就必然缺乏美观。

所以我认为，任何软件或者技术都是为了实现目的而服务的，在我们努力学习as语言的同时，也应该不断的加强自己的艺术修养，而这个对美判断的能力显然需要比学任何计算机语言都要付出更多的时间去积累和沉淀。

否则就算熟透as3，驾驭了air。

我们同样永远也做不出优秀的作品，在文章末尾，再继续探讨。

好的，这里开始

一、flash网站的基本布局

一般来说，这个结构是我最常用的flash全站结构，在flash中，我会根据不同的页面元素进行分类，然后分布在各个层中，并且起上相应的名字，便于操作，在源文件中建议养成良好的命名习惯，通常一个全站在成型之前，这个文件，我们会对他操作n次，所以为了提高工作效率以及方便日后调用，良好的结构非常重要。

如上图所示，as脚本层放置在最上方，页面中的所有元素都根据实际的深度排列到相应的层中。

bg也就是页面背景放置在最下方。

    1：

通常影片的场景大小，我设置成1600*1200，以适应各种显示器分辨率，帧率设置成30，根据需要也可以进行调整。

关于在浏览器中适应浏览的问题，我放到最后说明。

这里先放下。

    2：

loading通常放在第一帧，而且除了背景以外，并不安排其他元素在第一帧内，这样可以保证第一帧的数据量很小。

便于loading动画的正确显示。

    3：

每个大型的深层次mc，以及经常需要切换到内部的mc，比如页面的mc，导航部分的mc，等等，我通常会在场景外做一个入口，也就是一个色块，因为有的mc并非在内部的第一帧就有内容，在外层的时候他是空白的，所以为了便于操作，在内部的第一帧建立一个色块，便于随时双击进入操作。

    4：

不要把所有的动画和内容都安排在主时间轴里，这样的操作会让你在以后的施工中非常的难于调整，甚至无法增添内容。

我认为，应该把内容分成大类，然后相应的做成原件，根据内容的树状结构，相应的安排mc的嵌套。

然后在各个时间轴里，用写在某个位置的as来控制各个时间轴的衔接。

    比如mc1和mc2都是内部有非常复杂动画的mc，我们要mc1动画完毕后开始mc2，这时候就不要把两个mc的内部动画放在一个时间轴内，最好是分别mc1,mc2各一帧，同时在mc1内部的最后一帧上写（mc2所在的帧）。

二、loading的制作

关于loading的制作，网上有的是教程，我只用一个最常用的做法，曾经很多教程上介绍如果做一个精妙的loading云云，我从来都没有深究，这段代码，我在无数个老外的源文件中都看到，连其中没有使用的进度显示文本代码都一样。

。

呵呵。

。

我的每个全站作品都是用的这个，loading原件通常安排在主时间轴上，内部的动画一定要打包成mc，呵呵，这个loading的内部动画安排成100帧，形式可以随意。

只要是个100帧的动画就可以了。

三：

有关于按钮

其实flash站80%的功能都是基于鼠标事件来完成的，所以按钮在网站中的地位不言而喻，在我理解一个flash全站无非就是通过一些按钮的导向来播放不同位置的mc。

按钮有两种方式可以实现。

一种是按钮元件，一种是影片剪辑元件，这两个原件中。

按钮只有4帧，而影片剪辑没有限制，所以如果需要一个有动画效果的按钮的时候，我们就只能用影片剪辑也就是mc来实现。

事实上，我认为，mc在大部分时间里都可以替代按钮，通过脚本控制mc来实现按钮的功能要比按钮灵活的多。

这是一个最通常的动画按钮的内部结构：

新手提示：

这里需要提示的是关于帧标签的概念：

上图中时间轴里标注的s1与s2是帧标签，在帧的属性栏里可以输入，使用了帧标签可以用gotoAndPlay等等语句来播放该真标签所开始的位置，过了该帧标签的范围后，不会停止哦~~。

用帧标签的好处是你无需理会关键桢的数值，在任何地方播放这段动画，都可以含义明了的操作，并且容易解读和记忆。

在这个按钮mc所在的帧上（上图的外层）写上如下脚本，这个按钮就生效了。

=function（）{"s1"};

=function（）{"s2"};

=function（）{};

可以看出在用脚本对btn1按钮添加了onRollOver，onRollOut，onRelease事件后，也就是经过，离开，点击，这个mc就拥有了一个按钮的3种状态，至于点击并不松手这种状态，通常并不常用，所以就没有添加，如果需要的话，那么只需要在对应的帧上写onPress事件就可以了

需要注意的是：

利用这样的写法来实现的按钮，时间轴不能过长，也就是说，动作效果不能动画太长，如果时间很长的话，当你的鼠标划过的时候，这个按钮会执行s2部分，而这么长的动画，你并不是想要播放的，这个按钮已经可以说是一段用鼠标事件激活的动画了，不该用鼠标经过这样的事件来激活。

在全站中经常有这样的情况，即是很多按钮都要实现类似或者同一种类的功能，那么一一写onRollOver等等就太烦琐了。

这时候我们就需要用循环的功能了，最开始，如果你看不懂，那么你并不需要去深究到底是怎么写法，粘贴过去，然后去改你需要改的部分吧。

这里有5个按钮，按钮的名字是pm1，pm2---pm5,当鼠标经过这些mc的时候，如果经过的不是已经点过的mc的话，就播放这个mc的“s1”部分，鼠标离开的时候，满足同样条件就播放“s2”部分，点击这个mc的话，上一个被点的mc播放"s2"部分（通常也就是回到初始的状态）。

stop（）;

function rollover（） {

    if  !

=  {

        （"s1"）;

    }

}

function rollout（） {

    if  !

=  {

        （"s2"）;

    }

}

function release（） {

    ["pm"+].gotoAndPlay（"s2"）;nRollOver = rollover;

    this["pm"+i].onRollOut = rollout;

    this["pm"+i].onRelease = release;

    this["pm"+i].indexNum = i;

}

这段代码很简单，是as比较基础的语句，关于for，以及if语句的用法，请自己在网上找，有的是。

其实，做flash站，最常用的语句就是这两个，应该理解透。

新手朋友需要注意的是if后面的条件要用==来判断，如果只写一个=，那么这个条件就永远都成立，因为=是赋值的意思，而==才是判断，这里的for（vari:

Number=1;i<6;i++）部分，如果你有5个按钮那么i<6，如果6个就i<7。

需要非常重视的是这个东西，这是一个变量，我叫这个东西为“标志位”，当然也可以叫做，在这里利用这个=来记录当前鼠标事件的对象，当点了btn1的时候，这个=1，_root在as里是顶级的位置，我们写=1就是表明在主时间轴建立一个变量值为1，之所以用顶级位置，就是因为调用起来简单，方便，在任何地方都可以用，这里涉及到路径和层级的知识，稍后说明。

。

。

。

。

总之在我们需要记录一个数据，比如页数，比如按钮序号，等等的时候，这个“标志位”使用起来是很方便的。

在下面我们还会用到。

另外一个推荐熟悉的部分是movieClipTween这个功能扩展，这个类，或者这个方法，简单的说就是用脚本而不是用时间轴来安排动画，在很多时候，我们如果用脚本的方式来实现一些mc的交互会更加方便，同时更加灵活，这样做的好处是，比如你需要一些按钮，你并不需要为每一个按钮安排时间轴和建立关键桢，所有动作都用脚本生成。

而且很直观，我不是很会形容这个的好处，但是相信没有用过的朋友们一定会习惯并且喜欢这种动画创作方式。

下图为例：

具体的脚本如上所示。

需要知道的是，这个扩展的功能并非flash安装后自带的，你需要下载这个后缀名为mxp的扩展包，安装需要有extentionmanager这是adobe公司的免费软件，如果你安装了dw9就同时安装了。

。

安装之后，参数的使用方法非常简单，在flash的帮助文档里会添加出相关的项目，虽然是英文的，但是也非常易懂。

四：

flash全站的页面切换

在传统的html站里，我们通过点击超链接来打开另外的一个html，在flash站里，我们当然也可以打开另外一个html页面，但是缺少了动画的翻页就失去了动态效果，所以，在flash全站里，通常都会有比较动感的动画部分来衔接两个页面，也就是说点击链接后，运行一个动画，然后动画完毕后，新的页面也呈现出来了。

这里有个示例网站这是我刚学flash早期的一个主页，一直还没空完成。

在实现这样的效果，我们有非常多的办法，这里我比较常用的是这一种，结构是这样的，很简单...

如图可以看到，翻页动画层在页面内容层之上，最上方是脚本层，把脚本写在最上方的层里，是比较好的做法，在网站进入后，开始播放页面的mc，这mc的第一帧也就是上图中的第一帧，根据需要，我们可以写上一个stop（），页面内容被播放，当首页上的导航按钮点击后，导航按钮内安排了脚本：

（"start"）,这时候，从第二帧开始的翻页动画mc开始播放，当播放到开始露出下面页面的时候，在时间轴上的相应帧上安排脚本：

这里的是按钮点击时候被赋值的，也就是说，如果我点了按扭2.那么这时候，页面就切换到第二帧，点击3播放page的第三帧。

最后停止，不要忘记写stop（）在时间轴的最后。

如图所示页面的部分做成一个大mc，里面每一个页面做成一个mc放在一帧内，这样就对应了每个导航按钮的点击。

在每个页面mc切换前，播放了翻页动画，在翻页动画过程中进行了换帧，于是，我们的目的就达到了。

这个功能实现的方法是很简单的，但是基础的方法是比较通用的，我们在查阅很多国外的flash全站源文件的时候，都会发现类似的方式，通过换帧来达到换页的方法，也是flash全站的一个比较通常的方法，当然还有其他的办法来实现，但是这个基本的方法还是值得新手朋友们掌握的。

五：

文本内容的显示

任何网站中都要有文字，flash网站中的文字，我们在制作的时候有3中选择，一种是静态文本，一种是动态文本，一种是输入文本，静态文本可以使用任何字体，在发布后，浏览者可以看到你源文件中使用的文本，在网站中不需要经常更新的部分，大可用静态文本来写，因为不需要浏览者也拥有你的字体，所以，很方便你对页面所做的美工。

动态文本，通常用来显示后台程序所提供的文本内容，或者flash中动态生成的文字，比如建立一个空白的动态文本，id名起为mytext，那么在他的所在帧上写如下脚本就可以让他显示出指定的文字="我傻，但我不流哈喇子"发布后，这个文本框就会显示出相应的文字，因为是动态文本，所以通常在我们需要他的场合都是例如留言本，新闻发布等需要经常更新和变化的部分。

所以如何动态的读入文字就是动态文本使用的目的。

如果你的工作伙伴中有程序员，那么你可以要求他的后台给你传递一个xml文件，然后你在flash端让你的动态文本显示这段xml，你的fl