NOVOTS KMS 词汇表 Glossary    联系我们 Contact Us
查询 Search  
   
按类别浏览 Browse by Category
NOVOTS KMS .: 工具软件 .: flash特效原理:倒影效果

flash特效原理:倒影效果

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

  所以修改了一个倒影类。

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

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

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

渐变填充:

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

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

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

  

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

如:

  左上角位置:

  中心:

  中心点下面:

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

  1. package org.summerTree.effect   
  2. {   
  3.     //倒影类   
  4.     import flash.display.*;   
  5.     import flash.geom.*;   
  6.   
  7.     public class Reflection     
  8.     {   
  9.         private var reflectionContainer:DisplayObjectContainer;   
  10.         private var reflectionHeight:Number;   
  11.         private var reflectionalphaStrength:Number;//透明度   
  12.         private var reflectionPercent:Number;   
  13.         private var offDistance:Number;//偏移距离   
  14.         private var reflectionClip:Sprite;   
  15.            
  16.         private var reflectionBMP:Bitmap;//倒影位图   
  17.         private var reflectionMask:Sprite;//倒影遮罩   
  18.         private var RegPointType:String;//注册点位置类型   
  19.            
  20.         //实现三种情况进行倒影   
  21.         public static var LEFT_TOP:String="left_top";   
  22.         public static var CENTER:String="center";   
  23.         public static var CENTER_BOTTOM:String="center_bottom";   
  24.            
  25.   
  26.         /* @ para reflectionContainer 倒影的容器  
  27.          * @ para reflectionHeight  倒影高度  
  28.          * @ para RegPointType  注册点类型,根据不同注册点位置做出相应的倒影  
  29.          * @ para alphaStrength 透明度 (0-1)  
  30.          * @ para reflectionPercent 倒影映射的百分比  
  31.          * @ para offDistance 偏移距离  
  32.          */  
  33.           
  34.         public function Reflection(reflectionContainer:DisplayObjectContainer, reflectionHeight:Number = 255, RegPointType:String="left_top" ,alphaStrength:Number = 1, reflectionPercent:Number = -1 ,offDistance:Number=0)   
  35.         {   
  36.             this.reflectionContainer = reflectionContainer;   
  37.             this.reflectionHeight = reflectionHeight;   
  38.             this.reflectionalphaStrength = alphaStrength;   
  39.             this.reflectionPercent = reflectionPercent;   
  40.             this.RegPointType=RegPointType;   
  41.             this.offDistance=offDistance;   
  42.             CreatReflection();   
  43.             addItem();   
  44.         }   
  45.           
  46.         //创建倒影   
  47.         private function CreatReflection():void  
  48.         {   
  49.             reflectionClip = new Sprite();//倒影剪辑容器   
  50.             reflectionMask = new Sprite();//遮罩   
  51.                
  52.             var bmd:BitmapData = new BitmapData(reflectionContainer.width,reflectionContainer.height,true,0xffffff);   
  53.             if(RegPointType==Reflection.LEFT_TOP)   
  54.             {   
  55.                 bmd.draw(reflectionContainer);   
  56.                 reflectionBMP = new Bitmap(bmd);   
  57.                 reflectionBMP.scaleY= -1;   
  58.                 reflectionBMP.x = 0;   
  59.                 reflectionBMP.y = reflectionBMP.height*2+offDistance;   
  60.                 reflectionMask.y = reflectionBMP.height+offDistance;   
  61.                 reflectionMask.x = 0;   
  62.             }   
  63.             else if(RegPointType==Reflection.CENTER)   
  64.             {   
  65.                 var matrix:Matrix=new Matrix();   
  66.                 matrix.tx=reflectionContainer.width/2;   
  67.                 matrix.ty=reflectionContainer.height/2;   
  68.                 bmd.draw( reflectionContainer,matrix);   
  69.                 reflectionBMP = new Bitmap(bmd);   
  70.                 reflectionBMP.scaleY= -1;   
  71.                 reflectionBMP.x = -reflectionBMP.width/2;   
  72.                 reflectionBMP.y = reflectionBMP.height+reflectionBMP.height/2+offDistance;   
  73.                 reflectionMask.y = reflectionBMP.height/2+offDistance;   
  74.                 reflectionMask.x = -reflectionBMP.width/2;   
  75.             }   
  76.             else if(RegPointType==Reflection.CENTER_BOTTOM)   
  77.             {   
  78.                 var matrixB:Matrix=new Matrix();   
  79.                 matrixB.tx=reflectionContainer.width/2;   
  80.                 matrixB.ty=reflectionContainer.height;             
  81.                 bmd.draw( reflectionContainer,matrixB);   
  82.                 reflectionBMP = new Bitmap(bmd);   
  83.                 reflectionBMP.scaleY= -1;   
  84.                 reflectionBMP.x = -reflectionBMP.width/2;   
  85.                 reflectionBMP.y = reflectionBMP.height+offDistance;   
  86.                 reflectionMask.y = 0+offDistance;   
  87.                 reflectionMask.x = -reflectionBMP.width/2;   
  88.             }   
  89.                    
  90.             var fillType:String = GradientType.LINEAR;   
  91.             var colors:Array = [0xFFFFFF,0xFFFFFF];   
  92.             var alphas:Array = [reflectionalphaStrength,0];   
  93.             var ratios:Array = [0,reflectionHeight];   
  94.             var matr:Matrix = new Matrix();   
  95.             var matrixHeight:Number;   
  96.             if(reflectionPercent<=0)   
  97.             {   
  98.                 matrixHeight=reflectionContainer.height;   
  99.             }   
  100.             else  
  101.             {   
  102.                 matrixHeight=reflectionContainer.height*reflectionPercent;   
  103.             }   
  104.             var spreadMethod:String = SpreadMethod.PAD;   
  105.   
  106.             matr.createGradientBox(reflectionContainer.width ,matrixHeight, 0.5*Math.PI,0, 0);   
  107.             reflectionMask.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);   
  108.             reflectionMask.graphics.drawRect(0, 0, reflectionContainer.width, reflectionContainer.height);   
  109.             reflectionMask.graphics.endFill();   
  110.            
  111.             reflectionBMP.cacheAsBitmap = true;   
  112.             reflectionMask.cacheAsBitmap = true;   
  113.             reflectionBMP.mask = reflectionMask;   
  114.         }   
  115.   
  116.         //添加项目   
  117.         private function addItem():void  
  118.         {   
  119.             reflectionClip.addChild( reflectionBMP );   
  120.             reflectionClip.addChild( reflectionMask );   
  121.             reflectionContainer.addChild( reflectionClip );                
  122.         }   
  123.            
  124.            
  125.         //清除倒影   
  126.         public function clearAll():void  
  127.         {   
  128.             reflectionClip.removeChild( reflectionMask );   
  129.             reflectionClip.removeChild( reflectionBMP );   
  130.             reflectionContainer.removeChild( reflectionClip );   
  131.         }   
  132.     }   
  133. }  

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

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

这篇文章对你多有用?

用户评语

添加评语
当前还没有评语.


.: .: .: .: .:
[ 登陆 ]
北京护航科技有限公司 2006

Novots Technologies Limited