Highlighted

Controlling image size on load to MC

New Here ,
May 14, 2020

Copy link to clipboard

Copied

Hi,

I am dynamically loading images into a preposoitioned and sized MC.  The image is larger than the MC but same proportions.  What I would like to do is have the image load at the same size as the MC or be scaled to fit it.

 

Currently it comes in at original size and  overflows the MC size.  Is there a setting for the properties of the MC properties that I am missing?

 

I am using this code:

 

var imageID = 'images/small/HF0000_004.jpg';
var p = new createjs.Bitmap(imageID);

//here I want to size the image to the MC

this.addChild(p);

this.play();

 

The code is in the first frame of the MC instance

 

Any help appreciated.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

after loading is complete you can use:

 

p.scaleX = this.mc.getBounds().width/p.getBounds().width ;
p.scaleY = this.mc.getBounds().height/p.getBounds().height;

Views

1.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Controlling image size on load to MC

New Here ,
May 14, 2020

Copy link to clipboard

Copied

Hi,

I am dynamically loading images into a preposoitioned and sized MC.  The image is larger than the MC but same proportions.  What I would like to do is have the image load at the same size as the MC or be scaled to fit it.

 

Currently it comes in at original size and  overflows the MC size.  Is there a setting for the properties of the MC properties that I am missing?

 

I am using this code:

 

var imageID = 'images/small/HF0000_004.jpg';
var p = new createjs.Bitmap(imageID);

//here I want to size the image to the MC

this.addChild(p);

this.play();

 

The code is in the first frame of the MC instance

 

Any help appreciated.

Adobe Community Professional
Correct answer by kglad | Adobe Community Professional

after loading is complete you can use:

 

p.scaleX = this.mc.getBounds().width/p.getBounds().width ;
p.scaleY = this.mc.getBounds().height/p.getBounds().height;

Views

1.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 14, 2020 0
Adobe Community Professional ,
May 14, 2020

Copy link to clipboard

Copied

after loading is complete you can use:

 

p.scaleX = this.mc.getBounds().width/p.getBounds().width ;
p.scaleY = this.mc.getBounds().height/p.getBounds().height;

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2020 0
New Here ,
May 14, 2020

Copy link to clipboard

Copied

Many thanks,

 

This works perfectly in my test file.  

 

Many thanks

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 14, 2020 0
Adobe Community Professional ,
May 15, 2020

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 15, 2020 0
New Here ,
May 19, 2020

Copy link to clipboard

Copied

I have run into an issue with the resizing!! Although seemed to work in test file now not working.  Not sure what I am doing wrong.  probrably something simple.

 

I combined the load / parsing of xml and images and then tried to resize the loaded images within the loop and the code:

 

p.scaleX = this.mc.getBounds().width/p.getBounds().width ;
p.scaleY = this.mc.getBounds().height/p.getBounds().height;

crashes it.

You mentioned this principle should be applied after load of image.  I suspect I have not checked if image has loaded.  This is the code I use to load the images and add to MC instances.  It works without the resize code but when include it it hangs.  I show with it commented out.

 

var that = this;

var imagedata = new XMLHttpRequest(); 

imagedata.addEventListener("load", imagedataF);

imagedata.open("GET", "test/xml_files/section1.xml", true);  
imagedata.setRequestHeader("Content-Type", "text/xml");
imagedata.send();


var myImagesID_array;
var imageInstance;
var smallURL;


function imagedataF(e) {
parser = new DOMParser();
var xml = parser.parseFromString(e.target.response, "text/xml");
myImagesID_array = xml.getElementsByTagName("imagedata");

var imagesNum = myImagesID_array.length;
	
	for (var i = 0; i<imagesNum; i++)
{
  var myImageID = i;
	
imageInstance = myImagesID_array[myImageID].getElementsByTagName("imageid")[0].childNodes[0].nodeValue;
smallURL = myImagesID_array[myImageID].getElementsByTagName("small_url")[0].childNodes[0].nodeValue;
	
var p = new createjs.Bitmap(smallURL);

//This is where i feel I have to check for load but not sure how.

//p.scaleX = that.myImage.getBounds().width/p.getBounds().width;
//p.scaleY = that.myImage.getBounds().height/p.getBounds().height;

	
that[imageInstance].addChild(p);
	
}
	
}

 

Any pointers appreciated.

 

Thx

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 19, 2020 0
Adobe Community Professional ,
May 21, 2020

Copy link to clipboard

Copied

use:

 

function imagedataF(e) {
parser = new DOMParser();
var xml = parser.parseFromString(e.target.response, "text/xml");
myImagesID_array = xml.getElementsByTagName("imagedata");

var imagesNum = myImagesID_array.length;
	
	for (var i = 0; i<imagesNum; i++)
{
  var myImageID = i;
	
imageInstance = myImagesID_array[myImageID].getElementsByTagName("imageid")[0].childNodes[0].nodeValue;
smallURL = myImagesID_array[myImageID].getElementsByTagName("small_url")[0].childNodes[0].nodeValue;

var image = new Image();
image.onload = onLoadF;
image.src=smallURL;

}

 

function onLoadF(e){

var img = new createjs.Bitmap(e.target);

// scale img, add img, position img etc

}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2020 0
New Here ,
May 22, 2020

Copy link to clipboard

Copied

Tried this and it loaded all images in the xml file using the for loop before moving to function after all images had been loaded.

 

It only called the function once rather that for each image as it loaded. This meant all images went into 1 MC.  I could not fathom out a way of calling the function each time an image loaded.  I also tried to add the 'ImageInstance' as an id to the image using:

image.id=ImageInstance;

and then using this to reference the individual images when adding the image to the MC:

 

that[image.id].addChild(img);

this did not work either.

 

I have afeeling that by the time the first function call has fired the loop has completed and so the last instance name is passed to the function rather than the correct one for the individual image in question. 

 

Is there away of adding a peramiter / property to the image that can be referenced to ensure the correct MC is loaded with the image?

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2020 0
Adobe Community Professional ,
May 22, 2020

Copy link to clipboard

Copied

that's what your code had (all images loaded in the for-loop).  if you only want to load one, remove the image loading code outside the for-loop.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2020 0
New Here ,
May 22, 2020

Copy link to clipboard

Copied

I do want to use the for loop to load multiple images but add each one to a separate MC in turn referenced by the variable 'imageInstance'.

 

The images are all loading but all being put into one MC rather than the separate ones.

 

I tested with an alert to show the imageInstance value and if positioned before the load it shows the value changing as it should do.  However, when the alert is positioned in the function the value is the value for the last image loaded each time the function is called which means each time the image is put in the same(last) MC.

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2020 0
kglad LATEST
Adobe Community Professional ,
May 22, 2020

Copy link to clipboard

Copied

use the name property of image to store needed info. (eg, whatever you need to determine the parent movieclip).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2020 0