用Flash制作方格有序缓出遮罩场景切换效果

作者:课课家教育更新于： 2019-03-16 20:42:49

　　在展示照片或者资料等等图片的时候，一成不变的展示方式可能会令大家觉得枯燥无味。怎样可以令展示的图片更加有趣呢？那么今天，我们就来尝试一下，用flash制作方格有序缓出遮罩场景切换效果。

　　具体步骤:

　　第一步:首先我们打开Flash，新建一个Flash文档,设两个图层。再把“图层1”图层命名为“图片”；“图层2”图层命名为“AC”；如图1所示。然后我们把“属性面板”中的“帧频”设置为24帧，如图2所示；

图1

 图2

　　第二步：现在我们来创建一个电影剪辑（MC）元件。先导入一张图片到库，然后单击库面板左下角的“新建元件”按钮，我们把这个元件命名为“img-mc”，点击“确定”；再把导入库中的图片拖入编辑区中，在属性面板中，将宽设置为550，将高设置为400，然后设置X、Y分别都为0。效果见下图3；

图3

　　第三步：现在我们返回主场景，先单击“图片”图层第一帧，把库中做好的MC（img-mc）拖入舞台，如下图4所示。然后我们在“属性面板”中，重命名“影片剪辑”，在“实例名称”栏上改为“img-mc”，见图5；

图4

 图5

　　第四步：最后我们输入代码。单击“AC”图层第一帧，打开“动作”面板输入以下代码：functionorder(a,b)

　　{

　　if(a>b)

　　{

　　return(-1);

　　}

　　elseif(a

　　{

　　return(1);

　　}

　　else

　　{

　　return(0);

　　}//endelseif

　　}//Endofthefunction

　　Stage.showMenu=false;

　　Stage.scaleMode="noScale";

　　getURL("FSCommand:"addallowscale,true);

　　createEmptyMovieClip("mask",-1);

　　mask.createEmptyMovieClip("mask0",-2);

　　with(mask.mask0)

　　{

　　beginFill(13421772,100);

　　moveTo(0,0);

　　liNETo(0,100);

　　lineTo(100,100);

　　lineTo(100,0);

　　lineTo(0,0);

　　endFill();

　　_width=1;

　　_height=1;

　　}//Endofwith

　　mask._x=img_mc._x=0;

　　mask._y=img_mc._y=0;

　　img_mc.setMask(mask);

　　maskNum=0;

　　box=40;

　　lNum=Math.ceil(img_mc._width/box)+1;

　　cNum=Math.ceil(img_mc._height/box)+1;

　　maxNum=lNum*cNum;

　　varmyArray=newArray();

　　for(i=0;i

　　{

　　myArray[i]=[];

　　for(j=0;j

　　{

　　myArray[i].push(i*lNum+j+1);

　　}//endoffor

　　}//endoffor

　　for(i=0;i

　　{

　　if(i%2==0)

　　{

　　myArray[i];

　　}

　　else

　　{

　　myArray[i]=myArray[i].sort(order);

　　}//endelseif

　　for(j=0;j

　　{

　　with(mask)

　　{

　　masks=mask0.duplicateMovieClip("mask"+myArray[i][j],myArray[i][j]);

　　masks._x=j*(box-1);

　　masks._y=i*(box-1);

　　masks.xs=i;

　　masks.ys=j;

　　masks._width=0;

　　masks._height=0;

　　masks.onEnterFrame=function()

　　{

　　if(_root.myArray[this.xs][this.ys]==_root.maskNum)

　　{

　　this.mcZoom();

　　}//endif

　　};

　　}//Endofwith

　　}//endoffor

　　}//endoffor

　　_root.onEnterFrame=function()

　　{

　　if(maskNum<=maxNum)

　　{

　　++_root.maskNum;

　　}//endif

　　};

　　MovieClip.prototype.mcZoom=function()

　　{

　　this.onEnterFrame=function()

　　{

　　this._width=this._width+(box-this._width)/10;

　　this._height=this._height+(box-this._height)/10;

　　};

　　};

　　小编总结：学习了这个新的图片展示方式后，大家可能也会发现，方格有序缓出的这种切换效果，还可以用在其他不同的场景和作用上。大家熟悉了操作后，还可以举一反三，制作出更有趣的效果出来。