A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: sIFR with Gradient & Dropshadow filters

  1. #1
    Senior Member
    Join Date
    Feb 2002
    Location
    uk
    Posts
    222

    sIFR with Gradient & Dropshadow filters

    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?

    PHP Code:
    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(propval) {
        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 maximizeminmaxtruth ) {
        var 
    max min;
        var 
    min Math.ceil(2);
        if (
    1) {
            return 
    truth(max) ? max min;
        } else if(
    truth(n)) {
            return 
    arguments.callee(nmaxtruth);
        } else {
            return 
    arguments.callee(minntruth);
        }
    };

    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'10000Stage.widthStage.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(000x00000000000)];

    //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 = [11];
    // Set the position of each color. 
    var ratios:Array = [0,180];
    // Creates a variable with info about the Filter settings. 
    var myGradientBevelFilter = new GradientBevelFilter (190colorsalphasratios1616203"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(872fitsAtSize));
    };
    onResize();
    Stage.addListener(this);

    stop(); 

  2. #2
    Senior Member
    Join Date
    Feb 2002
    Location
    uk
    Posts
    222
    Have found the solution, very simply just add the filters seperately rather than in an array.

    PHP Code:
    tf.filters = [myGradientBevelFilter];
    tf.filters = [our_shadow]; 

  3. #3
    Junior Member
    Join Date
    Aug 2009
    Posts
    1
    I'm sorry because this old but I'm having the same problem.

    I would like to use sifr for a heading of mine and want to have a horizontal gradient on it. From top color: f8f7eb till the bottom color: d2d1c2 . I think I need to do this with a ColorMatrixFilter but I have no idea on how to start with this.

    This is what I already have:
    sIFR.replace(font, {
    selector: '.main .second',
    css: '.sIFR-root { color: #888778;letter-spacing: -2; display:block; width:31px; float:left;}' ,
    wmode:'transparent' ,
    filters: {
    DropShadow: {
    distance: 1
    ,color: '#ffffff'
    ,strength: 1 ,alpha : 0.66, angle: 90
    }
    }
    });

    everything works as of the effect applied but I would like to have that gradient aswell can anyone help me please

  4. #4
    Senior Member
    Join Date
    Feb 2002
    Location
    uk
    Posts
    222

    sIFR3?

    Hi,

    Looks like you're using sIFR3?

    I never got the GradientBevelFilter working in this example but did manage to create a Gradient effect using:

    BevelFilter: {
    distance: 4
    ,angle: 90
    ,highlightColor: 0xFFFFFF
    ,highlightAlpha: 1
    ,shadowColor: 0x999999
    ,shadowAlpha: 1
    ,blurX: 5
    ,blurY: 5
    ,strength: 4
    ,quality: 3
    ,type: 'inner'
    ,knockout: false
    }

    Try that in your JS config (adjust the colours to match)

    Hope it helps.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center