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

Scale a movie clip with HTML5 JS code with no loss of resolution

Engaged ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

Hi Animate,

I have a game where you click on a button and that scales another movie clip on the stage.  I can get this to work with code, but the upscaled movie clip becomes pixelated (see JPG).  Is there any way to make the clip scale up and maintain its resolution?  It should be scalable as it is vector art.  Thanks.  Here's my code.

Zaffer

this.grow_btn.addEventListener("click", growSomeFlower.bind(this));

function growSomeFlower()
{
	currentClickedFlower.scaleX = currentClickedFlower.scaleX * 1.2;
	currentClickedFlower.scaleY = currentClickedFlower.scaleY * 1.2;
}

this.shrink_btn.addEventListener("click", shrinkSomeFlower.bind(this));

function shrinkSomeFlower()
{
	currentClickedFlower.scaleX = currentClickedFlower.scaleX * 0.8;
	currentClickedFlower.scaleY = currentClickedFlower.scaleY * 0.8;
}

 movie clip scaling.jpg

Views

186

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 , Mar 08, 2022 Mar 08, 2022

The symbol stored in the Library could already be resized to 2x, 3x or any other size and you could set a maximum size for the user. In fact, you should set a maximum size so that users won't have problems in older devices.

 

But if you only want to use vector shapes, you can use these publish settings:

image.png

 

Just remember that cache uses bitmaps even if your artwork is a vector.

 

Regards,

JC

Votes

Translate

Translate
Community Expert ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

Hi.

 

There are at least two things that you may need to consider:

 

1 - The default publish method of Animate converts all complex shapes to bitmaps. So if you want to double the size of an instance at runtime, for example, you should create it at the double of the size and then resize it to 50% in the IDE;

 

2 - If you're applying color effects, you need to use cache and by default the cache scale is set to 1. You can change the cache scale by sending a fifth argument when using the cache method. Like this:

this.yourInstance.cache(x, y, w, h, scale);

 

Please let us know one of these considerations may be what you need.

 

Regards,

JC

 

 

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
Engaged ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

Hi Joao,

Thanks for your suggestions.  Your first suggestion won't help because of the way my game works:  The user picks a flower from the garden which then appears over a vase.  There is a button in the console which will either enlarge or shrink the flower by increments, so there is no way for me to know what size the flower will be when the user is finished with it.  I'm not sure your second suggestion will help either as rescaling and coloring the flower are two independent actions that work from two different buttons on the console.  

 

Is there a way to force Animate to publish images as vectors rather then bitmaps?  Thanks.

Zaffer

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 ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

The symbol stored in the Library could already be resized to 2x, 3x or any other size and you could set a maximum size for the user. In fact, you should set a maximum size so that users won't have problems in older devices.

 

But if you only want to use vector shapes, you can use these publish settings:

image.png

 

Just remember that cache uses bitmaps even if your artwork is a vector.

 

Regards,

JC

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
Engaged ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

LATEST

Thanks João,

I'll try the resizing thing in the library.  Thanks for explaining how it works.

Zaffer

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 ,
Mar 08, 2022 Mar 08, 2022

Copy link to clipboard

Copied

As a bonus, your code can be reduced to this:

this.grow_btn.addEventListener("click", growSomeFlower.bind(this));

function growSomeFlower()
{
	currentClickedFlower.scale *= 1.2;
}

this.shrink_btn.addEventListener("click", shrinkSomeFlower.bind(this));

function shrinkSomeFlower()
{
	currentClickedFlower.scale *= 0.8;
}

 

Regards,

JC

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