Highlighted

Static text on Canvas is published inefficiently

New Here ,
Aug 15, 2019

Copy link to clipboard

Copied

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.

TOPICS
Discussions

Views

180

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Static text on Canvas is published inefficiently

New Here ,
Aug 15, 2019

Copy link to clipboard

Copied

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.

TOPICS
Discussions

Views

181

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 15, 2019 0
kdmemory LATEST
Advocate ,
Sep 13, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Sep 13, 2019 0