2006/08/06 | 一个动态图片导入显示的分析。
类别(Flash课件设计) | 评论(1) | 阅读(382) | 发表于 23:57


Flash 动画：

将下面的代码放入主场景第一帧，之后运行即可看到效果。
//TransitionManager 的应用实例。
import mx.transitions.*;
var url_array:Array = ["http://www.goodong.net/bbs/1100795656/Fid_3/3_9896.jpg", "http://www.kacool.com/bbs/UploadFile/2006-8/2006831740348.jpg", "http://www.goodong.net/bbs/1100795656/Fid_3/3_9929.jpg", "http://www.goodong.net/bbs/1100795656/Fid_3/3_9950.jpg"];
var txt:TextField = this.createTextField("txt", 20, 40, Stage.height - 20, Stage.width - 80, 20);
txt.autoSize = "center", txt.html = true;
var mclListener:Object = new Object();
mclListener.onLoadInit = function(target_mc:MovieClip):Void {
  target_mc._x = 0;
  target_mc._y = 0;
  target_mc._width = Stage.width;
  target_mc._height = Stage.height - 20;
};
mclListener.onLoadError = function(target_mc:MovieClip):Void {
  txt.htmlText = "<font size = '12' color = '#ff0000'>" + "图片导入失败，请检查网络或设置！" + "<\font>";
  delete this.onEnterFrame;
  n = 1;
};
var img_mcl:MovieClipLoader = new MovieClipLoader();
img_mcl.addListener(mclListener);
for (var i:Number = 1; i < url_array.length + 1; i++) {
  this.createEmptyMovieClip("pic" + i, url_array.length + 1 - i);
}
var n:Number = 1;
//指示当前图片
onEnterFrame = function ():Void {
  txt.htmlText = "<font size = '12' color = '#ff0000'>" + "正在导入第" + n + "张图片，请稍等..." + "<\font>";
  img_mcl.loadClip(url_array[n - 1], "pic" + n);
  var prog:Object = img_mcl.getProgress(this["pic" + n]);
  total = prog.bytesTotal;
  loaded = prog.bytesLoaded;
  if (loaded == total) {
    n++;
  }
  if (n > url_array.length) {
    txt.htmlText = "<font size = '12' color = '#ff0000'>" + "图片导入完成,共导入" + url_array.length + "张图片！" + "<\font>";
    delete this.onEnterFrame;
    n = 1;
  }
};
for (var i:Number = 1; i < url_array.length + 1; i++) {
  this.createEmptyMovieClip("btton" + i, 20 + i);
  this["btton" + i]._x = Stage.width - (url_array.length + 1 - i) * 22;
  this["btton" + i]._y = Stage.height - 42;
  this["btton" + i].num = i;
  this["btton" + i].createTextField("txt", 0, 0, 0, 20, 20);
  this["btton" + i].txt.border = true;
  this["btton" + i].txt.background = true;
  this["btton" + i].txt.borderColor = 0xff3300;
  this["btton" + i].txt.backgroundColor = 0xffffcc;
  this["btton" + i].txt.text = " " + this["btton" + i].num;
}
var txt_array:Array = ["1点击这里看大图", "2点击这里看大图", "3点击这里看大图", "4点击这里看大图", "5点击这里看大图", "6点击这里看大图", "7点击这里看大图", "8点击这里看大图"];
//存放图片的文字说明
function Play():Void {
  txt.htmlText = "<a href='" + url_array[n - 1] + "'><font size = '12' color = '#ff0000'>" + txt_array[n - 1] + "<\font><\a>";
  TransitionManager.start(_root["pic" + n], {type:Wipe, direction:Transition.IN, duration:1.5, easing:None.easeNone, startPoint:random(9) + 1});
  for (i = 1; i < url_array.length + 1; i++) {
    i > n ? _root["pic" + i].swapDepths(i - n) : _root["pic" + i].swapDepths(url_array.length + i - n);
  }
  for (i = 1; i < url_array.length + 1; i++) {
    i == n ? _root["btton" + i].txt.backgroundColor = 0xff3300 : _root["btton" + i].txt.backgroundColor = 0xffffcc;
    _root["btton" + i].onPress = function() {
      var m:Number = this.num;
      for (i = 1; i < url_array.length + 1; i++) {
        i == m ? _root["btton" + i].txt.backgroundColor = 0xff3300 : _root["btton" + i].txt.backgroundColor = 0xffffcc;
      }
      _root["pic" + m].swapDepths(url_array.length + 1);
      TransitionManager.start(_root["pic" + m], {type:Wipe, direction:Transition.IN, duration:1.5, easing:None.easeNone, startPoint:random(9) + 1});
      m < url_array.length ? n = m + 1 : n = 1;
    };
  }
  n < url_array.length ? n++ : n = 1;
}
setInterval(Play, 8000);

