 | Level: Intermediate Jack D. Herrington (jherr@pobox.com), Senior Software Engineer, Leverage Software
19 Dec 2006 Rich Internet Applications is the new buzz-phrase for Web 2.0, and a key component of the substance behind Web 2.0 is Adobe Flash. Learn how to integrate Flash movies into your application and generate Flash movies dynamically using the Ming library.
Web 2.0 promises Rich Internet Applications. But what does Rich Internet Applications mean? In general, it means adding highly responsive interactivity to a Web application. Specifically, it means widgets, Web forms, and reports that change on the page instantly without having to retrieve a new page from the server.
One method for building Rich Internet Applications (RIAs) is to use Dynamic HTML (DHTML), which is a combination of Ajax, JavaScript, Cascading Style Sheets (CSS), and HTML (see Resources). But DHTML isn't the only way of adding interactivity to your Web application. Another big player is the Adobe Flash Player, which has been adding interactivity to Web sites for more than a decade.
While the first version of Flash was a tool to create animated images, newer versions can host an entire interface that controls Web service access and provides full scripting support using ECMAScript (the official version of JavaScript).
Understanding Flash
The Flash Player is a plug-in that integrates into Web browsers on computers running Microsoft® Windows®, Mac OS X, and Linux®. At the time of this writing, the most recent version of Flash Player is V8. It is available at no cost and comes installed with most browsers. It's extremely popular and has excellent client penetration -- penetration that has only been improving with the advent of services such as YouTube and Google Video, each of which uses Flash for the video streams.
The Flash Player is only one half of the equation. To work, the Flash Player requires a Flash movie. Such a movie is most often a file with the .swf file extension compiled using one of Flash's development tools. But as you'll see in this article, you can also use the Ming library to build a .swf file dynamically in much the same way as you create an image dynamically to do graphing on your Web server. The Ming library builds the op-codes in a new .swf file from the objects and methods you build in your PHP code.
You can view an .swf file from a Web site in either of two ways. The first is simply to navigate to the URL of the .swf file. Doing so replaces the entire content area of the Web server with the Flash movie. This method is handy for debugging, but the primary method is to embed the movie in an <object> tag within an HTML Web page. That <object> tag then references the SWF movie through a URL. The advantage of the <object> approach is that you can place the movie anywhere on the page and control it dynamically through JavaScript code, just like any other element.
Listing 1 shows is an example of an <object> tag that references an SWF movie.
Listing 1. An embedded Flash movie
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
version=6,0,40,0"
WIDTH="550" HEIGHT="400">
<PARAM NAME="movie" VALUE="lines.swf">
<EMBED src="lines.swf" WIDTH="550" HEIGHT="400"
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
|
This set of tags references a movie named lines.swf. The interior <embed> tag ensures that the Flash movie plays on all the different browsers as long as the plug-in is installed.
The tags also specify the height and width of the Flash Player as 550 and 400 pixels, respectively. It's important to note that graphics in a Flash movie are vector-based, which means that as you use Flash commands to draw lines and text, those elements are stored as coordinates and scale to match the size of the display area. As you'll see, the Flash movie has its own coordinate system you can use in whatever way suits you to make your code as clean as you like.
Ming
The first method of using Flash movies presented in this article is to generate them dynamically using the Ming library. The Ming library is a PHP library that has a set of objects that map to the data types in an SWF movie: sprites, shapes, text, bitmaps, etc. I won't go into how to build and install Ming because doing so is platform-specific and not particularly easy (see Resources). For my work on this article, I used the pre-compiled extension php_ming.dll library for the Windows version of PHP.
I should point out that Ming is still in development. At the time of this writing, the library was at V0.4, and some of the earlier commands don't work in the later versions. I used V0.4 to write the article, so, to use this code, you need that version.
Listing 2 shows the HelloWorld example implemented using the Ming library.
Listing 2. Hello.php
<?php
$f = new SWFFont( '_sans' );
$t = new SWFTextField();
$t->setFont( $f );
$t->setColor( 0, 0, 0 );
$t->setHeight( 400 );
$t->addString( 'Hello World' );
$m = new SWFMovie();
$m->setDimension( 2500, 800 );
$m->add( $t );
$m->save( 'hello.swf' );
?>
|
Running this code on the command line generates the file hello.swf. When I open that file in my Web browser, I see the result in Figure 1.
Figure 1. HelloWorld example using Ming
Going back through the code, the first thing I do is create a pointer to one of the built-in fonts (_sans), then I create a text field, set its font, color, and size, and give it some text content ("Hello World"). I then create an SWFMovie object and set its dimensions. Finally, I add the text element to the movie and save the movie to a file.
As an alternative to building the file directly, I can output the SWF movie as the output of the page using this code instead of the save method:
header( 'Content-type: application/x-shockwave-flash' );
$m->output( );
|
This process is similar to how bitmap graphics are built using the ImageMagick library within PHP. For all the Ming examples, I use the save method, but you can do it however you like.
Making the text move
It doesn't make much sense just to put some text into a Flash movie unless you can get it to move. So I put together the example in Listing 2, which has two pieces of text: one that starts small and becomes larger and larger and another that stays static.
Listing 3. Text.php
<?php
$f = new SWFFont( '_sans' );
$pt = new SWFTextField();
$pt->setFont( $f );
$pt->setColor( 0, 0, 0 );
$pt->setHeight( 400 );
$pt->addString( '1000' );
$tt = new SWFTextField();
$tt->setFont( $f );
$tt->setColor( 192, 192, 192, 90 );
$tt->setHeight( 350 );
$tt->addString( 'Points' );
$m = new SWFMovie();
$m->setDimension( 2500, 800 );
$pts = $m->add( $pt );
$pts->moveTo( 0, 0 );
$tts = $m->add( $tt );
$tts->moveTo( 1300, 200 );
for( $i = 0; $i < 10; $i++ ) {
$m->nextframe();
$pts->scaleTo( 1.0 + ( $i / 10.0 ), 1.0 + ( $i / 10.0 ) );
}
$m->save( 'text.swf' );
?>
|
When I run this code on the command line, it generates text.swf. When I open that file in my Web browser, I see the image shown in Figure 2.
Figure 2. The text.swf file
The text "1000" starts fairly small, with a size of 350 points. Then I use the scaleTo() method to take it up to 750 points. I do this using the nextframe() method on the movie object.
To understand why this works, you need to know a bit about how Flash does animation. Animation in Flash works like animation in movies: by frames. Graphical sprites move across the movie frame by frame. One key difference is that Flash doesn't take a snapshot of each frame. It stores the state of the sprite objects at each frame.
If you notice, I have one variable named $pt that has the text "1000." Then I get back a new object called $pts from the add() method when I add $pt to the movie. That object is the SWFDisplayItem, which represents the instance of that sprite. I can then move that instance around the surface of the movie frame by frame. It's a bit confusing, but I could have multiple versions of the "1000" text sprite or the "points" text sprite moving around at the same time.
Drawing some graphics
The next thing to play with is vector graphics. I start with just one simple line that goes from the top left to the bottom right of the frame.
Listing 4. Line.php
<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );
$s = new SWFShape();
$s->setLine( 10, 0, 0, 0 );
$s->movePenTo( 10, 10 );
$s->drawLineTo( 290, 290 );
$m->add( $s );
$m->save( 'line.swf' );
?>
|
When I run this script on the command line, then look at the output .swf file, I see the image shown in Figure 3.
Figure 3. The simple line drawing
OK -- that's pretty simple and not too exciting. So what did I do? I created a new SWFShape object, then added some pen moves and lines to it. Then I added that shape sprite to the movie.
To make it more interesting, I use the same type of frame animation as I did with the text. But in this case, I rotate the line around the center of the movie with the code shown below.
Listing 5. The spinning line
<?php
$m = new SWFMovie();
$m->setDimension( 300, 300 );
$s = new SWFShape();
$s->setLine( 5, 0, 0, 0 );
$s->movePenTo( -100, -100 );
$s->drawLineTo( 100, 100 );
$ts = $m->add( $s );
$ts->moveTo( 150, 150 );
for( $i = 0; $i < 100; $i++ ) {
$ts->rotate( 10 );
$m->nextframe();
}
$m->save( 'rotate.swf' );
?>
|
In this case, I draw the line from -100, -100 to 100, 100. That puts the center of the line at coordinate 0,0. That way, when I rotate the shape, the rotation occurs from the center of the line.
When I add the shape to the movie, I move the SWFDisplayItem that's returned into the center of the frame. I then rotate it with the rotate() method and increment the frame each time.
Using images
Text and vector graphics primitives, such as lines, circles, arcs, curves, and rectangles, are great, but ideally, you need access to images in these Flash movies. Thankfully, the Ming library makes using images easy, as you can see below.
Listing 6. Using an image
<?php
$img = new SWFBitmap( file_get_contents( 'megan.jpg' ) );
$s = new SWFShape();
$imgf = $s->addFill( $img );
$s->setRightFill( $imgf );
$s->movePenTo( 0, 0 );
$s->drawLineTo( $img->getWidth(), 0 );
$s->drawLineTo( $img->getWidth(), $img->getHeight() );
$s->drawLineTo( 0, $img->getHeight() );
$s->drawLineTo( 0, 0 );
$m = new SWFMovie();
$m->setDimension( $img->getWidth() * 2, $img->getHeight() * 2 );
$is = $m->add( $s );
$is->moveTo( $img->getWidth() / 2, $img->getHeight() / 2 );
for( $i = 0; $i < 10; $i++ )
{
$is->skewx( 0.02 );
$is->skewy( -0.03 );
$m->nextframe();
}
$m->save( 'image.swf' );
?>
|
When I run this script on the command line and look at image.swf in my browser, I see something like Figure 4.
Figure 4. The generated image movie
This script starts by reading in a local .jpeg file (in this case, a picture of my daughter, Megan). It then creates a rectangle shape and fills it with the image. After that, it uses a skew effect over 10 frames to make the image move a bit.
Moving on from there
I've just touched the surface of what you can do with the Ming library. One of the aspects I haven't shown here is the interactive portion, where you can attach simple scripts to the element. (However, when it comes to interactivity, if you have a very complex Flash movie in mind, you might want to think about using Flash development tools to build a Flash movie that talks to Web services within your Web application.)
Another option when it comes to building more complex Flash movies is to use authoring tools such as Adobe Flex or Laszlo, both of which provide an XML syntax for laying out the user interface of a Flash movie and an easier route to developing the JavaScript that provides the interactivity in the interface.
XML Chart and XML Gauge
Two Flash SWFs I have been impressed with are XML Chart and XML Gauge, which are available at maani.us (see Resources). The movies make it easy to provide dynamic gauges and graphs on your Web site simply by creating XML pages in your PHP application.
The first step is to download the SWF from the site. Then you embed it in an <object> tag on your Web page and provide a URL for the XML data feed. You author a PHP page that exports the XML in the format necessary for the control. The XML formats for these movies are well documented on the site and easy to create.
Conclusion
Flash provides an opportunity to add a great deal of interactivity to a Web application in a straightforward manner. Start with something small, like some of the widget-style controls that have become popular recently. XML Chart and XML Gauge offer the chance to try these types of Flash widgets before investing a lot of time learning Ming, Flex, or Laszlo. Any way you cut it, it's worth understanding Flash and what it can do to extend the reach and interactivity of a Web 2.0 PHP application.
Resources Learn
Get products and technologies
-
Laszlo Systems builds the Laszlo XML language for Flash.
-
Adobe Flex is Adobe's version of the XML language for Flash.
-
The Ming library is hosted on SourceForge.
-
Innovate your next open source development project with
IBM trial software, available for download or on DVD.
Discuss
- The developerWorks PHP Developer Forum provides a place for all PHP developer discussion topics. Post your questions about PHP scripts, functions, syntax, variables, PHP debugging and any other topic of relevance to PHP developers.
-
Get involved in the developerWorks community by participating in developerWorks blogs.
About the author | | | Jack D. Herrington is a senior software engineer with more than 20 years of experience. He's the author of three books: Code Generation in Action, Podcasting Hacks, and PHP Hacks. He has also written more than 30 articles. |
Rate this page
| |
