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);