Html5 Canvas Image Based Animation

[pablof72888142]

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.

[Preran]

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

Optimize FLA files for Animate CC

[albertd9194959]

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,

[pablof72888142]

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[//><!--

            var images = new Array()

            function preload() {

                for (i = 0; i < preload.arguments.length; i++) {

                    images = new Image()

                    images.src = preload.arguments

                }

            }

            preload(

                "images/1.jpg",

            )

        //--><!]]>

    </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.

[albertd9194959]

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,

[pablof72888142]

F$%$& Yeah!

I can now preload all my content in the background! As you may now by now I am an HTML/JS illiterate. I`ll try loading the cached content into my presentation now. Thanks!

Here is a link to the whole project which is firstly an offline presentation: https://www.behance.net/gallery/61911371/Interactive-House-Casa-Corona

The client now wants it to be compatible with cellphones, that´s why I`m suffering.

I`ll keep updating.

[pablof72888142]

I have an idea on how to solve the presentation by changing the animation spritesheet with the others and going back to frame 1.

function f_replace() {

    document.getElementById("Menu_atlas_").src = "images/Menu_atlas_2.jpg";

}

The thing is that this tries to change the src value of an image that does not exist in the HTML so i get the

"Cannot set property 'src' of null" error.

How can I replace the src value of the library elements defined in the js?