纯AS的Loading效果四例

loading

  前言:稍微大一些的Flash作品在播放之前都会有一个Loading预载画面,这考虑到网络的速度,本地浏览不需要等待下载,但传到网上,因为每个用户的网速不同,所以很有必要在我们的作品中加入Loading画面,之前,已经有很多教程是关于Loading制作方法的,今天我们给读者讲述四个纯AS的Loading效果,不懂AS的菜鸟或“代码盲”甚至可以直接复制教程中的代码到自己的作品中,懂AS代码的朋友,可以仔细阅读这些代码,从中学到更多的AS知识,或由此引申出更多的AS Loading效果……感谢作者=棉花糖=、egg616、小郎提供源码和思路--闪客帝国的叶子

一.=棉花糖=的Loading教程

  比较简陋
  动态显示load百分比
   将全部代码拷贝到第一帧,当load完毕后,会自动开始播放

  源代码:

stop (); _root . createTextField ( "myload_txt" , 1 , 0 , 0 , 0 , 0 ); with ( _root . myload_txt ) { //设置文本   background = true ; //文本框是否有背景   backgroundColor = 0x336699 ; //文本框的背景颜色  textColor = 0xFFFFFF ; //文本字段中文本的颜色   type = "dynamic" //文本字段为动态文本   selectable = false ; //文本是否可选   autoSize = "center" ; //控制文本字段的自动大小调整和对齐   _x = Stage.width/2; //文本字段的横坐标   _y = Stage.height/2;//文本字段的纵坐标  } onEnterFrame = function () {   var Loaded = _root . getBytesLoaded ();   var Total = _root . getBytesTotal ();   _root . myload_txt . text = Math . floor (( Loaded / Total )* 100 )+ "%" ;   if ( Loaded == Total ) {     onEnterFrame = null ;     removeMovieClip ( _root . myload_txt );     play ();   } }; 

二. egg616的Loading艺术之一

  1、制作原理:
  世界上所有的loading大概都可以分为三个部分:
  1) 制造一个循环,用于更新数据。一般来说有两种方法,一种是做成二帧,在第二帧中用gotoAndPlay(1)命令产生循环。另一种是只做一帧,利用onEnterFrame命令产生循环。
  2) 利用getBytesTotal()与getBytesLoaded()命令获取文件数据。
  3) 以图形或动画的方式将第二步获取的数据表现出来(一般同时还以文本方式精确表示)

  上面的说明,对一个会做LOADING的人来说是很清楚的,但不会做的看了大概还是不会(呵呵)所以下面我们一步一步来,做个简单的例子(不做文本显示数据了):

  2、简单的例子(只有两步,相信你有这个耐性):
  Ⅰ 打开你一个心爱的动画,新建一个场景,并把它拖到最前面。
  Ⅱ 在帧上加入以下的AS动作,即大功告成!

  源代码:

stop (); function dr ( nam , de , d , al ) {   na = createEmptyMovieClip ( nam , de );   na . lineStyle ( d , 0x9900cc , al );   na . _x = 160 ;   na . _y = 280 ;   na . lineTo ( 240 , 0 ); } //一个画线条的函数,四个参数对应什么,自己看哈onEnterFrame = function () {   var a = getBytesTotal ();   var b = getBytesLoaded ();   //取得下载的数据   if ( b < a ) {     dr ( "b1" , 0 , 30 , 30 );     dr ( "b2" , 1 , 20 , 30 );     dr ( "b3" , 2 , 20 , 100 );     b3 . _xscale = b / a * 100 ;   //画三条横线,显示下载进度;  } else {     delete onEnterFrame ;     b1 . removeMovieClip ();     b2 . removeMovieClip ();     b3 . removeMovieClip ();     play ();   //下载完毕,删除图形和函数;   } }; 

  可以按两次Ctrl+Enter进行下载测试,若对AS有恐惧症者,闭着眼睛复制—粘贴即可

  下面是这个例子的效果图

三. egg616的Loading艺术之二

  1、打开你要加Loading的动画,新建一个场景,并把它拖到最前面。
  2、在最前面的场景的第一帧上加入下面的AS代码。

  源代码:

