Simplebutton image is larger than it actually is

Question

I'm creating a button I use beginBitmapFill method to add image to it. Everything works normally, the problem is that the image loaded by a Loader () is greater than it actually is

Class that creates the button

package mode {
 import flash.display.Sprite;
 import org.osmf.net.StreamingURLResource;
 
 public class LoadButton extends Sprite 
 {
  public var Save;
  public function LoadButton(x:uint,save:String,url:String) 
  {
   var button:CustomSimpleButton = new CustomSimpleButton(url);
   button.x = x;
   Save = save;
   addChild(button);
  }
 }
}

import flash.display.*;
import flash.display.Bitmap;
import flash.display.DisplayObject;
import flash.display.Shape;
import flash.display.SimpleButton;
import flash.events.*;
import flash.events.EventDispatcher;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.geom.Matrix;

class CustomSimpleButton extends SimpleButton 
{
 private var upColor:uint   = 0xFFCC00;
 private var overColor:uint = 0xCCFF00;
 private var downColor:uint = 0x00CCFF;
 private var sizew:uint      = 100;
 private var sizeh:uint      = 88;
 
 public function CustomSimpleButton(url:String) 
 {
  downState      = new ButtonDisplayState(downColor, sizew,sizeh,url);
  overState      = new ButtonDisplayState(overColor, sizew,sizeh,url);
  upState        = new ButtonDisplayState(upColor, sizew,sizeh,url);
  hitTestState   = new ButtonDisplayState(upColor, sizew * 2,sizeh,url);
  hitTestState.x = -(sizew / 4);
  hitTestState.y = hitTestState.x;
  useHandCursor  = true;
 }
}

class ButtonDisplayState extends Shape 
{
 private var bgColor:uint;
 private var size:uint;
 private var sizeh:uint;
 
 public function ButtonDisplayState(bgColor:uint, sizew:uint,sizeh:uint,url:String) 
 {
  this.bgColor = bgColor;
  this.size    = sizew;
  this.sizeh = sizeh;
  draw(url);
 }
 
 private function draw(url:String):void 
 {
  var myLoader:Loader = new Loader(); 
  var image:Bitmap;
  var uri = new URLRequest(url);
  myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event)
  {
   image = new Bitmap(e.target.content.bitmapData);

   graphics.beginBitmapFill(image.bitmapData);
   graphics.drawRect(0, 0, 100, 88);
   graphics.endFill();
  });
  myLoader.load(uri); 
 }
}

How the image is 100x88

as it is

Answer 1

The reason it is showing up cropped like that, is because the BitmapData is larger than the area you are filling.

Before filling the shape with the loaded BitmapData, you need to sale it down to the appropriate size.

Based on the answer to this question, you could do the following:

    var scaleAmount:Number;
    if(e.target.content.width >= e.target.content.height){
        scaleAmount = size / e.target.content.width;
    }else{
        scaleAmount = sizeh / e.target.content.height;
    }
    var scaledBitmapData:BitmapData = scaleBitmapData(e.target.content.bitmapData, scaleAmount);

    graphics.beginBitmapFill(scaledBitmapData);
    graphics.drawRect(0, 0, size, sizeh);
    graphics.endFill();

    function scaleBitmapData(bitmapData:BitmapData, scale:Number):BitmapData {
        scale = Math.abs(scale);
        var width:int = (bitmapData.width * scale) || 1;
        var height:int = (bitmapData.height * scale) || 1;
        var transparent:Boolean = bitmapData.transparent;
        var result:BitmapData = new BitmapData(width, height, transparent);
        var matrix:Matrix = new Matrix();
        matrix.scale(scale, scale);
        result.draw(bitmapData, matrix);
        return result;
    }

It might be easier though, to just make your button state a Sprite and add the loaded Bitmap object and scale it directly:

class ButtonDisplayState extends Sprite
{
    private var bgColor:uint;
    private var image:Bitmap;
    private var size:uint;
    private var sizeh:uint;

    public function ButtonDisplayState(bgColor:uint, sizew:uint,sizeh:uint,url:String) 
    {
        this.bgColor = bgColor;
        this.size    = sizew;
        this.sizeh = sizeh;
        loadImage(url);
    }

    private function loadImage(url:String):void 
    {
        var myLoader:Loader = new Loader();
        var uri = new URLRequest(url);
        myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event)
        {
            image = new Bitmap(e.target.content.bitmapData);

            //scale the bitmap while retaining aspect ratio
            //scale based off which dimension (width or height) is bigger
            if(image.width >= image.height){
                image.scaleX= size / image.width; //scale it to the width specified
                image.scaleY = image.scaleX; //make the height aspect ratio match the widths
            }else{
                image.scaleY = sizeh /image.height;
                image.scaleX = image.scaleY;
            }
            addChild(image);  //add it to the display list of this object
        });
        myLoader.load(uri); 
    }
}