• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Controlling image size on load to MC

Community Beginner ,
May 14, 2020 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.

Views

1.9K

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
community guidelines

correct answers 1 Correct answer

Community Expert , May 14, 2020 May 14, 2020

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;

Votes

Translate

Translate
Community Expert ,
May 14, 2020 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;

Votes

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
community guidelines
Community Beginner ,
May 14, 2020 May 14, 2020

Copy link to clipboard

Copied

Many thanks,

 

This works perfectly in my test file.  

 

Many thanks

Votes

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
community guidelines
Community Expert ,
May 15, 2020 May 15, 2020

Copy link to clipboard

Copied

you're welcome.

Votes

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
community guidelines
Community Beginner ,
May 19, 2020 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

 

Votes

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
community guidelines
Community Expert ,
May 21, 2020 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

}

Votes

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
community guidelines
Community Beginner ,
May 22, 2020 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?

 

 

 

Votes

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
community guidelines
Community Expert ,
May 22, 2020 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.

Votes

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
community guidelines
Community Beginner ,
May 22, 2020 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.

 

 

Votes

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
community guidelines
Community Expert ,
May 22, 2020 May 22, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines