Solved

How do I resize a loaded jpg image?

Posted on 2010-09-20
3
676 Views
Last Modified: 2013-11-11
Hello,

I'm loading an image (from XML, decoded to a ByteArray) into a Sprite (see the code). I need to size it according to the width and height in the XML. How is this done?

Thanks!


var badgeholderPhotoBA:ByteArray = Base64.decodeToByteArray(badgeDataXML.BADGEREQUEST.PHOTO);
var badgeholderImageHolder:Sprite = new Sprite();
var badgeholderImageLoader:Loader = new Loader();

badgeholderImageLoader.loadBytes(badgeholderPhotoBA);
badgeholderImageHolder.addChild(badgeholderImageLoader);
badgeholderImageHolder.x = object.X;
badgeholderImageHolder.y = object.Y;

//this messes it up...how do I scale/resize the image????

badgeholderImageHolder.width = object.WIDTH as int;
badgeholderImageHolder.height = object.HEIGHT as int;

addChild(badgeholderImageHolder);

Open in new window

0
Comment
Question by:BlueKarana
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 8

Accepted Solution

by:
ActionScript_Helper earned 300 total points
ID: 33723366
May be you can try resizing badgeholderImageLoader or badgeholderImageLoader.content.
==========================================================
badgeholderImageLoader.width = object.WIDTH as int;
badgeholderImageLoader.height = object.HEIGHT as int;

OR

badgeholderImageLoader.content.width = object.WIDTH as int;
badgeholderImageLoader.content.height = object.HEIGHT as int;
==========================================================

Another scenario may be that loadBytes are taking some time, and before that you are trying to scale image. So may be you should track complete event and than you should resize the image:

==========================================================
badgeholderImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);

function imageLoaded(evt:Event):void
{
evt.target.content.width = object.WIDTH as int;
evt.target.content.height = object.HEIGHT as int;
}
==========================================================
0
 
LVL 5

Assisted Solution

by:bupper
bupper earned 200 total points
ID: 33726285
You can definitely resize it to a specific size, but you may loose the proportions. Bad idea, unless the size in the XML is adjusted perfectly for that.

Instead, use the scale property:
yourmv.xscale = XSCALE;
yourmv.yscale = YSCALE;

Oh, and make sure you specify the forceSmoothing property (otherwise it will look grainy):
yourmv.forceSmoothing = true;
0
 

Author Comment

by:BlueKarana
ID: 33727099
Both suggestions offer good advice (the loader event listener and smoothing), but there are a few details I was missing. I found help in a piece of code at tutorboy.com (see code for credit).

BTW, my photos are cropped to a certain aspect ratio for layout on a badge. If the user didn't crop at this point (print preview or print) the'll get a warning.

Smoothing is done differently in AS3 though. See onComplete in code. I did add smoothing for good measure.

If I "get it" fully, what I was missing was putting the loader, through the use of a LoaderInfo object, into a displayObject and changing the width and height of that. (Probably not using correct terminology. Still trying to figure this AS thing out!


/**
 * Adapted from ~~
 *
 * DATE: 19/April/2010
 * Dynamic Image load and resize
 * Email: midhund[at]tutorboy.com
 * Web: http://articles.tutorboy.com/
 **/

package{

	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Sprite;
	import flash.net.URLRequest;
	import flash.events.*;
	import flash.utils.ByteArray;
	import com.dynamicflash.util.Base64;
	
	 public class ImageLoader extends Sprite{
	 // loader vaiable to hold the image
	 protected var loader:Loader;
	 // set the image resize max width and max height.
	 //protected var maxW:Number = 400, maxW:Number = 500;
	 protected var newW:Number, newH:Number;
	 protected var newX:Number, newY:Number;
	 
	 public function ImageLoader(imageString:String, designW:Number, designH:Number, designX:Number, designY:Number):void {
		 newW = designW;
		 newH = designH;
		 newX = designX;
		 newY = designY;
		 loadImage(imageString);
	 }

	 public function loadImage(imageString:String):void {

		// create the loader instance from Loader class.
		 loader =  new Loader();
		//decode the photo from the encoded string and put it in a byte array
		var PhotoBA:ByteArray = Base64.decodeToByteArray(imageString);
		// create the loader instance from Loader class.
		 // add the event listener to the onComplete event.
		loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
		 // event listener for the IO error
		loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
		 // load the image to the loader component
		loader.loadBytes(PhotoBA);
		
		// create a new sprite to hold the loader.
		 var container:Sprite = new Sprite();
		 container.graphics.beginFill(0x000000);
		 container.graphics.drawRect(0, 0, newW, newH);
		 // place image according to badge design
		 container.x = newX;
		 container.y = newY;
		 		 
		 // add the loader to the sprite.
		 container.addChild(loader);
		 // add the container to the stage.
		 addChild(container);

	}
 
	 private function ioErrorHandler(event:IOErrorEvent):void {
		 trace("ioErrorHandler: " + event);
	 }

	 private function onComplete(event:Event):void {
		 // remove the complete listener from the loader component.
		 loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete);
		 event.target.content.smoothing = true; //This is a Bitmap object

		 var loaderInfo:LoaderInfo = event.target as LoaderInfo;
		 var dispObj:DisplayObject = loaderInfo.content;
		 
		 dispObj.width = newW;
		 dispObj.height = newH;
		 //align the display object to its container
		 dispObj.x = 0;
		 dispObj.y = 0;
		 
	 }
 }
}

Open in new window

0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How do I convert a CS4 FLA file to CS6? 1 884
What process can I use to achieve this? 5 127
System Center Configuration Manager 2012R2 7 98
PDF: Display my cards game? 8 137
I come across a lot of question about how to access things in the document class from a movieclip, or accessing something from a movieclip in the document class. It took me a while to figure this out but once I did it makes life so much easier. …
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to set there setting in Adobe Flash Media Live Encoder and YouTube for optimal video and audio quality.
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question