在这里，我将详细的介绍另外一个FlashMX网站的制作，它是完全使用FlashMX构建的。从网站的前期规划到素材的准备，从素材的准备到网站的真正制作都紧紧的和前面（以前有些教程）的内容连结起来了。在网站制作的制作中，能使用到精确loading、声音的控制、各种动画特效的使用、使用loadMovie装载外部SWF文件、滚动新闻文本等等。
设计步骤：
一、前期规划
1.风格
在前面介绍过在网页制作之前，先要定义网站的风格，决定你的网站的主题。主题的选择对今后的发展方向有决定性的影响，考虑好做什么内容就尽量努力做出特色。很多朋友在建站初期总是喜欢在网页里堆积大量感兴趣的内容，但个人的精力总是有限的，因为无力维护而导致站点更新缓慢、内容匮乏，与其这样，不如选定一个主题做出自己的风格，不求大而全，但求小而精。事实上，很多的网站成功之处就在于此。
这里制作的这个实例，属于个人主页性质，仅仅用于学习，所以也没怎么特意的去准备，既然是用于学习FlashMX，我们就干脆定为一种学习Flash性质的网页好了。
网站的名称为“绿韵”（因为我喜欢绿色），以大自然的绿色为主题。网站的总体颜色这里选择为深绿色“#006633”，体现一种和平、宁静和回归自然的感觉。当然这是因为笔者自己所喜欢才这样定义的。您可以根据自己的喜好，再加上我们前面介绍过得一点色彩学以及多浏览网络上各种网站得出的经验来定义您自己的特色。
2.内容
定义完网站的风格，就应该按网站的风格来制做网站，网页的内容也要为这个风格服务。这个实例中，我们网站的内容全部围绕Flash，包含Flash动画欣赏、Flash源文件下载、Flash技术文章、Flash网站链接等等。
3.布局
网站的布局我们也选择最为大众化的“T”结构布局。在前面的内容中说过，所谓“T”结构，就是指页面顶部为横条网站标志加广告条，下方左面主菜单，右面显示内容的布局，由于菜单条背景较深，整体效果类似英文字母“T”,这样的布局页面结构清晰，主次分明，缺点是规矩呆板，没有特点。这里仅仅作示范用途，所以还是大众化一点。
二、素材准备
1. LOGO
前面介绍过，网站标志被称为LOGO。网站的LOGO就好像一个人的名片一样，一个成功的人士决不能容忍一个制作粗糙的名片，当然一个好的网站也需要一个设计精良的标志来在浩瀚的Internet中确立自己的形象。一个优秀的LOGO，特别是具有动态效果的LOGO比文字更能吸引人们的注意力。LOGO主要通过三个途径选择其内容：
a.代表性的人物，动物形象；
b.设计专业的代表性标志；
c.网站的名称，利用文字的变形组合，字体变换来形成。
这里，我最常见的第三种途径，通过文字的变化变形来设计。仅仅是很随意的把笔者自己的网络ID（woohey＝野渡）给改成了一个标记，如图7-2-1所示。它是Flash制作出来的一个动态的标记。两只海鸟组成字母“W”，太阳及其光晕代表两个“O”字母，航海者和它小船组成“H”字母，船帆上加上了另外两个字母“EY”。整体代表一种在网络海洋冲浪的感觉。也许您会觉得这个LOGO没什么意思，不够精致，笔者并不是平面设计的高手，所以只是作一下示范而已，起抛砖引玉的作用。还有就是LOGO有一定的标准尺寸，我们可以根据要求制定如88×31px的等等。
2. 素材图片
网站制作中不可避免的要使用到图片。您可以从外面买素材光盘，然后找出适合自己风格的精美图片，加入网站中。当然也可以在网络上去找，下载精美的图片。笔者在这里提供两个素材网站：
素材屋：
http://www.sucaiw.com；网页制作大宝库：
http://www.4gee.com。这里我们找了几张与自然有关的绿色图片，以符合网站的风格和特色，使整体能保持一致。在后面的制作中我们会看到的，这里就不再贴出来了，节约空间。
准备图片时，要注意图片的格式和体积。当然您还可能要用到其它的工具来进行加工，如Fireworks、Photoshop等等。对于Flash来说图片的格式很重要，如果有矢量图片最好了，它和Flash的格式一致，放大缩小的时候不会变形，产生锯齿或模糊不清，不过矢量图片毕竟很少，效果没有其它格式的图片好。图片的体积也不宜过大，能减小体积就要尽量减小，使我们的网页适合于网络传播。
3. 音效素材
Flash网页的一个它的特点是它具有网络多媒体的效果，不仅有动画，而且还有很好的音效。它在声音的处理方面的功能也是相当的强。在Flash中加入声音不仅能很大的提高您的网页的效果也能提高网站吸引力，增大浏览量。因此，我们不能埋没的Flash的闪光点，决定在网页中加入一定的音效。Flash中的音效也应根据不同的用途选择不同的声音文件。我们在Flash网站制作中一般会使用到背景音效、按钮音效和特殊的音效。背景音效一般应选择体积较小、播放时间不能太长、适合循环的音效。按钮音效则更应该体积小，时间短，仅仅有个声音就可以了。还有其它的特殊音效应根据使用场合的不同而使用不同的声音文件。
在这个实例中，我们选择了一些短小的按钮音效以及合适的背景音效，另外还有一些用于开场动画的特殊音效。声音文件的来源很多，除了自己录制以外，可以在Flash自带的声音库中选择音效，还可以从购买的光盘里等到，再或者去网络上下载。在很多的Flash网站中有专门用于Flash制作的各种音效下载，如闪吧：www.flash8.net，闪客帝国：
http://61.156.17.126/ 等等。三、制作步骤
好了，前期的工作做完以后，我们就可以开始真正的制作了。Flash网站的制作周期一般不会很短，可能持续好几天，甚至几十天也难说在制作中能可能会发现那个地方做的不够精致而重新制作是很有可能的，像这个实例的首页，笔者就做了四五天，还是不够精致。所以您要有个心里准备，话又说回来，您也不要因为这个儿退缩了，精益求精嘛：）好，下面我们就开始制作我们的这个实例吧。
1、首先当然是新建一个文件啦。我们要让最终的网页在浏览器中能占满，所以选择文件的大小为780×450象素。背景颜色依然为深绿色“#006633”，帧频默认，12fps。
2、在我们的Flash文件中导入我们要用到的图片和声音文件，如背景图片、背景音乐等等。制作好我们要用到的一些MovieClip、按钮等等，在liabrary中建立相应的文件夹进行管理，如图，我们建立了对应框架、按钮、按钮音效、图标、图片和声音六个文件夹，这样有助于我们管理和制作。
3、接下来的三个步骤我们要来制造预载Preloading。它的作用和制作我们在第四节中曾经详细介绍过，如果有些内容讲的不清楚，您可以回去看看，回忆一下。这里我们要做精确的预载。选择window>scene或按快捷键Shift＋F2打开场景Scene面板，新加入一个场景main，并把以前那个场景命名为preloader，并把preloader场景拖到main场景之前，如图7-2-3。
4、在preloader场景中建立三个层：textfield、text和action，分别来放置动态文本框、静态文本和脚本指令，让这三个层均占两帧。在text层中，我们加入如图7-2-4的文字，它们包括了网站的标记、网站的地址、网站的一些其它信息。最下面的文字是预载的数据，包括已下载字节、总字节、已下载时间、还需下载时间等等，这些我们在前面都已经介绍过了。还有别忘了放入loadmc动画，它的制作见图2-4-7，把它放到主场景中，在属性面板中命名实例为：loadmc。排列好了之后，在textfield层中加入七个动态文本TextField，如图2-7-4中的虚线框，分别用来输出下载百分比、已下载字节、总字节、已下载帧数、总帧数、已下载时间以及还需下载时间这七个数据。在属性面板分别设定变量名为：percent、loadb、totalb、loadf、totalf、timeused和timeleft。
5、预载的最后一步就是在Action层中加入脚本了。这里我们使用第四节中的方法，来制造这个预载。在第一帧和第二帧分别插入关键帧，在第一个关键帧加入如下脚本并加上帧标签loading：
loadb = _root.getBytesLoaded();
totalb = _root.getBytesTotal();
pre = int((loadb/totalb)*100);
loadmc.gotoAndPlay(pre);
percent = int(pre)+"%";
loadf = _root._framesloaded;
totalf = _root._totalframes;
timeused = int(getTimer()/1000);
timeleft = int((int(totalb-loadb)/loadb*timeused));
第二帧中加入脚本：
if (loadb == totalb) {
gotoAndPlay("main", 1);
} else {
gotoAndPlay("loading");
}
它们的意义和作用我们在第四节中都介绍过，是在动画没有下载完的时候形成循环，检测下载的状况，并输出到几个文本框中。您如果有不明白的地方，请自己回去看看。
6、下面就是主场景的开场动画了，这一部分使用到的各种效果将会很多，我们在下面的制作中将一一说明。我们先来看一下开场动画后的最终画面吧，这有助于我们理解开场动画的制作过程，如图2-7-5所示。上面的是banner，左边是按钮组成的导航条，右边的两个小框分别用于输出网站新闻以及状态信息，中间的则是主画面，它是根据浏览者的选择来装载不同的外部.swf文件，这里的是一个带水滴（闪亮的是水滴）的绿芽。最下面是声音控制开关、时间信息以及版权信息。这里的各个部分我们最好预先决定好尺寸，这样才能更规范，比如我们中间部分定为480×300px，那以后就以这个尺寸来制造要装载的swf文件就行了。
7、从上面的画面我们已经知道我们这个实例的最终画面了吧。心里有个谱了，就可以来“描绘”我们的网页了，我们下面就开始制作。首先我们在主场景中建立五个文件层夹，便于我们后面的制作、管理，它们分别为first、second、button、以及third，另外，我们还需要action和sound层来放置脚本和声音，如图7-2-6所示。我们做这些并不是多余的，等您做完了就能知道这样做的好处了，它即便于制作，修改起来也很方便，很快就能找到要修改的内容。
8、在first层文件夹中建议back层，来放置背景图片。这里我们的背景图片是黑色石头纹的背景图片。放置好了之后，我们按F8快捷键，把它转换成symbol，命名为back。在第1、4、6、7帧和第9帧插入关键帧并在它们之间创建motion动画。把第4和7帧处的back的亮度Brightness设为100％，从而产生闪动两次的效果。这种效果的制作方法我们在后面还会用到很多。
9、再新建一层skip，我们来放置skip按钮。点击它能够直接跳到动画的最后画面，从而给不想看播放动画的朋友提供了选择。Skip按钮是由三个层组成，分别放置了绿色箭头和白色文字，其中的两个不同的箭头是MovieClip，它们自己有动画，所以按钮自己会不停的动，如图7-2-7所示。最后我们要在按钮上添加脚本指令：
on (release) {
gotoAndPlay("main", "end1");
}
这里的main指主场景，end1是一个帧标签，位于最终画面的前一帧。这样设置完了之后，点击按钮就能很快的跳到最终的画面。至于为什么不直接跳到最后一帧，是因为最后一帧有装载的脚本指令，如果直接跳到那一帧，可能会出现根本不执行装载脚本指令的情况，所以为了以防万一，我们还是跳到最后一帧的前一帧。
10、下面要做线条的动画。通过细线条的shape变化，勾勒出最终的画面然后再添加真正的内容，这中技术在Flash动画中经常运用到。线条变化如图7-2-8所示，而时间线上的设定如图7-2-9所示，运动到了好多次的shape变化。这里的变化即包括位置变化，又包括线条长度、数目的变化，从中间移动到图7-2-8的位置，从一条直线变化成两条直线等等。我们在这里不详细介绍了，能可以根据我们的提示方法，自己发挥，一定能够做的更好的。
11、接着，我们要新建一个层，在此层中，我们将会让一个绿色的横条（也是一个MovieClip）出现在两个直线之间，时间线如图7-2-10所示。结果如图7-2-11所示。在第40、45、47、49、 51、52以及53帧之间插入关键帧。把40帧时的banner宽度设为1，Brightness设为100％，第45帧时的宽度为780，Brightness仍为100％，第47、51帧的透明度设为100％，长度均为780，最后一帧53帧不加任何效果，原貌出现。这样横条的效果就是从中间向两边扩展，然后闪动两次，最后以原貌出现。
12、横条的出现把场景分割成了上下两个部分，我们先让上面部分的内容出现，然后再来出来下面部分的内容。我们看一下最后的结果，如图7-2-12所示。它是由两部分组成的，外面的是一个MovieClip，里面的竹子的图片也是一个MovieClip，我们均使用和前面相似的方法让它们出现。时间线如图7-2-13所示，top层包含外面部分的动画而topmc部分则包括里面图片的动画。我们来看一下它们分别出现时的效果，如图7-2-14和图7-2-15所示。外面的MovieClip由左向右出现，闪动两次后恢复原貌，并在最后一帧加入里边线，使之产生一种立体窗口的效果，这个我们以前用到过很多次，这里不再多说。里面的MovieClip是由小到大出现的，然后同样闪动着恢复原貌。
13、下面我们要在前面动画的右边出现我们的另外一个网站标记，如图7-2-16所示。这里的“绿韵”两个字是打散的，第一个使用渐变颜色填充，第二个字使用位图填充，下面的文字使用的是特殊的字体，所以才得到这样的效果。另外，我们在两个字的附近还加入了一些闪烁的星星，是MovieClip的，第一帧为透明，所以我们这里看不到，等到最后输出时就能看到一闪一闪的星星了。这个标志的出现是运用遮罩实现的，在标志所在的层上，加一个mask层，mask层是一个矩形方块，从左到右移动，直到覆盖住我们的标志。我们的标记层也可以做一个颜色变化的motion，把开始时MovieClip的tint设定为紫色，这样的话就能出现更加好的效果了。如图7-2-17所示。
14、上面部分的内容出完了，应该算是第一步的工作做完了，所以我们可以合上first层文件夹了。我们下面的内容就要放在第二个层文件夹second中。这一部分，我们让左边的内容出现。首先同样建立层使用线条勾勒出大体的框架，我们不详细说明制作步骤的，因为方法大体都一样，没什么特别的地方，只不过这里的线条会比较多而已，所以我们要分别建立三个层来处理这些线条。结果如图7-2-18所示。从上到下，从左到右一一出现。
15、接着我们要做左边的背景内容，它的结果如图7-2-19所示。它是由装饰性的几个小块和半透明的绿的背景组成的MovieClip。绿色的半透明背景，在Color Mixer面板中设定，如图7-2-20，选定颜色以后，在右边的Alpha可以选择透明度。我们这里设定为50％。
另外的几个装饰性的小块，是由绿色线性渐变颜色填充的，它的设置是在图中显示solid的下拉菜单里。左边部分的出现我们也使用前面的方法，改变其Brightness，闪动两次出现。左边的出现完了之后就是下面部分的横条，我们也采用前头上面的横条出现的方式出现，我们就不再细说了，您可以回去看看应该怎么制作。
16、我们下面要在第三个层文件夹中加入内容了，所以可以合上第二个层文件夹了。第三个层文件夹button中，我们要在刚才那一步的基础上飞入按钮菜单。效果如图7-2-21，时间线如图7-2-22。按钮一个一个从左边飞入场景中，到右边一定的位置（图中闪亮的按钮位置），再往回走一点。在设置的时候，如图的时间线，按钮飞入和回撤的时间间隔一样，但由于距离不一样，所以就能产生一种减速的感觉。另外，把按钮飞到最右边是的Brightness设为100％，让它“闪亮登场”：）其它的按钮依次出现，错开时间就可以了。这里的按钮一共有六个。
图7-2-22 飞入菜单时间线
17、按钮全部飞入以后，再把下面的两个装饰性的小块也添加到主场景中。我们使用的方法还是让它们“闪亮登场”，让它们的Alpha和Brightness发生变化。出现后结果如图7-2-23所示。具体的步骤您应该可以从前面的制作步骤中的到启示了吧？
18、加入完了以后，您也许会发现，我们的按钮菜单都是一个模样的，上面没有文字，这可不是个好事情，下面我们就给按钮加上文字。我们在这里新建一个层，层中放置一个白色的矩形（也是MovieClip），让它从中间覆盖住所有的按钮，让后我们再全部覆盖的那一瞬间，在另外一层加入所有按钮的文字，当然这一层要放在刚才那一层的下面，才能够挡住文字。然后让白色矩形慢慢变透明，文字就能够显露出来了。如图7-2-24～7-2-26所示。这种方法也比较常用，以后可以多加利用。这里的文字我们选择比较常见的宋体，并且在属性面板中勾选上Use Device Fonts，这样设置后，输出的字体才会清晰，效果会更好。
19、好了，我们现在可以把Button层文件夹合起来了。下面进入third层文件夹的内容。在这一部分的动画中，我们要让右边的网站新闻和状态信息栏，以及最下边的音乐选择按钮、开关按钮、平衡按钮、音量按钮和时间显示信息。这一部分的内容会比较多，我们慢慢来说明。首先建立一个名为mask的MovieClip，它的形状为矩形，注意的是，我们并不是让它产生遮罩，而是只是遮挡，遮罩和遮挡很不同哦。我们在主场景中专门建立一个层mask来放置这个MovieClip：mask。它在后面的动画中会用到好几次。我们这里先不管它，先来制造右边的新闻栏和状态栏。分别新建两个MovieClip：right1和right2，它们就是我们的新闻栏和状态栏啦。它们最后的效果如图7-2-27和图7-2-28所示。它们的制作很普通，没有什么特别的地方，上面的装饰部分加上下面的具有立体感的矩形框，矩形的填充颜色是透明的绿色，透明度为30％，它的设置在图7-2-20的 Color Mixer面板中。我们制作它们的时候要注意它们的尺寸，也就是长和宽，要和我们开始时计划的相符合。
20、那么我们怎么样让它们出现在动画中呢？这里我们回到刚才的mask的内容去，我们让mask由小变大的出现在新闻栏的位置，当它最大时（刚好能够挡住新闻栏，如果不够，我们进行调整，使之能够覆盖住新闻栏）设定其Brightness为100％。变完之后再让mask层变小、消失（也就是透明度变成0）。也就是在mask最大的这个时候，我们在mask层下面新建一层window1，在同样的位置插入关键帧来放置我们的新闻栏。这样的话，开始时并没有新闻栏，当mask达到最大、Brightness为100的时候，我们让新闻栏隐藏出现在mask层下，等mask透明度为0时，新闻栏就出现啦！这个方法我们在出现按钮菜单文字的时候用到过，在这里我们又用到了，是不是很有用呢？我们用同样的方法让状态栏出现在动画中，具体的制作我们就不再作说明了。值得一提的是，我们这里可以重复使用刚才用过的mask层，只需在合适的地方插入关键帧，对它的位置和大小作修改就可以了，移动的时候透明度为0，它的位置移动是看不出来的。其它的步骤和方法同刚才的一样。
21、接下来应该考虑一下我们的新闻和状态信息怎么出现了，因为我们上面做的只是能让框框出现，并不包含新闻和状态的信息。我们只需在动画中新建一层info，在动画的最后一帧位置插入关键帧（尽管我们现在不知道最后一帧到底在什么地方，我们可以先加上，如果不合适到时候还可以修改，只需让它出现在动画的最后一帧即可，再或者就是现不做这一步，等动画的内容全部做完了，然后再在最后一帧加入这一步的内容。），使用动态文字工具，加入两个TextField调整到适当的位置即可。新闻栏TextField的设置如图7-2-29的属性面板。变量名为news，选择Multiline，另外还要勾选上Render Text as HTML，就是变量名左边的第二个选项，这个选项的作用我们在滚动文本的内容中介绍过，就是能让TextField中包含简单的HTML代码。State状态TextField的设置基本一样，不同的是它不用选择Render Text as HTML项，同时变量当然是不同的，这里是state。
22、好了，右边的内容基本上都已经制作完成了，下面的内容就是中间的和最底下的一些声音按钮、时间信息、版权信息等等啦。我们现来制作中间部分的出现动画。我们同样可以利用前面用到过的mask层，这里的变化和前面的稍有点不同，也不能总是一样对不对？我们现让让在透明的情况下“悄悄”的移动到中间部分来，在某一个关键帧（这里根据动画的进度来设定，这里是246帧）处，让它的长度为480px（还记得这个数字吗？是中间部分的长度，我们开始时计划好的），高度为1px（几乎就看不见），透明度为100，让它可见。然后创建一个motion动画，让它的高度由1px变化到300px（也是我们设定好的中间部分的高度），效果如图7-2-30所示。同时我们还可以加入一些装饰性的动画，这里我们是让两个星星引导着mask变大，直到覆盖中间的内容，星星的内容如图7-2-31所示，它是由光晕和光线部分组成，这里我们不想多介绍这种小细节的制作，您可以自己发挥，或者上网络上找合适的效果，自己参考着制作也可以。
图7-2-31 星星的制作
23、我们这个实例网站的内容主要将出现在中间的480px×300px的范围内，使用的方法是通过点击不同的按钮调用不同的外部Swf文件到中间的一个固定MovieClip中来。我们回忆一下前面的制作过场，除了mask以外似乎中间还没有出现过别的MovieClip，所以我们先得制作出这个MovieClip，然后再让这个及其重要的MovieClip出现在我们的动画中来。Target如图7-2-32，共有三层，loading层中只有“loading……”的字样；layer1层中的是由另外一个矩形MovieClip做成的动画，它的变化仅仅是由小变大，再在Brightness和Alpha上变化，产生动感的效果，没有什么实际的用处；mc层中包含着我们装载外部swf文件的MovieClip：mc，它的大小为480px×300px，如图中的矩形框，要注意它的中心不是在最中心，而是在左上角，我们可以看到左上角的小圆圈，那就是它的中心，这方面的知识我们在装载外部电影的时候已经详细介绍过了，这里就不再多说。我们这里要在属性命板中给该mc一个实例名，为了方便，我们同样设为mc。也许你已经发现，这一层最后有两个关键帧，它们是什么用处呢？这两个关键帧是我们用来做循环判断的，判断装载的外部电影是否已经完成。倒数第二帧我们给它加了帧标签load，最后一帧，我们加入了脚本指令如下：
inmc = new Object(_root.movie);
loadMovie(inmc, "mc");
with (mc) {
if (inmc.getBytesLoaded() == inmc.getBytesTotal()) {
play();
} else {
stop();
gotoAndPlay("load");
}
}
stop();
图7-2-32 target制作
这里的第一行指令是建立一个Object：inmc，代表要装载的电影，用它和主场景的movie变量联系起来，主场景的movie变量，我们一会会提到它的，这里不多说明。第二句就是装载inmc到mc中。下面对mc进行判断，如果装载完毕，则让mc中装载的电影播放，如果没有完毕，则回到前一帧load，循环判断。最后让这个target停止播放，这个指令很重要，可不要小看了它，如果不设的话，那么target会循环播放，那样就乱套了。还有什么没有说明的没有，细心的您也许已经发现了，对，就是layer1层的第一帧有一个脚本指令，我们把它的脚本也写出来，看看您就会知道它起什么作用了：
unloadMovie(mc);
也就是说，每一次target播放时就会把前面一次装载的电影给unload掉，这样不会浪费系统的资源，很有必要。
24、装载电影的MovieClip制作好了，怎样把它加入到动画中去呢？我们同样可以再来利用一下前面用到过的mask，让它做一定的motion动作，变小一点点，然后再大，覆盖中央的部分，把它的Brightness设成100％，然后在做一个透明度变化的motion，让它最后透明掉就可以了。在mask最大覆盖住中央的时刻就是我们的target出现的时候了，新建一层loading，在这个时候插入关键帧，把我们的target放大场景中合适的位置，在属性面板中命名实例为：target，这一步的工作就完了。
25、还有最下面的一些声音选择按钮、时间信息等等的东西啦。我们先把它们制作好，再让它们出现在动画中。这里的声音按钮我们使用的是动态载入外部的MP3，这个我们在前面的第五节中曾经详细的介绍过。我们来看一下这些声音控制按钮或拖动条的效果，如图7-2-33。
这里的有最左边的声音选择按钮和音乐开关，中间的音量控制拖动条，右边的声道控制条。我们再来看看他们是怎样控制声音的：
◆从第一到第六个按钮是用来播放不同的声音文件，第一个按钮上的脚本指令为：
on (release) {
music.loadSound("/1.mp3",false);
music.start();
}
依次类推，其余的基本一样，不同的是装载的文件名为：2~6.mp3。这里的mp3文件就是我们与主页面同一目录下的mp3文件。music是我们在场景中设定的声音对象，这里我们先不说，等到下面再来说明，你只要记住这里使用到了它就可以了。按钮指令的作用就是点击它的时候装载相应的mp3文件，并让其播放。
◆6按钮后面的是声音的开关，它上面的脚本指令为：
on (rollOver) {
_root.state = "声音开关";
}
on (release) {
music.stop();
}
on (rollOut){
_root.state=hello;
}
我们来看中间的一句，它的作用是，点击它的时候停止声音的播放。另外两句与状态栏相联系。State是我们在第21步设定的状态变量，还记得吗？这里的意思使，当鼠标移动到按钮上时，状态栏显示“声音开关”的信息，当鼠标移走是，状态栏显示变量hello的信息，这个hello变量我们一会就能够介绍到它，这里先跳过，您只要记住这个变量就可以了。
◆音量滑条是用来控制音量的，滑动按钮可以拖动，它上面加的脚本指令如下：
onClipEvent (load) {
top = _y;
bottom = _y;
left = _x;
right = _x+50;
_x += 50;
}
onClipEvent (enterFrame) {
_root.music.setVolume(_x-left);
}
它的作用是根据拖动按钮的坐标值来调整音量volume，具体的原理你可以回到第五节的相应内容中找到，我们这里就不在重复说明了。
◆声道滑条是用来控制声音的音道的，它和前面的音量滑条原理一致，不过这里是通过滑动按钮的坐标来控制声道的值pan，它的原理我们同样在第五节中介绍过，这里也不再说明，您如果不记得了就可以回去看看。这里滑动按钮上的脚本指令为：
onClipEvent (load) {
top = _y;
bottom = _y;
left = _x;
right = _x+50;
_x += 25;
}
onClipEvent (enterFrame) {
_root.music.setPan((_x-left-25)*4);
}
◆时间显示信息是由一个MovieClip：time来显示。它其中包括两个层，如图7-2-34所示，一个是TextField层，另一个为Action层。TextField层中有两个动态文本框，DateTextField和TimeTextField，分别用来输出系统的日期和时间，这两个文本框设成single Line就行了。Action层有两个关键帧，都包含着一定的脚本指令。第一帧的脚本指令为：
newDate = new Date();
Temp_Month = newDate.getMonth()+1;
if(length(Temp_Month)<2) {
Temp_Month = "0"+Temp_Month;
}
Temp_Date = newDate.getDate();
if (length(Temp_Date)<2) {
Temp_Date = "0"+Temp_Date;
}
DateTextField = (Temp_Month+"/"+Temp_Date+"/"+newDate.getFullYear());
Temp_Hour = newDate.getHours();
if (length(Temp_Hour)<2) {
Temp_Hour = "0"+Temp_Hour;
}
Temp_Minute = newDate.getMinutes();
if (length(Temp_Minute)<2) {
Temp_Minute = "0"+Temp_Minute;
}
Temp_Second = newDate.getSeconds();
if (length(Temp_Second)<2) {
Temp_Second = "0"+Temp_Second;
}
Temp_MilliSecond = newDate.getMilliseconds();
if (length(Temp_MilliSecond)<2) {
Temp_MilliSecond = "0"+Temp_MilliSecond;
}
TimeTextField =
Temp_Hour+":"+Temp_Minute+":"+Temp_Second+":"+Temp_MilliSecond;
我们来解释一下这段脚本，看上去很麻烦，其实不是太难，只是用到了几个属性、方法而已。首先新建一个时间对象newDate，然后用Temp_Month、Temp_Date来存储当前的月份和日期，年份则是由newDate.getFullYear()直接得到。使用if语句和length语句判断这些变量如月份是否有两位数，如果只有一位，则在它们之前加“0”，这样来符合我们的习惯。最后是在DateTextField动态文本框中输出日期的详细字符串信息。而时间信息则是由newDate.getHours()、newDate.getMinutes()、newDate.getSeconds()和newDate.getMilliseconds()分别获得小时、分钟、秒和毫秒的信息，并且分别存储在变量Temp_Hour 、Temp_Minute、 Temp_Second和Temp_MilliSecond中，同样经过如上面对日期位数的判断一样，这里也对时间的位数进行判断，以符合习惯。最后在TimeTextField动态文本框中输出详细的时间字符串信息。
第二帧的脚本指令为：
gotoAndPlay(1);
形成循环，反复的读取系统时间信息，更新显示信息的动态文本框内容。
◆ 最后还有版权信息的一部分，这也是您自己对您成果的一种肯定方式吧，随您自己的心情，愿意加就加上，不愿意就算了。我们这里还是制作一个作示范，如图7-2-35所示，放大过一倍。在您的英文ID上可以顺便加上邮件链接，如下：mailto:***@***.com。
26、做完了上面的这些东西之后，我们就可以让它们出现在动画中了，您可以使用各种各样的方法，可以从一边慢慢的进来，或者通过改变透明度慢慢的显示等等。我们这里使用遮罩的方法。把刚才做好的那几个内容排列好之后，新建一个mask层，在中间放入一个长方形的MovieClip，高度正好能够盖住所有的这些信息，开始的时候让它的长度为很小，然后制作一个使它变长的motion动画，使它后来长度足够框盖住所有的信息，如图7-2-36所示灰色矩形。在mask层上点击鼠标右键，选择mask选项即可。我们的信息就会在遮盖层的隐藏下慢慢出现了。
27、看看，我们所有的应该出现的内容都已经出现在动画中了，可以合上third层文件夹了。新建一个action层，用来放置我们的帧标签和脚本指令。在主场景main的第一帧插入关键帧，设其帧标签为play，并加入如下脚本指令：
movie="no1.swf"; //var movie;
fscommand("allowscale", "false");
fscommand("showmenu", "false");
这里的movie变量是我们在第23步中提到的movie变量，我们用它来设定我们初始要装载的动画文件名，通过点击不同按钮，设定不同movie变量，所以才能载入不同的外部swf文件。这里的no1.swf就是我们中间部分一开始就要装载的外部动画文件，也就是图7-2-5中滴水的动画。下面的两个语句不说大家也明白，就是禁止右键菜单和禁止缩放动画。在动画的倒数第二帧中加入帧标签“end1”，这也是我们在第9步中曾经提到过的。在最后一帧我们加入如下的脚本：
hello = new String("绿色韵律！欢迎您来到这绿色的世界！Welcome to my homepage！！！");
state = hello;
loadVariablesNum("news.txt", 0);
music = new Sound();
music.loadSound("/1.mp3", false);
music.start();
stop();
这里的脚本指令包含了一些初始化的脚本同时还有一些装载指令。第一句是设定一个字符串变量，它是用来输出到图7-2-28 状态栏的欢迎词语。看看第二步，我们马上把刚才的hello变量赋给了state变量，这样，主场景中的state状态栏就能输出我们的欢迎信息了。第三句是装载news.txt文本的内容到图7-2-27 新闻栏中，这里的内容我们在第三节中相关的内容中已经介绍的非常详细了，要注意news.txt要以“news=”开头，这样才能和主场景中的news变量对应上，同时，news.txt写字本文档，要存储成unicode格式，选择另存为，会弹出的对话框，如图7-2-37，在对话框的编码下拉表中选择unicode（windows2000和xp下）就可以了。再往下面的三句都是关于声音的，建立music声音对象，开始的时候装载1.mp3文件，并设定其为event形式，开始播放声音。最后的stop是让整个动画停止播放，停留在最后的画面中，决不可少的。
28、我们还忘了对新闻栏作一些改进了，因为前面我们做的只是让它能够装载入新闻信息，如果新闻信息很长的话，那将会有很多的信息看不到，所以我们要加入控制滚动的按钮，我们其实已经在第三节的内容中详细介绍过，我们这里再说说它的制作。我们先制作两个空MovieClip，分别为textup和textdown，在它们中，分别插入三个连续关键帧。它们的脚本指令分别为：
◆textup
第一帧：stop(); //停止
第二帧：_root.news.scroll=_root.news.scroll-1; //主场景中新闻信息向上滚一行
第三帧：gotoAndPlay(2); //循环播放
◆textdown
第一帧：stop(); //停止
第二帧：_root.news.scroll=_root.news.scroll+1; //主场景中新闻信息向下滚一行
第三帧：gotoAndPlay(2); //循环播放
另外还要制作好一个滚动点击用的小按钮，一同放到info层的最后一帧上，如图7-2-38所示。两个白色的圆圈就是我们做好的textup和textdown，我们在属性面板中分别定义实例名为up和down。它们旁边的两个绿色小箭头就是我们的滚动按钮了。在向上的滚动按钮上我们加入如下脚本指令：
on (press) {
tellTarget ("/up") {
play();
}
}
on (release) {
tellTarget ("/up") {
gotoAndPlay(1);
}
}
在向下的按钮上我们同样加入如下的脚本指令：
on (press) {
tellTarget ("/down") {
play();
}
}
on (release) {
tellTarget ("/down") {
gotoAndPlay(1);
}
}
它们的作用就是按住它们的时候，让up或者down播放，也就是使新闻栏的内容向上或者向下滚动，当鼠标松开时，让up或者down停止在第一帧，也就是停止滚动。这里的"/up"就等与"_root.up "，前面的那种表示法现在已经不提倡了，我们尽量使用后面的表达式的格式。
29、我们还给网页加上一个收藏的功能按钮，如图7-2-38中箭头上面的圆形按钮。它同样是处于动画的最后一帧，至于那一层，没有多大的关系，我们把它放在action层中。在它的上面我们加入脚本指令如下：
on (release) {
getURL("javascript：void window.external.AddFavorite('http://woohey.51.net','绿韵');", "_self", "POST");
}
on (rollOver) {
state = "收藏本站，添加到收藏夹";
}
on (rollOut) {
state = hello;
}
这里我们使用到了第三节后面部分介绍的加入收藏内容，使用的是javascript脚本，如果您忘记了，请回去看看。后面的两条指令是针对状态信息的，当按钮移上去时，状态栏显示"收藏本站，添加到收藏夹"的信息，当按钮离开时，显示我们的欢迎信息hello。我们还可以加入重新播放动画的按钮，只需在上面添加指令：
on (rollOver) {
state = "重新播放开场动画*^_^*，您也可以直接刷新页面。";
}
on (release) {
gotoAndPlay("play");
}
on (rollOut) {
state = hello;
}
上面指令中的第一句和第三句都是和状态栏相关的，通过它们来控制状态栏的信息，当鼠标移动到该按钮上时输出信息"重新播放开场动画*^_^*，您也可以直接刷新页面。",当鼠标移走时，输出欢迎信息hello。点击按钮则跳到动画的第一帧处重新播放，这里的play是我们在第27步中给主场景动画第一帧设置的帧标签。
30、接着使收尾的工作了，调整好每一层的最后一帧，使它们处于同一帧，像这里是第300帧。唯一例外的是skip层和按钮菜单的各个层，我们一一说明。Skip层中只有skip按钮，我们用它来跳过动画，所以当动画播放到一定的时候，接近最后时就可以把它去掉，我们这里在第255帧就让它消失。所以skip层从256帧到最后一帧都为空。按钮菜单层我们因为要给它们加上相应的脚本指令，所以也有所不同，我们在每一个按钮层的最后一帧都加上关键帧，并且在这一帧上我们要给按钮添加指令。如图7-2-39所示的“我的故事”按钮的脚本指令如下：
on (rollOver) {
state = "站长的故事";
}
on (release) {
movie = "woohey.swf";
tellTarget (target) {
play();
}
}
on (rollOut) {
state = hello;
}
点击这个按钮将载入关于站长的外部动画文件“woohey.swf”到中央部位，这是怎么实现的呢？我们看看第二句，点击按钮的时候，把我们要装载的文件名赋给movie变量，让后让主场景中实例target播放，我们回忆一下target实例，在第23步，target播放时先unloadMovie上一次装载的动画，然后到最后的一帧在装载我们这里的movie动画，这样不就是我们要的结果吗？另外的两句是跟状态栏有关的，当鼠标移动到按钮上时则显示“站长的故事”信息，鼠标移走时则输出我们的欢迎信息hello。其余的几个按钮大致相同，不同的是第一句中的信息和第二步中文件名。
当然如果你不希望把文件装载入中间的target（实际上是mc），想另外打开一个窗口，那么您可以使用类似下面的脚本指令，这也是我们加在图7-2-39中“动画欣赏”按钮上的脚本指令：
on (rollOver) {
state = "一些很有代表性、特精彩的Flash动画，供大家欣赏。";
}
on (release) {
getURL("flymenu.swf", "_blank");
}
on (rollOut) {
state = hello;
}
也许您已经发现了和前面按钮指令的不同之处，不错，区别就在于第二句，我们这里直接使用getURL，在新的窗口中打开我们第一节已经做好的"flymenu.swf"，对target并没有什么动作。另外两句我们就不再说明了，和前面的意义一样。
31、下面就是给动画添加音效了，这里没有多少可以说的。要注意的是音效文件我们尽量选用体积小的，可以重复使用的，格式上我们一般使用Stream（流式）以保持同步。当然音效也可以在动画没有制作之前先加入，这样动画的整个制作过程就可以参照音效来制造了，这是另外的一种方法，这种方法在制作Flash MTV的时候最常用。
32、最后就是发布（Publish）动画了，选择File>Publish Setting，如图7-2-40，选择Flash和HTML选项，Flash选项卡默认，在HTML选项卡中，我们在Template下拉菜单中选择Flash with FSCommand，这样，我们在Action层第一帧设置的禁止缩放的指令才会起作用。另外，在palyback选项中，勾去Display Menu，这样进制菜单的指令才能起作用。所有设定都完了之后，点击Publish按钮了。回到我们的目录下，点击index.html，查看结果，您会发现动画的位置不是最中间，并且动画周围还存在空隙，我们马上就来把这个空隙给去掉。使用DreamweaverMX打开index.html，点击show Code View，在<body>的尖括号中加入代码“topmargin="0" leftmargin="0"”，同时把object和embed标签中的动画的长和宽“780”和“450”都改成“100%”，让它占满全浏览器。
图7-2-40 发布对话框
存储，预览一下， 看看是不是已经纠正过来了？下面我们再给首页加入一个弹出窗口，提醒浏览者如果看不到的话到相应的地址去下载FlashMX浏览器插件。我们先创建install.html页面，里面的内容就是提醒性的文字并给出了一个下载地址，让浏览者按照提示去下载浏览器插件。然后我们回到DreamweaverMX中来，按Shift＋F3快捷键打开Behaviors面板，如图7-2-41，点击左上角的加号，在弹出的菜单中选择open browser window，就会弹出如图7-2-42的对话框，我们填入如图的内容。URL to Display是弹出窗口的HTML文件地址，下面的window width和window height设定弹出窗口的长和宽，在下面的多选项是用来设定弹出窗口的外观，分别为：导航工具条、菜单条、地址栏、滚动条、状态栏和是否允许缩放弹出窗口。按照我们这里的设定，将弹出如图7-2-43的窗口。
总结：
我们的这个实例终于做完了，当然并不是全部的完成，因为您还需要做装载的那些动画，我们这里只是介绍一个模板性质的内容，还有很多的工作需要完成。这样的网站实例是带有普遍性的，我们回忆一下，从开始到最后我们用到很多很多的知识，规划、设计和制作中几乎用到了我们在前面介绍到的所有内容（除了视频）。当然这里的网站实例具备的交互性还很欠缺，如果您想让您的Flash网站具有真正的交互性，吸引更多的浏览者的驻足的话，那么您应该好好的学习下面一篇的内容。
在制作动画的时候我们应该尽量的减小动画的体积，使之适合于网络上的传播。下面我们就提出一些减少动画体积的方法，它们对于Flash动画的制作应该是很有好处的。
1.利用symbol来减小体积。在动画中如果又重复的话，就应该设成元件symbol。因为重复使用symbol并不会增加size，而如果没有设成symbol的话，文件size就会成倍的增加，多划不来啊！再说，图库的作用不就在此么？
2.采用“移动渐变” motion和shape动画而不采用逐帧动画。很显然的，以移动渐变的动画只用头和尾两个帧，而逐格渐变是每一帧都有内容的！！
3.图片优化。大家都知道，矢量图可以任意放大缩小，但并不影响画质，但点阵图就不一样，放大后画质会变低。此外，点阵图非常不适合做旋转、变化位置等动画，点阵图比较适合做背景图。点阵图不宜过大，如果太大我们可以对其进行JPEG压缩，执行“file/publish setting”,在Flash选项卡中即可设定，JPEG品质越高，文件size越大。。矢量图很耗费电脑的CPU的运算力，高画质、反锯齿状的矢量图更是，所以最好把矢量图优化，执行“modify/optimize”（执行前先Ctrl+B打散），将平滑度往右移到最大，则可大力简化构图线条。
4.字体的优化
文件中尽量不要使用太多不同的字体，可以对用一种字体，以粗体、斜体、大小、变形、颜色变化等方法来变化字形风貌。由于每种字形的外框轮廓均不同，您每多使用一种字形，Flash动画就得多存储一种字形的外框，因而size也就增大了。
我们要尽量的使用Flash内定的“基础字形”， _sans、_serif、或_typewriter三种基础字形，可大大减小文件size。
避免打散字形。打散字形，size就会增加，而不打散的话，由于已经包含了字形外框，不会增加大小。
5.尽量缩小动作面积，并且不要在同一时间内动作频繁。
6.清除不必要的元件。把图库里的没有用到的元件删除。在图库的右上角选择Option/select Unused Items,删除即可。
7. 动画的长宽尺寸越小越好。尺寸越大，size越大。执行Modify/Movie可以调节尺寸。如果制作到最后想将动画画面缩小一点，可将所有的层解锁，点击“Edit Mutiple Frames",再选择右侧的Onion All,然后Ctrl+A选上所有的对象，执行Modify/movie,在对话框中指定“符合内容”（Match:Content），即可。为了使文件的size最小，你可以先将电影尺寸设的十分娇小，各构图元件也按比例缩小，然后导出此迷你电影SWF文件，在HTML主文件内将HTML中的Object和Embed标签里的电影长宽尺寸放大，设置成100％，就可以得到很好的效果了*^_^*
8.最后一个要提的就是使用检测工具来优化动画。每制作一小段时，我们按Ctrl+Enter,执行“Debug”选择一定的带宽，然后执行“View/Bandwidth Profiler"，便可看清是哪一帧size太大，超过红线的话，就会出现停顿，我们最好对这一帧进行修改。
回复Comments
作者:
{commentrecontent}