flash特效原理 倒影效果

               

   其实这个倒影类已经不是新鲜的事情,不过有时候很多情况不适合自己做特效,所以拿了一个修改一下。因为我们加载的图片,在默认的情况下使用容器装都在注册点都在左上角,但是大部分情况,我们注册点在中心或者底部会符合我们做特效的特点。于是根据这些情况进行倒影判断有时候有必要的。

  所以修改了一个倒影类。

  倒影的其中一个特点:使用渐变填充的办法(beginGradientFill)构建这个倒影效果。当中使用到一些矩阵,一些遮罩,一些位图复制的做法。虽然遮罩这种做法已经有很多情况适应,不过渐变填充是一项比较消耗资源的计算,因此倒影类有时候会出现吃资源的状况,这一点需要注意。 同时注意到(cacheAsBitmap这个玩意使用的时候也是比较消耗内存的

  还有第二种方式:使用位图做法,先实验倒影,然后再复制成一张位图。这种可以算是非主流的做法。不知道好不好玩呢,有空再去尝试一下制作。

 还可以实验其他方式优化,有空可以尝试一下制作。

渐变填充:

   reflectionMask.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);

   使用渐变填充的时候,需要填入几个参数才会有效果发生。因为这个几个参数模式在官方帮助文档有充分的说明,可以参考这个

在使用渐变填充的时候,其中矩阵的使用是个比较好玩的地方,使用矩阵可以改变填充的方向,如果有更多的需求的时候,可以对矩阵这个参数进行研究一番。

  

    在平时的时候,我们创建一个元件的时候,flash会提供一个对齐方式给我们选择,默认的情况是在左上角,但是有时候我们需要改变这种对齐方式选择中心点位置 或者其他,这样一来会方便我们制作特效的。在实验的过程当中,我发现很多图片墙效果所需要图片都在中心位置。故此在使用倒影类的时候,可以恰当根据这几种情况定制我们所需要的方式。

如:

  左上角位置:

  中心:

  中心点下面:

 所以这样一来,倒影图片位置就可能出现多种情况。所以根据这些选择来改变倒影的图片的位置。有时候会适合自己的方式制作。

package org.summerTree.effect{ //倒影类 import flash.display.*; import flash.geom.*; public class Reflection   {  private var reflectionContainer:DisplayObjectContainer;  private var reflectionHeight:Number;  private var reflectionalphaStrength:Number;//透明度  private var reflectionPercent:Number;  private var offDistance:Number;//偏移距离  private var reflectionClip:Sprite;    private var reflectionBMP:Bitmap;//倒影位图  private var reflectionMask:Sprite;//倒影遮罩  private var RegPointType:String;//注册点位置类型    //实现三种情况进行倒影  public static var LEFT_TOP:String="left_top";  public static var CENTER:String="center";  public static var CENTER_BOTTOM:String="center_bottom";          /* @ para reflectionContainer 倒影的容器   * @ para reflectionHeight  倒影高度   * @ para RegPointType  注册点类型,根据不同注册点位置做出相应的倒影   * @ para alphaStrength 透明度 (0-1)   * @ para reflectionPercent 倒影映射的百分比   * @ para offDistance 偏移距离   */         public function Reflection(reflectionContainer:DisplayObjectContainer, reflectionHeight:Number = 255, RegPointType:String="left_top" ,alphaStrength:Number = 1, reflectionPercent:Number = -1 ,offDistance:Number=0)  {   this.reflectionContainer = reflectionContainer;   this.reflectionHeight = reflectionHeight;   this.reflectionalphaStrength = alphaStrength;   this.reflectionPercent = reflectionPercent;   this.RegPointType=RegPointType;   this.offDistance=offDistance;   CreatReflection();   addItem();  }            //创建倒影  private function CreatReflection():void  {   reflectionClip = new Sprite();//倒影剪辑容器   reflectionMask = new Sprite();//遮罩      var bmd:BitmapData = new BitmapData(reflectionContainer.width,reflectionContainer.height,true,0xffffff);   if(RegPointType==Reflection.LEFT_TOP)   {    bmd.draw(reflectionContainer);    reflectionBMP = new Bitmap(bmd);       reflectionBMP.scaleY= -1;       reflectionBMP.x = 0;       reflectionBMP.y = reflectionBMP.height*2+offDistance;    reflectionMask.y = reflectionBMP.height+offDistance;       reflectionMask.x = 0;   }   else if(RegPointType==Reflection.CENTER)   {    var matrix:Matrix=new Matrix();       matrix.tx=reflectionContainer.width/2;       matrix.ty=reflectionContainer.height/2;       bmd.draw( reflectionContainer,matrix);    reflectionBMP = new Bitmap(bmd);       reflectionBMP.scaleY= -1;       reflectionBMP.x = -reflectionBMP.width/2;       reflectionBMP.y = reflectionBMP.height+reflectionBMP.height/2+offDistance;    reflectionMask.y = reflectionBMP.height/2+offDistance;       reflectionMask.x = -reflectionBMP.width/2;   }   else if(RegPointType==Reflection.CENTER_BOTTOM)   {    var matrixB:Matrix=new Matrix();       matrixB.tx=reflectionContainer.width/2;       matrixB.ty=reflectionContainer.height;          bmd.draw( reflectionContainer,matrixB);    reflectionBMP = new Bitmap(bmd);       reflectionBMP.scaleY= -1;       reflectionBMP.x = -reflectionBMP.width/2;       reflectionBMP.y = reflectionBMP.height+offDistance;    reflectionMask.y = 0+offDistance;       reflectionMask.x = -reflectionBMP.width/2;   }       var fillType:String = GradientType.LINEAR;   var colors:Array = [0xFFFFFF,0xFFFFFF];   var alphas:Array = [reflectionalphaStrength,0];   var ratios:Array = [0,reflectionHeight];   var matr:Matrix = new Matrix();   var matrixHeight:Number;   if(reflectionPercent<=0)   {    matrixHeight=reflectionContainer.height;   }   else   {    matrixHeight=reflectionContainer.height*reflectionPercent;   }   var spreadMethod:String = SpreadMethod.PAD;   matr.createGradientBox(reflectionContainer.width ,matrixHeight, 0.5*Math.PI,0, 0);   reflectionMask.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);   reflectionMask.graphics.drawRect(0, 0, reflectionContainer.width, reflectionContainer.height);            reflectionMask.graphics.endFill();                    reflectionBMP.cacheAsBitmap = true;         reflectionMask.cacheAsBitmap = true;      reflectionBMP.mask = reflectionMask;  }  //添加项目  private function addItem():void  {   reflectionClip.addChild( reflectionBMP );   reflectionClip.addChild( reflectionMask );   reflectionContainer.addChild( reflectionClip );      }            //清除倒影  public function clearAll():void  {   reflectionClip.removeChild( reflectionMask );   reflectionClip.removeChild( reflectionBMP );   reflectionContainer.removeChild( reflectionClip );  } }}

测试:根据不同的注册点创建。

var rect2:Reflection=new Reflection(mc1,255,Reflection.LEFT_TOP,0.5);  var rect:Reflection=new Reflection(mc2,255,Reflection.CENTER,0.6,0.5); var rect3:Reflection=new Reflection(mc3,255,Reflection.CENTER_BOTTOM,0.6,0.6);

           

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

猜你喜欢

转载自blog.csdn.net/cfhgcvb/article/details/87698816