5 Replies Latest reply on Mar 10, 2017 8:47 AM by Colin Holgate

    HTML Canvas animation performance issues

    davidp59357265 Level 1

      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.