//************************************************
在这个示例中涉及到以下的问题，初步分析如下：

类的实例化：
var img_mcl:MovieClipLoader = new MovieClipLoader();
//通过 new 操作符实现实现例化。

var txt:TextField = _root.createTextField("txt",20,40,Stage.height-20,Stage.width-80,20);
//通过 createTextField 来实现实例化。

TransitionManager.start( _root["pic" +n],{type:Wipe,direction:Transition.IN,duration:1.5,easing:None.easeNone,startPoint:random(9)+1});
//直接进行调用。

MovieClipLoader 对象提供了 loadClip 方法，在执行该方法时伴随产生 LoadInit、LoadError 事件，同时刷新内部的 Progress 对象，通过引用 getProgress 对象，可以得到当前的进度，Progress 对象中包含了二个属性：bytesTotal(总字节长度)、byteLoaded(已导入的字节数)。
通过对 LoadInit、LoadError 事件进行侦听，可以提供参考信息，获取当将的运行状态。
事件侦听的方法是：
1。建立一个用于侦听的对象，
var Listener_obj:Object = new Object();
2。向该对象添加与事件同名的处理函数(以on开关).
Listener_obj.onLoadInit = function(){ xxxxx; };
Listener_obj.onLoadError = function() { xxxxx; };
3。用 addListener 方法，添加到指定的对象。
img_mcl.addListener( Listener_obj);
在此以后，当指定的对象发生相关事件时，侦听对象中的相关处理程序会被激发。侦听机制还可用于一个事件激发多个响应的环境中。

程序的流程：
首先是图片的导入部分：用一个数组 url_array 存贮所有的图片信息(网址)，然后建立侦听器对象 mclListener ，建立 MovieClipLoader 对象的实例 img_mcl，将侦听器添加到 MCL 对象，利用 onEnterFrame 实现循环导入图片。在这里 loadClip 会自动的处理与 onEnterFrame 的关系，可以这样理解:当前的图片未导入完成之前将继续导入，而不会再从头导入，类似于续传的办法，这样可以避免始终从一个图片的开头处不停的导入。 通过当前字节与总字节的对比，可以得知是否已经导入完成，若全部完成则删除 onEnterFrame, 若部分完成，则继续导入下一张图片。
图片导入部分的信息提示是通过 txt 来实现的，txt 中以 html 格式文本进行显示，用法如下：
txt.htmlText = "<a href='" + url_array[n - 1] + "'><font size = '12' color = '#ff0000'>" + txt_array[n - 1] + "<\font><\a>";
第二部分代码实现了图片显示时的动态切换。
其中包括：循环添加按钮的代码，设置 Play() 函数、设置 setInterval()函数周期性的调用 Play();这三者共同作用，实现的是图片显示时的动态切换。

txt 在这里的作用是将文本以超级链接的形式来显示，点击文本(必须点在文字上)，将打开对应的链接。

TransitionManager 用来将指定的图片 mc 进行特效显示，第二个参数是一个对象，该对象指定了具体运动模式，该对中所使用的参数的含意，请参阅 flash 帮助文件。

Play 函数中的第一个循环，根据当前播放的进程，将图片按图层从上到下进行摆放，已播放的图片放在最下层，剩余的从上到下依次摆放(编号较小的图片放在较高层)。

第二个循环实现的是动态的给按钮添加处理方法，当某个按钮被按下时，改变按钮的颜色，并将按钮所代表的图片放到最上面，并立刻对前一图片进行运动，显示当前图片。

setInterval 函数的第一个参数，表示的是当时间周期到达一个周期时，所要执行的函数，第二个参数是以毫秒为单位的时间长度，这里 8000 表示 8 秒，若用户没有操作，则每 8 秒自动更新一次，否则按照按钮的动作进行更新。通常会在周期响应函数中，加入清除定时器的代码，本例中因为是无限循环的，所以没有相应的清除定时器的代码。

该段代码从网友处得到，原出处已无从考证，仅用于学习，想必原作者不会以此迁怒吧？
0

评论Comments

日志分类
首页[295]
Flash游戏教程[33]
Flash与飞行程序设计[10]
Flash课件设计[62]
Flash学习笔记[74]
家住西安[47]
编程资源[69]