Lab 1: Bouncing Ball
Project: Build a simulation of a rebounding object moving in a constrained space -- the classic mega-particle, or "ball in a box," shown here.
Specifications for Basic Lab (Level 1): Animate one simple object (no animation required in the object's timeline), so that it bounces away from four borders, changing direction and rate of travel in both X and Y axes on each rebound.
Procedure:
Two starter files are available to you from the common directory on student-iat.ubalt.edu. (Remember the login and password from our first meeting.) The first file, lab01Starter.fla, contains a basic Flash movie file with one Movie Clip. There is also a starter version of ballClass.as, an external ActionScript file. Open both files in Flash to begin.
Begin with the constructor method in the .as file. If you can get your ball to appear at random X and Y positions on screen each time the movie loads, you've solved the first problem
The formula for generating a random number is:
Math.floor(Math.random()*N)
where "N" is replaced by the limit value. The actual maximum will be one less than the limit, so if I say:
Math.floor(Math.random()*5)
my possible values are 0,1,2,3,4.
Next, set up some String variables to control directions of movement in X and Y. Write code into the constructor method to set values randomly for these directions.
Next, start on the custom method called animate. To move your object, you need to change one of two properties of the Movie Clip. The property x controls horizontal placement, while y controls the vertical.
Since you will need to vary the amount of change in either axis, you'll also need to create variables to handle these values, and when you change x and y, you'll want to change them by adding or subtracting the value of that variable.
With your change variables, you'll probably want to mix a standard value with a random component. Here's an example:
XChange = 5 + Math.floor(Math.random()*5);
You'll need to go back into your constructor and assign an initial value for each of your change variables.
Write some code in your animate method that makes the ball travel in either direction of one axis. Test your movie. You should see movement.
Soon enough, though, your ball will escape the screen. Your last problem is to constrain the ball so that it rebounds (changes either X or Y direction) when x or y reaches a limit value.
To write this bit of your code, you'll need to use a conditional statement, or IF/THEN construction. Here's the general outline:
if(SOMETHING IS TRUE)
{
SOMETHING HAPPENS;
}
A couple of things to note. If you test for equivalence to a certain value in your IF clause, remember to use the double-equal sign ==, not the single-equal or assignment operator.
Also, you may place more than one statement into the consequence or THEN part of your IF/THEN construction:
if(SOMETHING IS TRUE)
{
SOMETHING HAPPENS;
AND SOMETHING ELSE HAPPENS AFTER THAT;
}
File specifications
Your final work on this lab is due on the server by February 18. In your Lab1 subdirectory, place the following:
- The HTML page generated by Flash when you publish your movie. Name this page "index.html" and link to it from your main index page.
- The JavaScript file also generated by Flash in the Publish operation, called AC_RunActiveContent.js. The Flash player in Web browsers needs this file.
- The object code or Shockwave Flash file for your movie (.swf).
- The source (.fla) file for your movie, as well as your class code file (.as).
Additional Levels of Difficulty:
The basic or Level 1 lab illustrated at the top of this page is worth a B. To earn a higher mark, take on one or more of these additional challenges.
- Level 2
- Add more instances of the bouncing ball. Hint: they can all run off the same external ActionScript file.
- Instead of (or in addition to) adding more objects, you can create an internal animation for the bouncing ball. Do this by setting up a linear animation within the timeline of the Movie Clip ball_mc. (I'll probably talk about internal animation at our third meeting.)
- Level 3
- Introduce a simple model of gravity by subtracting some quantity from the value for y on every animation cycle.
- And/or: create an internal animation for your bouncing ball that changes its shape when it hits one of the boundaries. The right side of the object should flatten when it hits the right wall, left for left, top for top, bottom for bottom.
- Level 4
- Figure out how to make objects rebound from each other as well as the boundaries. Hint: you'll need to figure out some method for hit testing, which we cover later in the course.
Finally, here's a quick demo project combining the simple bouncing ball from our lab with the masking layer feature of Flash graphics. The ball code has been slightly modified (the objects now expand as they move upward and contract as they move down), but is basically identical to what you built in the lab.
|