Comments on: How To Make an Image With Border

By: Andrei Ionescu

Andrei Ionescu — Fri, 07 May 2010 07:40:31 +0000

Rick, thanks for comment! Did you see the next article in the series (http://www.flexer.info/2008/06/12/continuing-image-with-border/)? Isn't it the same thing you wanted?

By: Rick Seeler

Rick Seeler — Thu, 06 May 2010 15:42:31 +0000

This post was a great help. Thanks.
But, it doesn’t deal with Images that have verticalAlign or horizontalAlign values set to anything other than their defaults.
I was able to fix the code by changing the call to the drawRect method to:

graphics.drawRect(
    -getStyle('borderThickness') + contentX, 
    -getStyle('borderThickness') + contentY, ...

Where contentX and contentY are:

var contentX:Number = (w - contentWidth) * getHorizontalAlignValue();
var contentY:Number = (h - contentHeight) * getVerticalAlignValue();

I had to make copies of the getHorizontalAlignValue() and getVerticalAlignValue() methods from the source of SWFLoader.as as they are private. I’ll duplicate them here for completeness:

protected function getHorizontalAlignValue():Number
{
    var horizontalAlign:String = getStyle("horizontalAlign");
 
    if (horizontalAlign == "left")
        return 0;
    else if (horizontalAlign == "right")
        return 1;
 
    // default = center
    return 0.5;
}
 
protected function getVerticalAlignValue():Number
{
    var verticalAlign:String = getStyle("verticalAlign");
 
    if (verticalAlign == "top")
        return 0;
    else if (verticalAlign == "bottom")
        return 1;
 
    // default = middle
    return 0.5;
}

By: qualle

qualle — Mon, 13 Jul 2009 11:43:04 +0000

Thanks! Great Script!

By: FLEX{er} » Blog Archive » Importing Image With Border in a Panel

FLEX{er} » Blog Archive » Importing Image With Border in a Panel — Mon, 12 Jan 2009 09:04:23 +0000

[...] of contentsHow To Make an Image With BorderContinuing Image With BorderImporting Image With Border in a [...]

By: Andrei Ionescu

Andrei Ionescu — Mon, 12 Jan 2009 08:27:47 +0000

Hello Mike! Thank for your interest in this component. The component in the next article in this series is the complete one. I'll do an article showing how to use it in a panel.

By: Mike

Mike — Sun, 11 Jan 2009 20:22:05 +0000

Hi,

Great tutorial, but…
I can’t import this thing.
I mean: I want to import this (ImageBorder) component in an existing component (panel), which is implemented in the main program.
Any idea how to ?

Thx!

By: dayg

dayg — Thu, 25 Sep 2008 06:26:51 +0000

I was looking for a way to add a border to the Image component and got to your post. However, I didn’t want to write another component just to achieve this affect. In the end, I just placed my Image components inside a Box component with borders.

HTH.

By: Justin Buser

Justin Buser — Sun, 31 Aug 2008 22:10:58 +0000

As with all my sample code that can be found on Adobe Livedocs I try to steer people in the right direction more than simply telling them how to do something. After all, the best way to learn something is to figure it out for yourself but with Flex sometimes it’s better if you get a little push in the right direction.

By: FLEX{er} » Blog Archive » Continuing Image With Border

FLEX{er} » Blog Archive » Continuing Image With Border — Thu, 12 Jun 2008 09:42:17 +0000

[...] « How To Make an Image With Border [...]