flip book created by createjs and preload js and it's take 15 min. to load the page

Question

flipbook created by createjs and preload js and it takes 15 min. to load the page. it contains more than 300 images. http://www.mentalimage.com.au/perkins/05/index.html How can I resolve this problem?

Answer 1

You can get a little bit of filesize back by optimizing your pngs using something like ImageOptim.

There are also a bunch of duplicate frames. For example, the same open animation plays again when closing, so frames 30 & 70 are identical. You could reuse different frames to reduce this

However, the approach you have taken for your assets is not optimal. Building this as a full frame-by-frame image sequence is not ideal.

• Consider animating separate pieces, so things like the people frames can only be exported once, and the page flip is a separate PNG sequence. Tools like Adobe Animate can help with this, and also export your content directly to an EaselJS library
• You might want to use a video instead. A frame-by-frame animation is going to be VERY heavy, especially at the dimensions you are using.

Overall, I would recommend a different approach to your animation. If you don't want to rebuild it to be more dynamic, then video would be a better approach.