Search code examples
actionscript-3apache-flexflex3

Image object white background showing

I have an Image object that gets resized to the containers size when the image loads.
The images that it will load are dynamic in size so after resize I end up with a sliver of the image object's white background showing.

How can I make the Image object not have a white background and be transparent.
Parts of the PNG's have transparent parts but show up as white due to the white background of the object is it loaded into.

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" headerHeight="20" >

  <mx:Script>
    <![CDATA[
      public function set source( val:String ):void{
        this.img.source = val;
      }
      private function onLoad( e:Event ):void{
        // resize image on load to fit
        var scale:Number = (this.height - 38) / this.img.contentHeight; // 38 is adjustment for headheight and padding
        this.img.scaleX = scale;
        this.img.scaleY = scale;
      }
    ]]> 
  </mx:Script>

  <!-- how do I make this image object have a transparent background -->
  <mx:Image id="img" complete="onLoad(event)" />

</mx:Panel>

[EDIT] In the screen shot visible are 2 of the objects made from the code I posted above.
As you can see there is a white border.
enter image description here



and here is one of the PNGs
This png has a transparent 1 inch border at 350@PPI this is 72 PPI So a tad smaller
You can not see the the border here obviously but if you drag it to your desktop and open in photoshop you will see it
enter image description here

[EDIT]
As SuperSaiyen suggested I added backgroundColor="#000000" to the panel and I got this result. As you can see I got a black border now.
enter image description here


So i went ahead and added backgroundAlpha="0" along with backgroundColor="#000000" to the panel and got this.
enter image description here
So now I almost have it but there is still that bluish color around it. Its not quite 100% transparent yet.
I really have no idea why the panel background would change the image tag.
I guess some kind of inheritance from the parent is going on.
Still need to get rid of the blue.

Solution

  • Instead of setting the scale, try this:

    <mx:Image id="img" height="{this.height-38}" maintainAspectRatio="true" />

    I attempted to recreate your issue, and even with the scale I did not see the white borders. enter image description here

    I have a black border because that is the background of the panel...

    <mx:Panel id="thePanel" headerHeight="20"
              horizontalAlign="center" verticalAlign="middle"
              height="200" width="150"
              backgroundColor="#000000">

        <!-- how do I make this image object have a transparent background -->
        <mx:Image id="img" height="{thePanel.height-38}" maintainAspectRatio="true" />

    </mx:Panel>

    Edit: So the background you're seeing is the background of the box behind the panel, not the image (see opaqueBackground prop on panel). What you want then is to set the background of the panel to be the same color as the borders of the panel. Is panel the right container to use? How about a HBox with roudned corners?

    <mx:VBox id="thePanel" cornerRadius="4" backgroundColor="0xd1dbe9"
             horizontalAlign="center" verticalAlign="middle"
             height="200" width="150"
             paddingBottom="5" paddingLeft="5" paddingTop="5">
        <mx:Label text="Bind to title String" />
        <mx:Image id="img" width="100%" height="100%"/>
    </mx:VBox>

    enter image description here