Flex 文字+图片倒影

Flex 倒影效果，LiveReflection 已经上传到csdn上

这个可以倒影图片和文字等，是比较经典的实例

http://blog.wrench.com.au/wp-content/uploads/Flex/livereflection/srcview/index.html

 

这个网站也不错：

http://flexbox.mrinalwadhwa.com/

是英文的

不过貌似不能查看源码

 

 

同时在网上也找到了“杜增强”先生做的图片倒影效果，这个比较简洁，下转帖于此，并给出链接，有兴趣可以到其网站查看。

 

<?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>

From：
http://www.duzengqiang.com/blog/post/285.html