Use PHP to quickly generate Flash Animation

Jack D. herrington

, Senior Software Engineer, leverage Software Inc.

January 24, 2007

Rich Internet application is a new buzzword in Web 2.0, and Web 2.0
In essence, a key component 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 Application

What 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.

I
The method used to build rich Internet application (RIA) is to use dynamic HTML (dynamic
HTML, DHTML), which is Ajax, JavaScript, 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 the web integrated into computers running Microsoft Windows, Mac OS X, and Linux.
A plug-in the browser. By the end of this article, the latest Flash Player version 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 comes along with YouTube and
The emergence of services such as Google Video has been improved. These services use flash to display video streams.

Flash Player
It's just one end of the balance. To play a role, Flash Player also needs a Flash animation. This type of animation usually uses a flash
. SWF. However, as you will see in this article, you can use the Ming library to dynamically build images in almost the same way as creating images dynamically.
. SWF file, and draw images on the Web server. The Ming library uses PHP code to construct the operation code in the new. SWF file.

You
You can use either of the two methods to view the. SWF file in the Web site. The first method is to navigate to the URL of the. SWF file. In this way, the Web
Replace the entire content area of the 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" <br/> codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# <br/> Version = 6, 0, 550 "<br/> width =" 400 "Height =" "> <br/> <Param name =" movie "value =" lines.swf "> <br/> <embed src = "lines.swf" mce_src = "lines.swf" width = "550" Height = "400" <br/> type = "application/X-Shockwave-flash" <br/> pluginspage = "http://www.macromedia.com/go/getflashplayer"> <br/> </embed> <br/> </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.

Mark
Specify the height and width of Flash Player as 550 pixels and 400 pixels respectively. It is worth noting that flash
All images in the animation are vector-based, which means that when you use flash
When the command is used to draw lines and text, those 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, so you can keep your code as clean as possible.

 

Ming

This article mentions
The first way to use flash animation is to use the Ming library to dynamically generate them. The Ming library is a PHP library with a group mapped to SwF
Animation data type objects: subgraphs, graphs, text, bitmaps, 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 <br/> $ F = new swffont ('_ sans'); <br/> $ T = new swftextfield (); <br/> $ T-> setfont ($ F); <br/> $ T-> setcolor (0, 0, 0 ); <br/> $ T-> setheight (400); <br/> $ T-> addstring ('Hello World '); <br/> $ M = new swfmovie (); <br/> $ M-> setdimension (2500,800); <br/> $ M-> Add ($ t ); <br/> $ M-> Save ('hello.swf '); <br/>?> <Br/>

 

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 createSWFMovie
Object 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'); <br/> $ M-> output (); <br/>

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 <br/> $ F = new swffont ('_ sans'); <br/> $ Pt = new swftextfield (); <br/> $ Pt-> setfont ($ F); <br/> $ Pt-> setcolor (0, 0, 0 ); <br/> $ Pt-> setheight (400); <br/> $ Pt-> addstring ('000000'); <br/> $ TT = new swftextfield (); <br/> $ tt-> setfont ($ F); <br/> $ tt-> setcolor (192,192,192, 90 ); <br/> $ tt-> setheight (350); <br/> $ tt-> addstring ('points'); <br/> $ M = new swfmovie (); <br/> $ M-> setdimension (2500,800 ); <Br/> $ PTS = $ M-> Add ($ pt); <br/> $ PTS-> moveTo (0, 0 ); <br/> $ TTS = $ M-> Add ($ TT); <br/> $ TTS-> moveTo (1300,200 ); <br/> for ($ I = 0; $ I <10; $ I ++) {<br/> $ M-> nextframe (); <br/> $ PTS-> scaleto (1.0 + ($ I/10.0), 1.0 + ($ I/10.0 )); <br/>}< br/> $ M-> Save ('text.swf '); <br/>?> <Br/>

 

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$pt
Variable, which has the text "1000 ". Then$pt
When 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.

 

 

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 <br/> $ m = new SWFMovie (); <br/> $ m-> setDimension (300,300); <br/> $ s = new SWFShape (); <br/> $ s-> setLine (10, 0, 0, 0); <br/> $ s-> movePenTo (10, 10 ); <br/> $ s-> drawLineTo (290,290); <br/> $ m-> add ($ s ); <br/> $ m-> save ('line.swf '); <br/>?> <Br/>

 

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 newSWFShape
Object, 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 <br/> $ m = new SWFMovie (); <br/> $ m-> setDimension (300,300); <br/> $ s = new SWFShape (); <br/> $ s-> setLine (5, 0, 0, 0); <br/> $ s-> movePenTo (-100,-100 ); <br/> $ s-> drawLineTo (100,100); <br/> $ ts = $ m-> add ($ s ); <br/> $ ts-> moveTo (150,150); <br/> for ($ I = 0; $ I <100; $ I ++) {<br/> $ ts-> rotate (10); <br/> $ m-> nextframe (); <br/>}< br/> $ m-> save ('rotate.swf '); <br/>?> <Br/>

 

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 <br/> $ img = new SWFBitmap (file_get_contents ('megan.jpg '); <br/> $ s = new SWFShape (); <br/> $ imgf = $ s-> addFill ($ img); <br/> $ s-> setRightFill ($ imgf ); <br/> $ s-> movePenTo (0, 0); <br/> $ s-> drawLineTo ($ img-> getWidth (), 0 ); <br/> $ s-> drawLineTo ($ img-> getWidth (), $ img-> getHeight (); <br/> $ s-> drawLineTo (0, $ img-> getHeight (); <br/> $ s-> drawLineTo (0, 0); <br/> $ m = new SWFMovie (); <br/> $ m-> s EtDimension ($ img-> getWidth () * 2, $ img-> getHeight () * 2); <br/> $ is = $ m-> add ($ s ); <br/> $ is-> moveTo ($ img-> getWidth ()/2, $ img-> getHeight ()/2 ); <br/> for ($ I = 0; $ I <10; $ I ++) <br/>{< br/> $ is-> skewx (0.02 ); <br/> $ is-> skewy (-0.03); <br/> $ m-> nextframe (); <br/>}< br/> $ m-> save ('image.swf '); <br/>?> <Br/>

 

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
And Ming
The operating surface that the Library provides for you. The interaction section is not displayed here. In the interaction section, you can connect simple scripts with elements. (However, if it is an interactive operation, if you have a very complex
You may need to consider using flash development tools to build a Flash animation for dialog between web applications and Web services .)

Structure
Another option for creating more complex Flash animations is to use production tools such as Adobe Flex or Laszlo, both of which provide
The XML syntax of the Flash Animation User Interface layout and a simpler routine can be used to develop JavaScript that provides interactive operations for the interface.

 

XML chart and XML Gauge

The two Flash SWF files that impressed me are 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
This 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 to use these types
Flash widgets. 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.