UIComponent seems to have “padding/margins” set (Flex 3 to Flex 4 migration issue?)

Question

I have a Flex application that has a single UIComponent, which contains a single Bitmap object. In Flex 3 everything was good. In Flex 4, the same code results in an offset of the children within the UIComponent that I don't understand.

Here is the object tag of my .html file:

        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="320" height="480" id="MyId">
          <param name="allowScriptAccess" value="sameDomain" />
          <param name="allowFullScreen" value="false" />
          <param name="movie" value="MyFlexApp.swf" />
          <param name="quality" value="high" />
          <param name="bgcolor" value="#ffff00" />
          <embed allowScriptAccess="sameDomain" allowFullScreen="false" src="MyFlexApp.swf" quality="high" bgcolor="#ffff00" width="320" height="480" name="MyAppName" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
        </object>

Here is my .mxml file:

<?xml version="1.0"?>
<!-- usingas/UsingCDATA.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="init()" width="320" height="480" backgroundColor="#FF0000" styleName="plain">
  <mx:Script>
    <![CDATA[
    import mx.core.UIComponent;
    import MyClass;
    public function init() : void
    {
            var s:UIComponent = new MyClass();
            addChild( s );
    }
    ]]>
  </mx:Script>
</mx:Application>

And here is MyClass.as:

public class MyClass extends UIComponent
{
    ... <snip> ...

    screenBitmap = new Bitmap( screenBitmapData );
    addChildAt( screenBitmap, 0 );
    // screenBitmap.x = -160;
    // screenBitmap.y = -24;
    var t:TextField = new TextField();
    t.type = TextFieldType.INPUT;
    t.border = true;
    t.text = "hello";
    addChildAt( t, 1 );

    ... <snip> ...
}

Note that the tag has a yellow background color. I see that yellow background correctly filling hte 320x480 size of the .swf. And note that the Application has a red background color. Again, after a flash of yellow, I see that red background correctly filling the 320x480 size of the .swf, so I believe the Application itself is not offset.

But what I'm seeing is that the screenBitmap object appears offset within the display. It's 24 pixels too low and 160 pixels to the right (so the left edge of the bitmap starts exactly half-way across the app's display rectangle). I don't understand where those offsets are coming from. In particular, I don't know if the MyClass object is offset within the Application object (ie, as if the Application object has a "left padding" of 160 and a "top padding" of 24), or whether it's the MyClass object that has those paddings, which then apply to its children (the bitmap and the TextField). (I'm using "padding" here to mean something like a .css padding that Flex is somehow doing, even though I don't see mention of such a concept in the Flex docs.)

By uncommenting the two lines

    // screenBitmap.x = -160;
    // screenBitmap.y = -24;

I can get the bitmap to display "correctly", but it's not correct because mouse events on the bitmap are then offset incorrectly. I could of course compensate for the shifts in the handling of the mouse events also, but I want to understand why the shift is happening, instead of just blindly compensating for it.

Note that I also include a TextField object:

    var t:TextField = new TextField();
    t.type = TextFieldType.INPUT;
    t.border = true;
    t.text = "hello";
    addChildAt( t, 1 );

I did this just to make sure it wasn't anything funky about my bitmap object that was causing the shift. The text object gets the same shift, with its top left at 160, 24 within the overall .swf rectangle.

As I say, I didn't get these offsets in Flex 3. I'm using the exact same code, just compiling with the Flex 4 SDK now.

Any idea where the offsets are coming from?

Answer 1

Thanks very much to The_asMan and Sunil D. Here is the corrected .mxml file where the offset issue is no longer present:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark" applicationComplete="init()" width="320" height="480" backgroundColor="#FF0000">
  <fx:Script>
    import mx.core.UIComponent;
    import MyClass;
    public function init() : void
    {
            var s:UIComponent = new MyClass();
            addChild( s );
    }
    ]]>
  </fx:Script>
</s:Application>