Ming the Tutorial

---

Animation

Now that we've defined a shape, we'd sure like to be able to see it. To do that, we need a canvas on which to draw. That canvas is the venerable SWFMovie.

$m = new SWFMovie();

creates a new SWFMovie object, the basis for animation. We can use

$m->setBackground(r, g, b);

to set the background color,

$m->setRate(rate);

to set the frame rate (in frames per second), and

$m->setDimension(width, height);

to set the movie's size. Remember what we said about scaling: the presentation size coded in your html determines the actual size. The movie dimensions set here determine the scale at which your shapes are drawn. If you set your movie size to 3200x2400 and embed it in an html page at 320x240, your shapes will be 1/10th the size you specified in your drawing commands.

Your shape won't be drawn into the movie until you create an instance of it by calling

$i = $m->add($s);

This method creates an instance of the shape in the movie and returns a handle by which you can alter the appearance of the instance. You can, in fact, add the same shape to your movie as many times as you want (within reason, of course) and use the returned handles to reference each separately.

Using Ming to make flash movies is analogous to using a stop-motion camera: you put the shapes on your canvas, arrange them as you like, then click the shutter to record the arrangement and advance to the next frame. Arrange, click, arrange, click, ad nauseum. Ming's shutter release button is

$m->nextFrame();

The "arrange" step is performed by calling methods provided by the instance handle (which was generated with SWFMovie's add method, remember?). These methods are identical to the transformation methods we saw in SWFFill, except that each has a relative version which acts in relation to the current position, scale, rotation, and skew. For example:

$i->moveTo(x,y);

moves the object to coordinates (x,y), while

$i->move(x,y);

displaces the object by vector (x,y). The rest of the methods are:

$i->rotateTo(deg);
$i->rotate(deg);
$i->scaleTo(xscale [, yscale]);
$i->scale(xscale [, yscale]);
$i->skewXTo(s);
$i->skewX(s);
$i->skewYTo(s);
$i->skewY(s);

I'll trust that you read the section on transforming fills and can figure out what these methods do.

You can also remove an object from the display list if you grow weary of its countenance:

$m->remove($i);

Color transforms

Another fun thing we can do is alter the object's color:

$i->addColor(r, g, b [,a]);
$i->multColor(r, g, b [,a]);

The first method adds a constant value to each of the red, green, and blue (and optionally alpha) channels of the display object. The second multiplies said channels by the given scale values.

Note that these values can be negative; to invert the blue channel of a display object, you would use:

$i->addColor(0, 0, 0xff);
$i->multColor(1.0, 1.0, -1.0);

Also note that these methods are not cumulative, so

$i->addColor(0xff, 0, 0);
$i->addColor(0, 0xff, 0);

sets the added color to green, not yellow.

Finally,

When you're all done, you tell Ming to render the movie out to the browser:

header('Content-type: application/x-shockwave-flash');
$m->output();

The header command makes your web server tell the client browser that this is, indeed, a flash movie.

For a quick example, let's make that red square we created previously (still in $s to save my fingers some wear) spin:

$m = new SWFMovie();
$m->setDimension(800, 600);

$i = $m->add($s);
$i->moveTo(400, 300);

for($j=0; $j<5; ++$j)
{
  $m->nextFrame();
  $i->rotate(15);
}

$m->nextFrame();

header('Content-type: application/x-shockwave-flash');
$m->output();

We're being terribly clever here and letting the animation loop back to the beginning after rotating the poor square only 75 degrees since the first frame is identical to a 90 degree rotation. Clever us, indeed.

next: text

Macromedia(r) and Flash(tm) are trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries.
Macromedia(r) does not sponsor, affiliate, or endorse this product and/or services.