ONLamp.com    
 Published on ONLamp.com (http://www.onlamp.com/)
 See this if you're having trouble printing code examples


Getting Flashy With PHP

by W.J. Gilmore
06/28/2001

Often in my articles I rave about the sheer number of functions available to the PHP programmer. This assertion has been once again enforced with the release of the Ming Flash Generation Library. This package, which also offers a PHP extension, provides PHP users with a rather convenient and simple way to create cool Flash animations.

In this article, I'll introduce you to Ming as it applies to PHP, discuss installation procedures for both Windows and non-Windows operating systems, and guide you through several examples intended on jumpstarting you toward Flash stardom as a PHP programmer.

Downloading and installing Ming

Dave Hayden (ming@opaque.net) created Ming, which is available for download from his web site. I would also suggest taking a look at the examples, tutorial, and discussion forum that are all available on the site. Before running to the site and downloading the first distribution you see, take a moment to read through the remainder of this section, applying what you read to your own situation.

Requirements

Ming is only compatible with PHP 4.0.2 and above. If your PHP distribution is older than this, you will need to upgrade. I would always suggest upgrading to the most recent stable version regardless of your intention, as new features are always being added and bugs are being fixed.

Non-Windows users

Non-Windows users have a variety of options for implementing Ming support. Perhaps the easiest way to use Ming is simply to download the Ming PHP module.

Here's the process:

  1. Go to http://www.opaque.net/ming/
  2. Download php_ming.so.gz.
  3. Uncompress and copy it to the PHP extensions directory.
  4. Add extension=php_ming.so to your php.ini file or add dl('php_ming.so') to the top of the script in which you would like to use Ming.

Note that you will not be able to use the dl() function if the enable_dl configuration directive is turned off in the php.ini file. Furthermore, this function will not work with certain servers, such as Zeus or IIs.

I followed this process, installing the Ming module on a FreeBSD machine using Apache 1.3.12 and PHP 4.0.4 and experienced no problems at all. However, if you do run into problems using the module, you could alternatively download and compile the Ming source and recompile PHP using -with-ming=[dir]. Check out the Ming web site for more information regarding installation methods.

If you are new to the world of configuring and installing PHP on a Unix-type environment, I would suggest checking out Darrell Brogdon's excellent tutorial, "Basic Installation of PHP on a Unix System."

Windows users

Perhaps the most painless way to install Ming on your Windows system is to download precompiled PHP distribution, compliments of Andreas Otto and Daniel Beulshausen. This distribution, currently in version 4.05-dev, not only offers Ming support, but also includes many other hard-to-find Windows PHP extensions. Just download the most recent distribution and follow the directions for activating extensions within the php.ini file.

Essential information

Unit measurements -- All values specifying measurements such as size, length, and distance are in unit "twips" (twenty units per pixel). Therefore, if I were to specify a screen size of 6,400 x 4,800, this would actually translate to 320 x 230 pixels.

Object-oriented programming -- Ming's functionality is carried out using OOP (object-oriented programming). If you aren't familiar with OOP and how PHP implements it, I'll take the opportunity to shamelessly plug Chapter 6, "Object-Oriented PHP," of my new textbook A Programmer's Introduction to PHP 4.0 (Apress, January 2001). It's available at finer bookstores everywhere.

Animation dimensions -- Although Ming offers a function that sets the dimensions (setDimension()) of the Flash animation, the movie will be scaled in accordance to:

Fonts -- Ming can currently use only those fonts created using its FDB utility. Check out the Ming documentation for more information regarding this.

Output -- There are essentially two choices for displaying output. The first is to output it directly after it is created using the Ming functionality. The second is to save the output to a .swf file and embed it within an HTML script. Throughout the examples shown in the remainder of this article, I simply output the results directly to the browser. However, I also explain an alternative method at the conclusion of the article.

Some examples

In this section, I'll introduce you to Ming's functionality, beginning with a few very basic examples and working upward in difficulty. At the conclusion of this section you should have a pretty good idea of just what Ming is capable of.

Building a movie screen and object

Perhaps above all else, you need to know how to create the canvas upon which the Flash movie will be viewed. Although this won't necessarily be the first lines of code in your script (you'll see why later), it is of course, rather important.

