14 Replies Latest reply on Mar 17, 2015 6:16 AM by Kirchgässner

    Edge animate countdown

    pawan.saunya

      Hi,

       

      I'm trying to create a 7 day count down in adobe edge animate. which should include days, hours and minutes like in the picture below.

      I'm seriously struggling and I am a super noob at anything that involves coding.

      Waiting in anticipation.

       

      example.PNG

        • 1. Re: Edge animate countdown
          vivekuma Adobe Employee

          You can use existing jquery plugin from here http://plugins.jquery.com/tag/countdown/

           

          Download any of the plugins as per your need, and add the script to the Edge Animate by clicking "Add Script" and start using it in compositionReady of the stage.

          Before adding this downloaded script file in Edge Animate, you have to add the jQuery script file, else countdown plugin won't work.

           

          This will reduce the amount of coding you otherwise have to do if you implement it using plain javascript.

           

          hth,

          Vivekuma

          1 person found this helpful
          • 2. Re: Edge animate countdown
            pawan.saunya Level 1

            Hi Vivekuma,

             

            Thanks for the reply. I have attempted it but I have no idea what I am doing. It doesn't work because I'm not doing it right.

             

            Is there a simple edge animate project that has a countdown?

             

            Many thanks,

            Pawan

            • 3. Re: Edge animate countdown
              resdesign Adobe Community Professional & MVP

              Here is a sample I made using code from javascript kit. Pretty simple. Create a symbol with a text field named 'count'. On frame one add the code for countdown and on a frame to the right  sym.play(0);  This will loop back to the code on frame 1.

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

              1 person found this helpful
              • 4. Re: Edge animate countdown
                dharmk Adobe Employee

                I also completed a simple sample so thought of sharing anyway You should also be able to find other posts from resdesign on how to load and use jquery plugins in case you need to.

                 

                Here is the link for the composition - Dropbox - simplecountdown.zip . Solution is based on this simple javascript code - Edit fiddle - JSFiddle

                 

                You can see it working here - Simple Counter

                • 5. Re: Edge animate countdown
                  pawan.saunya Level 1

                  wow! Thank you sooo much! thank you for taking your time to help a clueless person like me. I'm really glad. thanks again!

                  • 6. Re: Edge animate countdown
                    pawan.saunya Level 1

                    This is wonderful! thank you very much. your example it perfect! One last question, how would I be able to set the count down time I want? so lets say 6days 4 hours 3 minutes?

                     

                    Thank you ever so much again!!!

                    • 7. Re: Edge animate countdown
                      resdesign Adobe Community Professional & MVP

                      Is the question for Dharmendra Kumar or me?

                      • 8. Re: Edge animate countdown
                        pawan.saunya Level 1

                        For Dharmendra Kumar please. But if you know please do enlighten me.

                         

                        • 9. Re: Edge animate countdown
                          dharmk Adobe Employee

                          The code behind my solution was very similar to what resdesign had suggested in her sample. You can open the stage compositionReady handler and search for the following:

                           

                          //Change this as per your requirement

                          var until = new Date((new Date()).getTime() + 42424200);

                           

                          You can change that to:

                          //6 days, 4 hours, 3 mins from now

                          var until = new Date((new Date()).getTime() + 6 * 86400000 + 4 * 3600000 + 3 * 60000);

                           

                          It will also be a good idea to convert the top level div to a symbol. You can cut the entire code of compositionReady and move it to the new symbol's creationComplete handler. Then you should be able to use the symbol whereever you want.

                           

                          -Dharmendra

                          1 person found this helpful
                          • 10. Re: Edge animate countdown
                            pawan.saunya Level 1

                            Wonderful! Thanks again for following me through. One last question. The problem is when ever I refresh or when ever someone visits the site, the clock starts from the assigned point for example 6d 4h 3min.So how can I make it countdown to 0 without it depending on the individual viewer. So if I upload the site today, the countdown should finish in 6 days no matter where I view it from. Is this possible?

                             

                            here is a example of what I mean: example

                             

                            many thanks again!!!

                            • 11. Re: Edge animate countdown
                              dharmk Adobe Employee

                              You should use a fixed date for the count down. You can use the following API:

                               

                              new Date(Date.UTC(year, month, day, hour, minute, second))

                               

                              Check the documentation page for reference - Date.UTC() - JavaScript | MDN

                               

                              For eg:


                              var until = new Date(Date.UTC(2014, 11, 6, 12, 6, 7));



                               





                              1 person found this helpful
                              • 12. Re: Edge animate countdown
                                pawan.saunya Level 1

                                Thank you ever so much. Everything is working perfectly fine now. thank you for understanding the situation and giving a solution to it.


                                • 13. Re: Edge animate countdown
                                  bryann design Level 1

                                  I noticed an anomaly. When the clock is at the day of the event, the days switch to -1 for me. Do you know why that might be?

                                  Otherwise, the countdown seems completely normal at any other day. Thanks!

                                  • 14. Re: Edge animate countdown
                                    Kirchgässner Level 1

                                    I want to count down to this friday, but it showa 33 days. Whar could be wrong?

                                     

                                     

                                     

                                    //Change this as per your requirement

                                    var until = new Date(Date.UTC(2015, 3, 20, 10, 50, 0));var $dd = sym.$("dd");

                                    var $hh = sym.$("hh");

                                    var $mm = sym.$("mm");

                                    var $ss = sym.$("ss");

                                     

                                     

                                    function pad(num, size) {

                                        var s = num+"";

                                        while (s.length < size) s = "0" + s;

                                        return s;

                                    }

                                     

                                     

                                    function startCounter() {

                                      updateCounter();

                                      setInterval(updateCounter, 1000);

                                    }

                                     

                                     

                                    function updateCounter() {

                                      var now = new Date();

                                      var delta = until - now;

                                     

                                     

                                      var days  = Math.floor( delta / (86400000) );

                                      var hours = Math.floor( delta / (3600000) );

                                      var mins  = Math.floor( delta / (60000) );

                                      var secs  = Math.floor( delta / 1000 );

                                     

                                     

                                      var dd = days;

                                      var hh = hours - days  * 24;

                                      var mm = mins - hours * 60;

                                      var ss = secs - mins  * 60;

                                     

                                     

                                      $dd.html(pad(dd,2));

                                      $hh.html(pad(hh,2));

                                      $mm.html(pad(mm,2));

                                      $ss.html(pad(ss,2));

                                    }

                                     

                                     

                                    startCounter();