• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML Canvas animation performance issues

Community Beginner ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

I'm working on an e-learning asset at the moment which is being produced in Adobe Animate and exported out to HTML canvas. It's designed as an 'Investigation Board' based on a corkboard (see image below).

cork_board.jpg

The idea is for the user to zoom into the board starting at 'Stage 1' and read the content of the 'case study' and then move (pan across) to the next stage ie. Stage 2. Some of the stages have learning activities ie. select the correct answer or checkbox. I'm using the new 'virtual camera' tool to zoom in and pan across the board, the problems I'm having is that the HTML canvas file exported is having real performance issues when viewed on certain desktops and especially tablet devices.

The main issue is 'frame rate', I have tweened the camera to pan across the board, but when it's viewed on a tablet the frame rate drops so considerably it becomes unusable. The Javascript file produced from Animate is just over 2mb!, I realise this is too large, so at the moment I have taken out the tweens to try and make the learning object usable. Now instead of smoothly going from one stage to another, you get a more jarring effect of going straight to the 'zoomed in' view, which is a compromise I might have to make. I realise the 'board' is very complicated with a lot of different components ie handwritten fonts, images, torn paper, textures etc and I am probably asking too much of Animate to do what I require. 

The Javascript file produced is just over 2mb!, which I realise is too large, so at the moment I have taken out the tweens to try and make the learning object usable. Now instead of smoothly going from one stage to another, you get a more jarring effect of going straight to the 'zoomed in' view, which is a compromise I might have to make. I realise the 'board' is very complicated with a lot of different components ie handwritten fonts, images, torn paper, textures etc and I am probably asking too much of Animate to do what I require. It is probably too much for the canvas to be keep being redrawn each frame with such detailed information, hence the slow frame rate.

Does anyone have any ideas?, which I could implement to optimise the file to try and get it to run faster ie using dynamic text instead of static, using more bitmaps etc. Any advice would be much appreciated.

Views

1.4K

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
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 10, 2017 Mar 10, 2017

The camera movement has the same issue that all timeline tweens have. If you use a motion Tween, or if you use a Classic Tween with custom easing, the Javascript that is generated is a lot bigger, and the performance can be a lot worse.

Hopefully you're doing one of those two things. If you are, change your camera movement to be Classic Tween, and only use easing values of -100 to 100. Don't edit the easing graph.

Votes

Translate

Translate
LEGEND ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

The camera movement has the same issue that all timeline tweens have. If you use a motion Tween, or if you use a Classic Tween with custom easing, the Javascript that is generated is a lot bigger, and the performance can be a lot worse.

Hopefully you're doing one of those two things. If you are, change your camera movement to be Classic Tween, and only use easing values of -100 to 100. Don't edit the easing graph.

Votes

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
community guidelines
LEGEND ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

If you're using any Static text, don't. That really slows things down. Don't use any filters or color effects either, other than alpha.

https://forums.adobe.com/people/Colin+Holgate  wrote

...only use easing values of -100 to 100.

False. Using any easing values within the -100 to 100 range has no adverse effect on performance, quality, or file size.

Votes

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
community guidelines
LEGEND ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

Didn't you just say exactly the same thing I said? That is that easing of -100 to 100 gives good performance. It's custom easing and motion tweens that cause the Javascript bloat and poor performance.

Votes

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
community guidelines
LEGEND ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

Oops, I misread that as "-100 or 100".

Votes

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
community guidelines
LEGEND ,
Mar 10, 2017 Mar 10, 2017

Copy link to clipboard

Copied

LATEST

I thought that's what you did! I couldn't bring myself to use the more American -100 thru 100.

Votes

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
community guidelines