利用Bitmap实现动态倒影效果

      :: Flash :: 2007-6-1 17:11
Flex Box 上看到了几个反射效果,觉得效果很不错,看过源代码之后,基本有了大致的了解:主要是利用位图操作像素,首先提取目标像素资料,然后反转后再画出来。
Bitmap支持混合模式,所以可以将几个图形混合在一起。因此为了实现倒影的渐变效果,需要再混合一层渐变的图形,把这两层用BlendMode的透明方式合并,就完成了最后的效果。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  creationComplete="initApp()">
 <mx:Style>
  Application{     fontSize: 12;     backgroundGradientColors: #AEB4E6, #AEB4E6;     themeColor:#AEB4E6
  }
 </mx:Style> 
 <mx:Script>
   <![CDATA[
    import flash.events.ProgressEvent;
    import flash.display.Bitmap
    import flash.display.BitmapData   
    import mx.controls.Image      
    internal function initApp():void{
      var bd:BitmapData = new BitmapData(img.contentWidth,img.contentHeight,true,0);
  //垂直方向翻转,Matrix矩阵中第一、四个参数表示水平和垂直方向的放缩比例,第二、三个参数表示水平和垂直方向的旋转角度
//最后两个表示坐标的相对位移,当垂直翻转后,图像的Y坐标发生变化,因此必须移动       var matrix:Matrix = new Matrix( 1, 0, 0, -1, 0, img.contentHeight );    
//提取图形像素       bd.draw(img,matrix);      
//创建一个视图元件,也可以是其它容器类组件,比如Canvas
//这个元件将用来做渐变的透明效果       var shape:Shape = new Shape();
      var gradientMatrix:Matrix = new Matrix();
//定义一个渐变矩阵,用来设置填充效果      gradientMatrix.createGradientBox(img.contentWidth,img.contentHeight, 0.5*Math.PI);
//使用线性填充,这里使用三种颜色,第三个参数表示透明度的变化范围,0.4 为起点,0.5是中间值,0.1是终点
// [0,125,255] 分别是三种颜色所占的百分比       shape.graphics.beginGradientFill(GradientType.LINEAR, [0,0,0], [0.4,0.5,0.1], [0,125,255], gradientMatrix)
      shape.graphics.drawRect(0, 0, img.contentWidth,img.contentHeight);
      shape.graphics.endFill();
//将透明度运用在背景中       bd.draw(shape, null, null, BlendMode.ALPHA);
var ba:Bitmap = new Bitmap(bd)   
       var newImage:Image = new Image();
//把Bitmap传给新的图片        newImage.source = ba;
       newImage.x = img.x;
       newImage.y = img.y + img.contentHeight + 2;
       this.addChild(newImage)
    }     
   ]]>
  </mx:Script>  
 <mx:Image id="img" x="124" y="75" source="@Embed('tree.jpg')"/>

</mx:Application>

标签集:TAGS:flex
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}