Jump to content
davel160

Scaling with GSAP and Adobe Animate

Recommended Posts

Hi all, 

 

I've been using GSAP for awhile now, but am new to using Adobe Animate with GSAP. This is probably a simple question, but I can't seem to find out why scaling up objects in Adobe Animate using GSAP causes those elements to become extremely pixelated. Is there some kind of setting I am missing in Animate? 

 

Thanks!

Share this post


Link to post
Share on other sites

If you're scaling up a JPG or PNG, it will become pixelated if you try to scale it. Animate does have some additional settings you can change, however.

 

After importing image into Animate, right click on the asset and click Properties. You'll see the Bitmap Properties window. You can change options like Smoothing and Compression. Try changing Compression to "Lossless" and "Allow smoothing" to see if that helps. Keep in mind that your outputted file (SWF, HTML Canvas, etc) will be much larger as a result of changing the compression settings.

 

The other way would be use vector image from so you can scale them up and down without loss of quality.

 

Screen-Shot-2018-11-20-at-4.33.46-PM.jpg

Share this post


Link to post
Share on other sites

Thank you for the reply. I should have clarified that I was referring to objects drawn directly in Animate. Not bitmaps or other imported assets. For example, if I create a small circle in Animate and convert to a movie clip, then choose to scale it using scaleX and scaleY, it becomes extremely pixelated. I'm just having trouble figuring out why that is. 

Share this post


Link to post
Share on other sites

That's a bizarre issue since objects you draw in Animate are vectors. Perhaps you can try to make a completely new Animate file and use the timeline to scale it up i.e. don't use GSAP and see if the problem persists.

  • Like 2

Share this post


Link to post
Share on other sites

I can't imagine how GSAP could possibly be involved with that. Perhaps there's some feature like the old "cacheAsBitmap" thing (from the Flash days) that's causing it to get pixelated when scaled? @Carl is our resident Animate CC expert, so he may have something to add. If you could post a reduced test case, that'd probably help a lot. 

Share this post


Link to post
Share on other sites

Yes, I do not believe it's GSAP actually. I noticed in another file that Animate was saving objects I've drawn as PNGs, so it must be animating them instead of a vector object. I've attached an example of two circles. One is animated via the timeline, the other is scaled using GSAP (the one that gets pixelated). There has to be a setting in Animate that I can shut off to stop it from doing so, or I'm going to have to make every object at full size then scale down to starting position. 

Animate Scale.zip

Share this post


Link to post
Share on other sites

I think this line of code in your Animate file might be problematic.

 

TweenMax.to(this.circle_mc, 1, {scaleX:50, scaleY:50, ease:Back.easeOut})

 

You're telling GSAP to scale your object by 5000%, which enormous. It could be that CreateJS (the HTML Canvas plugin bundled with Animate) cannot deal with such a large scaling factor and that causes the browser to pixelate the circle. I previewed your Animate file in Firefox and Chrome and they both have the pixelation issue.


Not sure about this, but I think that objects rendered in HTML canvas are actually raster (aka bitmaps) even if you created them as a vector in Animate or Illustrator.

 

I recreated your animated circle with vanilla CSS and your JS code and the scaling is not pixelated. Bear in mind that the JavaScript syntax is a bit different in that I can specify "scale: 50" instead of "scaleX: 50, scaleY: 50" as with Animate.

 

See the Pen WYMOrE by explorerzip (@explorerzip) on CodePen

 

It might also help to know what you're trying to accomplish with this animation.

  • Like 3

Share this post


Link to post
Share on other sites

the main issue is that in your publish settings you have "export document as texture" selected

ani-1.png

 

That tells animate to pack all your vectors in to spritesheets (as bitmaps at the size they are on the stage)

 

So you were creating a super small bitmap circle and scaling it massively.

 

Try deselecting that option and then drawing your circle at its biggest size and scaling from 0.

TweenMax.from(this.circlebig, 1, {scaleX:0, scaleY:0, ease:Back.easeOut})

 

see attached

 

 

 

Animate Scale.zip

  • Like 4

Share this post


Link to post
Share on other sites

actually... As long as the symbol at its natural size is the biggest you want it to appear, you can that take that symbol from the library at normal size, place it on the stage, scale it down using the transform tool, and then scale it to a scale of 1 with TweenMax. it will look fine.

 

EDIT: quick video: https://greensock.d.pr/nv2HJb

  • Like 4

Share this post


Link to post
Share on other sites

Thanks Carl! This worked great. I actually noticed that when I uncheck "Export document as texture" option, it then allows me to scale up symbols to any percentage I want. Even greater than there original size with degradation. I noticed it doesn't save the symbol as an image as soon as that option is unchecked. I've worked with Animate a couple of years back and do not remember that setting in their first release as "Animate". Do you know the benefit of that setting?

 

Thanks!

Share this post


Link to post
Share on other sites
21 hours ago, davel160 said:

Do you know the benefit of that setting?

 

 

Performance. Rendering textures is significantly faster than rendering vectors. 

 

Animating 1500 circles. Rendering the circles as vectors is giving me around ~15 fps in Chrome. When I switch to rendering the circles with a bitmap/texture, I get a solid 60 fps.

 

See the Pen EOeBdm by osublake (@osublake) on CodePen

 

 

  • Like 6

Share this post


Link to post
Share on other sites
12 hours ago, OSUblake said:

 

 

Performance. Rendering textures is significantly faster than rendering vectors. 

 

 

Ahh I see. Good to know. Thanks for the response!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.