PHP generated Flash animation code

There is a set of objects that map to the data types in the SWF animation: child graphics, graphics, text, bitmaps, and so on. In this article, I used the precompiled extension php_ming.dll library for the Windows version of PHP.

Listing 2 shows an example of HelloWorld implemented using the Ming library.

Listing 2. Hello. PHP

< ? PHP
$f = new SWFFont('_sans');

$t = new SWFTextField ();
$t - > The 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 opened the file in my Web browser, I saw the result shown in figure 1.

Figure 1. An example of HelloWorld using Ming
< img border = 0 height = 262 Alt = "use Ming HelloWorld example" SRC = "http://files.jb51.net/upload/2010-3/20100312204039615.jpg" width = 400 >

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

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

The content-type header (' : application/x - the rest - flash ');
$m - > The output ();

This process is similar to building bitmaps using the ImageMagick library in PHP. For all the Ming examples, I will use the save method, but you can choose to use the save method as you like.

Let the text move

Just putting some text in Flash doesn't make much sense unless you can get it moving. So I've put together the example in listing 2, which consists of two pieces of text: one that starts small and gets bigger, and the other that stays static.

Listing 3. Text. PHP

< ? PHP
$f = new SWFFont('_sans');

$pt = new SWFTextField ();
$pt - > The setFont ($f);
$pt - > SetColor (0, 0, 0);
$pt - > SetHeight (400);
$pt - > AddString (' 1000 ');

$tt = new SWFTextField ();
$tt - > The 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 this code is executed on the command line, it generates text.swf. When I opened the file in my Web browser, I saw the image shown in figure 2.

Figure 2. Text.swf file
< img border = 0 height = 273 Alt = "text. The SWF file" SRC = "http://files.jb51.net/upload/2010-3/20100312204040601.jpg" width = 400 >

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

To understand how it works, you need to know a little bit about how Flash makes animation. Animation in Flash works just like animation in a movie: it runs by frame. The subgraphics will move by frame in the animation frame. One major difference is that Flash does not take a snapshot of each frame. It stores the state of the child graphics object in each frame.

You may notice that I have a variable named $pt with the text "1000". Later, when I added $pt to the animation, I got a new object named $PTS returned by the add() method. The object is SWFDisplayItem, which represents an instance of the child graph. Then I can move the instance frame by frame around the surface of the animation frame. This is a bit confusing, but I can have multiple versions of the "1000" text subgraph or the "points" text subgraph moving at the same time.

Draw some shapes

The next thing to deal with is vector graphics. First, just draw a simple 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 on the command line and then look at the output.swf file, as shown in figure 3.

Figure 3. Draw a simple line
< img border = 0 height = 276 Alt = draw up the simple linear SRC = "http://files.jb51.net/upload/2010-3/20100312204041411.jpg" width = 400 >

Ok - it's very simple and not very exciting. So what did I do? Created a new SWFShape object, and then added some stroke moves and lines to it. Then I added it to the animation as a subgraph.

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

Listing 5. Rotate the 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 - > The rotate (10);
$m - > Nextframe ();
}

$m - > Save (' rotate. SWF);
? >

In this case, I drew a line from minus 100, minus 100 to 100, 100. This will place the center of the line at the coordinate 0,0. So when I rotate the graph, the center of the line will rotate.

When I add a graph to the animation, I move back to the SWFDisplayItem in the center of the frame. Then I rotate it with the rotate() method and increase its frame every rotation.

Use pictures

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

Listing 6. Using images

< ? PHP
$img = new SWFBitmap(file_get_contents(' mega.jpg '));

$s = new SWFShape ();
$imgf = $s - > AddFill ($img);
$s - > SetRightFill ($imgf);
$s - > MovePenTo (0, 0);
$s - > DrawLineTo ($img - > GetWidth (), 0);
$s - > DrawLineTo ($img - > GetWidth () and $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, and $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 from the command line and view image.swf in the browser, and the result is shown in figure 4.

Figure 4. Generated picture animation
< img border = 0 height = 332 Alt = generated animation SRC = "http://files.jb51.net/upload/2010-3/20100312204041257.jpg" width = 400 >

This script starts by reading the local.jpeg file (in this case, a picture of my daughter Megan). Then create a rectangle and fill it with images. After that, it USES the displacement effect at 10 frames to move the image slightly.

Continue to move

I've only scratched the surface of what the Ming library can do for you. I don't show the interaction section here, where you can connect simple scripts to elements. (however, if you have a very complex Flash animation instead of interactive operations, you might want to consider using Flash development tools to build Flash animations that talk to Web services within a Web application.)

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 layout of the user interface for Flash animation and an easier routine for developing JavaScript that provides interactive action to the interface.