先看看效果:
http://public.iecn.net/freebrandy/ShowImage/ShowImagesIII.swf
改进过程
http://public.iecn.net/freebrandy/ShowImage/ShowImages.swf
http://public.iecn.net/freebrandy/ShowImage/ShowImagesII.swf
源文件下载:picchange.rar
AS类代码:
import mx.events.EventDispatcher;
class ShowImages extends MovieClip {
private var myUrl:Array; //存放图片路径的数组
private var myInfo:Array; //存放图片信息的数组
private var showImageBox:MovieClip; //图片显示区域
private var myLoading:MovieClip //加载图片的MC
private var topMC:MovieClip; //顶部MC
private var buttonMC:MovieClip; //底部MC
private var currentTopMC:MovieClip; //记录当前在较高深度的MC
private var allowToPlayImage:Boolean = true;
private var _id:Number; //定时器ID
private var _showtime:Number = 3000; //定时器时长
private var imageID:Number = 0; //自动播放时保存图片ID值
private var myMask:MovieClip; //遮罩MC
private var ImageDepth:Number=100; //放置图片MC的深度
private var firstLoadImage:Boolean = true; //是否第一次载入图片
//private static var loaderTextFormat:TextFormat = new TextFormat("Arial", null, 0x000000, true);
public var addEventListener:Function;
public var removeEventListener:Function;
private var dispatchEvent:Function;
private static var _mixin1 = EventDispatcher.initialize(ShowImages.prototype);
public function ShowImages() {
fscommand("allowscale",false);
fscommand("showmenu",false);
}
private function onLoad():Void {
//定位至原点
_x = _y = 0;
//添加侦听事件
addEventListener("onPhotoListLoad", this);
//导入存放图片的XML文件
myUrl = new Array();
//myInfo = new Array();
var me:Object = this;
var my_xml = new XML();
my_xml.ignoreWhite = true;
my_xml.load("PhotoList.xml");
my_xml.onLoad=function(success){
if (success){
//数组值添加
var xmlA:Array = this.firstChild.childNodes;
var xmlALen:Number = xmlA.length;
for (var i = 0; i<xmlALen; i++) {
me.myUrl.push(xmlA[i].attributes.myUrl);
//me.myInfo.push(xmlA[i].attributes.myInfo);
}
//发出事件给自身
me.dispatchEvent({type:"onPhotoListLoad", target:this});
}
}
}
private function onPhotoListLoad():Void {
//先建立放图片的的MC
showImageBox = this.createEmptyMovieClip("showImageBox",ImageDepth);
myLoading = showImageBox.createEmptyMovieClip("myLoading",ImageDepth+20);
topMC = showImageBox.createEmptyMovieClip("topMC", ImageDepth+10);
//topMC._x = 200;
buttonMC = showImageBox.createEmptyMovieClip("buttonMC", ImageDepth);
//导入图片(loadImage是自循环式函数)
loadImage();
}
private function loadImage():Void {
//先取消定时器
clearInterval(_id);
//取得对象自身,方便访问
var thisObject:Object = this;
//循环控制(这里使用变换深度然后设置遮罩的方法)
if ( imageID == myUrl.length ) imageID = 0;
//第一次载入图片时不需要交换深度
if (firstLoadImage){
currentTopMC = topMC;
firstLoadImage = false;
}else{
//先交换深度
topMC.swapDepths(buttonMC);
//再决定谁在上面
if ( topMC.getDepth() > buttonMC.getDepth() ){
currentTopMC = topMC;
}else{
currentTopMC = buttonMC;
}
}
//在上面的MC导入图片,因为遮罩只对处在上面的MC
currentTopMC.loadMovie(myUrl[imageID]);
//trace(topMC.getDepth());
imageID++;
//导入图片
myLoading.onEnterFrame = function() {
var lb:Number = thisObject.currentTopMC.getBytesLoaded();
var tb:Number = thisObject.currentTopMC.getBytesTotal();
var percent:Number = Math.round(lb/tb*100);
if (percent == 100 and thisObject.currentTopMC.getBytesLoaded()>100 and thisObject.currentTopMC._height>0){
//特效显示图片
thisObject.showOff(thisObject.currentTopMC);
//调用定时器控制图片showOff时间
thisObject._id = setInterval(thisObject,"loadImage", thisObject._showtime);
//取消onEnterFrame
delete this.onEnterFrame;
}
}
}
private function showOff(mc:MovieClip):Void {
myMask = showImageBox.createEmptyMovieClip("myMask",ImageDepth+30);
//随机给出遮罩方法(这个随机数的范围自己给出,大小为所有的方法数量和,我这里给了5种最基本的方法,读者可自行增加)
var myRnd:Number = random(5);
eval("showOff_"+myRnd)(myMask);
//showOff_4(myMask);
//速度控制
var v:Number = 10;
//----------------------------------------------------------------
//方法一(左上至右下)
function showOff_0(mc:MovieClip){
drawRectangleAt(mc);
mc.onEnterFrame = function(){
if (_width >= Stage.width and _height >= Stage.height ) delete this.onEnterFrame;
_width += v;
_height += v;
}
}
//方法二(左至右)
function showOff_1(mc:MovieClip){
drawRectangleAt(mc);
mc._height = Stage.height;
mc.onEnterFrame = function(){
if (_width >= Stage.width) delete this.onEnterFrame;
_width += v;
}
}
//方法三(上至下)
function showOff_2(mc:MovieClip){
drawRectangleAt(mc);
mc._width = Stage.width;
mc.onEnterFrame = function(){
if (_height >= Stage.height) delete this.onEnterFrame;
_height += v;
}
}
//方法四(下至上)
function showOff_3(mc:MovieClip){
drawRectangleAt(mc);
mc._y = Stage.height;
mc._width = Stage.width;
mc.onEnterFrame = function(){
if (_height >= Stage.height) delete this.onEnterFrame;
_height += v;
_y -= v;
}
}
//方法五(右至左)
function showOff_4(mc:MovieClip){
drawRectangleAt(mc);
mc._x = Stage.width;
mc._height = Stage.height;
mc.onEnterFrame = function(){
if (_width >= Stage.width) delete this.onEnterFrame;
_width += v;
_x -= v;
}
}
//--------------------------------------------------------------------------
//函数:画一个矩形,用来进行遮罩时的变形(当然你也可以用attachMovie从库里添加,这样你就可以做各种各样的形状。
//我在这个例子中强调的是脚本)
function drawRectangleAt(mc:MovieClip){
with (mc){
lineStyle( 0, 0xffffff, 100 );
beginFill(0xffffff);
moveTo( 0, 0 );
lineTo( 0, 10 );
lineTo( 10, 10 );
lineTo( 10, 0 );
lineTo( 0, 0 );
endFill();
}
}
//设置遮罩
//trace(mc);
mc.setMask(myMask);
}
//setter方法
public function set showtime(i:Number):Void {
_showtime = i;
}
}