Where we left off

Last time we introduced the basics of animation through actionscript. In the process, we looked at how to structure the movie clips, how to define a speed for the object and how to make it bounce off the walls. This week we're going to throw a few more elements into the mix. First, we're going to introduce a second dimension to our movement. Then we'll look at adding keyboard support. Finally, we'll add the effects of friction and gravity.

Adding dimension

Adding the actionscript to move the ufo in a second direction is not hard. The speed value is split into xspeed (horizontal) and yspeed (vertical). Next, I add the code to mark the top and bottom walls based on the location of our boundary movie clip. The actions now look like this:

onClipEvent (load) {
   xspeed = Math.round(Math.random()*10+10);
   yspeed = Math.round(Math.random()*10+10);
   left = /boundary:_x-(/boundary:_width/2);
   right = /boundary:_x+(/boundary:_width/2);
   top = /boundary:_y-(/boundary:_height/2);
   bottom = /boundary:_y+(/boundary:_height/2);
}

onClipEvent (enterFrame) {
   _x+=Number(xspeed);
   if (_x right) {
      xspeed = -xspeed;
   }
   _y+=Number(yspeed);
   if (_y bottom) {
      yspeed = -yspeed;
   }
}

The actions for the vertical movement are very similar to those for horizontal movement. After these modifications we have things buzzing around in two dimensions.

Keyboard input

Key presses in Flash4 were always associated with buttons using the onMouseEvent action. In Flash5, we can use the keyDown ClipEvent and then make use of the Key object to find out what key was pressed and change the x and yspeed. If you are familiar with Flash4 actionscript you'll notice the use of the '==' operator for comparisons and the use of ++ and -- to increment and decrement the speed values.

onClipEvent ( keyDown ) {
   if (Key.getCode() == Key.DOWN) {
      yspeed++;
   } else if (Key.getCode() == Key.UP) {
      yspeed--;
   } else if (Key.getCode() == Key.RIGHT) {
      xspeed++;
   } else if (Key.getCode() == Key.LEFT) {
      xspeed--;
   }
}

One limitation of the keyboard input in Flash is that it requires that the focus be on the Flash file. In other words, the user must first click on the Flash file before it can capture keyboard events. A good trick to address this is to add a button in the file which they have to press to start.

Here is the ufo file with the new buttons and actions. Watch how the xspeed and yspeed values change as you use the keypad.

That's a drag

Now let's introduce acceleration to give our ufo some bounce. We can think of gravity as constantly decreasing the yspeed of objects. Remember that falling objects have a positive yspeed and rising objects have a negative yspeed. A new variable, called gravity, represents the amount by which we change the yspeed (It is set to 0.2 in the first keyframe).

Now for the final touch, I'm going to add friction. Friction can be thought of as a constant drain on the speed of the object. We introduce this into the math by multiplying the speed by a value of 0.99 per frame. Just like gravity, the friction variable is set in the first keyframe. Here is the new code for load ClipEvent:

onClipEvent (load) {
   xspeed = Math.round(Math.random()*4+2);
   yspeed = Math.round(Math.random()*4+2);
   left = /boundary:_x-(/boundary:_width/2);
   right = /boundary:_x+(/boundary:_width/2);
   top = /boundary:_y-(/boundary:_height/2);
   bottom = /boundary:_y+(/boundary:_height/2);
   friction = 0.99;
   gravity = 0.2;
}

Now looking at enterFrame ClipEvent code:

onClipEvent (enterFrame) {
   _x+=Number(xspeed);
   if (_x right) {
      xspeed = -xspeed;
   }
   else {
      xspeed *= friction;
   }
   _y+=Number(yspeed);
   if (_y bottom) {
      yspeed = -yspeed;
   }
   else {
      yspeed = (yspeed+gravity)*friction;
   }
}

Notice that I use an If/Else structure. This ensures that we don't try to adjust the speed while it is out of bounds.

The incredible bouncing ufo! Next week we will look at how to make the ufo draggable and how to track the mouse speed. Until then, here are more adaptations you can try making:

• Adjust the gravity and friction values and see what happens.
• Increase the "thrust" of the ufo by changing the key press actions.
• Trying placing buttons on the main timeline to control the speed of the ufo.