4 Replies Latest reply on Mar 13, 2014 10:07 AM by resdesign

    Animating dynamic content

    shadowfax007

      Hello all-

       

      I'm creating a "ticker" type slide show where the images(thumbnails) constantly move slowely to the left.

      The stage is 125pxH X 1280px W.

      The images will be clickable thumbnails.

      The image are dynamic, pulling the image URL and title from a JSON file.

       

      I have the images pulling into the animation but I don't know how to animate them to slide left across the stage.

      The stage is basically empty with the exception of the symbol (I've also removed the symbol from the stage but the images pulled from the JSON file remain static and do not move).  I've tried animating the symbol on the "symbol's stage" and also animating the symbol on the main stage.  By animating the symbol on the main stage, I get the "container" for the dynamic images sliding across the stage but the images remain static.

       

      Does anyone know how I can animate them across the stage?

       

      Oh, I don't think it makes a difference but here's the code I have in the "creationComplete" action:

       

      $.getJSON('categories.json', function(data) {

       

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

                {

                                    var s = sym.createChildSymbol("slide", "stage");

                                    s.$("category_img").css({"background-image":"url('"+data[i].image+"')"});

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

                                    s.getSymbolElement().css({"position":"absolute",

                                                        "left": i*225+50+"px",

                                                        "top":"2px"});

                }

      });

       

       

      Thank you for any help in this :-)

        • 1. Re: Animating dynamic content
          resdesign Adobe Community Professional & MVP

          Long time no see! How are you?

          I am thinking that you could use jquery animate() to move your slides.

          Something like this:

           

          in compositionReady:

          sym.$('thumbnails').css({'position':'relative'});

          Then this code in a loop:

           

          sym.$("thumbnails").fadeIn('slow',function(){

            $(this).animate({'left': '-=30px'},'slow');

          });

           

          But then you will have to put it in a symbol so that it starts over at the beginning when it reaches the end.

           

          OK I got it and here is the sample:

          https://app.box.com/s/cdn6gz2qoasqvs63a1eb


          1 person found this helpful
          • 2. Re: Animating dynamic content
            resdesign Adobe Community Professional & MVP

            Next you could check out this plugin:

            http://smoothdivscroll.com/#quickdemo

            • 3. Re: Animating dynamic content
              shadowfax007 Level 1

              hey!

              I'm fine, thanks - been busy with other projects not requiring Edge until now.

              How have you been?  I see your still helping the helpless like myself :-)

               

              I couldn't get your example to work with th dynamic info :-(

               

              The project is to be a scrolling area with clickable "categories" and names underneith.  Since this is a new version of something I've already been using, I have multiple clients using this and so need it to be dynamic and pull the information from a database (into the JSON file).

               

              I may have to look into smoothscroll.  One of the reasons for trying with Edge is to be able to pull in both the image and the text(smoothscroll would be fine with just the images and I could code it to work dynamically).

               

              You did give me an idea though.  I may be able to add the info into a div the way I need it and then find a way (via jQuery?) to scroll the entire div - I'm not sure if that will work but I'll give it some thought.

               

              I'd still like to be able to do this with Edge - I'll keep reading to get a better idea of how Edge handles the dynamic info, at what point the info is inserted into the animation and why it doesn't want to scroll...

               

              Thanks for the help - I'm working on a new project and may be adding more Edge code other then the one Im working on here...

              • 4. Re: Animating dynamic content
                resdesign Adobe Community Professional & MVP

                Glad you are OK. Always think about you when I go down South!

                 

                I suppose that if you grouped your images and your text in the same div then that would work.