A quick way to generate Flash animations with PHP _php tutorial

Source: Internet
Author: User
Dynamically build Flash animations using the Ming library

Rich Internet application is a new buzzword in Web 2.0, and in terms of Web 2.0, a key component is Adobe Flash. Learn how to integrate Flash animations into your application and dynamically generate Flash animations using the Ming library.

WEB 2.0 introduces Rich Internet application. But what does Rich Internet application mean? Typically, it means adding highly responsive trading operations to your application. Specifically, it means that widgets, Web forms, and reports in the page can be changed instantly without retrieving new pages from the server.

One way to build Rich Internet application (RIA) is to use dynamic HTML, html,dhtml, which is Ajax, JavaScript, cascading style sheets (cascading style Sheet , CSS) and a combination of HTML (see Resources). But DHTML is not the only way to add interactive operations to a WEB application. Another important way is to use Adobe Flash Player, which has been using it for a decade to add interactivity to a Web site.

The first version of Flash was used to create animated images, and the latest version of Flash has been able to host a complete interface to control WEB service access and use ECMAScript (the official version of JavaScript) to provide full scripting support.

Learn about Flash

Flash Player is a plug-in in a Web browser that is integrated into a computer running microsoft®windows®, Mac OS X, and Linux®. As of this writing, the latest version of Flash Player is V8. It is available for free, and most browsers come with this plugin installed. It is very popular and has excellent client penetration-and this penetration has been enhanced with the advent of services such as YouTube and Google video, which use Flash to display video streams.

Flash Player is just one end of the balance. To work, Flash Player also needs to use a flash animation. This type of animation is typically a file compiled with 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. swf files and draw graphics on the Web server by using the same method that you would almost dynamically create images. The Ming Library builds the operation code in the new. swf file with objects and methods built from PHP code.

You can view. swf files in a Web site in either of two ways. The first method simply navigates to the URL of the. swf file. Doing so will replace the entire content area of the Web server with the Flash animation. This method is easy to debug, but the main use is to embed animations in HTML Web pagesTag. TheTag and then refer to the SWF animation by URL.The advantage of the method is that you can place the animation anywhere on the page and dynamically control it with JavaScript code, just like any other element in the page.

Listing 1 shows a reference to the SWF animationAn example of a tag.



Listing 1. Embedded Flash Animation


This set of tags will refer to an animation named lines.swf. Internal tags are used to ensure that Flash animations can be played in various browsers that have plug-ins installed.

The tag also specifies the height and width of the Flash Player as 550 pixels and 400 pixels, respectively. It is important to note that the graphics in the Flash animation are vector-based, which means that when you draw lines and text with the Flash command, those elements are stored as coordinates and scaled according to the proportions of the matching display area. As you can see, Flash animations have their own coordinate system, and you'll be able to make your code as neat as possible as appropriate.


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 animation, as provided in this article, is to generate them dynamically using the Ming library. The Ming library is a PHP library with a set of objects that map to the data types in the SWF animation: sub-shapes, 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 the Windows version of PHP.

It must be noted that Ming is still in the development phase. As of this writing, the library version is V0.4, and some commands in older versions are 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 an example of the HelloWorld implemented using the Ming library.



Listing 2. hello.php

     
               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 the file hello.swf. When I open the file in my Web browser, I see the result shown in Figure 1.



Figure 1. Example 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 the code, the first thing I did was create a pointer to a built-in font (_sans), create a text field, set the font, color, and size, and finally give it some textual content ("Hello World"). Next, you create an 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 way to build files directly, you can also use the following code to make the 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 Ming examples, I will use the Save method, but you can choose whether to use the Save method, depending on 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.

It doesn't make much sense to put some text in a Flash animation unless you can get it moving. So I've integrated the example in Listing 2, which includes two paragraphs of text: Some start small and then get bigger, and the other part remains static.



Listing 3. text.php

     
               SetFont ($f); $pt->setcolor (0, 0, 0), $pt->setheight, $pt->addstring (' n '); $tt = new Swftextfield (); $t T->setfont ($f); $tt->setcolor (192, 192, 192, N); $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 you execute this code 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 points. Then use the method to scaleTo() increase it to 750 points by using the method for the animated object nextframe() .

To understand how it works, you need to know a little bit about how Flash makes animations. Animations in Flash run like animations in movies: Run as frames. The sprite moves in the animation frame by frame. One major difference is that Flash does not get a snapshot of each frame. It stores the state of the sub-graphic object at each frame.

You may notice that I have a $pt variable named, which has the text "1000". Then when I $pt add to the animation, I get the add() new object named by the method $pts . The object is an SWFDisplayItem instance that represents a child shape. I can then move the instance around the frame of the animation frame. It's kind of confusing, but I can have multiple versions of the "1000" text sub-graphic or "points" text sub-shape that move at the same time.


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 top of page


Draw some graphics

The next step is to work with vector graphics. First, draw only a simple line, which is from the top left of the frame to the bottom right.



Listing 4. line.php

     
               Setdimension (+); $s = new swfshape (); $s->setline (0, 0, 0); $s->movepento (2); $s->drawlineto 290), $m->add ($s) $m->save (' line.swf ');? >

Run this script on the command line and look at the output of the. swf file, as shown in effect 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;}} " >

Well--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. Then I added it as a sub-shape 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 Line

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

In this example, I draw a line from 100, 100 to 100, 100. This will place the center of the line in coordinates 0, 0. This way, when I rotate the shape, the center of the line rotates.

When I add a graphic to the animation, it moves back to the center of the frame SWFDisplayItem . Then use rotate() the method to rotate it and increase its frame every rotation of the 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 have access to the pictures in these Flash animations. Fortunately, the Ming library makes it easy for you to use the picture as shown below.



Listing 6. Working with pictures

     
               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-& Gt;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 result 4.



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

This script reads the Local. jpeg file at the beginning (in this case, the photo of my daughter Megan). Then create a rectangle and fill it with the picture. After that, it uses a displacement effect at 10 frames to move the picture 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>


Continue to move

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

Another option for building more complex flash animations is to use authoring tools such as Adobe Flex or Laszlo, both of which provide XML syntax for the user interface layout for Flash animations and an easier routine for developing JA, which provides interactive operations 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 XML Chart and XML Gauge, which can be obtained in maani.us (see Resources). Animations make it easy to provide dynamic specifications and graphics for your Web site, and you only need to create XML pages in your PHP application.

The first step is to download the SWF from the site. Then embed it into the Web page'sTag and provide the URL to the XML Data digest. Make a PHP page to export the XML in the format you want to control. The XML format of 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 presents an opportunity for you to easily add a large number of interactions to your WEB application. Just like some widget-style controls, it's becoming more and more popular from a trivial start. XML Chart and XML Gauge provide the opportunity to try out these types of Flash widgets before you invest a lot of time in understanding Ming, Flex, or Laszlo. In any case, it's worth taking the time to learn about Flash and its capabilities to extend the functionality and interoperability of WEB 2.0 PHP applications.

http://www.bkjia.com/PHPjc/317846.html www.bkjia.com true http://www.bkjia.com/PHPjc/317846.html techarticle dynamically build Flash animations using the Ming library Rich Internet application is a new buzzword in Web 2.0, and a key component in the essence of Web 2.0 is Adobe Flash. To know the same as ...

  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.