Adobe Animate CC Canvas (CreateJS) vector graphics becomes blurry on scale up

[willdelphia]

So I am new to this next-gen Flash application they call "Adobe Animate CC" and I am trying to create an interactive map scene... very basic. If you click on the USA it should zoom in. Click again it should zoom out. The issue I am having is that even though my map was imported from an SVG file -- and from what I can tell when residing in the "Adobe Animate CC" workspace it retains its vector data -- when I apply the scale tween using CreateJS the edges of the graphic become very pixelated. Here's the code I am using:

var _this = this; _this.stop();

_this.america.addEventListener("click", zoomMap);

function zoomMap(event) { createjs.Tween.get(exportRoot.world1).to({scaleX: 10, scaleY: 10, x: 4000, y: 1000}, 1000); }

And here are some images of the pixelated result:

Even more disconcerting is that that blue-green circle is a native circle object inside a symbol. Not an svg. I would expect that at least that would stay crisp under transformation.

Is this unavoidable? Is the application caching bitmap versions of my vector files on export? Can I stop this? Can I force a re-render of the vector file during and after my tween? Is there any way around this? Does this application even really support vector graphics?

Thanks.

[ClayUUID]

You aren't applying any filter effects, are you? I just tried some throwing some circles on the stage and applying a large scaleX/Y to exportRoot and it stayed nice and sharp.

[willdelphia]

I was able to fix it by unchecking the "export document as texture" option in the Publish settings.

However my new problem is it's rather choppy where before it was smooth. I am looking into optimizing my svg, to try and cut down on number of vertices.

[kdmemory · Accepted solution]

Hi willdelphia

The way a canvas is displaying visuals is basically raster-based. I also had to accept pixellation effects at the edges of grafical as well as text elements. Now your problem. A few things you might want to check:

• look under Publish Settings/Basic if you have Export document as texture checked. (this is default). If so, all visuals, no matter vector or raster, are exported on spritesheets which are raster grafic. If you deactivate this setting, then your imported vectors will be incorperated into javascript as shapes (with scalable vector advantages). That's not so brilliant for performance reasons, but it should help with crispyness you are after.
• If you leave the texture setting checked, it might help if you import the America vector nominally larger than you probably do, I guess you've imported it in the small start size before the 10-fold loop. Try import it 10-fold size, present it before-loop with scaleX and scaleY at 0.1 and enlarge it to scale 1. (You have to try several options, maybe import 5-fold and scale accordingly.)
• if (again with texture activated) look under Publish Settings/Image Settings, there you find the Texture Publishing Options. Particularly the Resolution might be good to increase to 3.0 (this seems to be the max).
• I'm mentioning the last two points, because the first, switching Export as texture off might be giving you performance problems. The zoom might be jerky. You'll have to try it all out to achieve optimal result.

Klaus

[ClayUUID]

Jesus, now "Disable advanced layers" has a new buddy: "Disable export document as texture".