最近更新 / 特别专题 / 我要上传 / 设为首页
满足眼睛的需求

频道精选


FLASH网站常用预载特效剖析

2007-06-05 来源:xuezhishi.com   内容报错                        

flash网站以它的构思精巧,绚丽多彩为大多数前卫设计者偏爱。它给人带来的视觉,音效的冲击,与传统网页的设计比较,有巨大的吸引力。鉴于网速的问题,我们需要考虑制作loading来完善flash站点。假如有很多的外部wsf文件需要载入进主swf文件,要怎么样才能实现呢?今天,我们就来探讨一下类似国外著名站点2advanced(www.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=poz_x;this._y=poz_y;(该坐标就是你要求外部swf在主swf场景里的位置坐标);如果是loadMovie语句调用swf到一个空MC,只要把空MC放到你要求外部swf所处的位置的左上角,比如:坐标(100,200)。  
 
如果要实现精确下载的话,从flash  5上就有了美妙的函数:getBytesLoaded()  和  getBytesTotal()。其中:getBytesLoaded()可以让我们得到已经下载的字节数,而getBytesTotal()则告诉我们该文件一共有多少字节。我们在主场景做一个动态文本设置变量为input,Bar为一矩形长条的实例名,其长度为100,然后在舞台上将Bar长度变为1。在第一帧上加as,  
 
(在动作面板里按住Ctrl+Shift+E,切换到专家模式,复制粘贴代码)  
 
the  code  ————————————————————  
 
_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;  
 
             }  
 
};  
 
the  code  ————————————————————  
 
   
 
一般的逻辑思路见下图:  
 
 
对于load在本地的测试,因为本地读取数据很快,可能我们看不到load的效果,需要我们按Ctrl+Enter预览的时候,在debug菜单下选择下载速度,自己设定也可以,点选  
 
customerize来指定。  
 
好了,通过上面两种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帧处按F7添加空白关键帧,画一矩形,也将其转变为电影剪辑(实例名为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一样大。第一帧加代码(相信大家不陌生了)  
 
the  code  ————————————————————  
 
this.onEnterFrame  =  function()  {  
 
           //检查是否load完毕  this指的是被调用的对象。  
 
           if  (this.getBytesLoaded()  
 
                     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();  
 
the  code  ————————————————————  
 
第二帧我随便做了一个颜色渐变的mc,大家在实践中可以做自己喜欢的动画。只是测试的目的,我们做类似的swf共3个,文件名起为content1,content2,content3。需要和主swf文件保存在同一文件下。  
 
好了,现在按Ctrl+Enter键来调试一下,有没有一种成就感呢?我们的口号是:轻轻松松falsh,闪亮生活每一天。  

评论 点击查看
 

精彩图片