Highlighted

Scale Imported image to Fit to the size of a Movieclip

Explorer ,
Jun 21, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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

Views

177

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

Scale Imported image to Fit to the size of a Movieclip

Explorer ,
Jun 21, 2019

Copy link to clipboard

Copied

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.

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

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

Views

178

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
Jun 21, 2019 0
Adobe Community Professional ,
Jun 22, 2019

Copy link to clipboard

Copied

What else is in the 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...
Jun 22, 2019 0
Explorer ,
Jun 24, 2019

Copy link to clipboard

Copied

Just an 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...
Jun 24, 2019 0
Adobe Community Professional ,
Jun 24, 2019

Copy link to clipboard

Copied

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?

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...
Jun 24, 2019 0
Explorer ,
Jun 24, 2019

Copy link to clipboard

Copied

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); 

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...
Jun 24, 2019 0
Adobe Community Professional ,
Jun 24, 2019

Copy link to clipboard

Copied

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

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...
Jun 24, 2019 0
Explorer ,
Jun 24, 2019

Copy link to clipboard

Copied

That is what I found has well and used it in my code. It is working. 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...
Jun 24, 2019 0