全Flash网站制作实例 - 穿过流水的枪

西瓜发表于22:51:17Tag： | 编辑 | 继续话题 | 转发 | 分享　0

全Flash网站制作实例 - [flash]

2009-05-25

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
 http://2yue22.blogbus.com/logs/39946960.html

考虑到个人网站的更新速度，除了留言模块采用Flash+ASP+Access外，其他部分都使用Flash+XML构建。留言模块比较简单，大家如果要看功能比较全的留言本制作教程，可以从网上找，很多的（我说过我很懒的）。

第一次写这么长的教程，不准备把制作步骤一步一步写出来，这样太机械，看完后也不知所云，我会把每个模块预计的目标，自己的想法，和实现步骤重点写出来，这样我想对您会更有帮助：）

工具：Flash8(AS2.0)
Tips：这个网站使用了不少AS2.0的内置类，相关语言不清楚的话可参考Flash8的帮助文档。

第一章：模块划分
基本上个人网站只有About,News,Works,Contact几个模块（其实大部分模块的实现方式很类似的），因为使用MovieClipLoader类来动态加载，所以我们的swf包括about.swf, news.swf, works.swf, contact.swf以及放置导航条，背景效果和音乐播放器的main.swf,最后还有一个index.swf用来载入main.swf的。

Tips：当然结构是看个人喜好的，你可以把背景效果和播放器都做成单独的swf。

第二章：index.swf
Index.swf主要是加载main.swf并包括一个loading效果的（这个loading效果是我最满意的部分，是受一个广告的启发，虽然实现很简单），这个loading在后面的模块中也经常使用，所以把它做成一个单独的MC(loading_mc);

Index.swf的背景是一个渐变，这是为了不使在loading的时候画面不要过于简单，我使用的是一个色系的颜色，上面深（＃009288），下面浅（＃A8D4D1)，大家不必拘泥，用你们喜欢的颜色就可以了。

重点是loading_mc的制作，下面是loading_mc的预览图：

其实就是一个标尺的样子，右边有个动态文本显示加载的百分率，并且其y值随之上升到相应高度的位置（呵呵，简单吧，不过效果很不错，现在大部分loading制作时显示百分率的文本位置都是固定的，这个创意为整个网站增色不少的）
制作过程：左边的那个标尺不用说了吧，使用极细直线来作，右边的动态文本命名为loading_txt，字体使用04b_08，大小为6
下面就是AS代码部分了，在主场景第一帧写代码：

fscommand("fullscreen", true);       //全屏
fscommand("allowscale", false);    //不许缩放
var my_mcl=new MovieClipLoader();      //定义一个MCL了，不熟悉此类的看帮助文档
var mcllistener=new Object();         //定义一个侦听器对象
var container=this.createEmptyMovieClip("container", this.getNextHighestDepth());
//container用于装加载的main.swf
mcllistener.onLoadStart=function(){
loading_mc._visible=true;
loading_mc.loading_txt.text="00.00";
}//我的方法是改变loading_mc的_visible来控制它的显隐，当然也可以用其他方法，不  //过这个来得简单
mcllistener.onLoadProgress=function(target, bytesLoaded, bytesTotal){
var loaded=100*bytesLoaded/bytesTotal;
loading_mc.loading_txt.text=loaded.toString().slice(0,5);
loading_mc.loading_txt._y=50-loaded/2;
}//loaded是加载的百分比，因为我的标尺高度是50px,所以loading_txt的y值应为50-//loaded/2
mcllistener.onLoadComplete=function(){
loading_mc._visible=false;
}//加载完成后，loading_mc隐藏
mcllistener.onLoadInit = function(target){
target._x=0;
target._y=0;
}
my_mcl.addListener(mcllistener);//为my_mcl添加侦听器
my_mcl.loadClip("main.swf",container);//加载main.swf到container中

上面的代码不麻烦吧，基本上只涉及MCL类和MC的坐标控制：）
好，下面开始main.swf的制作了。

第三章：main.swf
Main.swf里面的内容很多，因为有很多东西是后来加的，所以大家在制作中可以把部分提取出来制作成单独的swf

下面是main.swf的视图：
Click here to open new windowCTRL+Mouse wheel to zoom in/out
可以看到，主要有四个MC部分：背景效果的bg_mc,顶部的top_mc,音乐播放器的music_mc和导航栏的menu_mc,下面分别介绍：

1> bg_mc:
Bg_mc的底色采用和前面index.swf中底色一致，不过渐变色方向相反，以后加上颜色更深些的top_mc会使页面丰富起来，大家可以用自己喜欢的色系来配色：）
然后我这里使用了一个图片来使背景更丰富，原图如下：

这里我们要进行些处理，在PS(或其他你熟悉的图像处理软件)中把图片中的汉字擦除，擦干净就行，然后把它导入到舞台中新的一层，移至右下角，按F8转为MC,在此MC的“混合”模式里选“变暗”（见下图），好了，图片和背景很好的融合到一起了（简单吧，不需要抠图的）

接着，就是在Flash中做那个"独自撑起生命的暖色..."的文字效果了，这是个细致活，要耐心点：
原来的文字是”毕业了..."我把这三个字去了，破坏了原有的平衡，这样就得把所有的字重新排列。我的想法是重读的字词用大号字显示，所以”独“，”撑“，”暖色“我用36px加粗黑体，其他的字用18px加粗黑体（全部为透明度80%的白色，全白会有些刺眼），每个字一层，便于作动态效果，另外每个字的位置也很重要，我的排列方式如下图：

我当初的想法是从后往前摆，"生命的"与"暖色"上沿基本对齐，"起"与"暖色"的下沿基本对齐，"撑"的下沿对齐"起"的½处，"自"与"撑"下沿对齐，"独"上沿与"自"1/2处对齐。当然这是见仁见智的，只要自己觉得好看就可以了：）
剩下的就是为每个字做透明度渐变的效果了，这个相信大家都会做，我就不说了，可以参看源文件。

为了使背景更有动感，我还放了个motion_mc,其实就是无限复制效果，效果图如下：

这个MC的制作方法网上有很多，不详细讲了，就是先做一个由引导线引导的半径变大，透明度下降的ball_mc(可以调下缓动为负值，表示先慢后快），然后用

Ball_mc.duplicateMovieClip("ball"+i,this.getNextHighestDepth());
this["ball"+i]._x=ball._x+random(50)-100;
this["ball"+i]._y=ball._y+random(40);
this["ball"+i]._alpha=random(30)+70;
this["ball"+i]._width=random(10)+10;
this["ball"+i]._height=this["ball"+i]._width;

来制作，上面的代码很好懂，就不解释了：）

Bg_mc就说完了，其实大家可以把它做成一个单独的swf动态加载，还可以作很多背景效果，随即加载其中一个效果...

2> top_mc:
这个mc的内容很少，只是起一个装饰的作用，如下图：

就是一个矩形色块（＃#244131），然后是站点名，你可以给它作些动态效果，然后要为这个MC添加投影滤镜，使有立体效果，参数入下图：

3> menu_mc
本来做的时候准备把menu_mc做成读取外部XML动态生成的，以方便添加栏目，但后来考虑的个人网站的更新速度实在没必要，就做成静态的了，不过Flash+XML后面的很多模块都用到了，想学习flash+xml的读者可以直接跳到后面
Menu_mc完全加载后的显示如下：

当然动态效果大家可以根据自己的喜好做，这方面也没什么说的
我的结构是menu_mc包括about_mc，news_mc，works_mc，contact_mc，每个mc里都包含一个menu_btn
在每个mc（比如about_mc)的最后一帧写代码：