topical media & game development
#graphic-flex-image-effects-09-Flex-BeveledText.ax
#graphic-flex-image-effects-09-Flex-BeveledText.ax
[swf]
[flash]
flex
package {
import aether.utils.Adjustments;
import aether.utils.ImageUtil;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.display.Sprite;
import flash.filters.BevelFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
import flash.filters.BlurFilter;
import flash.geom.Point;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
[SWF(width=800, height=450, backgroundColor=0x000000)]
Demonstrates how complex beveling effects can be created by expanding or contracting textfields
using blurring and levels, then stacking these expanded or contracted fields and applying bevel effects.
public class @ax-graphic-flex-image-effects-09-Flex-BeveledText extends Sprite {
Constructor. Creates fields, generated multiple bitmaps from each and applies bevels.
public function @ax-graphic-flex-image-effects-09-Flex-BeveledText() {
// make sure Impact is installed
var field:TextField = createField("BEVEL ONE", new TextFormat("Impact", 100));
// draws field into bitmap data
var bitmapData:BitmapData = ImageUtil.getBitmapData(field);
// applies beveling effect
bevelImageOne(bitmapData);
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmap.x = (stage.stageWidth - bitmap.width)/2;
bitmap.y = 20;
addChild(bitmap);
// process is repeated for two more fields
field = createField("BEVEL TWO", new TextFormat("Impact", 100));
bitmapData = ImageUtil.getBitmapData(field);
bevelImageTwo(bitmapData);
bitmap = new Bitmap(bitmapData);
bitmap.x = (stage.stageWidth - bitmap.width)/2;
bitmap.y = stage.stageHeight/3 + 20;
addChild(bitmap);
field = createField("BEVEL THREE", new TextFormat("Times New Roman", 100));
bitmapData = ImageUtil.getBitmapData(field);
bevelImageThree(bitmapData);
bitmap = new Bitmap(bitmapData);
bitmap.x = (stage.stageWidth - bitmap.width)/2;
bitmap.y = stage.stageHeight*2/3 + 20;
addChild(bitmap);
}
Creates a textfield with the specified text and format.
parameter: text The text to add to the field.
parameter: format The text format to apply to the field.
returns: The textfield created.
private function createField(text:String, format:TextFormat):TextField {
var field:TextField = new TextField();
field.defaultTextFormat = format;
field.autoSize = TextFieldAutoSize.LEFT;
field.text = text;
return field;
}
Applies bevel to first field, which is drawn into bitmap data.
parameter: source The bitmap data to apply the bevel to.
private function bevelImageOne(source:BitmapData):void {
// creates transparent bitmap data in which beveled image will be drawn
var destination:BitmapData = new BitmapData(
source.width,
source.height,
true,
0x00000000
);
// adds thick field with slight inner bevel to bottom of stack
addBevel(
source,
destination,
0xFFFF9900,
5,
90,
new BevelFilter(
3,
45,
0xFFFFFF,
0.4,
0x000000,
0.4,
2,
2
)
);
// adds thinner, darker field with reversed highlights to top of stack
addBevel(
source,
destination,
0xFFCC7700,
5,
210,
new BevelFilter(
2,
45,
0x000000,
0.8,
0xFFFFFF,
0.8,
3,
3
)
);
// copies finished image into original image
ImageUtil.copyPixels(destination, source);
}
Applies bevel to second field, which is drawn into bitmap data.
parameter: source The bitmap data to apply the bevel to.
private function bevelImageTwo(source:BitmapData):void {
// creates transparent bitmap data in which beveled image will be drawn
var destination:BitmapData = new BitmapData(
source.width,
source.height,
true,
0x00000000
);
// adds thick field with slight inner bevel to bottom of stack
addBevel(
source,
destination,
0xFF5484b4,
8,
50,
new BevelFilter(
2,
45,
0xFFFFFF,
0.8,
0x000000,
0.8,
2,
2
)
);
// adds thinner field with outer bevel and knockedout fill to middle of stack
addBevel(
source,
destination,
0xFFFFFFFF,
6,
200,
new BevelFilter(
2,
225,
0xFFFFFF,
0.5,
0x000000,
0.5,
1.5,
1.5,
1,
BitmapFilterQuality.HIGH,
BitmapFilterType.OUTER,
true
)
);
// adds field same size as previous with slight inner bevel to top of stack
addBevel(
source,
destination,
0xFF6AA6E3,
6,
200,
new BevelFilter(
4,
45,
0xFFFFFF,
0.7,
0x000000,
0.7,
2,
2
)
);
ImageUtil.copyPixels(destination, source);
}
Applies bevel to third field, which is drawn into bitmap data.
parameter: source The bitmap data to apply the bevel to.
private function bevelImageThree(source:BitmapData):void {
// creates transparent bitmap data in which beveled image will be drawn
var destination:BitmapData = new BitmapData(
source.width,
source.height,
true,
0x00000000
);
// adds thick field with hard, chiseled bevel to bottom of stack
addBevel(
source,
destination,
0xFF56B77D,
10,
30,
new BevelFilter(
3,
45,
0xFFFFFF,
0.4,
0x000000,
0.4,
2,
2,
80,
BitmapFilterQuality.HIGH
)
);
// adds thinner, darker field with reversed bevel highlights to top of stack
addBevel(
source,
destination,
0xFF142B1D,
4,
140,
new BevelFilter(
3,
45,
0x000000,
0.8,
0xFFFFFF,
0.4,
2,
2,
1,
BitmapFilterQuality.HIGH
)
);
ImageUtil.copyPixels(destination, source);
}
Captures the alpha channel from an image, then blurs it and applies a threshold in order to
thicken or thin opaque pixels of image. The resulting alpha channel is copied into bitmap data
with a specified fill and a bevel is applied.
parameter: source The source bitmap data image.
parameter: destination The image in which the effect will be drawn.
parameter: fillColor The color of the resulting image.
parameter: blurAmoun The amount to blur the image before the threshold is applied.
parameter: threshold The threshold to apply, which will determine how thick or thin the image will be.
parameter: bevelFilter The filter to apply to the resulting image.
private function addBevel(
source:BitmapData,
destination:BitmapData,
fillColor:uint,
blurAmount:Number,
threshold:uint,
bevelFilter:BevelFilter
):void {
// create grayscale image from alpha channel of source
var alpha:BitmapData = ImageUtil.getChannelData(source, BitmapDataChannel.ALPHA);
// blur the grayscale image
ImageUtil.applyFilter(alpha, new BlurFilter(blurAmount, blurAmount));
// apply a threshold to the blurred image
Adjustments.setLevels(alpha, threshold-20, threshold, threshold+20);
// blur the threshold result to soften pixelation
ImageUtil.applyFilter(alpha, new BlurFilter(1.5, 1.5));
// create a new image that is a solid color
var bevel:BitmapData = source.clone();
bevel.fillRect(bevel.rect, fillColor);
// copy the altered alpha channel into solid color bitmap data
bevel.copyChannel(
alpha,
alpha.rect,
new Point(),
BitmapDataChannel.RED,
BitmapDataChannel.ALPHA
);
// apply filter
ImageUtil.applyFilter(bevel, bevelFilter);
// draw beveled image into destination bitmap data
destination.draw(bevel);
}
}
}
(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.
