下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:课课家教育     来源: http://www.kokojia.com点击数:1654发布时间: 2019-03-16 20:43:28

标签: flashflash基础flash教程

想学设计?来看看大师是如何完成作品的?

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

  具体步骤:

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

用Flash制作方格有序缓出遮罩场景切换效果_flash_flash基础_flash教程

图1

帧频设置

 图2

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

创建电影剪辑(MC)元件

图3

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

导入舞台

图4

实例名称设置

 图5

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

  {

  if(a>b)

  {

  return(-1);

  }

  elseif(a<b)

  {

  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<cNum;i++)

  {

  myArray[i]=[];

  for(j=0;j<lNum;j++)

  {

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

  }//endoffor

  }//endoffor

  for(i=0;i<cNum;i++)

  {

  if(i%2==0)

  {

  myArray[i];

  }

  else

  {

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

  }//endelseif

  for(j=0;j<lNum;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;

  };

  };

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

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程