Scale Imported image to Fit to the size of a Movieclip

[jebd32619028]

tl.images1.removeAllChildren(); // unload the previous image 

var p = new createjs.Bitmap('images/pimg/' + image1); 

tl.images1.addChild(p); 

Right now the image being imported is smaller than the movie clip. I need it to be scaled to the size of the movie clip. I have looked and can not figure this out. Everything I have read on other post does not work. I am missing something.

[ClayUUID]

What else is in the movieclip?

[jebd32619028]

Just an image.

[ClayUUID]

And when you say you want to scale it to the size of "a movieclip," do you mean the movieclip that the image is loaded into, or the size of some other movieclip?

[jebd32619028]

Make the image the size of the movie clip. Say the image is 100px x 100px and the Movie Clip is 200px x 200px the image would need to be scaled 2x. I figured it out.

var image1 = data.fore[0].icon

tl.images1.removeAllChildren(); // unload the previous image 

var p = new createjs.Bitmap('images/pimg/' + image1);

p.scaleX=2.0;

p.scaleY=2.0;

tl.images1.addChild(p); 

[ClayUUID · Accepted solution]

Okay, you're refusing to directly answer the question, so I'll assume that by "the movieclip", you mean the movieclip that the image is being loaded into, and not one of the many other movieclips in your project.

The thing is, movieclips do not have intrinsic dimensions. They're just abstract containers-- they're the size of whatever is currently in them. If a movieclip is empty, its size is 0x0. If it contains a 100x100 image, its size is 100x100. So saying you want an image to "fit" the size of its movieclip is nonsensical from Animate's point of view, because the movieclip is automatically the size of whatever's in it. You'd be trying to resize it to be the size of itself.

Now, if you want to resize a movieclip (and its content) to a specific desired size, that requires some simple math:

x scale = desired width / native width

y scale = desired height / native height

The problem with your use case is that the scaling code shouldn't execute until after the image has loaded. For that you'll need an onload event listener.

https://stackoverflow.com/questions/14813279/how-to-change-bitmap-width-and-height-in-easeljs

[jebd32619028]

That is what I found has well and used it in my code. It is working. Thanks.