[flexcoders] adding transparent images to a canvas

[ouaqa]

good morning fellow flexers. 

I've been struggling for the last 3 days with a very frustrating problem.

In a photo manipulation project, I use a canvas where I handle images.
So, an image is displayed in a canvas and I want to add a new image on top of 
it, let's say a cool wood-looking frame. The first image is a jpg embedded but 
the second image, the frame, is a transparent 32bits png file loaded on demand.
The png file is transparent, as far as I can tell in photoshop. Yet, when I 
load it, all the transparent bits appear white.

This problem is making me crazy and I don't know how to handle it. Any help 
would be appreciated.

Bellow are parts of my code :

In the canvas handling the images : 


->loading the image 
public function setImageFrame (AnImageSource : String) : void
{

        var request:URLRequest = new URLRequest(AnImageSource);
        frameImage = new Image() ;
        frameImage.addEventListener(Event.COMPLETE, onFrameReceptionComplete) ;
                
        frameImage.load(AnImageSource);

}

-> Adding the loaded image to the canvas
private function onFrameReceptionComplete (event : Event) : void
{
        var bounds : Rectangle = new Rectangle(0,0,this.width,this.height);     
                
        

        var rawFrame : Bitmap = Bitmap(frameImage.content );
        var rawBitmapDataFrame : BitmapData = new BitmapData (rawFrame.width , 
rawFrame.height , true,0x00000000) ;
        rawBitmapDataFrame.draw(rawFrame) ;

//display true
        trace (rawBitmapDataFrame.transparent); 
        rawFrame = new Bitmap(rawBitmapDataFrame) ;


        frameImage.source = LCUtilTools.cropAndResizeImage(rawFrame , bounds);
                        
//display true
        trace (Bitmap(frameImage.source).bitmapData.transparent); 
                         
        frameImage.smoothBitmapContent = true;

        this.addChild(frameImage);
}


the cropAndResize function (used to resize the image to the correct ratio.

public static function cropAndResizeImage (AnImage : Bitmap , ABounds : 
Rectangle) : Bitmap
{

        var celluleRawBitmap : BitmapData = AnImage.bitmapData  
        
        var originalWidth:Number = celluleRawBitmap.width;
        var originalHeight:Number = celluleRawBitmap.height;
        var newWidth:Number = originalWidth;
        var newHeight:Number = originalHeight;
        
        
        var scale : Number ;
        var m:Matrix = new Matrix();
                                
        var scaleX:Number = 1;
        var scaleY:Number = 1;
        if (originalWidth > ABounds.width || originalHeight > ABounds.height)
        {
                scaleX =  ABounds.width / celluleRawBitmap.width;
                scaleY = ABounds.height / celluleRawBitmap.height;
                scale = Math.max(scaleX, scaleY);
                newWidth = originalWidth * scale;
                newHeight = originalHeight * scale;     
        }
                
        m.scale(scale,scale);
        
        var zoomArea : Rectangle ;
        zoomArea = celluleRawBitmap.rect ;
        zoomArea.inflate(ABounds.width , ABounds.height);
        var editedBitmapData : BitmapData = new BitmapData (ABounds.width , 
ABounds.height , true ,0x00FFFFFF);
        editedBitmapData.draw(AnImage.bitmapData,m);

        return ( new Bitmap(editedBitmapData));
}

Any help would be really appreciated, I really don't know what to do or where 
to begin in order to solve this issue.