//Copyright: 吴杰兴 广东廉江//本作品可随意复制或修改,但请注明原作者stop();sw = 550;sh = 400;//Stage.showMenu = false;//隐藏讨厌的右键菜单cs = 60;//网格的密集程度r = 2550;d = r/Math.SQRT2;//网格的弯曲度p = Math.PI;//定义常数PIcreateEmptyMovieClip("ln", 1);ln.lineStyle(0, 0xffffff);for (var i = 1; i<=cs; i++) {    ln.moveTo(sw/2+r*Math.cos(i/cs*p), -d+300+r*Math.sin(i/cs*p));    ln.lineTo(sw/2+r*Math.cos(i/cs*p+p/2), -d+300+r*Math.sin(i/cs*p+p/2));}//下面画个颜色渐变的底子createEmptyMovieClip("bg", 0);with (bg) {    colors = [0x6666ff, 0xffffff, 0x660099];    alphas = [30, 30, 80];    ratios = [0, 100, 200];    lineStyle(5, 0x00ff00);    matrix = {matrixType:"box", x:200, y:115, w:50, h:450, r:p/2};   beginGradientFill("linear", colors, alphas, ratios, matrix);

moveTo(-200-sw, -100);    lineTo(200+sw, -100);    lineTo(200+sw, 100+sh);    lineTo(-200, 100+sh);    lineTo(-200, -100);    endFill();}//r1 = 50;r2 = 170;nu = 32;//分别为中心圆的3个参数;cr = 600;//cr是填色半径createTextField("te", 5, 75, 100, 160, 100);te.textColor = 0x9900ff;//创建文本显示下载的数据function fo1(nam, de, ro) {    na = createEmptyMovieClip(nam, de);    with (na) {        _y = 40;        lineStyle(0, 0x000000, 0);        colors = [0x6666ff, 0xffffff, 0x660099];        alphas = [130, 130, 20];        ratios = [0, 120, 200];        matrix = {matrixType:"box", x:-cr/2, y:-cr/2, w:cr, h:cr, r:p/2};        beginGradientFill("radial", colors, alphas, ratios, matrix);        //这里用AS来渐变填充        moveTo(r1, 0);        var bl = Math.cos(p/nu);        for (var i = 1; i<=ro; i++) {            curveTo(r1*Math.cos(i*p/(nu/2)-p/nu)/bl, r1*Math.sin(i*p/(nu/2)-p/nu)/bl, r1*Math.cos(i*p/(nu/2)), r1*Math.sin(i*p/(nu/2)));        }        lineTo(r2*Math.cos(ro*p/(nu/2)), r2*Math.sin(ro*p/(nu/2)));        for (var i = ro; i>=1; i--) {            curveTo(r2*Math.cos(i*p/(nu/2)-p/nu)/bl, r2*Math.sin(i*p/(nu/2)-p/nu)/bl, r2*Math.cos((i-1)*p/(nu/2)), r2*Math.sin((i-1)*p/(nu/2)));        }        lineTo(r1, 0);        endFill();    }}//此函数用来画中间的圆环,其中圆环是用curverTo的方法作出,//这里不作介绍,我将在下个教程中详述onEnterFrame = function () {    ab = _root.getBytesLoaded();    bb = _root.getBytesTotal();    // 获取数据    sb = int(ab/bb*nu);    fo1("di", 4, sb);    di._x = 275;    di._y = 200;    di._yscale = 25;    di._rotation = -30;    // 调用函数作上面的圆环    fo1("yz", 3, sb);    yz._xscale = 100*Math.pow(3, 0.5)/2;    yz._yscale = 25;    yz._alpha = 30;    yz._x = 275;    yz._y = 360;    // 在下面再作一个透明的圆环,作为上一个的影子    if (ab>>>"        di.onPress = function() {            delete onEnterFrame;            te.removeTextField();            di.removeMovieClip();            yz.removeMovieClip();            ln.removeMovieClip();            bg.removeMovieClip();            play();        };    }};

  因为是纯AS的作品,就不再提供FLA文件了,下面是效果图(JPG格式的,比起SWF的差多了。)

四.小郎的AS Loading

  1、打开你要加Loading的动画,新建一个场景,并把它拖到最前面。
  2、新建一个空MC,并将其拖入新建的场景的第1帧上,并将其实例名命名为:ss
  3、在MC上加入以下代码(换句话说:单击MC,打开AS面板,输入以下代码:)

