www.phpvrouwen.nl

our work, our cool

Posts Tagged ‘filter’

UILoader and borders ..

July 1st, 2008

Today i make a few of you fellow developers a very happy. When you are developing a image gallery you would like to draw a nice white border around your images. Now we all know that is not a problem when you are working with landscape format picture. Lets look at a common method used to give a UILoader a nice white border

PLAIN TEXT

JAVASCRIPT:

import flash.display.Sprite;
import flash.net.URLRequest;
import fl.containers.UILoader;
import flash.events.Event;
var myLoader:UILoader = new UILoader();
myLoader.addEventListener(Event.COMPLETE, loadComplete);
myLoader.width = 400;
myLoader.height = 300;
myLoader.x = stage.stageWidth * .5 - myLoader.width /2;
myLoader.y = stage.stageHeight * .5 - myLoader.height / 2;
addChild (myLoader);
myLoader.load (new URLRequest ('BOY.JPG'));
function loadComplete (e:Event):void
{
var myBorder:Sprite = new Sprite();
myBorder.graphics.lineStyle(2, 0xFFFFFF);
myBorder.graphics.drawRect (0,0,myLoader.width, myLoader.height);
myLoader.addChild (myBorder);
}

As you can see above here we have a cosmetic blooper because the border does not go around the inner content (where you want it) of the UILoader but the outer content of the loader its self leaving a black hole between your image and your border.

Not to worry my friends there is a solution to this little issue. If you trace UIloader.content you will see that it is in fact a Bitmap Object !. And what can you do with Bitmap objects my friends ? RIGHT !! Apply filters to them. I was abled to solve the issue by adding a filter to the content part of the UILoader on the stage its self. So lets remove the Sprite method and add a nice thin glow filter around it so i looks like a white border. See for the proper code below...

PLAIN TEXT

JAVASCRIPT:

import flash.net.URLRequest;
import fl.containers.UILoader;
import flash.events.Event;
import flash.filters.GlowFilter;
var myLoader:UILoader = new UILoader();
myLoader.addEventListener(Event.COMPLETE, loadComplete);
myLoader.width = 400;
myLoader.height = 300;
myLoader.x = stage.stageWidth * .5 - myLoader.width /2;
myLoader.y = stage.stageHeight * .5 - myLoader.height / 2;
addChild (myLoader);
myLoader.load (new URLRequest ('BOY.JPG'));
function loadComplete (e:Event):void
{
var glow = new GlowFilter (0xFFFFFF, 1,2,2,100);
var oContent = myLoader.content;
oContent.filters = [glow];
}

Now you can see its all coming to gather in the end no need to worry any more we just acomplished our goal of putting a border around the inner content its self.

PS one more note

PLAIN TEXT

JAVASCRIPT:

// <!-- SNIP
var oContent = myLoader.content;
oContent.filters = [glow];
// SNIP -->

As you see here im assigning the filter to a reference of the myLoader.content, i did this because myLoader its self is read-only so keep this in mind.