4 Replies Latest reply on Mar 25, 2013 10:59 PM by AndreasGalster

    Animations for responsive (conditional loading of images).

    AndreasGalster

      I am working on a responsive portfolio website. My idea is to create animations of my portfolio. There are two options:

      1. A list of the references and on click I load the corresponding animation.
      2. I include all animations on one page and I trigger them via the scroll position.

       

      Regardless of which approach I choose, I only want these animations to run on a certain device width, because anything for mobile would be too big (I need rather big PNGs for the animations) + you can't really view it properly anyway. For every device specified I do not want to use these animations, this also means I do not want load all the images in the composition. Is this possible, or are the images always included as soon as you include your composition into a file. Or is there an instruction in order to start/prevent the loading of the images to my needs?

        • 1. Re: Animations for responsive (conditional loading of images).
          Franck Payen MVP & Adobe Community Professional

          Have you looked around the EdgeCommons initiative by Simon Widjaja which solves the device width approach. As for the loading, i suppose that's an interesting feature request to ask directly on the github.

          • 2. Re: Animations for responsive (conditional loading of images).
            AndreasGalster Level 1

            Thanks this looks nice!

            Unfortunately the scriptloader isn't yet documented. I am trying to figure this out on my own how I can load the current animation that I need. It works if I append the script via jQuery's getScript, but I suppose this only works because it happens on document.ready(). If I try to append the required script on a click event, then nothing happens to the composition. -> The animation does not start. Any suggestions?

             

             

            I currently have this code, which appends the stage on click, then loads the required script and as a callback I try to pick up the composition and play it. Am I doing something wrong?

             

                         $(document).ready(function() {

                            

                            $('body').click(function() {

                                $('#mystage').append ('<div id="Stage" class="collector"  style="padding-top:60%;"></div>');

                                $.getScript("collector_edgePreload.js", function(data, textStatus, jqxhr) {

                                    var loadedComps = AdobeEdge.getComposition("collector");

                                    AdobeEdge.Symbol.bindTimelineAction("collector", "stage", "Default Timeline", "complete", function(sym, e) {

                                        sym.play (/**0, true**/);

                                    }); 

             

             

                                });

                            });

                            

                         });

            • 3. Re: Animations for responsive (conditional loading of images).
              Franck Payen MVP & Adobe Community Professional

              Did you specifically check this part :

               

              Adaptive Layouts (different layouts for specific sizes)

              First of all you need a rectangle (div container) on the stage (width=100%) with the name "adaptiveContainer".

              After loading EdgeCommons you can define different layouts by simply calling EC.setAdaptiveLayouts( ) and passing in an array of sizes. The second argument is a reference to the stage symbol (simply "sym") and the third argument is the name of the target container (e.g. "adaptiveContainer"). The sizes will automatically be mapped to the corresponding symbols with the prefix "layout" (e.g. layout600 or layout1200) in the library.

              yepnope({ load: "http://simonwidjaja.github.com/EdgeCommons/live/EdgeCommons-0.7.1.min.js", callback: function() { EC.setAdaptiveLayouts( [400, 600, 1200], sym, "adaptiveContainer" ); } });

               

              • 4. Re: Animations for responsive (conditional loading of images).
                AndreasGalster Level 1

                I really don't need the adaptive layouts. All my animations scale proportionally down, so what I just need at the moment is a way to load and play any animation on demand.

                 

                I'm not quite sure how it is supposed to work. I only know it has to be something like.

                 

                                         sym.getStage("collector").play ();

                                         sym.getComposition("collector").play ();

                 

                                         Edge.sym.getStage("collector").play ();

                                         Edge.sym.getStage("collector").play ();

                 

                I'm reading the JS API documentation but I'm not getting it to work .

                The forum blocking threads for whatever reason isn't helping either with the search for a solution ...

                 

                For the responsive loading all I have to do is define a min device width for which I want my animation(s) to load.