Participant

Question

Html5 Canvas Image Based Animation

Forum|Forum|7 years ago
March 14, 2018
2 replies
2501 views

Good day,

I´ve created an Animate html5 canvas interactive presentation which uses a lot of raster images.

I´ve managed to combine animations into sprite sheets but since they are still high resolution images I need to optimize the loading time.

1. I need the animate to be an html5 canvas so I can visualize the presentation on any browser.

2.I want the content to load in the background while the user is in the menu.

3.Can I insert animations into elements that would preload inside the animation?

I need ideas on how to optimize this animation.

Thank You.

This topic has been closed for replies.

Inspiring

Hi pablo,

Some reading if you have not stumbled upon it yet, you will need to create some custom code for your use:

Understanding PreloadJS, and animate libraries

Load dynamic external image in animate cc canvas/javascript

change src attribute of image component with javascript

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

I use something similar to this:

https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

and this:

Preloading images in Javascript? Without jQuery - Stack Overflow

Regards,

pablof72888142Author

Participant

Thank you!

I used the the fist java script method on this link: https://perishablepress.com/3-ways-preload-images-css-javascript…

I added this <div> on the html.

<div class="hidden">
    <script type="text/javascript">
        <![CDATA[//><!]]>
    </script>
</div>

What this does is that it loads the image before the animation plays. I would want to preload all animations in the backgroud while I stay in the presentation menu. Something like this:

How could I achieve that.

Inspiring

Personally and for various technical reasons i do not like placing the code directly in the HTML......

If you place that within frame 1, and ensure that all the images you are pre-caching are not in your animate library, then it will work. But then you would need to expand on it to actually do something with your images...kglad created an example here.....

Usage of CreateJS in Adobe Animate CC for adding external image on HTML5 Canvas

Regards,

Community Manager

Community Manager

Not the exact answer that you require, but this article should provide you with some insights.

Optimize FLA files for Animate CC