AS3: Extending Loader, how to draw border on its content

Question

I'm extending Loader(), is it possible to draw a border around the content without resorting to some hacks? I understand Loader can't have any additional children, otherwise I would just create a shape to the contents size and add it. But is there a way to coerce or cast the content object in order to use the drawing API on it?

Answer 1

Hello,

Yes you can CAST the content of the Loader. When you load an image you can do this (after the image is fully loaded):

Bitmap(yourLoader.content);

And with a SWF, i assume you can do this (haven't tested it):

Sprite(yourLoader.content);

Answer 2

Usually you would just add the content to a display object when it's loaded and manipulate it as much as you want:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, eventCompleteHandler);
loader.load(new URLRequest(URL));

function eventCompleteHandler(event:Event):void
{
    addChild(createElementWithBorder(event.target.content));
}

function createElementWithBorder(content:DisplayObject):DisplayObject
{
    var container:Sprite = new Sprite();

    container.addChild(content);

    var border:Shape = container.addChild(new Shape()) as Shape;
    border.graphics.lineStyle(2,0x000000);
    border.graphics.drawRect(0, 0, content.width,content.height);

   return container;
}

... But if you still annoyed you cannot use the Loader as a DisplayObjectContainer, using composition may be the clue (the following is just a quick example and needs to be accommodated of course):

public class LoaderBorder extends Sprite
{

    private var loader:Loader;

    public function LoaderBorder()
    {
        loader = new Loader()
    }

    public function load(url:String):void
    {
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, eventCompleteHandler);
        loader.load(new URLRequest(url));
    }

    private function eventCompleteHandler(event:Event):void
    {
        loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, eventCompleteHandler);

        var content:DisplayObject = event.target.content;

        var border:Shape = new Shape();
        border.graphics.lineStyle(2,0x000000);
        border.graphics.drawRect(0, 0, content.width,content.height);

        addChild(content);
        addChild(border);

    }
}

To be used like a Loader :

var test:LoaderBorder = new LoaderBorder()
addChild(test);
test.load(URL);