topical media & game development
#graphic-flex-image-effects-08-Flex-BurningLetters.ax
#graphic-flex-image-effects-08-Flex-BurningLetters.ax
[swf]
[flash]
flex
package {
import aether.utils.ImageUtil;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.filters.DisplacementMapFilter;
import flash.filters.DisplacementMapFilterMode;
import flash.filters.GradientGlowFilter;
import flash.geom.ColorTransform;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
[SWF(width=420, height=200, backgroundColor=0x000000)]
Demonstrates how flames may be dynamically generated from any object. This uses dynamic text
that is then recolored and distorted, constantly over time, creating the flame illusion.
public class @ax-graphic-flex-image-effects-08-Flex-BurningLetters extends Sprite {
// the rate at which the flames should move
private static const FLICKER_RATE:Number = 10;
private var _blackField:TextField;
private var _flame:BitmapData;
private var _perlinNoise:BitmapData;
private var _perlinOffsets:Array;
private var _perlinSeed:int;
Constructor. This creates textfields and sets up the flame and noise properties
that will be used in the flame animation. Finally, the handler for the animation is set up.
public function @ax-graphic-flex-image-effects-08-Flex-BurningLetters() {
makeFlame();
makeFields();
makeNoise();
addEventListener(Event.ENTER_FRAME, onSpriteEnterFrame);
}
Creates the bitmap data that will be used to draw the flames.
private function makeFlame():void {
// flame image is same size as stage, fully transparent
_flame = new BitmapData(
stage.stageWidth,
stage.stageHeight,
true,
0x00000000
);
addChild(new Bitmap(_flame));
}
Creates two textfields, one with a gradient glow for flame, and the other black.
private function makeFields():void {
var field:TextField = createField();
field.filters = [
new GradientGlowFilter(
0,
45,
[0xFF0000, 0xFFFF00],
[1, 1],
[50, 255],
15,
15
)
];
_blackField = createField();
}
Creates a textfield that will be used as basis of flames.
returns: The textfield created.
private function createField():TextField {
var field:TextField = new TextField();
field.autoSize = TextFieldAutoSize.LEFT;
field.selectable = false;
// make sure you ahve Impact installed
field.defaultTextFormat = new TextFormat("Impact", 80);
field.text = "HOT STUFF";
field.x = (stage.stageWidth - field.width)/2;
field.y = stage.stageHeight - field.height;
addChild(field);
return field;
}
Initializes Perlin noise properties that will be used in flame animation.
private function makeNoise():void {
// noise bitmap data is same size as flame bitmap data
_perlinNoise = _flame.clone();
_perlinSeed = int(new Date());
// two octaves requires two points
_perlinOffsets = [new Point(), new Point()];
}
Applies the Perlin noise to the bitmap data, offsetting the octave displacement
by the FLICKER_RATE each time this method is called.
private function applyNoise():void {
_perlinNoise.perlinNoise(
50,
30,
2,
_perlinSeed,
false,
true,
BitmapDataChannel.RED,
true,
_perlinOffsets
);
// altering offset contributes to upward animation of flames
(_perlinOffsets[0] as Point).y += FLICKER_RATE;
(_perlinOffsets[1] as Point).y += FLICKER_RATE/2;
}
Updates the flame bitmap data each frame, creating the animation.
private function drawFlame():void {
// draw the current stage image into flame at a reduced brightness and alpha
_flame.draw(
stage,
null,
new ColorTransform(.9, .9, .9, .7)
);
// blur drawn image slightly, more on y axis
ImageUtil.applyFilter(
_flame,
new BlurFilter(3, 5)
);
// move the flame image up slightly, creating upward movement of flames
_flame.scroll(0, -4);
// apply new Perlin noise with altered offset
applyNoise();
// displacement flame image with updates Perlin noise
ImageUtil.applyFilter(
_flame,
new DisplacementMapFilter(
_perlinNoise,
new Point(),
BitmapDataChannel.RED,
BitmapDataChannel.RED,
1,
10,
DisplacementMapFilterMode.CLAMP
)
);
}
Handler for ENTER_FRAME event. Redraws flame.
parameter: event Event dispatched by this sprite.
private function onSpriteEnterFrame(event:Event):void {
// black field is made invisible before stage contents are
// drawn into bitmap data so that only flame is drawn
_blackField.visible = false;
drawFlame();
_blackField.visible = true;
}
}
}
(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.
