sIFR with Gradient & Dropshadow filters

[bencallaway_uk]

Hi guys,

I have the need for flash text (sIFR) which has a gradient AND drop-shadow filter applied.

Everything is working nicely apart from the filters.

The filters are applied in order and the gradient seems to also effect the dropshadow. e.g. the dropshadow also has the gradient applied to it making it go from light to dark rather than a solid black shadow.

How can I add the filters independently?

CODE:

// check if this swf is being served from a list of domains (passed as arguments)
function isFrom() {
    allowed = '|' + arguments.join('|') + '|';
    var domain = _url.split('/')[2];
    if(
       (allowed.indexOf('localhost') != -1) || 
       (_url.indexOf('http') == -1) ||
       (allowed.indexOf('|*|') != -1) || 
       (allowed.indexOf('|' + domain + '|') != -1)
    ) return true;
    return false;
};

function base(prop, val) {
    var tmp = tf.styleSheet.getStyle('*') || {};
    tmp[prop] = val;
    tf.styleSheet.setStyle('*', tmp);
};

// fast text resizing (see: [url]http://lukelutman.com/articles/2006/10/15/copy-fitted-text[/url])
function maximize( min, max, truth ) {
    var r = max - min;
    var n = min + Math.ceil(r / 2);
    if (r / 2 < 1) {
        return truth(max) ? max : min;
    } else if(truth(n)) {
        return arguments.callee(n, max, truth);
    } else {
        return arguments.callee(min, n, truth);
    }
};

function fitsAtSize(size) {
    base('fontSize', size);
    return (tf.maxscroll == 1);
};

// setup the stage
Stage.align = 'TL';
Stage.scaleMode = 'noscale';
Stage.showMenu = false;

// read text and css from flashvars
txt = txt || 'Please pass in <a href="#">your</a> text.';
css = css || 'a { color: #0000FF; text-decoration: underline; }';

// create the textfield
createTextField('tf', 100, 0, 0, Stage.width, Stage.height);

// basic setup
tf.condenseWhite = true;
tf.embedFonts = true;
tf.html = true;
tf.multiline = true;
tf.selectable = false;
tf.wordWrap = true;

// stylesheet
tf.styleSheet = new TextField.StyleSheet();
tf.styleSheet.parseCSS(unescape(css));
// grab the font name from the textfield on stage
base('fontFamily', font.getTextFormat().font);

// anti-aliasing
tf.antiAliasType = 'advanced';
tf.sharpness = 0;
tf.thickness = 0;
// an 'invisible' drop shadow fixes coloured anti-aliasing artifacts
tf.filters = [new flash.filters.DropShadowFilter(0, 0, 0x000000, 0, 0, 0, 0, 0)];

//FILTERS
import flash.filters.*;
//DROP SHADOW
//This is the offset the shadow has in pixels
var distance:Number = 2;
//Here we set the angle the shadow makes.
var angle:Number=45;
//Set the color of the shadow
var color:Number=0x000000;
//this sets the alpha of the shadow, dont use values like 10,60 etc
//instead use values like .1 and .6
var alpha:Number=0.7;
//Setup how much horizontal blur you want to have. 
var blurX:Number=3;
//Setup how much vertical blur you want to have. 
var blurY:Number=3;
//This value means the strenght of the spread of the shadow
//very high values wont give a nice result
var strength:Number=1;
//This represents the number of times the dropShadowFilter is applied to your object
//so if you set this to a higher number the shadow will look more clear.
var quality:Number=3;
//Set this variable to true and you will have an inner shadow
var inner:Boolean=false;
//If you set 'knockout' to true it will make the object's fill transparent and reveals the background color of the document.
var knockout:Boolean=false;
//if you set this variable to 'true' the object on which we dropped the shadow will be inviible, so you
//only see the shadow itself
var hideObject:Boolean=false;
//Here we actually create the drop shadow by creating an instance of the DropShadowFilter with the keyword 'new'.
//We give this new instance the name 'our_shadow'.
//The variables between the (...) are the variables we just setup above and those values are plugged into here to create the 
//shadow how we wanted it to be.
var our_shadow = new DropShadowFilter(distance,angle,color,alpha,blurX,blurY,strength,quality,inner,knockout,hideObject);

//FILTERS
//DROP SHADOW
// The Arrays (lists) below must all have the same number of entries.
// Lists the colors to use in the Gradient.
var colors:Array = [0x000000,0xFFFFFF];
// Sets the transparency of each color.
var alphas:Array = [1, 1];
// Set the position of each color. 
var ratios:Array = [0,180];
// Creates a variable with info about the Filter settings. 
var myGradientBevelFilter = new GradientBevelFilter (1, 90, colors, alphas, ratios, 16, 16, 20, 3, "inner", false);
// Applies the filter to the object named myObject.

//APPLY FILTERS
tf.filters = [myGradientBevelFilter,our_shadow];

// protect the swf
if(isFrom('*')) {
    // set the text
    tf.htmlText = '<*>' + unescape(txt) + '</*>';
} else {
    tf.htmlText = '<*>Access Denied.</*>';
}

// resize the text
function onResize () {
    tf._width = Stage.width;
    tf._height = Stage.height;
    tf.filters = [tf.filters.pop(),myGradientBevelFilter,our_shadow]; // reapply the filter
    base('fontSize', maximize(8, 72, fitsAtSize));
};
onResize();
Stage.addListener(this);

stop();