Skip to main content
Participant
August 3, 2011
Answered

How to apply Filters (eg DropShadowFilter)

  • August 3, 2011
  • 1 reply
  • 963 views

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!

This topic has been closed for replies.
Correct answer Yong-Tian

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;
   
}

1 reply

Participant
August 4, 2011

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

Participant
August 4, 2011

.