onClipEvent (load) {this._x = 180;this._y = 300;_root.ss.createTextField("tt", 1, 70, 50, 100, 20);_root.ss.tt.textColor = 0xff0000;_root.ss.createEmptyMovieClip("louding", 2);with (_root.ss.louding) {lineStyle(0, 0x0000ff, 0);moveTo(0, 0);//起点beginFill(0xff0000, 100);lineTo(0, 10);lineTo(10, 10);lineTo(10, 0);endFill();}_root.ss.createEmptyMovieClip("loudingk", 3);with (_root.ss.loudingk) {lineStyle(0, 0x000000, 100);moveTo(0, 0);//起点lineTo(0, 10);lineTo(200, 10);lineTo(200, 0);lineTo(0, 0);}}onClipEvent (enterFrame) {load = int(_root.getBytesLoaded()/_root.getBytesTotal()*100);_root.ss.tt.text = "loading"+load+"%";_root.ss.louding._width = 2*load;if (_root.getBytesLoaded() == _root.getBytesTotal()) {_root.play();}}

  效果如图:

  小提示:本机测试Loading效果的简单方法

  Ctrl+Enter之后往往看不到Loading效果就开始播放主体动画了,要想清楚地预览到Loading的效果,一个很简单的方法是:Ctrl+Enter之后在测试动画播放状态下再按一次Ctrl+Enter就可以清楚地看到Loading效果了,另外可以改变模拟Modem的速度,在测试动画的窗口中,从Debug菜单中可选择14.4、28.8、56K等几个速度,或自定义。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索代码
, load数据
, root
, 文本
, 效果
, loading
, 一个
, loading效果
, loading提示效果
loading动画效果
as3 loading、js loading效果、jquery loading效果、ajax loading效果、loading效果,以便于您获取更多的相关知识。

时间: 2024-11-15 23:02:52

纯AS的Loading效果四例的相关文章

掌握Flash技巧:纯ActionScript的Loading效果四例

loading|技巧 前言:稍微大一些的Flash作品在播放之前都会有一个Loading预载画面,这考虑到网络的速度,本地浏览不需要等待下载,但传到网上,因为每个用户的网速不同,所以很有必要在我们的作品中加入Loading画面,之前,已经有很多教程是关于Loading制作方法的,今天我们给读者讲述四个纯AS的Loading效果,不懂AS的菜鸟或"代码盲"甚至可以直接复制教程中的代码到自己的作品中,懂AS代码的朋友,可以仔细阅读这些代码,从中学到更多的AS知识,或由此引申出更多的AS L

原生JS实现LOADING效果

 这篇文章主要向大家介绍了原生JS实现的LOADING效果的代码,效果非常不错,而且可以自定义颜色和速度,推荐给大家,希望大家能够喜欢.     纯文本loading效果,可以自己定义颜色和速度   代码如下: /** Loading animation * Created by 黑と白の印記 on 15/03/11. */ function loading(element,lightColor,darkColor,speed,callback){ if(!element&&(!eleme

CSS3实现8种Loading效果【第二波】

原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接"上菜"-- 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊重一下作者! 第一种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span&

原生JS实现LOADING效果_javascript技巧

纯文本loading效果,可以自己定义颜色和速度 复制代码 代码如下: /** Loading animation  *  Created by 黑と白の印記 on 15/03/11.  */   function loading(element,lightColor,darkColor,speed,callback){     if(!element&&(!element.innerText||!element.textContent))return     element = type

重庆发现四例违规电视广告

本报讯(记者 杨野)22日, 国家工商行政管理总局通报了17个典型的电视直销广告涉嫌严重违法.昨日,我市工商局根据此公告对我市电视广告进行排查,发现我市有四例违法广告播出,当日下午,该局对这四例广告下达了禁止发布决定. 市工商局相关负责人介绍,目前我市已接到多起市民投诉电视直销广告夸大其辞,没有效果,主要集中在如所谓的魔链.魔环等电视直销广告产品冒充医疗器械,这些产品宣传治疗疾病等功能,使用不科学的断言或者保证,利用名人.患者的名义和形象证明"神奇"疗效,有极大的欺骗性. 记者了解到,

纯 CSS 实现波浪效果!

一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CANVAS),是可以很轻松的完成所谓的波浪效果的,先看看,非 CSS 方式实现的波浪效果.   使用 SVG 实现波浪效果 借助 SVG ,是很容易画出三次贝塞尔曲线的. 看看效果: 代码如下: <svg width="200px" height="200px" ve

Asp实例之:一个loading效果的实例

用Asp制作一个loading效果似乎也并不是困难事. <script> function load1(name) { loading.style.display="none"; name.style.display=""; } function selecte(s) { if(s==1) { loading.style.display=""; div_b.style.display="none"; div_c.s

实用AS源代码:纯AS的Loading

loading|源代码 //**********************************************************//Copyright (C) 2006-2026 //黑白人动画工作室//Email:syxu@3c800.com//www.3c800.com//**********************************************************/* FLASH开发通用模板*///---------------------------

Ajax风格的一款网页Loading效果

 本篇文章主要是对Ajax风格的一款网页Loading效果的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 现在比较流行的一款Ajax风格的网页Loading,多见于一些大量使用Ajax技术的网站中,页面加载时会自动显示提示信息,带载入动画效果,网页加载完自动消失,是一款正在具有Loading功能的网页进度条.     <html></P> <P><head> <title>Loading</title> <s