2 Replies Latest reply on Aug 12, 2015 11:14 AM by CheshireSmile24

    Flash CC HTML5 Canvas Preload

    CheshireSmile24 Level 1

      Have created a HTML 5.0 Canvas web site using flash.

       

      http://www.quizzine.ca

       

      I need to add a preloader because there are a lot of graphics and it can take a while for everything to load and a blank screen confuses people.

       

      What is the best way to do this?

       

      I have tried to create a pre-loader with edge animate however it only seems to preload the javascript not the images.

       

      Any help with this would be very much appreciated.

       

      Tim

        • 1. Re: Flash CC HTML5 Canvas Preload
          CheshireSmile24 Level 1

          Here is the preloader I created with Edge Animate

           

          Quizzine_Interface-800x600-V3.1

          • 2. Re: Flash CC HTML5 Canvas Preload
            CheshireSmile24 Level 1

            This is how I solved it.

             

            In the head of the html page I modified the following function:

             

            function handleComplete() {

                   

                //Remove preload animation element

                var element = document.getElementById("preloaderID");

                element.parentNode.removeChild(element);

             

            }

             

            In the body I added the following code to place the preloading image.

             

            <div id="preloaderID" align="center" ><img src="images/PreLoader01.gif" /> </div>

             

            This way the PreLoader.gif animation plays while the javascript and media elements load.

             

            When everything is loaded handleComplete is triggered and the element "preloaderID" is removed from the page.

             

            Hopefully this works for anyone who finds this as I have been looking for this answer for about 4 weeks.

             

            Cheers

            1 person found this helpful