A quick way to generate Flash animation with PHP _php Foundation

Dynamically build Flash animations using the Ming library

Rich Internet application is a new buzzword in Web 2.0, and one of the key components of Web 2.0 is Adobe Flash. Learn how to integrate Flash animations into your applications and use the Ming library to dynamically generate flash animations.

--> --> -->

WEB 2.0 introduces Rich Internet application. But what is the meaning of Rich Internet application ? Typically, it means adding highly responsive transaction operations to your application. Specifically, it means that you can instantly change widgets, Web forms, and reports on a page without retrieving new pages from the server.

One way to build Rich Internet application (RIA) is to use dynamic HTML, which is Ajax, JavaScript, cascading style sheets (cascading style Sheet , CSS) and an HTML combination (see resources ). But DHTML is not the only way to add an interactive action to a WEB application. Another important approach is to use Adobe Flash Player to add interactivity to a Web site for ten years.

The first version of Flash was used to create animated pictures, and the latest version of Flash already hosts a complete interface that can be used to control WEB service access and use ECMAScript (the official version of JavaScript) to provide complete scripting support.

Learn about Flash

Flash Player is a plug-in that is integrated into a Web browser that runs microsoft®windows®, Mac OS X, and linux® computers. By the time this article was finalized, the latest version of Flash Player was V8. It is available for free, and most browsers have this plugin installed. It is very popular and has excellent client penetration-and this penetration has been enhanced with services such as YouTube and Google video, which use Flash to display streaming videos.

Flash Player is just one end of the scale. To play a role, Flash Player also needs to use a flash animation. This type of animation is usually a file compiled using a Flash development tool with a. swf file name extension. But as you'll see in this article, you can also use the Ming library to dynamically build a. swf file in the same way that you create pictures dynamically, and draw graphics on the Web server. The Ming Library builds the operation code in the new. swf file with objects and methods built by the PHP code.

You can view a. swf file in a Web site in either of two ways. The first method simply navigates to the URL of the. swf file. Doing so replaces the entire content area of the Web server with Flash animations. This method is easy to debug, but the main use is to embed animations in the markup of an HTML Web page <object> . The <object> tag then references the SWF animation through the URL. <object>The advantage of the method is that you can place the animation anywhere on the page and dynamically control it through JavaScript code, just as you would any other element in the page.

Listing 1 shows an example of a markup that references a SWF animation <object> .

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=" height= "> <param NAME=" "Movie" value= "lines.swf" > <embed src= "lines.swf" width= "" height= "type=" application/ X-shockwave-flash " pluginspage=" http://www.macromedia.com/go/getflashplayer "> </EMBED> </OBJECT>

This set of tags will refer to an animation named lines.swf. Internal <embed> tags are used to ensure that Flash animations can be played in a variety of browsers with Plug-ins installed.

The tag also assigns the Flash Player's height and width to 550 pixels and 400 pixels, respectively. Notably, the graphics in Flash animations are vector based, which means that when you draw lines and text using the Flash command, those elements are stored as coordinates and scaled in proportion to the matching display area. As you can see, the Flash animation has its own coordinate system, which allows you to keep your code as neat and tidy as possible.

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0>

Ming

The first way to use Flash animations in this article is to dynamically build them using the Ming library. The Ming library is a PHP library with a set of objects mapped to the data types in the SWF animation: Child graphics, graphics, text, bitmaps, and so on. I will not discuss how to build and install Ming because its operations are platform-specific and not particularly simple (see resources ). In this article, I used the precompiled Extensions Php_ming.dll library for Windows version of PHP.

It must be noted that Ming is still in the development phase. By the time this article was finalized, the version of the library was V0.4, and some of the commands in the older version were not available in the latest version. I used V0.4 to write this article, so to use this code, you need to use this version.

Listing 2 shows a HelloWorld sample 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 (); $t->addstring (' Hello World '); $m = new Swfmovie (); $m->setdimension (2500); $m->add ($t); $m->save (' hello.swf '); ? >

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

Figure 1. Examples of HelloWorld using Ming
0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " >

Looking back at this code, the first thing I do is create a pointer to a built-in font (_sans), create a text field, set the font, color, and size, and give it some text content ("Hello World"). Next, you create an SWFMovie object and set its size. Finally, you add the text element to the animation and save the animation to the file.

As an alternative to directly building a file, you can also use the following code to make a SWF animation output like 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 bitmaps. For all the Ming examples, I will use the Save method, but you can choose whether to use the Save method according to your preferences.

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0>

Let the text move.

Just putting some text into a Flash animation doesn't make much sense unless you can get it moving. So I've consolidated the example in Listing 2, which includes two pieces of text: Some start small and then get bigger, while the other part stays static.

Listing 3. text.php

