This tutorial shows how to create a Flash movie in which balls randomly bounce off of boundary lines. The concept is relatively simple, there are balls that move along vectors and are confined within the boundary lines, which when combined form a rectangular box. When the balls collide with the boundary lines they change directions or bounce off. And at each collision at the right or left boundary line the text contained within the ball randomly changes.

First create a new Flash document by selecting "New" from the "File" menu option or by pressing Ctrl-n. Double-click the first layer and re-name it to "actions"; by default this layer is normally labeled "Layer 1". Insert four more layers and re-name them to the following in ascending order from the "actions" layer; "background", "circle", "confines" and "control".


I will let you decide which background image to use. Once you find it, select the "background" layer by single clicking it and import the image onto the stage by pressing Ctrl-r, navigating to the image and pressing ok. Position the image onto the stage appropriately.

Next select the "control" layer and insert a new Movie Clip by pressing F8. Making sure the "Movie Clip" radio button is selected, name the movie clip "control" and press ok. If you don't have the "Library" panel open press Ctrl-F3 to open it and Drag-and-drop the object labeled "control" onto the stage, afterwards, select the object you dragged on the stage. Now in the "Properties" panel(Ctrl-F3)  set the x and y values to zero.

Select the "circle" layer. In the "Tools" panel(Ctrl-F2) select the "Oval Tool" and make a circle on the stage with a preferred color for the fill and border. Select the whole circle, circle and circle border, by pressing Ctrl-s or holding and dragging the mouse over it enclosing the whole circle. Afterwhich press F8 to convert the cricle into a Movie Clip. Name it "circle" and in the Properties panel give it an instance name of "circle0".



Double-click the Movie Clip on the stage and select the "Text Tool" in the Tools panel. With the Text tool selected click somewhere on the stage and type in the number zero. Position the text in the center of the circle. Last, render the text dynamic by selecting "Dynamic Text" in the properties panels drop down menu. Navigate back to the main timeline.

Now select the "confines" layer, select the "Line Tool" from the Tool panel, draw a vertical and horizontal line on the stage and Copy-and-paste both lines. Convert each individual line, four in all, into a Movie Clip giving them names that correspond to their designated sides, which when combined form a rectangular box. Give each individual line an instance name of the first letter, in lowercase, of the side they're going to be used on.

Select the "control" layer and then select the "control" movie clip on the stage. Open up the "Actions" panel by pressing F9 then Copy-and-paste the following code into it:



onClipEvent(enterFrame)
{
     //Loop  tmi (total movie instances) times allowing for same operations
     //to be performed on each circle object duplicated as well as the root
     //circle
     for (i = 0; i < _root.tmi; i++)
     {
          cx = getProperty("_root.circle" + i,_x);
          cy = getProperty("_root.circle" + i,_y);
          rad = getProperty("_root.circle" + i,_width) / 2;
          //Check for collisions on the left and right boundary lines
          //and if collision occurs set text of circle to a random number
          //and randomly change directions
          if((cx+rad) >= _root.rx)
          {
               _root.cxi[i] = -(random(10));
               eval("_root.circle"+i).ball_txt.text = random(8);
     }
     else if ((cx-rad) <= _root.lx)
     {
          _root.cxi[i] = random(10);
          eval("_root.circle"+i).ball_txt.text = random(8);
     }
     
     //Check for collisions on the bottom and top boundary lines
     //and randomly change direction if collision occurs
     if ((cy+rad) >= _root.by)
          _root.cyi[i] = -(random(10));
     else if ((cy-rad) <= _root.ty)
          _root.cyi[i] = random(10);
     
     //Set the x and y coordinates of circle, "/:circle" + i, to the value
     //stored at position i in the cxi and cyi arrays accordingly
     setProperty("_root.circle" + i, _x, cx + _root.cxi[i]);
     setProperty("_root.circle" + i, _y, cy + _root.cyi[i]);
     }
}

Last, select the "actions" layer  and once again open up the Actions panel by pressing F9 and Copy-and-paste the following code in:



//Get the left, right, bottom and top boundary lines x and y coordinates
var rx = r._x;
var lx = l._x;
var by = b._y;
var ty = t._y;
//declare and initialize variable named tmi (total movie instances)
var tmi = 5;
//Loop and duplicate the root circle "circle0" and assign the duplicated
//circles text to i
for (i = 1; i < tmi; i++)
{
     circle0.duplicateMovieClip("circle" + i, i);
     eval("circle" + i).ball_txt.text = i;
}
//Initialize the cxi and cyi arrays the element values in these arrays determine
//the speed at which the circles will move
cxi = [1,2,3,4,5];
cyi = [8,7,6,5,4];


I feel the comments in the code will sufficiently describe what the code does which are the lines preceded by "//" and which is why I'm going to omit a description of what the code does. That concludes this tutorial.