How to quickly generate Flash animation using PHP

Use the Ming library to dynamically build Flash Animation

Rich Internet Application is a new buzzword in Web 2.0. In essence, a key component of Web 2.0 is Adobe Flash. Learn how to integrate Flash animation into applications and use the Ming library to dynamically generate Flash animation.

Web 2.0 introduces Rich Internet Application. HoweverRich Internet ApplicationWhat does it mean? Generally, it means adding highly responsive transaction operations to an application. Specifically, it means that widgets, Web forms, and reports on the page can be instantly changed without retrieving new pages from the server.

One method for building Rich Internet Application (RIA) is to use Dynamic HTML (Dynamic HTML, DHTML), which is Ajax, JavaScript, and Cascading Style Sheet (CSS) and HTML (see references ). However, DHTML is not the only way to add interactive operations to Web applications. Another important method is to use Adobe Flash Player, which has been used to add interactive operations for websites for ten years.

The first version of Flash was used to create animated images. The latest version of Flash can now host a complete interface for controlling Web service access and using ECMAScript (the official version of JavaScript) to provide complete script support.

Learn about Flash

Flash Player is a plug-in integrated into the Web browser of computers running Microsoft Windows, Mac OS X, and Linux. By the end of this article, the latest version of Flash Player is V8. It is available for free and is installed with most browsers. It is very popular and has excellent client penetration power-and this penetration power has been improved with the emergence of services such as YouTube and Google Video, which all use Flash to display Video streams.

Flash Player is only one end of the balance. To play a role, Flash Player also needs a Flash animation. This type of animation is usually a file compiled using a Flash development tool. Its file extension is. swf. However, as you will see in this article, you can also use the Ming library to dynamically build. swf files in almost the same way as creating images dynamically, and draw images on the Web server. The Ming library uses PHP code to construct the operation code in the new. swf file.

You can use either of the two methods to view the. swf file on the Web site. The first method is to navigate to the URL of the. swf file. This will replace the entire content area of the Web server with the Flash animation. This method is easy to debug, but the main usage is to embed an animation into an HTML Web page.<object>Marking. The<object>Tag and then reference the SWF animation through the URL.<object>The advantage of this method is that you can place an animation anywhere on the page and dynamically control it through JavaScript code, just like processing any other elements on the page.

Listing 1 shows a reference to SWF animation.<object>Tag example.

Listing 1. Embedded Flash animation

<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 group of tags references an animation named lines.swf. Internal<embed>Tags are used to ensure that Flash animation can be played in various browsers with plug-ins installed.

The Flash Player height and width are also specified as 550 pixels and 400 pixels respectively. It is worth noting that the graphics in Flash animation are based on vectors, which means that when you use Flash commands to draw lines and text, all elements are stored as coordinates and scaled according to the ratio of matching display areas. As you can see, Flash Animation has its own coordinate system, you can follow the appropriate method to make the code as clean as possible.

Ming

The first method provided in this article to use Flash animation is to use the Ming library to dynamically generate them. The Ming library is a PHP library with a set of objects mapped to the Data Type in the SWF animation: subgraphics, graphics, text, bitmap, and so on. I will not discuss how to build and install Ming, because its operations are platform-specific and not very simple (see references ). In this article, I used the pre-compiled extension php_ming.dll library for PHP in Windows.

It must be noted that Ming is still in the development stage. As of the end of this article, the Library version is V0.4, and some commands in earlier versions are not available in the latest version. I used V0.4 to write this article. Therefore, you need to use this version to use this code.

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' );?>

Run this code in the command line to generate the hello.swf file. When I open the file in a Web browser, I see the result shown in Figure 1.

Figure 1. HelloWorld example using Ming

Looking back at this code, the first thing I do is to create a pointer pointing to a built-in font (_ sans), then create a text field, and set the font, color, and size, finally, it provides some text content ("Hello World "). Then createSWFMovieObject and set its size. Finally, add text elements to the animation and save the animation to the file.

As an alternative method for directly building files, you can also use the following code to make SWF animation output as a page without using the save method:

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