<?php $f = new Swffont (' _sans '); $pt = new Swftextfield (); $pt->setfont ($f); $pt->setcolor (0, 0, 0); $pt->setheight (); $pt->addstring (' 1000 '); $tt = new Swftextfield (); $tt->setfont ($f); $tt->setcolor (in); $tt->setheight (); $tt->addstring (' Points '); $m = new Swfmovie (); $m->setdimension (2500); $pts = $m->add ($pt); $pts->moveto (0, 0); $tts = $m->add ($TT); $tts->moveto (1300); for ($i = 0; $i < $i + +) { $m->nextframe (); $pts->scaleto (1.0 + ($i/10.0), 1.0 + ($i/10.0)); $m->save (' text.swf '); ? >

When this code is executed on the command line, it generates TEXT.SWF. When I open the file in my Web browser, I see the picture shown in Figure 2.

Figure 2. text.swf file
0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " >

The text "1000" starts small and has a size of 350 dots. Then use the scaleTo() method to increase it to 750 points by using the method on the animated object nextframe() .

To understand how this works, you need to know a little bit about how Flash animations are made. Animations in Flash run like animations in a movie: run by frame. The child shapes move through frames in the animation frame. A major difference is that Flash does not get a snapshot of each frame. It stores the state of the child drawing objects in each frame.

You may notice that I have a variable named, $pt which has the text "1000". Then, when I $pt add it to the animation, I get the add() new object named as returned by the method $pts . The object is an SWFDisplayItem instance that represents a child shape. I can then move the instance around the surface of the animation frame. It's a bit confusing, but I can have multiple versions of the "1000" text or "points" text child graphics that are moved simultaneously.

0 && image.height>0) { if (image.width>=510) {this.width=510;this.height=image.height*510/image.width}} " 0 && image.height>0) {if (image.width>=510) {this.width=510;this.height=image.height*510/ Image.width}} " Border=0>

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0> Back to the top of the page

Draw some graphics

The next thing to deal with is vector graphics. You first draw a simple straight line, from the top of the frame to the bottom of the right.

Listing 4. line.php

<?php $m = new Swfmovie (); $m->setdimension (in); $s = new swfshape (); $s->setline (0, 0, 0); $s->movepento (a); $s->drawlineto (290, 290); $m->add ($s); $m->save (' line.swf '); ? >

Run this script on the command line, and then view the. swf file for the output, as shown in Figure 3.

Figure 3. Draw a simple line
0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " >

OK-it's very simple and not very exciting. So, what did I do? A new SWFShape object is created, and some stroke moves and lines are added to it. I then added it as a child graphic to the animation.

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

Listing 5. Rotate Straight Line

<?php $m = new Swfmovie (); $m->setdimension (in); $s = new swfshape (); $s->setline (5, 0, 0, 0); $s->movepento ( -100, -100); $s->drawlineto (m); $ts = $m->add ($s); $ts->moveto (the); for ($i = 0; $i < $i + +) { $ts->rotate); $m->nextframe (); } $m->save (' rotate.swf '); ? >

In this case, I drew a straight line from 100,-100 to 100, 100. This will place the center of the line at coordinates 0, 0. This way, when I rotate the graphic, the center of the line rotates.

When I add a graphic to the animation, the move is returned to the center of the frame SWFDisplayItem . Then use rotate() the method to rotate it and increase its frame each week.

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0>

Working with pictures

Text and simple vector graphics such as lines, circles, arcs, curves, and rectangles are excellent, but ideally you must be able to access the pictures in these flash animations. Thankfully, the Ming library makes it easy for you to use pictures, as shown below.

Listing 6. Working with pictures

<?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 < $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 Figure 4.

Figure 4. Generated animation of the picture
0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " >

This script read the local. jpeg file at the beginning (in this case, it's my daughter Megan's photo). Then create a rectangle and populate it with the picture. After that, it uses a displacement effect at 10 frames to make the picture move slightly.

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0>

Keep moving.

I just touched the surface of the operation that the Ming library can provide for you. I don't show the interactive part here, and in the interactive section you can connect simple scripts with elements. (However, if you have an interactive operation, if you have a very complex flash animation, you might want to consider using the Flash development tool to build a flash animation within your Web application that talks to the Web service.) ）

Another option for building more complex Flash animations is to use production tools such as Adobe Flex or Laszlo, both of which provide XML syntax for the user interface layout for Flash animations and a more relaxed routine that can be used to develop a Ja that provides interactive action for the interface Vascript.

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0>

XML Chart and XML gauge

The two Flash SWF that impressed me is the XML Chart and XML gauge that can be obtained in maani.us (see Resources ). With animations you can easily provide dynamic specifications and graphics for your Web site, you simply create XML pages in your PHP application.

The first step is to download the SWF from the site. It is then embedded in the markup of the Web page <object> and the URL is provided to the XML Data digest. Make a PHP page to export XML in the format that you want to control. The XML format for these animations is described in detail in the site and is very easy to create.

0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " > 0 && image.height>0) {if (image.width>=510) {This.width=510;this.height=image.height*510/image.width}}} " Border=0>

Conclusion

Flash offers an opportunity for you to easily add a large number of interactions to your WEB application. Like widget-style controls, it gets more and more popular from trivial beginnings. XML Chart and XML gauge provide an opportunity for you to try these types of Flash widgets before spending a lot of time understanding Ming, Flex, or Laszlo. In any case, it's worth taking the time to learn about Flash and its features to extend the functionality and interactivity of WEB 2.0 PHP applications.