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
-
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...
-
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
-
// <!-- 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.
Download both the good and bad code here
Loading ...