topical media & game development
#graphic-flex-image-effects-04-Flex-GlassEffect.ax
#graphic-flex-image-effects-04-Flex-GlassEffect.ax
[swf]
[flash]
flex
package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.display.BlendMode;
import flash.filters.BevelFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.DisplacementMapFilter;
import flash.filters.DropShadowFilter;
import flash.geom.ColorTransform;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.TextFormatAlign;
[SWF(width=640, height=480, backgroundColor=0x202020)]
Demonstrates how DisplacementMapFilter can be used to distort a texture so that it appears to wrap around
a textfield. The map used for the displacement is generated by applying bevel filters to the field and
capturing this bitmap data.
public class @ax-graphic-flex-image-effects-04-Flex-GlassEffect extends graphic_flex_image_effects_04_Flex_AbstractImageLoader {
Constructor. Passes path of image to load to super class.
public function @ax-graphic-flex-image-effects-04-Flex-GlassEffect() {
super("graphic-flex-image-effects-04-assets-glassBackground.jpg");
}
Run after the image loads in super class. This creates a new transparent bitmap data and copies over pixels
under a certain brightness into it. Then two filters applied to produce a pooling paint effect.
override protected function runPostImageLoad():void {
var width:Number = stage.stageWidth;
var height:Number = stage.stageHeight;
// this will be used as the displacement map
var map:BitmapData = new BitmapData(width, height, true, 0x00000000);
// this will be used for the distorted texture
var texturedText:BitmapData = map.clone();
// creates a filtered textfield
var textfield:TextField = createTextField(0x808080, 0xFFFFFF);
// a matrix to translate the captured text bitmap data to be centered within the texture bitmap
var matrix:Matrix = new Matrix();
matrix.translate((width-textfield.width)/2, (height-textfield.height)/2);
// draws the textfield, centered, within bitmap data the same dimensions as the texture bitmap
map.draw(textfield, matrix);
var displacementMapFilter:DisplacementMapFilter = new DisplacementMapFilter(
map, new Point(), BitmapDataChannel.RED, BitmapDataChannel.RED, 15, 15
);
var bitmapData:BitmapData = _loadedBitmap.bitmapData;
// displace the texture bitmap using the captured filtered textfield
texturedText.applyFilter(bitmapData, texturedText.rect, new Point(), displacementMapFilter);
var alphaChannel:uint = BitmapDataChannel.ALPHA;
// use the alpha from textfield on the distorted texture
texturedText.copyChannel(map, map.rect, new Point(), alphaChannel, alphaChannel);
// reuse map bitmap data just because it is the same size
map.draw(textfield, matrix);
// color transform used to draw overlay lighting text onto textured text
texturedText.draw(map, null, new ColorTransform(1, 1, 1, 0.6), BlendMode.OVERLAY);
// additional filters applied to create glass-like lighting
texturedText.applyFilter(texturedText, texturedText.rect, new Point(), new DropShadowFilter(1, 45, 0xFFFFFF, 0.8, 2, 2, 2, 1, true));
texturedText.applyFilter(texturedText, texturedText.rect, new Point(), new DropShadowFilter(2, 45, 0, 0.5, 3, 3));
// background slightly lightened
bitmapData.colorTransform(bitmapData.rect, new ColorTransform(1, 1, 1, 1, 10, 10, 10));
addChild(_loadedBitmap);
addChild(new Bitmap(texturedText));
}
Creates a textfield and applies a bevel filter using the specified highlight color.
parameter: textColor The color to give the text.
parameter: highlightColor The color to give the bevel filter highlight.
returns: The textfield that was created.
private function createTextField(textColor:uint, highlightColor:uint):TextField {
var textfield:TextField = new TextField();
textfield.autoSize = TextFieldAutoSize.LEFT;
textfield.multiline = true;
// change font face if Impact is not installed
var textFormat:TextFormat = new TextFormat("Impact", 130, textColor);
textFormat.align = TextFormatAlign.CENTER;
textfield.defaultTextFormat = textFormat;
textfield.text = "GLASS\nDISTORTION";
var bevelFilter:BevelFilter = new BevelFilter(5, 45);
bevelFilter.highlightColor = highlightColor;
bevelFilter.blurX = bevelFilter.blurY = 7;
textfield.filters = [bevelFilter];
return textfield;
}
}
}
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
