2 Replies Latest reply on Apr 8, 2009 7:36 AM by kglad

    Randomising movement

    Lucy4 Level 1

      I wonder if somebody could help me please.  I'm working on a site that I want to have letters floating about in, but I'm not sure exactly how to do it. I want the letters to smoothly float around a restriced area.  I've got:

       

      m.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; i.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; s.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; h.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; m2.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; a.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; o.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; u.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue }; l.onEnterFrame = function() {      var maxMoveValue=50;      this._x += (Math.random()-0.5)*maxMoveValue;      this._y +=(Math.random()-0.5)*maxMoveValue };

       

      and it works in so much as the letters randomly move, but they move around the whole of the screen and move in a jagged way. I'd like them to move around an area that is 650 pixels wide by 220 pixel height, but am a bit lost on how to be that precise so would appreciate any help.

       

      Thanks

        • 1. Re: Randomising movement
          David Stiller Level 2

          Lucy4,

           

               What you've got so far is an implementation of something called brownian motion (http://en.wikipedia.org/wiki/Brownian_motion), which tends to be jittery.  If you want to constrain your motion within a certain set of boundaries, you'll probably want to use a set of if() statements to check the _x and _y properties of the movie clip in question.  Check out this revision, for example (just for the "m" clip, so far):

           

          m.onEnterFrame = function():Void {
              var maxMoveValue:Number = 5;
              this._x += (Math.random() * maxMoveValue) - (maxMoveValue / 2);
              if (this._x > 200) {
                  this._x = 200
              }
              if (this._x < 100) {
                  this._x = 100
              }
              this._y += (Math.random() * maxMoveValue) - (maxMoveValue / 2);
              if (this._y > 200) {
                  this._y = 200
              }
              if (this._y < 100) {
                  this._y = 100
              }
          };

           

               In this case, I've set the value of your maxMoveValue to a relatively low number (5), because I'm guessing you only want each of these letters to roam a few pixels at a time in any direction.  I altered the Math.random() part of your code just a tad, based on what I think you're after.  In the version above, the Math.random() method generates a random number between 0 and 1, which is multiplied with maxMoveValue.  Half of maxMoveValue is subtracted from the product, which gives a 50/50 chance that the letter will move from 0 to 2.5 pixels in either direction.  The same approach works for _x or _y, of course.

           

               To contrain the movement over all, I introduced a couple if() statements.  In the first, you'll see that I'm comparing the current _x value to 200 (after setting it to whatever random number might put it close to 200, or over).  If the value is greater than 200, I simply set it to 200.  Conversely, I set _x to 100 if it's less than 100.  This keeps the letter performing its brownian acrobatics within the arbitrary constraints of 100 and 200 horizontal pixels.  The same idea goes for the _y property.

           

               As it happens -- assuming you want each letter to move the same way -- you can greatly reduce the amount of code you have to type by using a named function instead of an anonymous function.  Check this out:

           

          var maxMoveValue:Number = 5;

           

          m.onEnterFrame = brownian;
          i.onEnterFrame = brownian;
          s.onEnterFrame = brownian;
          // etc.

           

          function brownian():Void {
            this._x += (Math.random() * maxMoveValue) - (maxMoveValue / 2);
            if (this._x > 200) {
              this._x = 200
            }
            if (this._x < 100) {
              this._x = 100
            }
            this._y += (Math.random() * maxMoveValue) - (maxMoveValue / 2);
            if (this._y > 200) {
              this._y = 200
            }
            if (this._y < 100) {
              this._y = 100
            }
          };

           

               See how that works?  In this case, I declared the maxMoveValue variable outside of any particular function.  This associates its scope (point of view) to the main timeline, which means the custom brownian() function can look "up" outside of itself to see that value (the variable doesn't have to be declared inside the function; and this way, every implementation of this function can share the same value -- which makes it easy to update across the board).  All you have to do is associate the brownian() function with the MovieClip.onEnterFrame event of each "letter" movie clip, just as you did before.  Only now, you're reusing your code, which is less to type and therefore easier to maintain.

           

           

          David Stiller
          Co-author, Foundation Flash CS4 for Designers
          http://tinyurl.com/dpsFoundationFlashCS4
          "Luck is the residue of good design."

          • 2. Re: Randomising movement
            kglad Adobe Community Professional & MVP

            use an if-statement to constrain their movement and i'm not sure what you want to smooth their movement.  if you want smooth movement until a border is hit, then you should randomize a slope or curve and move those movieclips along the chosen line or curve until a border is hit when you would pick a new line or curve.  if you want less abrupt changes in position, you should decrease your maxMoveValue.