Search code examples
createjsvector-graphicsadobe-animate

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

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:

pixels

still

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?

Solution

  • Animate might be exporting as images, but it shouldn't unless you tell it to. What does your library JavaScript look like? Are any images exported? Maybe search the source for .cache to see if Adobe is doing anything funny under the hood.

    If the map is an SVG source: Unfortunately, only the only SVG support in EaselJS (which underlays the Animate export) is for svg as a "bitmap source". This means it is being treated as an image of a specific dimensions, and scaling it past "100%" will interpolate the details.

    It might be possible to load it as a larger bitmap, and scale it down to start, but that will:

    1. make it much larger in memory
    2. still only let you scale so much

    Another option is to import the SVG asset into Adobe Animate, which should convert it to a vector graphic. If it is vector in EaselJS, you can scale it as much as you want, because it uses Canvas vector APIs to draw, instead of an image source.

    You mentioned that the green circle is native (I assume a shape in Animate?). Are you sure its not being exported as an image, instead of a shape? Are you caching anything?

    Hope that helps!