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布局(Flexible Box)是CSS3中的...
标题“FLEX4动画特效”暗示了这个压缩包包含了一系列Flex4动画效果的示例代码。这些示例可能是由FlexBuilder4.6,一个专门用于Flex开发的集成开发环境(IDE),直接导出的工程。用户可以将这些工程导入到自己的开发...
而"flex倒影效果"则是在Flex布局基础上实现的一种视觉效果,它使得元素看起来像具有水中的倒影,增加了设计的动态感和深度。 要创建flex倒影效果,首先我们需要理解Flex布局的基本概念。Flex容器是包含一个或多个...
Flex翻书特效是一种在Web应用中模拟真实书籍翻页效果的技术,主要应用于电子图书、杂志或画册等在线阅读场景,能提供用户更加沉浸式的阅读体验。本文将深入探讨Flex翻书特效的相关知识点,包括Flex的基本概念、实现...
FlexImage是一个在编程领域,尤其是前端开发中常用的库,它主要用于处理图像,特别是在创建动态、交互式的相册或图片展示应用时。这个压缩包提供的"FlexImage简单相册例子(含源码)"是一个很好的学习资源,可以帮助...
Flex 3D特效源码是一种基于Adobe Flex技术的高级视觉表现形式,主要用于创建引人注目的3D动画和交互效果。Flex是ActionScript 3.0的开发框架,它允许开发者构建富互联网应用程序(RIA)并发布为Flash Player或Adobe ...
Flex是Adobe开发的一种开源框架,主要用于构建富互联网应用程序(RIA)。在Flex中,自定义组件是开发者根据...通过深入研究ImageViewer组件的实现,我们可以掌握如何在Flex中处理图像展示、交互和性能优化等相关技术。
在本文中,我们将深入探讨如何使用Flex实现超炫的倒影效果,并且将重点放在如何调整模糊程度和影子长度。Flex是一种强大的CSS3布局模式,允许开发者在各种屏幕尺寸和方向上创建灵活、响应式的网页设计。倒影效果则是...
Flex特效在IT行业中主要指的是Adobe Flex,它是一个用于构建富互联网应用程序(RIA)的开源框架。Flex使用MXML和ActionScript编程语言,可以创建交互性强、视觉效果丰富的Web应用程序。在网页设计和开发中,Flex特效...
在本例中,我们关注的是如何使用Flex来模拟Mac操作系统的某些特效,特别是弹出框效果。 "Flex模拟Mac特效"这一主题主要涉及以下知识点: 1. Flex组件库:Flex提供了一系列预定义的UI组件,如Button、Label、...
Flex翻书特效是一种基于Adobe Flex和ActionScript 3(AS3)开发的互动式图书模拟效果,它使得用户可以通过类似真实书籍的方式翻页,提供了一种沉浸式的阅读体验。这个特效通常用于数字图书、电子杂志或者在线展示...
在本案例中,我们关注的是"flex火焰效果 特效",这是一个在Flex应用中创建动态、引人注目的视觉效果的技术。 Flex提供了一个强大的图形库,名为Flex元件库,其中包含多种预定义的UI组件,如按钮、文本框等。这些...
flex 3d饼图旋特效AS控制类,和MXML实现类
Flex翻书特效源码
这个“Flex浏览杂志特效”项目显然利用了Flex3.0的强大功能,旨在为用户提供一种模拟真实杂志翻页体验的互动效果。下面将详细讨论Flex3.0的核心特性、如何实现此类特效以及相关的编程概念。 1. Flex3.0核心特性: ...
在本主题中,我们将关注Flex中的一个独特功能——标签云特效。 **标签云(Tag Cloud)** 是一种流行的数据可视化方式,常用于展示大量标签或关键词,其中每个标签的大小或颜色代表其出现的频率或重要性。在Flex中...
在本项目“Flex 菜单导航特效工程源码”中,我们可以深入探讨Flex在构建高效且具有视觉吸引力的菜单导航系统方面的应用。 1. Flex的基本概念: - ActionScript:Flex的核心编程语言,是一种面向对象的脚本语言,...
一个 flex 窗体切换特效,一个代码小demo,可以帮您解决窗体切换和页面转换的烦恼
本文将深入探讨Flex的各种特效,帮助开发者提升在Web前端开发中的技能水平。 首先,我们要理解Flex容器的基本概念。一个Flex容器是指设置了`display: flex`或`display: inline-flex`的元素,它可以包含一个或多个...
"Flex 果冻特效Demo"是一个利用Flex技术实现的交互效果,它为用户界面添加了趣味性和吸引力,尤其适用于弹出窗口或页面转换场景。果冻特效,顾名思义,就是使元素在动效过程中呈现出如同果冻般柔软、弹性的视觉效果...