6 Replies Latest reply on Aug 12, 2013 12:20 AM by dezzign.cz

    Load on View for Tablet devices

    jacobmannin

      Hi,

       

      I'm putting together a digital magazine using Indesign and a MAG+ plugin. I have created html5 animations using Edge animate, but the Magplus software preloads the ajoining pages, meaning once someone has finsihed reading a page for a few minutes, the 20 sec animation on the next has already loaded and played. The Mag+ forum states this: http://support.magplus.com/entries/21939262-start-html-animation-on-view

       

      But as you can see, this example is for Hype, and I don't know how to create the same effect with my edge files. All I want is for the animation to only load once I scroll to that particular page.

       

      Any help would be much appreciated.

        • 1. Re: Load on View for Tablet devices
          jacobmannin Level 1

          in case you can't log in to that link: They state the code as being:

           

          //    HYPE.documents["version1"]

          var init = false;

          function onViewEnteredInside(){

              if(init) return;

              init = true;

          (function HYPE_DocumentLoader() {

              var resourcesFolderName = "version1_Resources";

              var documentName = "version1";

              var documentLoaderFilename = "version1_hype_generated_script.js";

           

              // find the URL for this script's absolute path and set as the resourceFolderName

              try {

                  var scripts = document.getElementsByTagName('script');

                  for(var i = 0; i < scripts.length; i++) {

                      var scriptSrc = scripts[i].src;

                      if(scriptSrc != null && scriptSrc.indexOf(documentLoaderFilename) != -1) {

                          resourcesFolderName = scriptSrc.substr(0, scriptSrc.lastIndexOf("/"));

                          break;

                      }

                  }

              } catch(err) {    } } ...

          • 2. Re: Load on View for Tablet devices
            CindyJones-Hulfachor Level 1

            Jacobmannin,

             

            In the following magplus tutorial it mentions creating a trigger that will make an imported video run when it is in view. Maybe there is something there that could be used for the edge animation.

            http://www.magplus.com/video/adding-videos-to-layouts/

             

            Have you been successful at importing an edge animation into the magplus layout? Being able to view it working in Mag+ Reviewer. Our company decided on using Mag+ so I am scrambling a bit trying to figure out how to link up Edge Animate to it. Any tips or directions would be appreciate it. Since it looks like there aren't many of us in the forum working with both, I can try to pass along what I pick up.

             

            Cindy J-H

            • 3. Re: Load on View for Tablet devices
              jacobmannin Level 1

              Hi...

               

              Yes we managed to crack it in the end. Edge Animate works best for clean crisp animations, with low file sizes as well as more interactive elements. I tried a couple of other programmes. But they were no where near as easy and didn't produce good results.

               

              In order to get the in view to work.... produce the Edge Animate files and place into appropriate folder as per Mag+ instructions i.e. 'myanimatefiles_html'

               

              open up the html file into a browser such as notpad, so you can edit the code. You need to add:

               

              var init = false;

              function onViewEnteredInside(){

                  if(init) return;

                  init = true;

               

              before the javascript tag which pulls up the 'preloader' script and then end it with }

               

              Don't place the code at the begining of the html, only encompassing the 'preloader' javascript code. Hope that helps.

              • 4. Re: Load on View for Tablet devices
                jacobmannin Level 1

                If it's videos you want to use (which is different to HTML5 animations) make sure you have the latest version of mag+ installed currently 4.2 (as of june 2013) and the plugin already gives you the open of autostart - load on view.

                 

                Thanks

                • 5. Re: Load on View for Tablet devices
                  CindyJones-Hulfachor Level 1

                  Jacobmannin,

                   

                  Thank you for the reply on adding Edge Animate to Mag+ layout. This is my current problem so I will be jumping into it today. Hope it goes well.

                  What type of projects are you creating in Animate for Mag+?  Can you recommend any additional forums or communities where Mag+ users are gathering to exchange issues and solutions.

                   

                  Thanks so much,

                  Cindy J-H

                  • 6. Re: Load on View for Tablet devices
                    dezzign.cz

                    Hi Jacobmannin,

                     

                    I am still not able to run my Edge animation... (I mean on view)  can you please send some example, where exactly should I insert the code? I have tried many, but nothing works.

                     

                    My html looks i.e. like this:

                    <!DOCTYPE html>
                    <html>
                    <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                              <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
                              <title>Untitled</title>
                    <!--Adobe Edge Runtime-->
                        <script type="text/javascript" charset="utf-8" src="tacho_edgePreload.js"></script>
                        <style>
                            .edgeLoad-EDGE-149110747 { visibility:hidden; }
                        </style>
                    <!--Adobe Edge Runtime End-->
                    
                    
                    </head>
                    <body style="margin:0;padding:0;">
                              <div id="Stage" class="EDGE-149110747">
                              </div>
                    </body>
                    </html>
                    

                     

                    What should I modify? Thanks a million.

                     

                    Zdenek