Creating a new movie
You can create a new "movie" object using the following command:

$movie = new SWFMovie();

Of course, you can name the resulting object anything you wish. Just remember that you'll need to continue to use that name for later object manipulation.

Setting the background color
The background color is set using the setBackground() method. There are three required parameters, the red, green, and blue hexadecimal colors, respectively. The fourth parameter, which specifies the alpha color, is optional.

$movie->setBackground(0x00, 0x00, 0xff);

The above settings would change the background color to a royal blue. Incidentally, a complete "cheatsheet" of hexadecimal color codes is available at Webmonkey.

Setting the frames-per-second (fps)
You can also control the fps speed of the animation by specifying the frame rate within the setRate() method. An example of setting this speed to 15 fps is shown here:

$movie->setRate(15.0);

Although you could potentially set these parameters toward the end of the script (you'll soon learn why), I typically like to keep them at the top of the page. I'll follow this protocol in subsequent examples.

In the next section, I'll show you how to create simple shapes. As you know, shapes are the basis for the majority of Flash animations. I think you'll be surprised at just how easy it is to populate your animations with shapes of all types and sizes.

Simple shapes

Creating and displaying a simple shape is well, simple. Perhaps the most important method is the one that instantiates a new shape, SWFShape(). It's used as follows:

$square = new SWFShape();

Therefore, $square is an object that has all of the SWFShape class methods and attributes at its disposal. Once you've created the object, you can begin designing its features with these methods and attributes. Because $square is likely to represent the object for which it is named, I'll need to draw four lines. However, before drawing these lines, I would like to designate a few properties regarding that line, accomplished using the method setLine():

// setLine(line width, red, green, blue [, alpha])
$square->setLine(25, 0xff, 0xcc, 0x33);

Once I've set these properties, I can proceed with creating the lines:

$square->drawLine(500, -500);
$square->drawLine(500, 500);
$square->drawLine(-500, 500);
$square->drawLine(-500, -500);

Listing 1 offers a complete example of drawing a square to the canvas.


Listing 1-1: Drawing a simple shape to the Flash canvas.

<?

// Create movie and set parameters.

$movie = new SWFMovie();
$movie->setBackground(0x00, 0x00, 0x00);
$movie->setDimension(5400, 3600);

// Create a new shape.

$square = new SWFShape();

// Set a line width of 15, and rgb color of gold.

$square->setLine(15, 0xff, 0xcc, 0x33);

// Move the drawing pen toward the middle of the screen.

$square->movePenTo(2000, 2000);

// Draw the square, 'standing' it on a point.

$square->drawLine(500, -500);
$square->drawLine(500, 500);
$square->drawLine(-500, 500);
$square->drawLine(-500, -500);

// Add the square to the canvas.

$addedSquare = $movie->add($square);

// Output the $movie to the canvas.

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

?>

Relative vs. absolute positioning

At first glance, you may find some of the Ming function names rather confusing; I'll use drawLine() and drawLineTo() as an example. While both are rather similar in name, they have very distinct roles. The method drawLine() uses relative positioning to draw lines, while drawLineTo() uses absolute positioning. Several similar parallels can be drawn between various function sets, such as movePen() and movePenTo(), scale(), and scaleTo(), and rotate() and RotateTo(). Be sure to keep this in mind when creating your animations, or you will likely achieve unexpected results.

Animation

Animation is probably the entire reason why you are interested in using Flash anyway. I don't blame you; Flash animations can add a whole new perspective to your Web application.

Before diving into the code, take a moment to consider the mechanics of animation. Animation is essentially a bunch of still pictures (also known as frames) that give the impression of movement when displayed in a particular order. Not surprisingly, you can apply this concept to Flash animation.

You can move from one frame to another using the method nextFrame(). Therefore, if my canvas object is $movie, I could move from one frame to another as follows:

$movie->nextFrame();

The animation can be carried out in several ways. However, perhaps the best way to do it when animating multiple objects simultaneously is to create each separately, almost as if it were a movie in itself. This allows you to combine multiple "movies" together without interfering with one another, kind of like creating several movies within a movie. This is accomplished using the SWFSprite() method.

Listing 2 illustrates usage of SWFSprite(), along with several other functions that achieve the effect of a triangle spinning and jumping out toward you. Take some time to read through the code and comments.


Listing 2: Animating a triangle

<?

// Create movie and set parameters.

$movie = new SWFMovie();
$movie->setBackground(0x00, 0x00, 0x00);
$movie->setDimension(2000, 2000);

// Create a new shape.

$triangle = new SWFShape();

// Set a line width of 15, bright yellow in color.

$triangle->setLine(15, 0xff, 0xcc, 0x33);

// Move the drawing pen toward the middle of the screen.

$triangle->movePen(-500, -500);

// Draw the triangle.

$triangle->drawLineTo(500, -500);
$triangle->drawLineTo(250, 500);
$triangle->drawLineTo(-500, -500);

// Create the sub-movie, and add the triangle.

$triangleAnim = new SWFSprite(); 
$triangleShutter = $triangleAnim->add($triangle); 
$triangleAnim->nextFrame(); 

// Rotate and scale the triangle, advancing the 
// frame with each movement.

$triangleShutter->rotate(15); 
$triangleAnim->nextFrame(); 

$triangleShutter->scale(.6, .6); 
$triangleAnim->nextFrame(); 

$triangleShutter->rotate(15);
$triangleAnim->nextFrame(); 

$triangleShutter->rotate(15); 
$triangleAnim->nextFrame(); 

$triangleShutter->rotate(15); 
$triangleAnim->nextFrame(); 

$triangleShutter->rotate(15); 
$triangleAnim->nextFrame(); 

$triangleAnim = $movie->add($triangleAnim); 
$triangleAnim->moveTo(1500,1500); 

// Output the movie

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

A somewhat more complex example

Believe it or not, you've already learned enough in this short article to begin creating your own cool animations. In this final example (Listing 3), I'll show you how text can be included and animated with Ming.


Listing 3: Including several animations simultaneously

<?

// Create the movie and set parameters 

$movie = new SWFMovie(); 
$movie->setRate(18.0); 
$movie->setDimension(1600,900); 
$movie->setBackground(0x33, 0x66, 0x99); 

// Set the font

$font = new SWFFont("../../common/test.fdb");

// A string phrase

$txt_http = new SWFText(); 
$txt_http->setFont($font); 
$txt_http->setColor(0xff, 0xff, 0xff, 0x00); 
$txt_http->setHeight(60); 
$txt_http->moveTo(0, 0); 
$txt_http->addString("welcome to the information age.");

// String of ones and zeros

$txt_long = new SWFText(); 
$txt_long->setFont($font); 
$txt_long->setColor(0xff, 0xff, 0xff, 0x00); 
$txt_long->setHeight(30); 
$txt_long->moveTo(0, 20); 
$txt_long->addString("0011 0110 0101 0101"); 

// Another string

$txt_world = new SWFText(); 
$txt_world->setFont($font); 
$txt_world->setColor(0xff, 0xff, 0xff, 0x00); 
$txt_world->setHeight(80); 
$txt_world->moveTo(0, 20); 
$txt_world->addString("this makes no sense."); 

//
// Integrate text into movie
//

// greeting, with null alpha 
$anim0 = $movie->add($txt_http); 
$anim0->moveTo(200,400); 

// add the 10001 string
$anim1 = $movie->add($txt_long); 
$anim1->moveTo(200,500); 

// reintroduce 10001 string 
$anim2 = $movie->add($txt_long); 
$anim2->moveTo(400,100); 

// world of 1s and 0s 
$anim3 = $movie->add($txt_world); 
$anim3->moveTo(200,475); 

// Fade in: Welcome to the information age.
// Fade in and scale ones and zeros string

for($i = 0; $i <= 13; $i++) { 

   $anim0->addColor(0xff, 0xff, 0xff, 0xff*$i/20); 
   $anim1->addColor(0xff, 0xff, 0xff, 0xff*$i/100); 
   $anim1->scaleTo($i, $i);
   $movie->nextFrame(); 

}

// Flicker the $anim1 (ones and zeros) string
// Immediately remove it after making it flicker.

   $anim1->addColor(0xff, 0xff, 0xff, 0xff); 
   $movie->nextFrame(); 
   $movie->remove($anim1);
   $movie->nextFrame();

// reintroduce the ones and zeros string
// Fade this string in and scale it again.

for($i = 0; $i <= 13; $i++) { 
   $anim2->moveTo(200,500); 
   $anim2->addColor(0xff, 0xff, 0xff, 0xff*$i/100); 
   $anim2->scaleTo($i, $i);
   $movie->nextFrame(); 
}

// Fade in 'this makes no sense'

for($i = 0; $i <= 13; $i++) { 

   $anim3->moveTo(200,275); 
   $anim3->addColor(0xff, 0xff, 0xff, 0xff*$i/20); 
   $movie->nextFrame(); 

}

// Prevent the animation from looping. 
// (Thanks to Maxence Lange http://phpming.net for the tip.)

$movie->add(new SWFAction("gotoFrame(200); stop();")); 

// Output movie to the browser. 

header("Content-type: application/x-shockwave-flash"); 

$movie->output();

?>

Offsite examples

Because Ming is relatively new, there aren't too many prominent examples (to my knowledge) available on the Web just yet. Two that come to mind are Opaque.net's Slashdot news scroller. This cool example is located here.

Also, Maxence Lange has created "The Unofficial Ming-PHP Site". It's still a work in progress, but it's located at phpming.net.

Saving the output

If the output of the Flash animation is static, you'll likely want to save it directly as a .swf file and embed it within an HTML file. In all of the above examples, the last two lines have been:

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

The first line sends a header to the browser telling it that all output is of the Shockwave Flash content type. The second line outputs all data found within the $movie object. Alternatively, you could replace these lines with:

$movie->save("shocked-movie.swf");

This will create a file containing all of the contents of $movie. Subsequently, you could embed this into an HTML page as follows:

<html>
<body>
<head>
<title>Welcome to Fake Web Site Industries</title>
</head>
<div align="center">
<embed src="test.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="400" loop="FALSE">
</embed>
</div>
</body>
</html>

There are a number of attributes that you can include in the embed tag. Check out Macromedia's Tech Notes for a complete explanation.

Other implementations

Although Ming is likely to handle all of your needs regarding PHP and Flash integration, you might want to take a moment to check out the following alternatives:

Blue*Pacific Software offers a rather interesting set of Flash generation applications. They are scheduled to release PHP Flash Turbine 5.0 in mid-January of 2001. This application allows for direct integration with PHP data and its scripting environment. For more information, check out the Blue*Pacific site.

You might also want to look at the libswf function library, already a part of PHP's extension family. The documentation can be found at: The PHP Site

You can download the libswf module here.

Conclusion

In this introduction to the Ming PHP extension, I've only touched on just a part of its total functionality. For further ideas about exactly what this extension is capable of, check out Opaque.net's Ming page. If you do anything really cool with Ming, be sure to let me know at wj@wjgilmore.com. Thanks!

W.J. Gilmore has been developing PHP applications since 1997, and is frequently published on the subject within some of the Web's most popular development sites. He is the author of 'A Programmer's Introduction to PHP 4.0' (January 2001, Apress), and is the Assistant Editorial Director of Web and Open Source Technologies at Apress.


Return to the PHP DevCenter.

Copyright © 2009 O'Reilly Media, Inc.