Image with percent width causes Y offset

Question

When I set a spark or mx image to a percent width, say 30%, the image is offset from the expected / desired Y location. I have the Image in a HBox and I'm expecting it to be flush with the top but it seems to maintain the same center point as the full sized image adding padding to the top.
Any suggestions?

Answer 1

Here is a test with stage size of 640x480 and image size of 640x480:
http://i.imgur.com/lxVk5.png
Here is the code from the view:
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    xmlns:sc="spark.core.*"
                    width="100%"
                    height="100%"
                    actionBarVisible="false"
                    creationComplete="init()">
  <fx:Script>
                    <![CDATA[
                              public function init():void {
                                        myBox.setStyle("backgroundColor","0xFF0000"); //red
                    ]]>
  </fx:Script>
          <mx:VBox id="myBox" verticalAlign="top" horizontalAlign="left">
  <s:Image width="30%" source="@Embed('images/smile.jpg')" />
  </mx:VBox>
</s:View>