3 Replies Latest reply on Feb 14, 2017 6:36 AM by Perdedork

    how to add progress bar when canvas load?

    sabiqxs Level 1

      i want to adding progress bar if i start the html5 canvas. if canvas progress complete(every images and etc download finished) then show the canvas.

      ???

        • 1. Re: how to add progress bar when canvas load?
          ClayUUID Adobe Community Professional

          In the generated JS file where it says:

           

          loader.addEventListener("fileload", handleFileLoad);
          loader.addEventListener("complete", handleComplete);
          loader.loadManifest(lib.properties.manifest);
          

           

          Add anywhere before the loadManifest call:

           

          loader.addEventListener("progress", handlePreload);
          

           

          ...where handlePreload is a function that you must provide, which will be called at regular intervals and passed a parameter between 0 and 1 representing the current percent completion. How you choose to visualize that progress is entirely up to you.

          2 people found this helpful
          • 2. Re: how to add progress bar when canvas load?
            sabiqxs Level 1

            Hmm. Its so hard for me to implementation that code.

            Can you show me how implementation the full code in js.? Or show me the demo code.

            • 3. Re: how to add progress bar when canvas load?
              Perdedork Level 1

              To set this up so that it's added when you publish, in Animate CC, first go to FIles->Publish Settings...  Choose the "Advanced" tab, and select export.  Name the template.  Go to an external editor, edit the HTML template it exported.  Between lines "$CREATE_LOADER" and "$LOAD_MANIFEST" in the "init()" javascript function, add the code:

              1. loader.addEventListener("progress", handlePreload); 

               

               

              Of course, you'll have to also add the handlePreload javascript function.  Do that in this template as well.

               

               

              Once you're finished editing the template, go back to Animate CC, into Files->Publish Settings.  Choose the "Advanced" tab again, click the "Import" button, and load the HTML template you just finished editing.

               

              Now it will call your "handlePreload" function while it is loading the mainifest.

               

              Here is the full text of the template (NOTE: ppf.js is my file for ActionScript 2 polyfills, because it's easier than having to reformat the code all of the time ):

               

              <!DOCTYPE html>
              <!--
                NOTES:
                1. All tokens are represented by '$' sign in the template.
                2. You can write your code only wherever mentioned.
                3. All occurrences of existing tokens will be replaced by their appropriate values.
                4. Blank lines will be removed automatically.
                5. Remove unnecessary comments before creating your template.
              -->
              
              
              <html>
              <head>
              <meta charset="UTF-8">
              <meta name="authoring-tool" content="$VERSION">
              <title>$TITLE</title>
              <!-- write your code here -->
              $CENTER_STYLE
              $CREATEJS_LIBRARY_SCRIPTS
              $ANIMATE_CC_SCRIPTS
              $SCRIPT_START
              var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
              
              
              //Added handlePreload here...
              function handlePreload(v){
                console.log(v);
                //You can do whatever you would like here...
              }
              
              
              function init() {
                canvas = document.getElementById("$CANVAS_ID");
                anim_container = document.getElementById("$ANIM_CONTAINER_ID");
                dom_overlay_container = document.getElementById("dom_overlay_container");
                $CREATE_LOADER
                loader.addEventListener("progress", handlePreload);
                $LOAD_MANIFEST
                $PRELOAD_ASSETS
              }
              $HANDLE_FILE_LOAD_START
                $HANDLE_FILE_LOAD_BODY
              $HANDLE_FILE_LOAD_END
              $HANDLE_COMPLETE_START
                //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
                $CREATE_STAGE
                //Registers the "tick" event listener.
                $START_ANIMATION    
                //Code to support hidpi screens and responsive scaling.
                $RESP_HIDPI
              $HANDLE_COMPLETE_END
              $PLAYSOUND
              $SCRIPT_END
              <script type="text/javascript" src="ppf.js?v=1.1" ></script>
              <!-- write your code here -->
              </head>
              <body onload="init();" style="margin:0px;">
                <div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx">
                <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>
                <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
                </div>
                </div>
                  $PRELOADER_DIV
              </body>
              </html>