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 graphic_flex_image_effects_09_Flex_BeveledText extends Sprite { /** * Constructor. Creates fields, generated multiple bitmaps from each and applies bevels. */ public function 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. * * @param text The text to add to the field. * @param format The text format to apply to the field. * * @return 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. * * @param 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. * * @param 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. * * @param 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. * * @param source The source bitmap data image. * @param destination The image in which the effect will be drawn. * @param fillColor The color of the resulting image. * @param blurAmoun The amount to blur the image before the threshold is applied. * @param threshold The threshold to apply, which will determine how thick or thin the image will be. * @param 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); } } }