Using alpha channel fade effects on non-embedded fonts in Flash

The generally accepted procedure to implement an alpha channel effect on a Flash text is to embed the text manually or at run-time, to convert the text to a vector, before applying any alpha effects to it. Most Actionscript developers have had to contend fade effects working on their MovieClips while the embedded text fields say 'fie!!' to the effect if they are not embedded fonts.


Well no longer. A good friend of mine James Hunt, passed me this gem of knowledge. The theory is simple. Apply a filter to the text field and then apply your alpha to the container movie clip and 'Voila' the unembedded text fades. You can use most filters, James used the colorMatrix filer I used the Glow filter. Its marvellous.


To test this you need to import these


import flash.display.*;
import flash.events.*;
import flash.filters.*;
import flash.text.*;

Set up the methods to create the text field, the filer and a drawrect method to create the graphic.


public function build(o:Object=null):void
{
// Btn
_alert = drawrect(new Sprite(),300, 200, 15, 0xffffff);
_alert.name = 'loginalert'
addChild(_alert)
_alert.x = 10;
_alert.y = 7;
_alert.buttonMode = true;

_alert.useHandCursor = true;
var tf:TextField = new TextField();
var filter:GlowFilter = getGlowFilter();
var myFilters:Array = [filter];
tf.filters = myFilters;
tf.height = 60;
tf.width = 300;
tf.y = 50
tf.multiline = true;
tf.wordWrap = true;
tf.selectable = false;
tf.text = "Hello, please click here";

var format1:TextFormat = new TextFormat();
format1.color = 0xFF0000;
format1.font = "Verdana";
format1.align = 'center'
format1.size = 18;
tf.setTextFormat(format1);
_alert.addChild(tf);
}



private function getGlowFilter():GlowFilter {
var color:Number = 0xFFCC00;
var alpha:Number = 0.8;
var blurX:Number = 8;
var blurY:Number = 8;
var strength:Number = 2;
var inner:Boolean = false;
var knockout:Boolean = false;
var quality:Number = BitmapFilterQuality.HIGH;
return new GlowFilter(color,
alpha,
blurX,
blurY,
strength,
quality,
inner,
knockout);
}

public function drawrect(sprite:Sprite, w:int, h:int, r:int, c:Number = 0x44b5cdf8):Sprite
{
var child:Shape = new Shape();
child.graphics.beginFill(c);
child.graphics.lineStyle(1, c + 1000);
child.graphics.drawRoundRect(0, 0, w, h, r);
child.graphics.endFill();
sprite.addChild(child);
return sprite;
}


Then you can apply your alpha to the graphic _alert. You can just assign a value to the alpha property e.g.


_alert.alpha = 0.5


or you can animate it with Tweener, Kitchensync or Flare. Thats it.

2 comments:

rmbeany said...

Excellent trick! Works like a charm :D.

If you don't want the filter to be actually shown, just set all the filter values to zero (alpha = 0, blurX = 0, etc). It will still allow you to use the special effects as stated.

Chaim said...

Thanks, that worked well

My Instagram