9 Replies Latest reply on Apr 22, 2016 9:18 AM by ClayUUID

    [HTML5/Flash CC] Preloader?

    heavyboots Level 2

      Turns out my output panel is about a megabyte so you sit and stare at a blank screen for a few seconds to 30 seconds, depending on your browser speed. I suppose I could lower this by converting the PNG's to JPG's, but haven't wanted to mess with going through and replacing it. Plus, there will be plenty of other instances where I will need a preloader, so I figure this is a good opportunity to try and demonstrate one.

       

      (http://handtooledcode.com/sas_test if you want to see what I mean.)

       

      Again, looking for an example of how to build one, I guess. Currently, I have *nothing* that works for this, although I will start trying to go the old "second scene" route in a moment and see if I can make any progress that way.

       

      Thanks in advance!

      Eric.

        • 1. Re: [HTML5/Flash CC] Preloader?
          sinious Most Valuable Participant

          I could be wrong, but I do not recall any means of using CreateJS's PreloadJS functionality automatically from Flash. I believe you'll need to get your hands dirty with this.

           

          Here's PreloadJS with plenty of documentation on it:

          PreloadJS

           

          It's designed to work easily and modularly with CreateJS. Here's a presentation version of a video (I can't find the YouTube link to) where Mr. Skinner goes over how CreateJS and it's modular sibling products work together. He has a bit in there that demonstrates queue loads both synchronous and asynchronous, even batched.

          CreateJS: Building Rich Interactive Experiences in HTML5 | MAX 2013 – The Creativity Conference | Adobe TV

           

          Edit:

           

          Just throwing it out there, Adobe Edge Animate has a preloader. If you have the suite, you might want to consider taking a look!

          1 person found this helpful
          • 2. Re: [HTML5/Flash CC] Preloader?
            heavyboots Level 2

            Hey again sinious!

             

            Welp, I went a totally different route. Went to http://preloaders.net/ and generated a CSS preloader. Pasted it into a custom index.html page above the canvas, such that it always shows when the document loads.

             

            The way the canvas code works, it only loads and executes the canvas JS after all the assets have loaded, so the first thing I do on the canvas JS is document.getElementById("spinner").style.display = "none". It is a crude hack, but it works for now. Hopefully there will just be a "Show Preloader" checkbox in later versions of Flash CC!

             

            Thanks again for taking the time to respond!

            • 3. Re: [HTML5/Flash CC] Preloader?
              sinious Most Valuable Participant

              I wouldn't call it a crude hack, PreloadJS wasn't going to do much more and was handing you the responsibility to visually indicate loading anyhow (just offering progress events). Your version does the same thing and as they say, if it works, no matter how you did it, you did it right .

               

              Glad you found a simple solution. You're welcome and good luck!

              1 person found this helpful
              • 4. Re: [HTML5/Flash CC] Preloader?
                heavyboots Level 2

                EDIT: One last note (which I'm apparently not allowed to change my post about for some reason). I actually used http://cssloader.net, not preloaders.net.

                 

                Built entirely out of CSS makes it a lot easier to keep track of…

                • 5. Re: [HTML5/Flash CC] Preloader?
                  peachflower

                  Hey! it's been years, but this is exactly what im trying to do in Adobe Animate CC. Can you go into more detail about how you applied the preloader to your website? Where did you put the "spinner" .js code?

                  • 6. Re: [HTML5/Flash CC] Preloader?
                    heavyboots Level 2

                    Basically, I just pasted the HTML code into the onLoad section of the projectName.html page that Flash generates and I put the stylesheet up above that with the other "styles". If you View Source on the link I provided up at the top you can see exactly how I positioned the assets.

                     

                    You'll see that my div was called "floatingBarsG" and that was pasted into the html, with the styles for floatingBarsG pasted above with the other scripts and such. And after the first tick, the display for floatingBarsG is set to none. It's basically 2 lines of code inside the onTick handler at the very bottom, after everything else is done initializing.

                     

                    var spinner = window.document.getElementById("floatingBarsG");

                    spinner.style.display = "none";

                    1 person found this helpful
                    • 7. Re: [HTML5/Flash CC] Preloader?
                      ClayUUID Adobe Community Professional

                      I think you meant cssload.net. What you posted is a parked domain.

                       

                      The animations there appear to just be "throbbers", not progress indicators. Doing a true progress indicator isn't that hard. You just have to hook into a few spots in the HTML container.

                       

                      First, add a progress listener to the asset preload block:

                       

                      var loader = new createjs.LoadQueue(false);
                      loader.addEventListener("fileload", handleFileLoad);
                      loader.addEventListener("complete", handleComplete);
                      loader.addEventListener("progress", handleProgress); // <-- ADD THIS CODE HERE
                      loader.loadManifest(lib.properties.manifest);
                      

                       

                      Second, paste the function to handle it after the handleComplete() function:

                       

                      function handleProgress(evt) {
                          document.getElementById("preloadFill").style.width = Math.round(evt.progress * 100) + "%";
                      }
                      

                       

                      Third, paste in some kind of progress indicator. The above function is written to work with the following very simple example, consisting of some CSS (inserted anywhere in the head), and a couple of DIV layers, inserted inside the body immediately before the <canvas> tag.

                       

                      <style>
                          #preload {
                              position: absolute;
                              background-color: #EEE;
                              top: 10px;
                              left: 10px;
                              width: 400px;
                              height: 5px;
                              border: 0;
                              padding: 0;
                          }
                          
                          #preloadFill {
                              position: absolute;
                              background-color: #AAA;
                              height: 5px;
                              width: 0;
                          }
                      </style>
                      

                       

                      <body onload="init();" style="background-color:#D4D4D4;margin:0px;">
                          <div id="preload"><div id="preloadFill"></div></div> <-- ADD THESE TAGS HERE
                          <canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG"></canvas>
                      </body>
                      
                      1 person found this helpful
                      • 8. Re: [HTML5/Flash CC] Preloader?
                        heavyboots Level 2

                        Very useful info! Thanks!

                         

                        (And yeah, you're correct in both having typo'd http://cssload.net and it just being a throbber not a true preloader…)

                        • 9. Re: [HTML5/Flash CC] Preloader?
                          ClayUUID Adobe Community Professional

                          Oops, I left something important out (and this forum software won't let me edit my post). You also need to add a line of code inside the handleComplete() function:

                           

                          document.getElementById("preload").style.visibility = "hidden";
                          

                           

                          This hides the progress bar when the page is done loading.