PHP DevCenter
oreilly.comSafari Books Online.Conferences.

advertisement


Getting Flashy With PHP
Pages: 1, 2

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.




Valuable Online Certification Training

Online Certification for Your Career
Earn a Certificate for Professional Development from the University of Illinois Office of Continuing Education upon completion of each online certificate program.

PHP/SQL Programming Certificate — The PHP/SQL Programming Certificate series is comprised of four courses covering beginning to advanced PHP programming, beginning to advanced database programming using the SQL language, database theory, and integrated Web 2.0 programming using PHP and SQL on the Unix/Linux mySQL platform.

Enroll today!


Sponsored by: