分享
 
 
 

FLASH网站常用预载特效剖析

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

Flash网站以它的构思精巧,绚丽多彩为大多数前卫设计者偏爱。它给人带来的视觉,音效的冲击,与传统网页的设计比较,有巨大的吸引力。鉴于网速的问题,我们需要考虑制作loading来完善flash站点。假如有很多的外部wsf文件需要载入进主swf文件,要怎么样才能实现呢?今天,我们就来探讨一下类似国外著名站点2advancwww.2advanced.com)预载页面的制作方法。(具体效果登陆该网站观摩)

先来学习一下一般loading的制作思路。它是用actionscript来实现。新建一层,这层专门放action,

第一帧,

ifframeloaded ("场景", frame) {//假如场景中地祯数已经载入

goto and play(“start”) //跳至并播放某某祯(自己设定的帧标签)

}

第二帧,

goto and play("场景1", 1)//跳至并播放第一祯循环

再加上一个load的mc循环播放在这两帧的中间,就ok了。很多新手对于loadmovie调用的外部swf在主swf里的定位很疑惑。其实很简单,如果是loadmovienum进来的,在调用的外部swf文件第一帧加as:this._x=100;this._y=200;(该坐标就是你要求外部swf在主swf场景里的位置坐标);如果是loadmovie语句调用swf到一个空mc,只要把空mc放到你要求外部swf所处的位置的左上角,比如:坐标(100,200)。

如果要实现精确下载的话,flash 5上就有了美妙的函数:getbytesloaded() 和 getbytestotal()。其中:getbytesloaded()可以让我们得到已经下载的字节数,而getbytestotal()则告诉我们该文件一共有多少字节。我们在主场景做一个动态文本设置变量为input,bar为一矩形长条的实例名,其长度为100,然后在舞台上将bar长度变为1。在第一帧上加as:

_root.onload = function () {

totalbytes = _root.getbytestotal();

}

_root.onenterframe = function () {

loadedbytes = _root.getbytesloaded();

percentdone = int((loadedbytes/totalbytes)*100);

//显示下载进度为number%

output = percentdone+"% of file loaded";

//进度条的x尺寸为下载进度percentdone

_root.bar._xscale=percentdone;

// 如果load完毕

if (percentdone >= 100) {

// goto frame 2

this.gotoandstop (2);

// 终止这个循环

_root.onenterframe = null;

}

};

一般的逻辑思路见下图:

好了,通过上面两种loading的制作,相信你已经熟悉了loading的步骤。我们开始正式的preload制作。

第一:新建影片。大小为550×400,颜色为黑。用矩形工具画一个长宽分别为54,18的矩形。按ctrl+f8转变为按钮。为了美化,可以在rollover区按f6建一关键帧,把矩形的颜色变为红色。

第二:把我们刚做好的按钮从库里面拉到编辑区域。一共拉出来3个(这是做元件的好处,可以重复使用),把它们水平排列。新建一层,选择文字工具在每个按钮中间分别写上:

button 1,button 2,button 3,字体颜色为黑色。

第三:在编辑区域中画一个无填充色、蓝色边框的矩形,打开属性面板,将其长,宽值输入550,184。坐标为0,180,按回车确定。按ctrl+f8将其转变为影片剪辑,实例名起为content。同样的方法创建一新元件名为control,在第二帧创建空白关键帧,在编辑区域画一个白色矩形,长宽都为0.5,坐标为(0,0)。在第四十帧上按f6建关键帧。在第二十帧上建关键帧,将该矩形长宽定为550,184。其坐标为(-275,-92)。好了,在1和20帧,20和40帧之间点右键,选择第一个选项(create motion tween)创建动画。再新建一层,在20帧处添加空白关键帧,画一矩形,也将其转变为电影剪辑(实例名为loadbar)。建新层,

在第一帧加语句:stop();在20帧加语句:stop();

//load 我们需要的swf文件(后面制作)

loadmovie(_root.nextmovie,_root.content); //把nextmovie这个swf文件载入进content这个mc里。

选中2,21帧,分别在属性面板中给帧起个名字(术语叫帧标签)。2帧为“close”,21帧为“open”。再建一层,在20帧加一个影片剪辑loadbar。如上述做法,其为一矩形长条的实例名,其长度为100,然后在舞台上将loadbar长度变为1。这个影片剪辑就做好了。

第四:回到主场景。把我们做好的3个按钮依次起实例名为bt1,bt2,bt3。然后从库里面把control元件拖到场景,起实例名为cover,坐标为(275,200)(注意,我们的control元件第一帧为空,所以场景里只能看见个小圆圈。老手们看的不耐烦了,呵呵,为了照顾初学者,我是罗嗦了,可不是骗稿费哦。)现在看看你的编辑区域,应该象下面这副图:

第五:新建一层,在第一帧上写代码:

stop();

but1.onrelease=function(){

//设置一变量来存储我们要load的swf文件名称

nextmovie="content1.swf";

//告诉over mc 去播放close动画。

cover.gotoandplay("close";

}

but2.onrelease=function(){

nextmovie="content2.swf";

cover.gotoandplay("close";

}

but3.onrelease=function(){

nextmovie="content3.swf";

cover.gotoandplay("close";

}

第六:主swf文件完工,我们来继续制作要载入的swf。在这里,我们为了叙述简便,只做两帧。影片大小为550×184,和content一样大。第一帧加代码(相信大家不陌生了)

this.onenterframe = function() {

//检查是否load完毕 this指的是被调用的对象。

if (this.getbytesloaded()<this.getbytestotal()) {

total = this.getbytestotal()/1000;

received = this.getbytesloaded()/1000;

percentage = (received/total)*100;

//开始进度条动画

_root.cover.loadbar._scale= percentage;

} else {

//当完全载入

gotoandstop(2);

//告诉over mc去播放open动画。

_root.cover.gotoandplay("open";

//取消enterframe 动作

this.onenterframe = null;

}

};

stop();

第二帧我随便做了一个mc,大家在实践中可以做自己喜欢的动画。只是测试的目的,我们做类似的swf共3个,文件名起为content1,content2,content3。需要和主swf文件保存在同一文件下

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有