Jump to content
Search Community

Scaling with GSAP and Adobe Animate

davel160 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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!

Link to comment
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

Link to comment
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. 

Link to comment
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. 

Link to comment
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

Link to comment
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
Link to comment
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
Link to comment
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!

Link to comment
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 7
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...