13 Replies Latest reply on Aug 8, 2013 7:52 AM by Xoco

    Animation not running

    Xoco Level 3

      I'm doing my first steps with the code and try to create a random animation, but always shows the last result and last position. Not displayed all intermediate positions. Why?

       

      I've tried at various events and various browsers but no way.

       

      var i = 0;

      for (i=0; i<=1000; i++)

                {

                var x = Math.random() * 1000

                var y = Math.random() * 1000

                sym.$('rectangle').css('left', x).css('top', y);

                // Change an Element's contents.

                //  (sym.$("name") resolves an Edge Animate element name to a DOM

                //  element that can be used with jQuery)

                sym.$("text").html(i);

                sym.$("textx").html(x);

                sym.$("texty").html(y);

                }

        • 1. Re: Animation not running
          AMULI Level 4

          Hi Josep,

           

          In order to trace what's going on, you can use Firebug (or the developer tool provided by any other browser). Then, instead of assigning the content of your three elements, you will display the successive values in the console via :

           

          console.log('i');

          console.log('x');

          console.log('y');

           

          (but I would test with 10 iterations instead of 1000 ).

           

          It's perfectly normal to only see the result of the last iteration. In  the loop, you affect the same object, each iteration destroying the effect of the preceding iteration.

           

          What is your goal ? It looks like you want to make 1000 instances of the same rectangle symbol, each having a random location on stage. Correct ?

           

          Gil

          • 2. Re: Animation not running
            Xoco Level 3

            Well, it's a stupid test. Yes, I want to see the same rectangle show quickly 1000 (or 10) times in random positions, it's necessary create new instances (10) of symbol inside the loop for show it? it's necessary convert rectangle to symbol for this test? thanks bro.

            • 3. Re: Animation not running
              AMULI Level 4

              Hi Josep,

               

              You need to convert the rectangle into a symbol only if you plan to display simultaneously different instances of it and end the animation with 1000 rectangles on screen.

               

              To produce your effect, I would write a function :

               

              function randomLocation()

              {

                var x = Math.random() * 1000

                var y = Math.random() * 1000

                sym.$('rectangle').css('left', x).css('top', y);

              }

               

              then call this function at regular interval (say 100 ms) via setInterval() :

               

              setInterval( randomLocation, 100);

               

              You could stop that iterative process after a certain amount of time via setTimout().

               

              Learn more about those functions here : http://www.w3schools.com/js/js_timing.asp

               

              Another thread that may inspire you : http://forums.adobe.com/message/5486578#5486578

               

              And if you need more help, do not hesitate to ask. I could build an example later when I will be less busy

               

              Gil

              • 4. Re: Animation not running
                Xoco Level 3

                Works fine bro, thanks (I didn't know setinterval function).

                 

                I'm newbie with Javascript (I'm programmer of PowerBuilder) and edge code editor is not helpful, it only show the 16 code snippets (stop, play, stop at...) but i don't see help for objects, events, and above all properties (for access by code) of elements because edge assume that I know javascript and css.

                 

                Do you recommend edge code for to start with code? i don't understand yet how edge code is integrated with edge animate.

                 

                Thank you again.

                 

                Josep

                • 5. Re: Animation not running
                  AMULI Level 4

                  I do not practise Edge Code (but that's an error, I should).

                   

                  I understand how frustrating it is if you're used to code hints showing you the existing properties, methods and events that could be used after the dot following your variable name (I had the same disappointment coming from ActionScript 3 programming). But this is only possible with a strictly typed language : the environment knowing the type of your variable.

                   

                  But JavaScript is not a strictly typed language. And Edge Animate still in its infancy.

                   

                  The best thing approaching a complete API documentation we are used to is certainly : http://www.w3schools.com/js/

                   

                  But as Edge Animate is build upon the jQuery framework, I suggest that before diving into the JavaScript intricacies you explore the jQuery API : http://api.jquery.com/

                   

                  And finally, it's vital to understand the specificities of the Edge Animate API : http://www.adobe.com/devnet-docs/fr_FR/edgeanimate/api/current/index.html

                   

                  And becaming a regular in the present forum, you'll learn at lot. You're welcome for any questions. And have good experiments

                   

                  Gil

                  • 6. Re: Animation not running
                    Xoco Level 3

                    Thank you very much for your advice. I will try follow your tips.

                     

                    Is possible to draw points or random lines for make webs like this: radiohead.com? i only found rectangles and text boxs like Adobe Muse but no lines. I found lineTo method but i don't know how implemented it in edge.

                     

                    Are you french? i'm catalan!

                    • 7. Re: Animation not running
                      robboerman Level 4

                      that effect is made by the html5 element canvas.

                      • 8. Re: Animation not running
                        AMULI Level 4

                        Are you french? i'm catalan!

                         

                        Yes, I am (sorry, Rob, but some do speak french around the world ).

                         

                        Indead, on the radiohead home page each stem could be drawn, as Rob suggests, via html5 canvas.

                         

                        But if you look at it closer, you'll notice that each stem is an instance of the same shape (or a limited number of shapes), with different locations, sizes and orientations. A perfect case for symbol instantiation :

                         

                        • may be the initial shape is drawn in Illustrator and exported to SVG ;

                         

                        • then, it's imported into Edge Animate and converted into a symbol ;

                         

                        • a loop (setInterval()) makes the instances via sym.createChildSymbol() and each instance receives random values for its location, size and rotation. But it's not complete random in radiohead's site : complete randomness is noise, complete order is boring and life – which is not boring  - stands in between, on the edge of chaos !

                         

                        Gil

                        • 9. Re: Animation not running
                          robboerman Level 4

                          damn so its almost a french forum xD

                          • 10. Re: Animation not running
                            resdesign Adobe Community Professional & MVP

                            haha! Oui Monsieur!

                            • 11. Re: Animation not running
                              Xoco Level 3

                              In the same line I try to create text animation for to change text language:

                               

                              for (i=1; i<=lengthEsp; i++){

                                 sym.$("textNosaltres").html(strEsp.substring(1,i) + strCat.substring(i,lengthCat));

                              }

                               

                              But one more time only show the final result, not all sequence. And with this example I don't know how to use setInterval function. Any idea?

                               

                              Thanks.

                               

                              Josep

                              • 12. Re: Animation not running
                                AMULI Level 4

                                Hi Josep,

                                 

                                If your goal is indeed to display successively different texts, follow the same principle as before :

                                 

                                • the body of the for loop becomes the body of a new function changeText() ;

                                 

                                • then you call setInterval( changeText, 1000) to change the text every second.

                                 

                                Gil

                                • 13. Re: Animation not running
                                  Xoco Level 3

                                  Yes, it's true, sorry...

                                   

                                  Finally (and works fine):

                                   

                                  function canviText(){

                                       sym.$("textNosaltres").html(strEsp.substring(0,i) + strCat.substring(i,strCat.lengthCat));

                                       i++;

                                       if(i>strEsp.length){clearInterval(interEsp)};

                                  }

                                  interEsp=setInterval(canviText,0);

                                   

                                  but on iPhone is too slow text change and I will delete this code. Tx.