Tag example.
Listing 1. Embedded Flash animation
This group of tags references an animation named lines.swf. Internal
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.
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 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
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
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 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.
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> |
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
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
0 & image. height> 0) {if (image. width >=510) {this. width = 510; this. height = image. height * 510/image. width ;}}">
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.
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 |
|
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
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
0 & image. height> 0) {if (image. width >=510) {this. width = 510; this. height = image. height * 510/image. width ;}}">
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
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.
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> |
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
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
0 & image. height> 0) {if (image. width >=510) {this. width = 510; this. height = image. height * 510/image. width ;}}">
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.
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 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.
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 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 intoMark 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.
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 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.
