8 Replies Latest reply on Sep 27, 2013 10:43 AM by AMULI

    Dynamic Values for text

    kgus2k

      I apologize in advance.  Not much of a web designer or code guy here, but I just need to create a simple animation to be dropped into a MUSE creation and I think Edge Animate is the right way to do it.  For the life of me I cannot figure out how.

       

      Basically, I want to create a simple animation to explain the dimensions of a product.  A line with arrows on both ends would grow to the length of a line drawing symbolizing its height for example.

       

      Accompanying that would be a text box that I would like to simply count up from 0.0" to 3.5" for instance.

       

      The question is how do I dynamically update the text from 0.0 to 3.5 across a 2 second animation in Edge Animate?

      Is this even available or is this why people are still using Flash.

       

      Thanks in advance and apologies for the naivety!

       

      Karl

        • 1. Re: Dynamic Values for text
          AMULI Level 4

          Hi Karl,

           

          No naive at all : a very interesting exercise.

           

          We use three elements

          • a rectangular shape ;

          • a diamond cursor that moves along the shape (2 s tweening) ;

          • a text value element.

           

          1) The first solution leverages the update event that is fired by the timeline.

           

          First define constants that you can modify to your needs.

           

          Stage > creationComplete event handler :

           

          endValue = 35;

          duration = 2000; // 2000 ms

           

          Timeline.update event handler (accessed via the top left bullet+curly braces icon : circled on the screen capture) :

           

          var newValue = Math.floor( sym.getPosition()/duration *endValue);

          sym.$('value').text(newValue);

           

          sym.getPosition() gives the current position of the playhead in ms. We divide it by the total duration of the animation and multiply by the end value to display. Math.floor rounds to an integer value.

           

          Capture d’écran 2013-09-17 à 22.00.04.png

           

          2) The second solution leverages the JavaScript setInterval function, which calls a function at regular interval. For that, we define a new variable frequency : you can tweak its value until you get the correct frequency for the update.

           

          Stage > creationComplete event handler

           

          endValue = 35;

          duration = 2000; // 2000 ms

          frequency = 100;

          setInterval(function()

            {

              var newValue = Math.floor( sym.getPosition()/duration *endValue);

              sym.$('value').text(newValue);

            }, frequency);

           

          Download the two versions here : https://app.box.com/s/gi7hownshaz6rti8kggu

           

          Gil

          1 person found this helpful
          • 2. Re: Dynamic Values for text
            kgus2k Level 1

            Gil,

            Thanks so much.

             

            I tweaked some stuff around,  but am about 95% of the way there.

             

            I never would have gotten that on my own.

             

            Much appreciated!

            Karl

            • 3. Re: Dynamic Values for text
              AMULI Level 4

              Thanks, Karl. You're welcome if you need additionnal advice.

               

              Gil

              • 4. Re: Dynamic Values for text
                kgus2k Level 1

                Alright Gil,

                Here is one for you.

                 

                So I got the animation to work they way I wanted to, adding a few more variable text fields.  I am playing around with building a microsite for my company and you can view the animation here:

                http://www.kg-mediagroup.com/MP/pmd661mkii.html

                 

                My new question is...

                How do I get the animation to delay until in it is in the window view?  I know I can defeat Autoplay on the stage, but after that I am lost.

                 

                I did find Ray Camden's page regarding this, but it appears that he has written a lot of other code to make this happen which is beyond my non-coding head.

                 

                So I thought I would check back with you!

                 

                Thanks in advance if you can help me out with this.

                If not, I appreciate everything.  And I should prolly stop making this too complicated and just get the thing done.

                 

                Best,

                Karl

                • 5. Re: Dynamic Values for text
                  SEIF BH Level 2

                  Hey kARL ,

                   

                  ADD Text in edge animate and name it <<text>> and insert that in creation complete

                   

                  sym.$("text1").html("WRITE ANY THING THIS ");

                   

                   

                  SEIF BH

                  • 6. Re: Dynamic Values for text
                    AMULI Level 4

                    How do I get the animation to delay until in it is in the window view?  I know I can defeat Autoplay on the stage, but after that I am lost.

                     

                    Sorry, Karl, I do not understand the question Could you describe the behavior you'd like to implement ?

                     

                    Gil

                    • 7. Re: Dynamic Values for text
                      kgus2k Level 1

                      Hey Gil,

                      Sorry for the poor description.  Basically, I have the animation created and it works great - thanks to your help!

                       

                      The problem is the placement on the page.  I guess the technical term for it is that it resides "below the fold."  So when the page where the animation resides is loaded by the visitor, it is off screen.  It wouldn't be visible to the user until they scroll further down the page.  But the way it is now, with AutoPlay, by the time the animation is visible on screen in the browser, it has already played.

                       

                      What I was looking for was a way to delay the start of the animation until the user actually has scrolled down and put the animation into view. 

                       

                      I read about the CSS codes to delay the animation based on time, say don't start for 5s or something like that, but that is still a crapshoot as to whether the file is in view or not.

                       

                      Does that make sense, and is there an easy way to delay the animation, and then trigger it to play once it is visible on screen?

                       

                      Thanks,

                      Karl

                      • 8. Re: Dynamic Values for text
                        AMULI Level 4

                        Ok Karl, that's now perfectly clear

                         

                        So, set the autoplay property to false to delay the start of the animation until it is above the fold. When it is above the fold, you just call sym.getSymbol("<yourAnim>").play().

                         

                        Now, you can test the "above the fold" condition via $(window).scrollTop(). See post 17 in the following thread : http://forums.adobe.com/thread/1294350?tstart=0

                         

                        Gil