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特效FLEX特效 FLEX特效FLEX特效FLEX特效FLEX特效 FLEX特效FLEX特效FLEX特效FLEX特效 FLEX特效FLEX特效FLEX特效FLEX特效
flex倒影特效
flex倒影效果flex倒影效果flex倒影效果flex倒影效果flex倒影效果
FLEX4动画特效样例集合,FlexBuilder4.6直接导出的工程,导入后直接运行application文件
flex火焰效果 特效 flex火焰效果 特效
FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具FLEX 特效工具
一个不错的Flex翻书特效,tag:Flex翻书特效 Flex特效学习 flex builder 如何做出翻书特效 Flex实现翻书特效
Flex 标签云 特效 漂亮 Flex 标签云 特效 漂亮
flex4 3D特效
超炫的flex倒影效果,可调整模糊程度和影子长度
flex 3d饼图旋特效AS控制类,和MXML实现类
Flex翻书特效源码
FlexCumulusTagCloud 为开源flex3d 特效源码 将FlexCumulusTagCloud下的文件之间import到开发工具后之间运行 呈现超酷超炫3D效果
Flex AS3 翻书特效,效果很不错的。
一个 flex 窗体切换特效,一个代码小demo,可以帮您解决窗体切换和页面转换的烦恼
Flex 菜单导航特效 工程源码 不错哦
研究Flex 组件声明周期,了解组件的生成步骤
Flex模拟Mac的超酷特效(弹出框),点击按钮是从头部滑出超炫的弹出框。
本例是实现了Flex的果冻特效,比如在弹出窗口或者转换页面时主能使用,超级有意思
FlexImage简单相册例子(含源码)