RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Connect the Dots: Create Rubber Bands with Flash's Drawing API

Using Flash's Drawing API to keep MovieClips connected at runtime isn't only easy—it has additional benefits. In addition to commonly used rigid lines, you can connect clips with rubber bands.

ecently, I received this email:

Rich: Dug your story on filters. The drop shadow following the mouse as a light source was great. Maybe you can help me with this. How can I connect two MovieClips with a line between them, wherever they go? Thanks, Carlo.

Thanks for writing, Carlo. Actually, this is a lot easier than you may think, thanks to the Flash Drawing API. You don't have to try to position pre-created MovieClips containing lines or anything like that. You can actually draw a line between two points using ActionScript.

The Drawing API has been around for a while, so I'd like to add a little fun to the topic. I'll show you how to connect MovieClips with a straight line, then I'll show you how to update those connections while the MovieClips move, and finally, I'll show you how to connect the MovieClips with simulated rubber bands. Here's an example.

First, take a quick peek at the results of this exercise. Figure 1 shows the traditional connections using rigid lines. The dotted line represents the left of the stage. In this example, when the circle collides with the left of the stage it bounces off the wall and (other than updating their positions) the lines are otherwise unaffected.

Figure 1. Collision: This shows the use of the Flash Drawing API lineTo() method to connect MovieClips with straight lines. When the left circle collides with the Stage edge, the circle reverses direction, but the lines remain straight.
Figure 2. Bounce: This figure simulates how using the curveTo() method can add a little bounce to your lines. When the circle collides with the wall, the curves are deformed as if they are made of rubber.

Figure 2 simulates an adapted version of the exercise, metaphorically connecting the MovieClips with flexible strings, rather than rigid dowels. This approach connects the clips with a curve instead of a line. When the circle collides with the wall it still bounces off, but the lines vibrate as if they were rubber bands.

Connecting the Dots
Before getting to the code, I'll start with the basic principles behind drawing a line between two points.

  1. Create a canvas to draw into. (You can use the root as your canvas, but it's a lot easier to work with the drawing if you dedicate a MovieClip for this purpose.)
  2. Define a style (appearance) for your line.
  3. Move to your first drawing point. If you don't do this, the first line will draw from the origin of your canvas (upper left corner of the root, registration point of your MovieClip, etc.). In the case of the question posed, this would be the location of the first MovieClip.
  4. Draw the line to the second drawing point. Again, in this case, this would be the location of the second MovieClip.
Here's a code example. If you copy and paste this, be sure to omit the line numbers. If you prefer to look at the source code accompanying this article, this code is in a file called "simple_line.fla." To keep things concise, this code assumes two MovieClips, circle0 and circle1, are on stage.

1 this.createEmptyMovieClip("canvas_mc", 1);
2 canvas_mc.lineStyle(1, 0x000099, 100);
3 canvas_mc.moveTo(circle0._x, circle0._y);
4 canvas_mc.lineTo(circle1._x, circle1._y);
Now look at the code relevant to the steps outlined previously:
  1. Line 1 creates a canvas to work with. It gives the MovieClip the name canvas_mc and creates it in level 1. Again, you can draw directly to the stage, but it is not as easy to work with the results of the drawing code later. If you want to draw directly to the stage, simply delete line 2, and replace canvas_mc with this, to refer to the root timeline.
  2. Line 2 defines the line style. In this case, it is a one-pixel line, dark blue, with an _alpha of 100% (opaque).
  3. Line 3 moves (without drawing) to the location of the first MovieClip.
  4. Line 4 draws a straight line to the location of the second MovieClip.
Moving Targets
If you want to connect two or more MovieClips while they're moving, all you have to do is continue to update the connection during the movement and clear the canvas with each update to make sure you don't continue to see old lines.

Before moving on to the Drawing API code, I'll get the basic MovieClip movement out of the way. The missing lines in this script will be filled in as you continue to read. (Again, if you copy and paste, be sure to omit line numbers and hard returns. Refer to the source code and look at "no_line.fla.")

2  for (i = 0; i < 2; i++) {
3    ref = this.attachMovie("circle", "circle"+i, 100+i);
4    //
5    ref._x = (Math.random() * (Stage.width – ref._width))
     + (ref._width / 2);
6    ref._y = (Math.random() * (Stage.height - ref._height))
     + (ref._height / 2);
7    //
8    ref.dirX = (Math.random() * 10) - 5;
9    ref.dirY = (Math.random() * 10) - 5;
10   //
11   ref.onEnterFrame = function() {
12     this._x += this.dirX;
13     this._y += this.dirY;
14     //
15     if ((this.dirX > 0 && this._x > Stage.width) || 
16     (this.dirX < 0 && this._x < 0)) {
17       this.dirX *= -1;
19     }
20     if ((this.dirY > 0 && this._y > Stage.height) || 
21     (this.dirY < 0 && this._y < 0)) {
22       this.dirY *= -1;
24     }
26   };
27 }

In this example, you'll be creating the circle MovieClips dynamically using attachMovie() to place a Library symbol on stage. Line 2 encloses the code in a loop so that everything is applied to each circle, and Line 3 adds each MovieClip to the stage.

Lines 5 and 6 position the circles randomly on stage. This is a common method. It chooses a random x value by picking from the available range of values that include the width of the stage minus the width of the MovieClip. Then, to ensure that the clip is not positioned at zero, the range is offset by half the width of the MovieClip. This way, the clip can never appear offstage. The same is then done with the y value, using the stage height and MovieClip height.

Lines 8 and 9 pick a random value between -5 and 5 to add to the x and y locations of each MovieClip during movement. These values are stored within the clips so each circle can move independently of the other.

Line 11 adds an enterFrame event handler to each MovieClip. Within it, Lines 12 and 13 update the current location of each circle by adding its unique offset. Performed repeatedly, this causes movement.

Lines 15 through 19 comprise a conditional statement that says, if the circle is moving to the right AND it's past stage right, OR if the circle is moving to the left AND it's past stage left, reverse its x direction. This causes the circle to bounce off the left and right edges of the stage. Lines 20 through 24 do the same considering the y coordinates and the stage top and bottom.

You now have free moving circles that bounce off the walls of the stage, and all that remains is to connect them.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date