9 Replies Latest reply on Aug 26, 2014 1:11 PM by joel_pau

    Dynamic Photo Load Lag

    CPBTenner Level 1

      Hello,

       

      I am trying to dynamically populate a cube ad with photos and text from a json file.  The fields that are populated are photo, title, desc and price.  When I initially created the ad I had a photo and 3 text fields.  After a 5 second animation, the count would increase by 1 and all fields would be repopulated.  When I tested this the text worked perfectly but there was a lag in the photo switch.  My solution was to create a second set of fields to run the following way:

       

      Slide A (visible): Photo, Title, Desc, Price

      Slide B (hidden): populated with the next Photo, Title Desc, Price

       

      5 second animation, then switch

       

      Slide B (Visible)

      Slide A (hidden) repopulated with the next Photo, Title, Desc, Price

       

      5 second animation, then switch

       

      Loop back to the top...

       

      This set-up works through the first run through but then the photo starts lagging again.

       

      Can anyone help me solve the lag issue?  Below is my compositionReady stage code. I will also include a zip of my project.  I moved Slide B 300px to the right and took out the hide functions so I could see what was happening behind the scenes.  I also included some helper text fields to show what functions are being called while it is running.

       

      compositionReady Code:

       

      //Variable

      imageCount =     0;

       

      //JSON

      $.getJSON("slides.json", function(data){

       

          loadDataA(imageCount);

       

          // Load Data A

          function loadDataA(i) {

          sym.$("notification1").html("loadDataA");

       

              sym.$("photo").empty();

              sym.$("photo").attr("src", data[i].image);

                

              // Populate text A

              sym.$("title").html(data[i].title);

              sym.$("desc").html(data[i].desc);

              sym.$("price").html(data[i].price);

              sym.$("notification5").html("photo image = " + data[i].image);

          }

       

          // Load Data B

          function loadDataB(i) {

          sym.$("notification1").html("loadDataB");

       

              sym.$("photo2").empty();

              sym.$("photo2").attr("src", data[i].image);

            

              // Populate text A

              sym.$("title2").html(data[i].title);

              sym.$("desc2").html(data[i].desc);

              sym.$("price2").html(data[i].price);

              sym.$("notification6").html("photo2 image = " + data[i].image);

          }

       

       

          function hideAshowB() {

          sym.$("notification2").html("hideAshowB");

               sym.$("photo").empty();

              //sym.$("photo").hide();

              //sym.$("title").hide();

              //sym.$("desc").hide();

              //sym.$("price").hide();

              sym.$("photo2").show();

              sym.$("title2").show();

              sym.$("desc2").show();

              sym.$("price2").show();

          }

       

          function hideBshowA() {

          sym.$("notification2").html("hideBshowA");

              sym.$("photo2").empty();

              //sym.$("photo2").hide();

              //sym.$("title2").hide();

              //sym.$("desc2").hide();

              //sym.$("price2").hide();

              sym.$("photo").show();

              sym.$("title").show();

              sym.$("desc").show();

              sym.$("price").show();

          }

       

            function animateSlideshowA() {

            sym.$("notification3").html("animateSlideshowA");

       

              sym.$("title").animate({x: 9}, 5000, function() {

              sym.$("notification4").html("insideSlideshowALoop");

                          imageCount++;

       

                          if (imageCount >= data.length) {

                              imageCount = 0;

                          }

                          loadDataA(imageCount);                  

                          hideAshowB();                   

                          animateSlideshowB();

                      });

              }

       

            function animateSlideshowB() {

            sym.$("notification3").html("animateSlideshowB");

       

              sym.$("title2").animate({x: 309}, 5000, function() {

              sym.$("notification4").html("insideSlideshowBLoop");

                          imageCount++;

       

                          if (imageCount >= data.length) {

                              imageCount = 0;

                          }

                          loadDataB(imageCount);

                          hideBshowA();                 

                          animateSlideshowA();

                      });

              }

       

          loadDataA(imageCount);

              imageCount++;

              loadDataB(imageCount);

              animateSlideshowA();

       

       

      });

       

       

      www.capitalpress.biz/html5ads/cubes/nyssatractor/NyssaDynamicTest.zip

       

      Thanks for your help,

       

      Brandon

        • 1. Re: Dynamic Photo Load Lag
          joel_pau Level 5

          Hi,

           

          Well, your direction is wrong or too much complicated.

          I see what you want to reach. I look at your files.

          I will write your code.

          • 2. Re: Dynamic Photo Load Lag
            CPBTenner Level 1

            Thanks joel_pau. I would like to understand where I went wrong so that I could use the information in the future. I initially had it set up with 1 photo and 3 text fields but I ran into the same photo lag issue, maybe that was closer to the right direction?

             

            I look forward to seeing your solution.

             

            Brandon

            • 3. Re: Re: Dynamic Photo Load Lag
              joel_pau Level 5

              Hi,

               

              So, here is an Edge solution using a symbol ("animateAds"). Basic approach is to create a collection and browse it.

              Collections are:

              a) the json file.

              b) sym.createChildSymbol("animateAds","slider") ==> it creates your ads collection.

              c) sym.getChildSymbols() ==> it returns the ads collection created by 2).

              I also use a global variable ( sym.setVariable("index") ) to play each ad. So: a counter.

               

              1) Creating the symbol:

              adConvertSym.jpg

              2) Animating the symbol (one ad):

              timeline.jpg

               


              ==> the demo file to download: Nyssa.zip - Box

              It's an infinite loop. You can add events (click, swipe).


              Note: i change the json file to browse an object.

              At last but not least: i tested on Apple (OS X Mavericks and iOS 7.1.2) and on Microsoft (Windows 8.1 update 04/18 with IE 9,10,11).

              Ask me if you don't understand code. 2 main steps: creating ads (panel: creationComplete) and playing ads (trigger panels: at 0 and 5000).

              1 person found this helpful
              • 4. Re: Re: Dynamic Photo Load Lag
                CPBTenner Level 1

                joel_pau, thank you so much!  This is much simpler than what I was trying to accomplish, and it incorporates in the versatility of Edge Animate.  I still have so much to learn about this program, but am grateful that I have resources like you to help when I need it.

                 

                Thanks a ton!

                 

                Brandon

                • 5. Re: Re: Dynamic Photo Load Lag
                  CPBTenner Level 1

                  So I have the ad working 99.9%.  I added my own animation transitions to it and hosted it on the web so I could view it. I notice 1 slight problem.  After all of the pictures cycle through once, a 2nd photo image appears about 10 pixels up from the bottom of the cube and continues to cycle with the normal animation.  It looks as though it is 1 photo ahead of the one that appears in the normal photo position. Any idea why or how to fix it?  I didn't change your code at all, just the animation timing and movement in animateAds.  Here is a link to the hosted ad: http://www.capitalpress.biz/html5ads/cubes/nyssatractor/nyssatractortest.html

                   

                  Thanks,

                   

                  Brandon

                  • 6. Re: Re: Dynamic Photo Load Lag
                    CPBTenner Level 1

                    I found a solution, I just clipped the slider div up 10px which hides the additional photo.  Will the 2nd photo add extra loading time to my ad? Is there a way to remove it?

                    • 7. Re: Dynamic Photo Load Lag
                      joel_pau Level 5

                      This "bug" appears (picture above)

                      bug.jpg

                      because the container ("slider") is not well set.

                       

                      You have to set "hidden" as above.

                      sliderSet.jpg

                      It seems that yours is set to "visible".

                      • 8. Re: Dynamic Photo Load Lag
                        CPBTenner Level 1

                        Thanks! (fyi, slider was set to hidden) As I stated above, I fixed the problem by clipping the bottom 10 px off the bottom of slider.

                        • 9. Re: Dynamic Photo Load Lag
                          joel_pau Level 5

                          Yes, my answer was wrong.

                          Slider height and symbol height must be identical (or equal).

                          Else you can also add a margin to the symbol.

                          var instance = sym.createChildSymbol("animateAds","slider");

                          instance.getSymbolElement().css({"margin-top": "2px", "margin-bottom": "2px"});

                          instance.$("photo").attr("src",item.image);

                          1 person found this helpful