`

flex image 倒影特效

    博客分类:
  • flex
阅读更多

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>

 

 

分享到:
评论

相关推荐

    flex倒影特效

    在前端开发中,实现动态和美观的用户界面是至关重要的,而“flex倒影特效”是一种常见的视觉增强技术,它可以为网页元素添加一种仿佛映照在平滑表面下的反射效果,提升用户体验。Flex布局(Flexible Box)是CSS3中的...

    FLEX4动画特效

    标题“FLEX4动画特效”暗示了这个压缩包包含了一系列Flex4动画效果的示例代码。这些示例可能是由FlexBuilder4.6,一个专门用于Flex开发的集成开发环境(IDE),直接导出的工程。用户可以将这些工程导入到自己的开发...

    flex倒影效flex倒影效果

    而"flex倒影效果"则是在Flex布局基础上实现的一种视觉效果,它使得元素看起来像具有水中的倒影,增加了设计的动态感和深度。 要创建flex倒影效果,首先我们需要理解Flex布局的基本概念。Flex容器是包含一个或多个...

    Flex翻书特效 OpenBook

    Flex翻书特效是一种在Web应用中模拟真实书籍翻页效果的技术,主要应用于电子图书、杂志或画册等在线阅读场景,能提供用户更加沉浸式的阅读体验。本文将深入探讨Flex翻书特效的相关知识点,包括Flex的基本概念、实现...

    FlexImage简单相册例子(含源码)

    FlexImage是一个在编程领域,尤其是前端开发中常用的库,它主要用于处理图像,特别是在创建动态、交互式的相册或图片展示应用时。这个压缩包提供的"FlexImage简单相册例子(含源码)"是一个很好的学习资源,可以帮助...

    Flex 3D特效源码

    Flex 3D特效源码是一种基于Adobe Flex技术的高级视觉表现形式,主要用于创建引人注目的3D动画和交互效果。Flex是ActionScript 3.0的开发框架,它允许开发者构建富互联网应用程序(RIA)并发布为Flash Player或Adobe ...

    Flex 自定义组件ImageViewer

    Flex是Adobe开发的一种开源框架,主要用于构建富互联网应用程序(RIA)。在Flex中,自定义组件是开发者根据...通过深入研究ImageViewer组件的实现,我们可以掌握如何在Flex中处理图像展示、交互和性能优化等相关技术。

    flex超炫倒影效果

    在本文中,我们将深入探讨如何使用Flex实现超炫的倒影效果,并且将重点放在如何调整模糊程度和影子长度。Flex是一种强大的CSS3布局模式,允许开发者在各种屏幕尺寸和方向上创建灵活、响应式的网页设计。倒影效果则是...

    FLEX特效FLEX特效FLEX特效FLEX特效

    Flex特效在IT行业中主要指的是Adobe Flex,它是一个用于构建富互联网应用程序(RIA)的开源框架。Flex使用MXML和ActionScript编程语言,可以创建交互性强、视觉效果丰富的Web应用程序。在网页设计和开发中,Flex特效...

    Flex模拟Mac特效

    在本例中,我们关注的是如何使用Flex来模拟Mac操作系统的某些特效,特别是弹出框效果。 "Flex模拟Mac特效"这一主题主要涉及以下知识点: 1. Flex组件库:Flex提供了一系列预定义的UI组件,如Button、Label、...

    Flex翻书特效

    Flex翻书特效是一种基于Adobe Flex和ActionScript 3(AS3)开发的互动式图书模拟效果,它使得用户可以通过类似真实书籍的方式翻页,提供了一种沉浸式的阅读体验。这个特效通常用于数字图书、电子杂志或者在线展示...

    flex火焰效果 特效

    在本案例中,我们关注的是"flex火焰效果 特效",这是一个在Flex应用中创建动态、引人注目的视觉效果的技术。 Flex提供了一个强大的图形库,名为Flex元件库,其中包含多种预定义的UI组件,如按钮、文本框等。这些...

    flex 3d 旋转特效

    flex 3d饼图旋特效AS控制类,和MXML实现类

    Flex翻书特效源码

    Flex翻书特效源码

    Flex浏览杂志特效

    这个“Flex浏览杂志特效”项目显然利用了Flex3.0的强大功能,旨在为用户提供一种模拟真实杂志翻页体验的互动效果。下面将详细讨论Flex3.0的核心特性、如何实现此类特效以及相关的编程概念。 1. Flex3.0核心特性: ...

    Flex 标签云 特效 漂亮

    在本主题中,我们将关注Flex中的一个独特功能——标签云特效。 **标签云(Tag Cloud)** 是一种流行的数据可视化方式,常用于展示大量标签或关键词,其中每个标签的大小或颜色代表其出现的频率或重要性。在Flex中...

    Flex 菜单导航特效 工程源码

    在本项目“Flex 菜单导航特效工程源码”中,我们可以深入探讨Flex在构建高效且具有视觉吸引力的菜单导航系统方面的应用。 1. Flex的基本概念: - ActionScript:Flex的核心编程语言,是一种面向对象的脚本语言,...

    flex 窗体切换 特效

    一个 flex 窗体切换特效,一个代码小demo,可以帮您解决窗体切换和页面转换的烦恼

    flex的各种特效总结

    本文将深入探讨Flex的各种特效,帮助开发者提升在Web前端开发中的技能水平。 首先,我们要理解Flex容器的基本概念。一个Flex容器是指设置了`display: flex`或`display: inline-flex`的元素,它可以包含一个或多个...

    Flex 果冻特效Demo

    "Flex 果冻特效Demo"是一个利用Flex技术实现的交互效果,它为用户界面添加了趣味性和吸引力,尤其适用于弹出窗口或页面转换场景。果冻特效,顾名思义,就是使元素在动效过程中呈现出如同果冻般柔软、弹性的视觉效果...

Global site tag (gtag.js) - Google Analytics