Static text on Canvas is published inefficiently

Report · Aug 15, 2019

I stumbled upon this quirk in Animate 19.2.1 while working on converting old Flash content to HTML5: anywhere static text is used, it seems that Animate translates each character (or line, can't tell) into a createjs Shape.

In my use-case, the FLA is for a simulation of a command prompt. There's a computer screen with text on it, and when a proper command is entered, it advances to the next frame. All of the text on the computer screen is static text save for the prompt that is filled in by the user. Because of how the static text is handled, my 20-30 KB FLA file takes a few minutes to publish, and it outputs a 1 MB javascript file.

This can be circumvented by using dynamic text - turning the text on the first 5 or 6 keyframes brought my file size down by about 200 KB. Though that does run the risk of displaying incorrectly if you're using a font that isn't guaranteed to be on end users' computers, if I'm not mistaken.

I'm hoping Adobe thinks of a way to better embed fonts and text into Canvas, because that disparity in source vs published file size is outrageous.

Report · Sep 13, 2019

Hi Christopher..

For the second part of your issue, "I'm hoping Adobe thinks of a way to better embed fonts", there is a way. Use web fonts. Either from Adobe Fonts (formerly Typekit) or Google Fonts. See Using Adobe Fonts in Animate or Using Google fonts in HTML5 Canvas documents.

About the main part of your issue, ".. the prompt that is filled in by the user. Because of how the static text is handled .. it outputs a 1 MB javascript file." - How can that anyway work with static text? In AS3 it was obviously a TextInput field, which is not available in HTML5/Canvas mode. Let alone that it requires dynamic text to enable dynamic user input. The only way to incorporate a user input field in HTML5/Canvas mode is to use the component: TextInput. But this wouldn't be part of the canvas (stage), it will be inserted into HTML outside the canvas in the dom_overlay_container of your HTML output. But i"m scratching here only the surface of your issue.

Klaus