15 Replies Latest reply on Aug 23, 2016 9:39 AM by chrissquith

    Counting numbers

    NigelFlag

      I am fairly new to Edge Animate and I am trying to animate a bar chart, and want to include the bar total figures as numbers 'counting up' as the bars grow. Animating the bars in the chart is easy, but I am unable to find any way for the figures to count upwards. Is it possible to do this in edge animate?

        • 1. Re: Counting numbers
          resdesign Adobe Community Professional & MVP

          In order for your count to update, you need to create a loop. Look at the example  Extend in edge lessons.

          1 person found this helpful
          • 2. Re: Counting numbers
            SimonDBench Level 1

            I've done this before and used the Greensock TweenMax engine http://www.greensock.com/tweenmax/ .  if you use TweenMax to animate the bar you can call an onUpdate function that can update a p tag or similar. The example below shows how you could animate the css width and then report it to a text area as the animation plays.

             

            TweenMax.to(sym.$('mybar'), 1, {width:100, onUpdate:function(){

                 sym.$('textArea').text(sym.$('mybar').width());

            }});

            • 3. Re: Counting numbers
              resdesign Adobe Community Professional & MVP

              i am surprised that you would use tweenMax to do something that is possible natively in Animate. Why overload you composition with an extra plugin in this instance?

              • 4. Re: Counting numbers
                heathrowe Most Valuable Participant

                After seeing the tweenMax sample posted by Simon, gave me idea to tackle it natively, and is quite simple.

                 

                Edge Animate has a timeline update, comparable to the onUpdate noted above.

                 

                See example: http://www.heathrowe.com/edge/animateheightvalue/

                Download:      http://www.heathrowe.com/edge/animateheightvalue/animateheightvalue.zip

                 

                In my case a single Stage animation; a rectanble bar with a nested text element.

                Then in the timeline > update event handler I did the following

                 

                ////// timeline > update event //////////

                   

                    var element = sym.$("Rectangle");   // get bar element
                    var elementTxt = sym.$("Text");       // get text placeholder

                    var i = element.height();                   //  store the height value of the animated bar in var i
                    elementTxt.text(++i);                        // increment the value of i (our height) until the update event is complete

                 

                ///////// end copy ////////////////////////////

                 

                hth

                Darrell

                1 person found this helpful
                • 5. Re: Counting numbers
                  resdesign Adobe Community Professional & MVP

                  Hey Darrell,

                  How do you access the timeline.update? I was just wondering about that today.

                  • 6. Re: Counting numbers
                    resdesign Adobe Community Professional & MVP

                    Nevermind. Just got it!

                    • 7. Re: Counting numbers
                      Mücahit Çakır Level 1

                      Thanks for the example! But i wonder that, what if i just want to count from 0 to 100 without defining "var i" as "element.height" ?

                      • 8. Re: Counting numbers
                        NigelFlag Level 1

                        Hi darrel

                         

                        Thanks for that, will download and try it

                         

                        Nigel

                        • 9. Re: Counting numbers
                          SimonDBench Level 1

                          I use TweenMax for an awful lot of other things so it's usually included in my compositions.  I think the key difference here is that my solution also uses TweenMax to dynamically size the bars as well and doesn't rely on Edge for the animation.  This makes it a lot easier to change values in the future if needs be.  Also if the chart uses multiple bars you can use the staggerTo command to give you a more impressive reveal.

                          • 10. Re: Counting numbers
                            NigelFlag Level 1

                            Darrel

                             

                            This is great, but can you specify a number to finish on rather than the height?

                             

                            Nigel

                            • 11. Re: Counting numbers
                              heathrowe Most Valuable Participant

                              Try something like this.

                              Note the sample has changed and the scripting is moved to a timeline trigger ().

                              Change the second 'somevalue' 10 to something you need.

                               

                              /////// timeline trigger ///

                              // get elements
                                      var elementTxt = sym.$("Text");

                               

                              // get timeline symbol duration
                                     var dur = sym.getDuration();

                               

                              // create a tween {from} {to} somevalue using jquery animate
                              $({someValue: 0}).animate({someValue: 10}, {
                                    // match the animate duration property to the length of the timeline animation
                                        duration: dur,
                                    // called on every step
                                           step: function() {
                                                 // update the element's text;
                                                       elementTxt.text(Math.ceil(this.someValue));
                                           }
                              });

                              //////////// end timeline trigger /////////////

                               

                              Preview: http://ww w.heathrowe.com/edge/animatevaluegraph/

                              Download: http://www.heathrowe.com/edge/animatevaluegraph/animatevaluegraph.zip

                               

                              hth

                              Darrell

                              1 person found this helpful
                              • 12. Re: Counting numbers
                                mikewirthart

                                Hey Darrell,

                                 

                                I'm working on a column graph that generates bars based on values typed into fields. I love the counting numbers idea, but can't tie it to a timeline in my project.

                                 

                                How would this work with just .animate() code?

                                 

                                Best,

                                Mike

                                • 13. Re: Counting numbers
                                  mikewirthart Level 1

                                  But how does this impact the chart width?

                                  • 14. Re: Counting numbers
                                    heathrowe Most Valuable Participant

                                    Hi Mike, as per response #4 above, and assuming you have your 'bar' element animating left or right, then you want to capture the 'width' property of the element. See sample below.

                                     

                                    As for the 'input' option, unfortunately I have not worked much with 'input' fields in Edge Animate so hopefully, someone can assist you with that.

                                     

                                    ////// timeline > update event //////////

                                      

                                        var element = sym.$("Rectangle");   // get bar element
                                        var elementTxt = sym.$("Text");       // get text placeholder

                                        var i = element.width();                   //  store the width value of the animated bar in var i
                                        elementTxt.text(++i);                        // increment the value of i (our height) until the update event is complete

                                     

                                    ///////// end copy ////////////////////////////

                                     

                                    hth

                                    Darrell

                                    • 15. Re: Counting numbers
                                      chrissquith

                                      does this work the same in Animate CC?