The Effect of Borders on Sizing of Flash Graphics
I have a SWF file containing two symbols which have are "exported for ActionScript". These are both simple squares whose fill is equal in size, but one has a border and the other does not.
I would like to display these graphics side-by-side in my Flash application, and I would like them both to be scaled (enlarged) to the same dimensions. I've written some fairly simple code to load these symbols from the SWF and display them (see below), but the bordered element is not sized as expected:
The border causes the graphic to be reduced in size by more than the border enlarges it.
I used the following code to perform the above test.
<?xml version='1.0'?>
<s:Application
xmlns:fx='http://ns.adobe.com/mxml/2009'
xmlns:s='library://ns.adobe.com/flex/spark'
xmlns:mx="library://ns.adobe.com/flex/mx"
initialize='init(drawArea)'
>
<mx:UIComponent id='drawArea' left='0' top='0' width='250' height='250'></mx:UIComponent>
<fx:Script><![CDATA[
import mx.controls.SWFLoader;
static function init(drawArea:UIComponent):void {
var loader:SWFLoader = new SWFLoader();
loader.addEventListener(Event.COMPLETE, onSwfLoaded);
loader.load('./borderings.swf');
function onSwfLoaded(e:Event):void {
var getDefinition:Function = e.target.loaderContext.applicationDomain.getDefinition;
var Bordered:Class = getDefinition('bordered');
var bordered:MovieClip = new Bordered;
bordered.x = 100;
bordered.y = 100;
bordered.width = 100;
bordered.height = 100;
var borderedContents:DisplayObject = bordered.getChildAt(0);
assert(bordered.numChildren === 1);
assert(borderedContents.x == 0);
assert(borderedContents.y == 0);
assert(borderedContents.width == 14.1);
assert(borderedContents.height == 14.1);
drawArea.addChild(bordered);
var Borderless:Class = getDefinition('borderless');
var borderless:MovieClip = new Borderless;
borderless.x = 250;
borderless.y = 100;
borderless.width = 100;
borderless.height = 100;
var borderlessContents:DisplayObject = borderless.getChildAt(0);
assert(borderless.numChildren === 1);
assert(borderlessContents.x == 0);
assert(borderlessContents.y == 0);
assert(borderlessContents.width == 13.1);
assert(borderlessContents.height == 13.1);
drawArea.addChild(borderless);
drawArea.graphics.lineStyle(1.0, 0xFF0000, 1.0);
drawArea.graphics.moveTo(25, 50);
drawArea.graphics.lineTo(325, 50);
drawArea.graphics.moveTo(25, 150);
drawArea.graphics.lineTo(325, 150);
}
}
static function assert(pass:Boolean, msg:String=null):void {
if (!pass) throw new Error(msg || 'assertion failed');
}
]]></fx:Script>
</s:Application>
The complete IntelliJ test project may be found in this git repository on BitBucket.
The Flash editor claims that the symbols both have the same dimensions: 13.10px by 13.10px, although visually this appears to be excluding the outer half of the border:
However, when I inspect instances of these graphics using ActionScript it reports that the the bordered graphic is larger, at 14.10px by 14.10px.
Why is the sizing of these graphics affected by the border in this odd way? How can I cause the bordered and unbordered versions of this graphic to be scaled to the same dimensions?



