您正在使用陈旧(Internet Explorer 6)浏览网页,如果您升级到. Internet Explorer 8 转换到另一个浏览器,本站 将能为您提供更好的服务。了解如何更新您的浏览器.
X
Post

ww.tvcd.org-大气 时尚 另类 设计 Flash网站制作教程1

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

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

工具: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

可以看到,主要有四个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;
来制作,上面的、教学很好懂,就不解释了:)-TVCD大气 时尚 另类 设计 Flash

发表看法  

姓名 (必填)*

电子邮件 (不会被公开) (必填)*

网站

提交看法