This process is similar to using the ImageMagick library in PHP to build bitmap. For all the Ming examples, I will use the save method, but you can choose whether to use the save method based on your preferences.

Make the text dynamic

It doesn't make much sense to put some text into a Flash Animation unless you can make it work. Therefore, I integrated the example in Listing 2, which contains two text segments: some of which grew larger at the beginning, while the others remained 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 you execute this code in the command line, it generates text.swf. When you open the file in a Web browser, I see the image shown in figure 2.

Figure 2. text.swf File

The text "1000" is very small at the beginning and the size is 350 points. Then usescaleTo()Method to increase it to 750 points, the method is to use the animation objectnextframe()Method.

To understand how it works, you need to understand how Flash animation is made. The animation in Flash runs like an animation in a movie: by frame. The child image is moved by frame in the animation frame. One major difference is that Flash does not get snapshots of each frame. It stores the status of the sub-image object in each frame.

You may notice that I have$ptVariable, which has the text "1000 ". Then$ptWhen added to the animationadd()The name returned by the method is$pts. This object isSWFDisplayItem, Indicating the child image instance. Then I can move the instance frame by frame around the animation frame. This is a bit confusing, but I can have multiple versions of the "1000" text book graph or the "points" text book graph simultaneously.

Back to Top

Draw some images

Next we will deal with vector graphics. First, draw a simple straight line from the top left of the frame to the bottom right.

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' );?>

Run the script in the command line and view the output. swf file. effect 3 is shown.

Figure 3. Draw a simple line

Okay-this is very simple and not very exciting. So what did I do? A newSWFShapeObject, and then add some strokes and straight lines to it. Then I add it to the animation as a child image.

To make it more interesting, I used the same frame animation that was used in the text just now. However, in this example, I use the code shown below to rotate this line around the center of the animation.

Listing 5. rotating a straight 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 example, I draw a straight line from-100,-100 to 100,100. This places the center of the straight line at coordinates 0, 0. In this way, when I rotate the image, the center of the straight line will rotate.

When I add a graphic to an animation, I move it back to the frame centerSWFDisplayItem. Then userotate()Method To make it rotate and increase its frame every week.

Use Images

Text and simple vector graphics such as straight lines, circles, arcs, curves, and rectangles are excellent, but ideally you must be able to access the images in these Flash animations. Fortunately, the Ming library allows you to use images easily, as shown below.

Listing 6. Using images

<?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' );?>

Run this script on the command line and view image.swf in the browser, as shown in result 4.

Figure 4. generated image Animation

At the beginning, this script reads the local. jpeg file (in this example, it is a photo of my daughter Megan ). Create a rectangle and fill the image with it. After that, it used the displacement effect at 10 frames to make the image move slightly.

Continue to move

I just touched the surface of the operations that the Ming library can provide for you. The interaction section is not displayed here. In the interaction section, you can connect simple scripts with elements. (However, for interactive operations, if you have a very complex Flash animation, you may need to consider using Flash development tools to build Flash animations for dialog between Web applications and Web services .)

Another option for building more complex Flash animations is to use production tools such as Adobe Flex or Laszlo, both tools provide XML syntax for the layout of the Flash Animation user interface and a simpler routine for developing JavaScript that provides interactive operations for the interface.

XML Chart and XML Gauge

The two Flash SWF files that impressed me were XML Chart and XML Gauge, available in maani. us (see references ). With animation, you can easily provide dynamic specifications and graphics for Web sites. You only need to create an XML page in the PHP application.

The first step is to download SWF from the site. And then embed it into<object>Mark and provide the URL to the XML Data Abstract. Create a PHP page and export XML in the format required by the control. The XML format of these animations is described in detail on the site and is easy to create.

Conclusion

Flash brings you an opportunity to easily add a large number of interactive operations to Web applications. Like widgets with widget styles, Widgets have become increasingly popular since they are insignificant. XML Chart and XML Gauge provide the opportunity for you to try using these types of Flash widgets before you spend a lot of time learning about Ming, Flex, or Laszlo. In any case, it is worthwhile to spend time learning about Flash and its functions to expand the functions and interactive operations of Web 2.0 PHP applications.