微信营销 品牌网站建设 成都高端动画制作公司
动画制作首页 | 动画制作公司 | 动画制作业务 | 动画制作案例 | 动画制作新闻 | 动画制作方案 | 动画制作咨询 | 动画制作教程
 
学院分类
 
·3dMAX技术
·MAYA技术
·Flash技术
·Flex技术
·Photoshop技术
·Premiere技术
·3d渲染
·影视后期
 当前位置:首页 > 动漫学院 > Flash技术
Flash 动态遮罩效果详解
 

 

(整理:成都动画制作成都3d动画制作成都动画制作公司成都Flash动画制作成都多媒体制作成都Flex开发Flex富媒体开发-成都威尚网络

文章性质:翻译

  FLASH DRAWING API除了可以让我们绘制图形外,我们还可以应用它绘制遮罩,而这种绘制的遮罩的特点就是我们可以动态的绘制.

  怎样使用FLASH DRAWING API 绘制遮罩

  MM提供的遮罩的有如下这几种:

  代码:

  MovieClip.beginFill
  MovieClip.beginGradientFill
  MovieClip.clear
  MovieClip.curveTo
  MovieClip.endFill
  MovieClip.lineStyle
  MovieClip.lineTo
  MovieClip.moveTo

  在实际的应用中我们可能不会全都用上,如下面的例子中我们会应用到beginfill,lineto,moveto,endfill等.

  下面我们就开始学习,先看一个简单的例子.

  我们要在屏幕上绘制一个遮罩,并用它的来做遮罩,为了实现上面的效果,我们需要在场景中导入一个图片,并将其转换为影片剪辑,命名为maskee.然后我们在主帧上加入如下代码:

  代码:

  this.createEmptyMovieClip('square',0);
  with(_root.square)
  {
  moveTo(0,0);
  beginFill(0x000088)
  lineTo(100,0);
  lineTo(100,100);
  lineTo(0,100);
  endFill();
  }

  上面的代码我们已经完成了方形的绘制,现在你可以测试你的影片,同时你可能注意到这里使用了with,目的是使我们的代码看起来更清晰,当然你也可选择其它的方法,如下,你可进行一下对比,你会认为哪一种更清晰,更易读一些.

  代码:

  this.createEmptyMovieClip('square',0);
  _root.square.moveTo(0,0);
  _root.square.beginFill(0x000088)
  _root.square.lineTo(100,0);
  _root.square.lineTo(100,100);
  _root.square.lineTo(0,100);
  _root.square.endFill();

  上面的代码我们只是绘制了方形,现在你就可以测试你的影片,如果想把我们绘制的形体指定为遮罩只需要在下面加上一行代码:

_root.maskee.setMask(_root.square);

  这一行代码的意义在于将我们绘制的方形指定为maskee的遮罩,同时我们在上面应用了clear()方法,它的作用是清除square之前的动作。

  测试你的影片

  接下来我们来看几个例子:

  影片1:可拖动的遮罩

  根据上面我做的基础,仍然使用上面的maskee影片剪辑,将主帧上的代码清除,我们将下面的代码加在maskee影片剪辑上,而不影片剪辑的帧上,

  代码:

  onClipEvent(load)
  {
  _root.createEmptyMovieClip('square',0);
  function drawSquare()
  {
  x = _root._xmouse;
  y = _root._ymouse;
  with(_root.square)
  {
  clear();
  moveTo(x-50,y-50);
  beginFill(0x000088)
  lineTo(x+50,y-50);
  lineTo(x+50,y+50);
  lineTo(x-50,y+50);
  endFill();
  }
  }
  this.setMask (_root.square)
  }
  onClipEvent(mouseMove)
  {
  drawSquare();
  updateAfterEvent();
  }

  测试你的影片,你会发现一个100*100的方形在随着光标移动并可为一个遮罩,与上个例了不同的是我们将绘制方形的代码定义为一个函数drawSquare();因为我们要在光标移动的时不断的调用它。另外上面用到了clear()方法,它的作用是清除square剪辑之前的所有动作。

  观看演示1 查看效果

  刚才我们提到一个问题就clear()方法的应用,试想一下如果我们不加clear()这一行代码。你可以想象一下会发生什么。现在我们将clear()这一行删除或是加上注释.测试你的影片,你就会看到一种擦除效果,你还可以加上你自已的创意,变成任意的形状。

 影片2:像素淡出遮罩效果

  这种效果你可能会在powerpoint或是在director中见过,在本例中不需要你理解每一行的意义,这里只是对淡入遮罩的一个提示。我们仍使用上文中的例子,清除原有maskee上的代码,加入如下代码:

  代码:

  onClipEvent(load)
  {
  numY = 30;
  numX = 40;
  numPerFrame = 12;
  currSquare = 0;
  choices = new Array();
  for(i = 0; i < numX*numY; i++)
  {
  choices.push(i);
  }
  _root.createEmptyMovieClip("mask", 0);
  this.setMask(_root.mask);
  function drawSquare(x,y)
  {
  with(_root.mask)
  {
  moveTo(x,y);
  beginFill(0x000088)
  lineTo(x+10,y);
  lineTo(x+10,y+10);
  lineTo(x,y+10);
  endFill();
  }
  }
  }
  onClipEvent(enterFrame)
  {
  if(currSquare < numX*numY)
  {
  for(i = 0; i < numPerFrame; i++)
  {
  j = random(choices.length);
  t = choices[j];
  choices[j] = choices[choices.length - 1];
  choices.pop();
  x = t % numX;
  y = Math.floor( t / numX );
  drawSquare(x*10, y*10);
  }
  currSquare += numPerFrame;
  this._alpha = currSquare/(numX*numY)*100;
  }

  测试你影片,你会发现随机出的10*10像素的方形会不断的出现在屏幕上,同时图片淡出

影片3:扇形LOADING

  接下我们要使用动态遮罩制作一个扇面LODING。最后的样子大致为:

  

  首先,你必须下面的这张图片的三角函数。

  

  在上面图的坐标分别为:

  代码:

  x1 = r*sin(O)
  x2 = r*sin(O+dO)
  y1 = r*cos(O)
  y2 = r*cos(O+dO)

  原理就是绘制出圆的1/100也就是3.6度,也就是说我们需要绘一个三角形,然后不断的绘制,直到100.

  你需要先在场景中创建圆形,转换为影片剪辑,同时要注意的问题是你必须在这个影片剪辑的内部将其中心对齐。这一点是很重要的。

  选择圆形剪辑,加入如下代码:

  代码:

  onClipEvent(load)
  {
  _root.stop();
  dO = 3.6;
  r = 75;
  function addSlice(O)
  {
  x1 = r*Math.sin(O*Math.PI/180);
  x2 = r*Math.sin((O+dO)*Math.PI/180);
  y1 = r*Math.cos((O)*Math.PI/180);
  y2 = r*Math.cos((O+dO)*Math.PI/180);
  trace(x1 + ":" + y1);
  with(_root.mask)
  {
  moveTo(0,0);
  beginFill(0x000088);
  lineTo(x1,y1);
  lineTo(x2,y2);
  endFill();
  }
  }
  _root.createEmptyMovieClip("mask",0);
  this.setMask(_root.mask);
  _root.mask._yscale = -100;
  _root.mask._x = this._x;
  _root.mask._y = this._y;
  oldLoaded = 0;
  }
  onClipEvent(enterFrame)
  {
  loaded = Math.ceil(_root.getBytesLoaded()/_root.getBytesTotal()*100);
  for(i = oldLoaded; i < loaded; i++)
  {
  addSlice(dO*i);
  }
  oldLoaded = loaded;
  }

  在上面的代码中_root.mask._yscale=-100是用来按制方向的,正向还是反向,同时我们注意到有两个变量,oldloaded和loaded.之所以有oldloade是为了存放我们之前下载的数值。

好,现在可以测试你的影片了。为了看到效果,你可以边续按两次回车。

  观看演示4 查看效果

  附源文件:dymask1.zip pieloader.rar

  在上一篇教程中我有意的避开curveTo因为它相对于lineTo来说多少有些复杂,然后这种效果我认为变化多会优于一味的使用lineTo.

  首先我们需要先了解一下curveTo的相关命令:

  CURVETO命令:

  在下面的例子中我们要用到的命令如下:

  代码:

  MovieClip.beginFill()
  MovieClip.endFill()
  MovieClip.lineTo()
  MovieClip.curveTo()

  前面三行我们已在第一篇教程学习过,现在只剩下curveTo,curveTo(controlX,controlY,endX,endY)将从startX,startY开始绘制一条二次方曲线至endX,endY, startX,startY的位置决定于使用moveTo,lineTo,或curveTo得到的最后一点,controlX,controlY 控制着两点之间的曲度,你可以把controlX,controlY认为是一个磁性点,它会吸附曲线靠近它。它的工作过程有些象BEZIER贝赛尔曲线,不同的是每一条曲线只有只能有一个控制点。

  现在需要看一下我们的动态遮罩的工作过程,它要经过三个边续的过程,如下图所示:

  

  如上图你所看到,遮罩的组成是由最初上面的一条直线然后变形成为4边的形状也就是面的蓝色线条将屏幕划分为4边,然后再变形为红色的线条,最后形成整个矩形。十字代表的是控制点的大致位置。

在这里面你需要注要注意的是第一条和最后一条并不是曲线,而是直线,所以你可将你的按制点放在任何地方,这也给我们增加了许多弹性空间。在后面你将会看到。

  变形形体

  我们必须要掌握将一个形体变为另一个形体,比如蓝色形状变为红色形状,这个看起来比较麻烦,实际上很简单,就象一个物体从A点移到B点是一个性质。我们将移到第一条曲线的三个点至第二条曲线三个点的位置,下面我们来看一下例子,将曲线c变形为曲线J。

  代码:

  //Create movie clip and mask
  //counter = -1;
  //创建遮罩
  _root.createEmptyMovieClip('line', 0);
  animInt = setInterval(doAnim, 17);
  animDir = 1;//用来控制方向的变量
  //定义函数
  function doAnim()
  {
  var currMC = _root.line;
  var time = animIndex/60;
  var dist = time;
  with(currMC)
  {
  //c曲线的位置: (150, 25), (25,100), (150,175)
  //j曲给的位置: (150, 25), (125,200), (50,125)
  clear();
  lineStyle(0x000000);
  moveTo(150,25);
  curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);
  }
  animIndex += animDir;
  if(animIndex >= 60)
  {
  animDir = -1
  }
  if(animIndex <= 0)
  {
  animDir = 1
  }
  }

  这段代码中是将c曲(150,25)(25,200),(150,175)变形为J曲线(150, 25), (125,200), (50,125)

  注意,这段代码只能在FLASHMX中运行。如果想在FLASHMX2004中运行,你需要在定义一下animIndex在animDir=1;下面加入一行var animIndex=0;测试你的影片,观看结果。

开始时创建一个影片剪加line,在line的内部绘制变形曲线,setInterval每17豪秒循环绘制一次,变量animIndex用来跟踪曲线绘制到的位置,这个例子中我们分成了60步来绘制,time变量的范围是从0到1,决定于animIndex,同时将其附给dist,用来创建现线动画。

  即然dist的变量范围是从0到1,那么很明显我们用到了一个公式从A点到B点

  代码:

  x = startX + dist*deltaX;
  y = startY + dist*deltaY;

  如下我们的应用:

  curveTo(25+100*dist,100+100*dist,150-100*dist, 175-50*dist);

  在这个公式中startX和startY是开始点的坐标,deltaX和deltaY分别是x和y到开始点和结束点的距离。

  Easing, bouncing and other transitions

  缓动,弹性和其它运动方式

  可能在一开始你就会想我们为什么会不厌其烦的使用变量time和dist,那么现在让我们来看一下他们之间的关系,你就会知道我们为什么要用它。

  如上果你所看到的竖轴代表Dist,水平轴代表time.他们之间的关系目前是线性,也是就dist=time.图上的斜线代表动画的速度。在这个例子中动画的速度是恒定的。现在假如我们想做成开始时速度很快到结速时无速度,则我们只需要在在t=0时加大红线的斜率,而在t=1时使红线无斜率就可以了。这实际上就是倒转过的抛物线或是三角正弦,如果想用其它的运动方式我们可以创建不同的dist和time的关系,来得到更有趣的效果,下面是一些创建好的关系,可能对你会有用处:

  

  

  

  你可能会对Robert Penner's transition classes感兴趣。原理都是一样的。

  将代码合在一起

  代码:

  //全局变量决定于你的影片宽度
  mWidth = 400;
  //创建影片剪辑和遮罩
  counter = -1;
  createMovieClip();
  animInt = setInterval(doAnim, 17);
  function createMovieClip()
  {
  counter++;
  attachMovie('pic' add (counter % 2), 'pic' add counter, counter);
  createEmptyMovieClip('mask' add counter, counter + 10000);
  this['pic' add counter].setMask(this['mask' add counter]);
  }
  function doAnim()
  {
  var currMC = _root['mask' add counter];
  if(animIndex < 15)
  {
  var time = animIndex/15;
  var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
  with(currMC)
  {
  clear();
  beginFill(0x000000);
  lineTo(mWidth,0);
  lineTo(mWidth,dist*125);
  curveTo(250,dist*40,0,10*dist);
  endFill();
  }
  }
  else if (animIndex < 35)
  {
  var time = (animIndex-15)/20;
  var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
  with(currMC)
  {
  clear();
  beginFill(0x000000);
  lineTo(mWidth,0);
  lineTo(mWidth,125);
  curveTo(250-100*dist,40+150*dist,0,10+190*dist);
  endFill();
  }
  }
  else if (animIndex <= 50)
  {
  var time = (animIndex-35)/15;
  var dist = 0.5*Math.sin(Math.Pi*(time-0.5)) + 0.5;
  with(currMC)
  {
  clear();
  beginFill(0x000000);
  lineTo(mWidth,0);
  lineTo(mWidth,125+75*dist);
  curveTo(150,190+10*dist,0,200);
  endFill();
  }
  }
  animIndex++;
  if(animIndex > 50)
  {
  animIndex = 0;
  _root['pic' add (counter - 1)].removeMovieClip();
  _root['mask' add (counter - 1)].removeMovieClip();