17 Replies Latest reply on May 27, 2014 10:20 AM by TimJaramillo

    Random Movements


      Hi guys, I'm not super familiar with action script so please bear with me.


      I'm trying to create random movement for my symbols on the stage.


      something like the into to this video




      can someone please help?



        • 1. Re: Random Movements
          TimJaramillo Level 4

          Hi Ellen,


          Edge Animate actually leverages javascript, not ActionScript (Flash language).


          I don't think the movement in that video is really random- complex yes, but not random. In Edge you could do something similar by creating a symbol for each object, then using alpha, scaling and clipping within each symbol to reveal the content. You could move each object around the screen as you like.

          1 person found this helpful
          • 2. Re: Random Movements
            Jerry Witt Level 2

            Is there some simple js I could use to randomize the position and rotation of a symbol? I have a symbol that moves from the top of the stage to the bottom. I would like it to repeat doing this, but each time start off at a different position on the x and a different rotation. I have tried this but it does not work:


            var n = Math.floor (Math.random () * 360);

            //set the value of a Symbol variable

            sym.setVariable("kernals1", "rotate(n)");

            sym.setVariable("kernals1", "position-x(n*3)");


            Is it possible for me to re-orient my symbols at run-time?

            • 3. Re: Random Movements
              TimJaramillo Level 4

              Hey Jerry, most definitely.


              I would do this strictly through code, (including animating the symbol). Look into the jQuery "animate" method for animating it, after you reset the random properties of the symbol.


              // set random variables

              var randomXPos_start = Math.floor (Math.random () * 600);

              var randomXPos_end = Math.floor (Math.random () * 600);

              var randomRotatePos_start = Math.floor (Math.random () * 360);

              var randomRotatePos_end = Math.floor (Math.random () * 360);

              // set initial random x position

              sym.$("your_symol").css('left', randomXPos_start);


              // set initial random rotation (each one is for a different browser)

              sym.$("your_symol").css('transform','rotate(' + randomRotatePos_start + 'deg)');

              sym.$("your_symol").css('-moz-transform','rotate(' + randomRotatePos_start + 'deg)');

              sym.$("your_symol").css('-webkit-transform','rotate(' + randomRotatePos_start + 'deg)');

              sym.$("your_symol").css('-o-transform','rotate(' + randomRotatePos_start + 'deg)');


              // animate to new random position


                    // x position                   



                   // rotation

                    '-webkit-transform': 'rotate(' + randomRotatePos_end + 'deg)',
                    '-moz-transform': 'rotate(' + randomRotatePos_end + 'deg)',
              '-ms-transform': 'rotate(' + randomRotatePos_end + 'deg)',
              '-o-transform': 'rotate(' + randomRotatePos_end + 'deg)',
              'transform': 'rotate(' + randomRotatePos_end + 'deg)'

              }, 500, function() {

                                 // animation complete


              1 person found this helpful
              • 4. Re: Random Movements
                Jerry Witt Level 2

                Thank you Tim,


                This so reminds me of the "fun" I used to have with Flash and Dirctor. It seems in order to have real power in your animations, you need to animate through code. I'm a timeline guy and this is real challenging for me. But for one, brief, shining moment your code worked. And then I broke it. And I haven't been able to get it back again.


                Here's where we are: I have a popcorn kernal on the stage "kernal1". I created a symbol, also called "kernal1" and opened that symbol and set it up to animate from screen top to screen bottom. I was hoping to just randomize the xposition and the rotation so that every instance of the symbol would strat at a different position and orientation. But you indicate it is better to do it through code.


                So I pasted the code into the timeline of the kernal1 symbol, changed "your_symbo" to "kernal1" and it worked for a minute. But I realized my tween was somehow doing battle with the code and not animating in a line as I expected. So I deleted the tween key. And suddenly it stopped working.





                I realize when I create a symbol from the stage and name this symbol the same name as on the stage, that is not a 'best practice'. But when I call kernal1 inside this symbol am I changing the root kernal or the symbol?


                Say I have six symbols called kernal# (where # is a number 1 to 6) can I go "all in" on the coding front and randomize the horizontal position, the rotation, AND the art?


                Is there a way to attach a zip to one's post or do I need to upload it to my server if I want to show my work?



                Thanks again for your advice and help!

                • 5. Re: Random Movements
                  Jerry Witt Level 2



                  I wanted to thank you again. It was painful and challenging for me, but I created randomized popcorn falling in a banner on my site: http://motioncity.com/


                  I also used the really helpful notes in this thread to reveal a quicktime movie (you have to click on the tickets to see it.)

                  • 6. Re: Random Movements
                    resdesign Adobe Community Professional & MVP

                    Nice  result!

                    You should credit Tim for it so he gets the Adobe points. Click "correct".

                    • 7. Re: Random Movements
                      Jerry Witt Level 2

                      Hi Thanks. I wanted to do that. I ticked "Yes" for was this helpful. But I do not see the "correct" link. (Maybe I don't get it because I didn't start this thread?)

                      • 8. Re: Random Movements
                        resdesign Adobe Community Professional & MVP

                        Hum, you may be right about that! I wonder why it is that way? Seems like anyone should be able to assess if an answer is right or not.

                        • 9. Re: Random Movements
                          TimJaramillo Level 4

                          Very cool! Glad you got it working Jerry.


                          In terms of randomizing art- you can have different art at different labels of your symbol's timeline (using the Display on/off property). Then via code, tell the symbol to stop at the appropriate label. At that point though, it might just make sense to have different symbols for each different piece of art (depends on what you are trying to do).


                          I like to keep all of my functional code at the Stage/compositionReady event. This keeps all the code in 1 place, which makes debugging much easier than having random bits of code scattered across multiple symbols. It's also vital to understand scope in javascript/Edge, in order to be able to target functions and symbols.


                          I definitely empathize with you in terms of being a timeline animator and having to work with code. I think the key is just to slowly accumulate these little code snippets. I started off as a Flash timeline animator 12 years ago, and now I'm a full fledged developer (beware of the slippery slope of "dev" ).


                          @resdesign- thanks for trying to get me the "Correct" points!

                          • 10. Re: Random Movements
                            resdesign Adobe Community Professional & MVP

                            Thanks. I am with you - I always keep my code on composition ready so I do not have to hunt for it!

                            • 11. Re: Random Movements
                              TimJaramillo Level 4

                              @resdesign- and I know we all look forward to the day when the Edge team adds "find/replace" functionality to the Code Editor- that will be a magnificent day!

                              • 12. Re: Random Movements
                                resdesign Adobe Community Professional & MVP

                                Ha, Well, indeed - Sorry I still think it would be a great addition. Imagine you decide to change a variable name for easier maintenance and it appear 20 times in your code or your have an array with 100 elements and you made a typo so it is not working or whatever else! It would be nice to be able to track it and change it with one click. But, in the mean time I use notepad++ to do changes when I need them.

                                • 13. Re: Random Movements
                                  Dam4222 Level 1

                                  Hey Tim,


                                  I am trying to retrofit your solution for something I am working on. I think that I am close I just need a little extra help.


                                  Basically I am trying to achieve a Rain Effect. I have created a symbol that is a "Rain Drop" I would like to have random Rain Drops fall from the top of the screen to the bottom, but they should maintain there angle. See my project below and you can see what I mean:




                                  I would like for it to looks something like this: http://rain-demo.heroku.com/



                                  • 14. Re: Random Movements
                                    TimJaramillo Level 4

                                    Hey Adam, can you start a new thread called "Random Rain Effect"? A rain effect is a pretty cool, unique request, so I think it will be helpful for other users if it has it's own thread. Also, I don't see where you are initializing the rain effect? If you can include that in your post.

                                    • 15. Re: Random Movements
                                      Dam4222 Level 1

                                      Hey Tim,


                                      Here is the new thread:


                                      • 16. Re: Random Movements

                                        Hi Tim!


                                        Could you offer some insight into what the code is to randomly scale a symbol? (Trying to give the illusion of depth by changing the size of a symbol on stage.) I tried some code using 'width' and 'height' but all it seems to do is change the clipping of the symbol instead. I can't seem to find good documentation about animate attributes.



                                        function moveEnemySprite(){

                                            sym.$("enemyTypeCircle").animate({left: randX1, top: randY1, height: randZ1, width randZ2},1000, randomNumbers1);



                                        --v/r Bobby

                                        • 17. Re: Random Movements
                                          TimJaramillo Level 4

                                          Hey Bobby! In order to change an element's scale, you'll want to use 'transform', not 'width'.


                                          Link to example: z index scale example


                                          Link to source: www.timjaramillo.com/code/edge/_source/scale_bitmap_3D_zindexFake.zip


                                          Here's the code:


                                          // run through loop, create new symbol from library, and randomly change scale and x/y positions

                                          for(var i=0; i<100; i++){

                                            var particle = sym.createChildSymbol("SphereSymbol", "Stage");

                                            var scale = getRandomInRange(0.2, 1);

                                            var xPos = getRandomInRangeRounded(0, $('#Stage').width());

                                            var yPos = getRandomInRangeRounded(0, $('#Stage').height());

                                            //console.log('xPos = '+xPos+', yPos = '+yPos);


                                             particle.getSymbolElement().css({"transform":"scale("+scale+")", "position":"absolute", "left":xPos, "top":yPos});






                                          // utility funcs -------------------------------------------


                                          function getRandomInRange(start, end) {

                                            return start + (Math.random() * (end - start));



                                          function getRandomInRangeRounded(start, end) {

                                            return Math.round( start + (Math.random() * (end - start)) );


                                          1 person found this helpful