How to apply Filters (eg DropShadowFilter)

[Lilolbear13]

Hello awesome peoples! Straight to the point: is there a good place to apply filters such as a drop shadow filter?

Applying it to the container results in some wierdness. The cursor and selection highlighting both get shadows and the highlighting does some other strange things. Is there right way to do this? If this isn't known ground could you provide me a hint as to which class I might extend where it would only give me the text that I could then apply the filters by hand to?

Thanks!

[Yong-Tian]

Hi Lilo,

Here is a simple sample of shadow filter. I hope it is helpful to you, thanks!

package{

import flash.display.Sprite;

import flash.filters.*;

import flashx.textLayout.elements.ParagraphElement;

import flashx.textLayout.elements.SpanElement;

import flashx.textLayout.elements.TextFlow;

import flashx.textLayout.container.ContainerController;

public class ShadowFilter extends Sprite

{

public function ShadowFilter()

{

var textFlow:TextFlow = new TextFlow();

var span:SpanElement = new SpanElement();

var paragraph:ParagraphElement = new ParagraphElement();

span.text = "I am shadow filtered";

paragraph.addChild(span);

textFlow.addChild(paragraph);

textFlow.fontSize = "32";

textFlow.paddingLeft = "150";

textFlow.paddingTop = "100";

textFlow.flowComposer.addController(new ContainerController(this, 500, 300));

textFlow.flowComposer.updateAllControllers();

var filterArray:Array = new Array();

filterArray.push(new DropShadowFilter(3, 45, 0x000000, 0.75, 3, 3, 0.75, 3));

this.filters= filterArray;

}

}

}

Best wishes,

Yong Tian

[Yong-Tian]

.

[Yong-Tian · Accepted solution]

Hi Lilo, you should extends the Class ContainerController and overide the addSelectionContainer() and some other

related method. And here is a sample, thanks!

package{
            import flash.display.DisplayObject;
            import flash.display.DisplayObjectContainer;
            import flash.display.Sprite;
            import flash.filters.*;
            import flash.display.Shape;
            import flash.display.BlendMode;
           
            import flashx.textLayout.container.ContainerController;
            import flashx.textLayout.edit.ISelectionManager;
            import flashx.textLayout.edit.SelectionManager;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
            import flashx.textLayout.elements.TextFlow;
       
           
            public class ShadowFilter extends Sprite
            {
                private var _textLineContainer:Sprite;
               
                public function ShadowFilter()
                {
                    var textFlow:TextFlow = new TextFlow();
                    var span:SpanElement = new SpanElement();
                    var paragraph:ParagraphElement = new ParagraphElement();
                    span.text = "I am shadow filtered";
                    paragraph.addChild(span);
                    textFlow.addChild(paragraph);
                    textFlow.fontSize = "32";
                    textFlow.paddingLeft = "150";
                    textFlow.paddingTop = "100";
                    var filterSprite:Sprite = new Sprite();
                    var containerController:CustomContainerController = new CustomContainerController(this, 500, 300);
       
                    filterSprite.x = 20;
                    filterSprite.y = 20;
                    textFlow.interactionManager = new SelectionManager();
                    var selectManager:ISelectionManager = textFlow.interactionManager;
       
                    textFlow.flowComposer.addController(containerController);
                    textFlow.flowComposer.updateAllControllers();
   
        }
    }
}

import flash.display.BlendMode;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.display.Shape;
import flash.display.Sprite;
import flash.filters.*;
import flash.text.engine.TextLine;

import flashx.textLayout.container.ContainerController;
import flashx.textLayout.tlf_internal;

class CustomContainerController extends ContainerController
{
   
    public function CustomContainerController(container:Sprite,compositionWidth:Number=100,compositionHeight:Number=100)
    {
        super(container,compositionWidth,compositionHeight);
       
        // We'll put all text lines in a nested container
        // Filters applied to this container won't affect other objects like selection or background shapes
        _textLineContainer = new Sprite();
        //_textLineContainer.filters = [ new DropShadowFilter() ]; // apply a filter  (for illustration)
        container.addChild(_textLineContainer);
    }
    // Return the index where the first text line should appear in its parent
    // Since our _textLineContainer only holds text lines, return zero
    protected override function getFirstTextLineChildIndex():int
    {
        return 0;
    }
    // Add a text line at the specified index
    protected override function addTextLine(textLine:TextLine, index:int):void
    {
        if(index == 0)
//            textLine.filters = [ new BlurFilter(3, 3, BitmapFilterQuality.HIGH) ];
            textLine.filters = [ new DropShadowFilter() ];
            _textLineContainer.addChildAt(textLine, index);
    }
   
    protected override function addInlineGraphicElement(parent:DisplayObjectContainer, inlineGraphicElement:DisplayObject, index:int):void
    {
        parent.addChildAt(inlineGraphicElement, index);
       
    }   
   
    // Remove a text line, but only if it is in _textLineContainer
    // (A text line may have moved to another container because of 'shuffling')
    protected override function removeTextLine(textLine:TextLine):void
    {
        if (_textLineContainer.contains(textLine))
        {
            textLine.filters = null;
            _textLineContainer.removeChild(textLine);
        }
    }
   
    // Add the container for selection shapes (block or point selection)
    protected override function addSelectionContainer(selectionContainer:DisplayObjectContainer):void
    {
        // If selection container is opaque or has normal blend mode, put selection container behind the text lines, else in front
        var filter:BlurFilter = new BlurFilter(10, 10, BitmapFilterQuality.HIGH);
        var myFilters:Array = new Array();
        myFilters.push(filter);
        selectionContainer.filters = myFilters;
        var index:int = selectionContainer.blendMode == BlendMode.NORMAL && selectionContainer.alpha == 1 ? container.getChildIndex(_textLineContainer) : container.numChildren;
        container.addChildAt(selectionContainer, index);
    }
   
    // Remove the container for selection shapes
    protected override function removeSelectionContainer(selectionContainer:DisplayObjectContainer):void
    {
        container.removeChild(selectionContainer);
    }
   
    // Add the background shape
    protected override function addBackgroundShape(shape:Shape):void
    {
        container.addChildAt(shape, 0); // behind everything else, so use index 0
    }
    private var _textLineContainer:Sprite;
   
}

[Lilolbear13]

Thank you Yong-Tian! this is a better answer than I had hoped for. Many thanks!