flex image 倒影特效

image特效是我最近一直关注的。今天贴上来一个倒影特效

 

控件代码：

 

package mars.display
{ 
	import flash.display.BitmapData; 
	import flash.display.GradientType; 
	import flash.display.Sprite; 
	import flash.events.Event; 
	import flash.geom.Matrix; 
	import flash.geom.Point; 
	import flash.geom.Rectangle; 	
	import mx.core.UIComponent; 
	import mx.events.FlexEvent; 
	import mx.events.MoveEvent; 
	import mx.events.ResizeEvent; 
	import flash.filters.BitmapFilter; 
	import flash.filters.BitmapFilterQuality; 
	import flash.filters.BlurFilter; 

	/** 
	 * Author: Narciso Jaramillo, nj_flex@rictus.com 
	 */ 
	public class Reflector extends UIComponent 
	{ 
		private var _target: UIComponent; 
		private var _alphaGradientBitmap: BitmapData; 
		private var _targetBitmap: BitmapData; 
		private var _resultBitmap: BitmapData; 		 
		private var _falloff: Number = 0.6; 		
		private var _blurAmount:Number = 0.5; 
		
		[Bindable] 
		public function get target(): UIComponent { 
			return _target; 
		} 
		
		public function set target(value: UIComponent): void { 
			if (_target != null) { 
				_target.removeEventListener(FlexEvent.UPDATE_COMPLETE, handleTargetUpdate, true); 
				_target.removeEventListener(MoveEvent.MOVE, handleTargetMove); 
				_target.removeEventListener(ResizeEvent.RESIZE, handleTargetResize);
				clearCachedBitmaps(); 
			} 		
			_target = value; 			
			if (_target != null) { 
				_target.addEventListener(FlexEvent.UPDATE_COMPLETE, handleTargetUpdate, true); 
				_target.addEventListener(MoveEvent.MOVE, handleTargetMove); 
				_target.addEventListener(ResizeEvent.RESIZE, handleTargetResize); 
				invalidateDisplayList(); 
			} 
		} 
		
		[Bindable] 
		public function get falloff(): Number { 
			return _falloff; 
		} 
		
		public function set falloff(value: Number): void { 
			_falloff = value; 
			_alphaGradientBitmap = null; 			
			invalidateDisplayList(); 
		} 
		
		[Bindable] 
		public function get blurAmount(): Number { 
			return _blurAmount; 
		} 
		
		public function set blurAmount(value: Number): void { 
			_blurAmount = value; 
			_alphaGradientBitmap = null; 			
			invalidateDisplayList(); 
		} 
		
		private function handleTargetUpdate(event: FlexEvent): void {  
			invalidateDisplayList(); 
		} 
		
		private function handleTargetMove(event: MoveEvent): void { 
			move(_target.x, _target.y + _target.height); 
		} 
		
		private function handleTargetResize(event: ResizeEvent): void { 
			clearCachedBitmaps(); 
			width = _target.width; 
			height = _target.height; 
			invalidateDisplayList(); 
		} 
		override protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number): void { 
			if (_target != null) {  
				createBitmaps(_target); 		
				var rect: Rectangle = new Rectangle(0, 0, _target.width, _target.height); 	
				_targetBitmap.fillRect(rect, 0x00000000); 
				_targetBitmap.draw(_target, new Matrix()); 
				_resultBitmap.fillRect(rect, 0x00000000); 
				_resultBitmap.copyPixels(_targetBitmap, rect, new Point(), _alphaGradientBitmap); 
				var transform: Matrix = new Matrix(); 
				transform.scale(1, -1); 
				transform.translate(0, _target.height);
				 
	            graphics.beginFill(0xFFCC00); 
	            graphics.drawRect(0, 0, _target.width, _target.height); 
	            graphics.endFill(); 
	            var filter:BitmapFilter = new BlurFilter(_blurAmount*5, _blurAmount*10, BitmapFilterQuality.HIGH); 
	            var myFilters:Array = new Array(); 
	            myFilters.push(filter); 
	            filters = myFilters; 
				
				graphics.clear(); 
				graphics.beginBitmapFill(_resultBitmap, transform, false); 
				graphics.drawRect(0, 0, unscaledWidth, unscaledHeight); 
			} 
		} 
		
		private function clearCachedBitmaps(): void { 
			_alphaGradientBitmap = null; 
			_targetBitmap = null; 
			_resultBitmap = null; 
		} 
		
		private function createBitmaps(target: UIComponent): void { 
			if (_alphaGradientBitmap == null) { 
				_alphaGradientBitmap = new BitmapData(target.width, target.height, true, 0x00000000); 
				var gradientMatrix: Matrix = new Matrix(); 
				var gradientSprite: Sprite = new Sprite(); 
				gradientMatrix.createGradientBox(target.width, target.height * _falloff, Math.PI/2, 
				0, target.height * (1.0 - _falloff)); 
				gradientSprite.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], 
				[0, 1], [0, 255], gradientMatrix); 
				gradientSprite.graphics.drawRect(0, target.height * (1.0 - _falloff), 
				target.width, target.height * _falloff); 
				gradientSprite.graphics.endFill(); 
				_alphaGradientBitmap.draw(gradientSprite, new Matrix()); 
			} 
			if (_targetBitmap == null) { 
				_targetBitmap = new BitmapData(target.width, target.height, true, 0x00000000); 
			} 
			if (_resultBitmap == null) { 
				_resultBitmap = new BitmapData(target.width, target.height, true, 0x00000000); 
			} 
		} 
	} 
}

 

页面代码：

 

<?xml version="1.0" encoding="utf-8"?> 

<!-- Demo of the DragPanel and Reflector components. Author: Narciso Jaramillo, nj_flex@rictus.com --> 
    
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
xmlns:reflector="mars.display.*" 
xmlns:dragpanel="mars.display.*" 
layout="absolute" backgroundColor="#123456" width="674" height="548"> 

<mx:Image id="img" width="298" height="177" source="../img/panda.jpg" 
	horizontalCenter="19" verticalCenter="-51"/> 
<!-- verticalCenter horizontalCenter 这两个属性一定要有-->

	<mx:HSlider id="alphaSlider" x="346" y="10" liveDragging="true" showDataTip="false" 
	width="159" minimum="0.0" maximum="1.0" value="0.6" snapInterval="0.01" borderColor="#F63509"/> 
	
	<mx:HSlider id="falloffSlider" x="346" y="44" liveDragging="true" showDataTip="false" 
	width="159" minimum="0.0" maximum="1.0" value="0.7" snapInterval="0.01" borderColor="#5DF60A"/> 
	
	<mx:HSlider id="blurSlider" x="346" y="70" liveDragging="true" showDataTip="false" 
	width="159" minimum="0.0" maximum="1.0" value="0.4" snapInterval="0.01" borderColor="#0A34E7"/> 
	
	<mx:Label x="269" y="10" text="alpha值" color="#FAFCFC" fontSize="13"/>
	<mx:Label x="267" y="40" text="falloff值" color="#FAFCFC" fontSize="13"/>
	<mx:Label x="280" y="66" text="blur值" color="#FAFCFC" fontSize="13"/>

<reflector:Reflector id="myReflector" target="{img}" alpha="{alphaSlider.value}" falloff="{falloffSlider.value}" blurAmount="{blurSlider.value}"/> 

</mx:Application>