Browse DevX
Sign up for e-mail newsletters from DevX


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

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Updating Connections
To connect the two circles all you have to do is add the Drawing API code previously discussed. Before line 2 in the previous script, create a canvas:

1 this.createEmptyMovieClip("canvas_mc", 1);

Then add an enterFrame event handler to update the canvas:

28 canvas_mc.onEnterFrame = function() { 29 canvas_mc.clear(); 30 canvas_mc.lineStyle(1, 0x000099, 100); 31 canvas_mc.moveTo(circle0._x, circle0._y); 32 canvas_mc.lineTo(circle1._x, circle1._y); 33 };

The only thing new here is the aforementioned clear() method to erase the previous lines upon every enterFrame so only the current location of the circles will be connected.

Now It's Time to Rubberize
To add some fun, and a tiny bit of realism, I'll show you how to bounce the connecting lines a bit after a collision, as if they were rubber bands. To accomplish this, all you have to do is draw a curve instead of a line between the two MovieClips and vary the curve structure each time a circle changes direction. First, it helps to understand how a curve is created.

Drawing a straight line requires only starting and destination anchor points. However, to draw a curve, you must also provide a single control point. (To simplify the method, and increase performance, Flash uses a single control point to draw a quadratic Bezier curve, rather than one or more control points for each anchor, as in the case of cubic Bezier curves). Flash starts with the anchor points and interpolates all interim points as it draws the curve toward the control point. Figure 3 shows what a curve would look like for a hypothetical set of anchor and control points.

Figure 3. Curve: This figure shows a Flash curve created with the Drawing API's curveTo() method. All such curves are quadratic Bezier curves, meaning they have two anchor points and one control point.
So, to simulate a rubber band, all you have to do is move the control point back and forth on either side of the curve, diminishing its value over time. This has the effect of plucking a rubber band. The arc of the band is large to begin with and diminishes steadily until the band is taught again.

Using Figure 3 as a hypothetical example, consider the points pictured as (left to right) anchor1 (x:0,y:50); control (x:50, y:0); and anchor2 (x:100, y:50). All you have to do is use a pattern like this for the control point: (50,0), (50, 100), (50, 25), (50, 75), (50, 50). This causes the control point to bounce back and forth—to y values of 0, 100, 25, 75, finally settling at 50—causing the curve to be a straight line.

Of course with moving points, you can't use fixed numbers, so you have to vary the distance from each anchor point, as it continually updates. You'll see what I mean when you look at the code.

Changing from Lines to Curves
Only three small changes must be made to replace your lines with curves. First, replace the lineTo() method with the curveTo() method:

32 canvas_mc.curveTo(circle1._x - circle1.stringVib, circle1._y - circle1.stringVib, circle1._x, circle1._y);

You may notice that the curveTo() method still uses the destination anchor point, but a control point precedes the anchor. Since the circles are always moving, you merely have to subtract some x and y value from the anchor point's x and y values to always get a nearby offset for the control point. You may also notice that this value is stored in a stringVib variable in each circle individually so each line of a multi-line system can bounce independently.

Next you need to know how to get the value of this stringVib variable. All you need to do is pick a random value within a tolerance range acceptable to you (the bounce can't be too wild or you won't be able to understand what it represents), and assign it at after collision.

Because you want the value to be updated on collisions with all four sides of the stage, you need to add the necessary instruction to both x and y conditionals in your script—at lines 18 and 23, respectively. In a simple two-circle system, you can update each circle directly. (In more complex systems, you will need to update the two adjacent circles, but that's something for you to work out in the bonus code. More on that later.)

//Lines 18 and 23 circle0.stringVib = circle1.stringVib = Math.random()*20 + 10;

Finally, you need to bounce the value back and forth, adding and subtracting it from the anchor point, so it will cycle like a rubber band. Also, you don't want the rubber band to bounce forever, so you need to dampen it, over time. In line 25, add this:

25 this.stringVib /= 1.1 * -1;

This line simply divides the value by 1.1 and reassigns it, causing the value to approach zero relatively quickly. The -1 just bounces back and forth from positive to negative every iteration, as described.

With these three lines in place, you have an initial random value, from which a control point is derived, and which bounces between negative and positive values, diminishing over time. Just like a rubber band.

I hope this very simple use of the Drawing API inspires you to create something. Ideally, you can see how much a simple thing like a little bounce can add to an otherwise static experience.

In the bonus code related to this article (look in the Related Resources in the left column for a link), I demonstrate a multi-band system, allowing you too connect many MovieClips together with many rubber bands. The system calculates which two bands must bounce when each circle hits a wall. Best of all, you don't need to change much to get it to work. (All you really have to do is work with an array instead of two hard-coded MovieClip references.)

I encourage you to experiment with this code. After all, these examples are far from finished. For example, the bounce distortion is always random. It doesn't account for the speed of the MovieClip when it hits the wall, or how long (and therefore, how taut) the rubber band is when the degree of bounce is calculated. Try to move away from random values and make your file more accurate. As always, if you come up with anything interesting, or if you can improve on these examples, I'd like to know about it.

See you next month.

Rich Shupe is president of FMA, a full-service multimedia development and training facility based in New York. He is a regular Flash columnist for DevX and coauthor of the upcoming "Flash 8: Projects for Learning Animation and Interactivity" and the upcoming "Learning ActionScript 3.0," (both published by O'Reilly). FMA develops web and disc-based products for clients including McGraw-Hill, Phillips, 20th Century Fox, and Nickelodeon, and trains digital media professionals in Flash, ActionScript, HTML, JavaScript, and more.
Thanks for your registration, follow us on our social networks to keep up-to-date