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.
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;
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;
Copy link to clipboard
Copied
Many thanks,
This works perfectly in my test file.
Many thanks
Copy link to clipboard
Copied
you're welcome.
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
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
}
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?
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.
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.
Copy link to clipboard
Copied
use the name property of image to store needed info. (eg, whatever you need to determine the parent movieclip).