Highlighted

HTML5 Optimization

Explorer ,
Jun 18, 2019

Copy link to clipboard

Copied

My Goal: Templates so print designers import PSD files into Animate and export working html code.
My Problem: HTML code exported from Animate is Heavy.

I am creating templates in Animate that will be making GET request to JSON or XML feeds then parsing them. Example pulling in Lottery Jackpot values from a JSON feed and displaying the text. I have everything working but when I test the exported code on older machines it slows them down and causes problems. I have a digital network of over 3000 players and a lot of them are these older machines.

I have two key frames. One with the get calls and dynamic text and another that shows if something fails in the code of the first frame.

All I am doing is jumping from one frame to another. Not a lot of animation work. Is there away to prevent all of the excessive code from Animate from being exported? I need this to be as optimized as possible. I would just write this from scratch without animate but I need the ability of a none coder to export HTML5 and Animate is the best thing that I have found plus all of my artist have it already as part of the CC.


Link to my file:

Lottery.fla - Google Drive

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

You never said why you're using PNGs instead of JPGs for your background images. That right there will be a significant slowdown in load time.

Views

137

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

HTML5 Optimization

Explorer ,
Jun 18, 2019

Copy link to clipboard

Copied

My Goal: Templates so print designers import PSD files into Animate and export working html code.
My Problem: HTML code exported from Animate is Heavy.

I am creating templates in Animate that will be making GET request to JSON or XML feeds then parsing them. Example pulling in Lottery Jackpot values from a JSON feed and displaying the text. I have everything working but when I test the exported code on older machines it slows them down and causes problems. I have a digital network of over 3000 players and a lot of them are these older machines.

I have two key frames. One with the get calls and dynamic text and another that shows if something fails in the code of the first frame.

All I am doing is jumping from one frame to another. Not a lot of animation work. Is there away to prevent all of the excessive code from Animate from being exported? I need this to be as optimized as possible. I would just write this from scratch without animate but I need the ability of a none coder to export HTML5 and Animate is the best thing that I have found plus all of my artist have it already as part of the CC.


Link to my file:

Lottery.fla - Google Drive

Adobe Community Professional
Correct answer by ClayUUID | Adobe Community Professional

You never said why you're using PNGs instead of JPGs for your background images. That right there will be a significant slowdown in load time.

Views

138

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
Jun 18, 2019 0
Adobe Community Professional ,
Jun 18, 2019

Copy link to clipboard

Copied

Excessive code? It's only publishing 6K of JavaScript. That's nothing compared to the 1.4 megabytes of lossless image data you're generating. Why aren't those JPGs?

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...
Jun 18, 2019 0
Explorer ,
Jun 18, 2019

Copy link to clipboard

Copied

I am using a third party vendor to play the HTML content and their developers told me that there were too many animation layers and it was bogging down the test machines with the least powerful resources. They want me to use straight HTML and JS but that kills my goal of creating precoded templates for Print artist.

Edit: I just spoke to my vendor and the issues is that it shows the Canvas background for a second before loading. This cause issues.

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...
Jun 18, 2019 0
Adobe Community Professional ,
Jun 18, 2019

Copy link to clipboard

Copied

You never said why you're using PNGs instead of JPGs for your background images. That right there will be a significant slowdown in load time.

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...
Jun 18, 2019 0
Adobe Community Professional ,
Jun 19, 2019

Copy link to clipboard

Copied

I have the same question as clay. Why aren't you using jpgs? They are more optimal for something like this and would be for faster load time.

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...
Jun 19, 2019 0
Explorer ,
Jun 19, 2019

Copy link to clipboard

Copied

I will give that a try.

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...
Jun 19, 2019 0