How to resize dynamically loaded image into flash (as3)

Question

Hi

Am struggling to find the right as3 code to resize an image once it is dynamically called into the stage and placed in a MC. I am loading using:

var myLoader :Loader = new Loader(); 
mc.addChild(myLoader);
var url :URLRequest = new URLRequest("myimage.jpg"); 
myLoader .load(url );

The stage will eventually open up into fullscreen (works ok) so I need to keep the image in its original size which is much bigger than the stage.

What I need to do is shrink it on loading to the same height as the stage whilst keeping the width in proportion (oh and center it). I have tried all sorts of codes but cant find anything to work as all I have managed to do is resize the MC containing the image but NOT the image itself. Any guidance as to the correct code would be greatly appreciated.

I am guessng it is as simple as something like

 "myimage".x=600;

but if so what is the correct way to write the image name, as I have written it seems erroneous. Many thanks

Ed

Answer 1

Hi Ed,

you need to add a listener to listen for the INIT event on what you're loading.

And you don't need to resize the image.jpg file itself (and the way you're trying to address it won't work). You can instead resize the loader.

If you check out the AS3 Docs for LoaderInfo you'll find an example at the end that shows how to add the listeners. (Note that the listener is added to the contentLoaderInfo object, not the Loader itself).

You can then use the event handler to do the resize. The AS3 Docs show an example in the initHandler that just trace some stuff out. If you did loader.x = 600 then you'd get what you need.

Answer 2

You have to wait the image is loaded and then you can resize your loader for example:

package {
 import flash.display.MovieClip;
 import flash.display.Sprite;

 import flash.display.DisplayObject;
 import flash.display.Loader;
 import flash.display.LoaderInfo;
 import flash.events.Event;

 public class Test extends Sprite {

  public function Test(){
    super();

    if (stage) {
      init();
    } else {
     addEventListener(Event.ADDED_TO_STAGE, init, false, 0, true);
    }
  }

  public var mc:MovieClip;

  private function init(e:Event=null):void{
   if (e!=null) {
     e.target.removeEventListener(e.type, arguments.callee);
   }

   mc = new MovieClip();
   addChild(mc);

   var myLoader:Loader = new Loader(); 
   mc.addChild(myLoader);

   // listen when the image is fully loaded
   myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);


   var url :URLRequest = new URLRequest("myimage.jpg"); 
   myLoader.load(url);
  }

  private function onImageLoaded(e:Event):void {
   var li:LoaderInfo = e.target as LoaderInfo;
   li.removeEventListener(e.type, arguments.callee);

   // resize the loader while preserving ratio
   var ldr:Loader=li.loader;
   var mw:Number = stage.stageWidth / ldr.width;
   var mh:Number = stage.stageHeight / ldr.height;

   var ratio:Number = (mw < mh) ? mw : mh;

   ldr.width *= ratio;  // you can also use ldr.scaleX=ratio;
   ldr.height *= ratio; // you can also use ldr.scaleY=ratio;

   // center mc on stage
   mc.x=0.5*(stage.stageWidth-mc.width);
   mc.y=0.5*(stage.stageHeight-mc.height);
  }
 }
}

Answer 3

You could also try the Loader classes at
http://www.greensock.com/loadermax/

They do a great job of simplifying & streamlining the loading process , with a few nice perks on top of it all.

Check the ImageLoader class http://www.greensock.com/as/docs/tween/com/greensock/loading/ImageLoader.html

particularly how you can set a bunch of optional vars properties before loading.

Here's a small extract from the example given in the docs...

//create an ImageLoader:
 var loader:ImageLoader = new ImageLoader("img/photo1.jpg", 
 //here's the sweet part :)
 {name:"photo1", 
 container:this, 
 x:180, 
 y:100, 
 width:200, //here you could set the stageWidth for instance
 height:150, //and the stageHeight here
 scaleMode:"proportionalInside", //this one will definitely help you , check the docs!
 centerRegistration:true, 
 onComplete:onImageLoad});

Answer 4

I had loads of errors with the above code, apparently said cannot use nested public class or soemthing, so I removed the package and public functions and I got it working with this code

     import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.display.DisplayObject;
 import flash.display.Loader;
 import flash.display.LoaderInfo;
 import flash.events.Event;
   var myLoader:Loader = new Loader(); 
   mc.addChild(myLoader);
   myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
   var url :URLRequest = new URLRequest("im1.jpg"); 
   myLoader.load(url);
function onImageLoaded(e:Event):void {
   var bit:Bitmap = e.target.content;
    if(bit != null)
    bit.smoothing = true;
   var li:LoaderInfo = e.target as LoaderInfo;
   li.removeEventListener(e.type, arguments.callee);
   var ldr:Loader=li.loader;
   var mw:Number = stage.stageWidth / ldr.width;
   var mh:Number = stage.stageHeight / ldr.height;
   var ratio:Number = (mw < mh) ? mw : mh;
   ldr.width *= ratio;  // you can also use ldr.scaleX=ratio;
   ldr.height *= ratio; // you can also use ldr.scaleY=ratio;
   mc.x=0.5*(stage.stageWidth-mc.width);
   mc.y=0.5*(stage.stageHeight-mc.height);
  }

Even added some smoothing in there. I need to study ´cause Im not sure what the difference is between public and private functions?

One further problem guys, I can successfuly dynamically load images if they are in the same folder as the swf that is loading them but if I try to hold the images in a seperate file and call them with something like

var url:URLRequest...etc ("stills/image1.jpg"); they just wont load. See anything wrong ??

Again MANY THANKS for the assistance

Ed

Answer 5

Hi,

I try answer your questions

 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.display.DisplayObject;
 import flash.display.Loader;
 import flash.display.LoaderInfo;
 import flash.events.Event;

   var myLoader:Loader = new Loader(); 
   var image:Bitmap;
   var url :URLRequest = new URLRequest("im1.jpg");
   myLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImageLoaded);
   myLoader.load(url);

   function onImageLoaded(e:Event):void {
      image = new Bitmap(e.target.content.bitmapData);
      var mw:Number = stage.stageWidth;
      var mh:Number = stage.stageHeight;   
      /* if you set width and height image same with the stage use this */
      image.width = mw;
      image.height = mh;
      mc.addChild(image);
   }

Answer 6

I was just looking up how to resize an image and I found this handy library http://jacwright.com/blog/221/high-quality-high-performance-thumbnails-in-flash/

when flash downsizes an image it has the best quality when you resize it by half then keep resizing by half until you get to the desired size

the library does all that for you

the website has some examples and links to his google code page

might not be exactly what you want, but it does work pretty good