FLASH网站常用预载特效剖析

原创 2004年08月29日 22:50:00
作者:bluepoint8101


FLASH网站常用预载特效剖析

flash网站以它的构思精巧,绚丽多彩为大多数前卫设计者偏爱。它给人带来的视觉,音效的冲击,与传统网页的设计比较,有巨大的吸引力。鉴于网速的问题,我们需要考虑制作loading来完善flash站点。假如有很多的外部wsf文件需要载入进主swf文件,要怎么样才能实现呢?今天,我们就来探讨一下类似国外著名站点2advanced(http://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=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._xscale= Percentage;
} else {
//当完全载入
gotoAndStop(2);
//告诉over mc去播放open动画。
_root.cover.gotoAndPlay("open");
//取消enterframe 动作
this.onEnterFrame = null;
}
};
stop();
第二帧我随便做了一个mc,大家在实践中可以做自己喜欢的动画。只是测试的目的,我们做类似的swf共3个,文件名起为content1,content2,content3。需要和主swf文件保存在同一文件下。(请勿随意转载传统媒体)

常见40个常用的js页面效果图

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 no 可用于Table 2. 取消选取、防止复制 3. onpaste=...
  • echocdzh
  • echocdzh
  • 2015年12月14日 15:34
  • 1827

CSS3创建H5预载动画效果

前端技术 CSS3创建H5预载动画效果 作者:李 格锐2015.03.09 预载是互联网交互设计中必不可少的元素之一,它们负责在内容显示前,既可增强用...
  • cwscwj
  • cwscwj
  • 2016年05月31日 18:00
  • 1302

Android开源特效常用链接大集合

*本篇文章已授权微信公众号 guolin_blog (郭霖)独家发布 “工欲善其事,必先利其器”。我将github上的常用android特效总结了一下,给大家分享一下,免得在网上一头雾水找不到自己想要...
  • Jiang_Rong_Tao
  • Jiang_Rong_Tao
  • 2016年05月17日 16:15
  • 8172

H5+App的页面预载优化

一般移动App的页面形式为:导航栏加页面(Tab+View)形式,或者菜单加内容(Menu+Content)形式,主要特点就是,可以由很少的几个模板页面组成 辅助Ajax动态填充页面内容即可.因此,...
  • tzdwsy
  • tzdwsy
  • 2015年08月09日 14:13
  • 1012

231个web前端的javascript特效分享

1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文...
  • zhaanghao
  • zhaanghao
  • 2016年01月04日 17:40
  • 1722

前端编程提高之旅(二)----网站常见特效的jquery实现

最好的编程语言是逻辑,前端各种交互特效的实现多可以用jquery实现,特效可以纷飞,内在逻辑则基本不变。这一篇文章主要介绍jquery实现常见特效背后的逻辑。    1.通过类名获取元素集合    首...
  • yingyiledi
  • yingyiledi
  • 2014年08月09日 23:11
  • 3902

常见的网站架构分析

1. 初始阶段的网站架构 一般来讲,大型网站都是从小型网站发展而来,一开始的架构都比较简单,随着业务复杂和用户量的激增,才开始做很多架构上的改进。当它还是小型网站的时候,没有太多访客,一般来讲只需要...
  • huwen_hua
  • huwen_hua
  • 2016年07月07日 12:02
  • 1104

常见的几种FLASH存储器

什么是Flash Memory?FLASH存储器又称闪存(快闪存储器),是一种电可擦可编程只读存储器(EEPROM)的形式,允许在操作中被多次擦或写,EEPROM与高速RAM成为当前最常用且发展最快的...
  • playkid123
  • playkid123
  • 2015年03月23日 11:58
  • 475

一个后门分析

文件信息: 壳信息:无壳 编译器:vs2010 1. 文件运行后,会首先判断文件是否在C:\WINDOWS\system32目录下,如果没有则拷贝自身到这个目录下,并将自身设为服务进程,随开机...
  • u011636170
  • u011636170
  • 2016年11月22日 09:47
  • 181

css大会网站顶部的一个特效

看到http://css.w3ctech.com/ 上一个效果觉得挺赞的。然后学些了一下。demo地址:http://codepen.io/tianzi77/pen/mJaLWq html结构很简单,...
  • u011263845
  • u011263845
  • 2015年08月03日 10:38
  • 541
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:FLASH网站常用预载特效剖析
举报原因:
原因补充:

(最多只允许输入30个字)