使用PHP 快速生成Flash 動畫

Web 2.0 引入了 Rich Internet Application。但 Rich Internet Application 的含義是什麼？通常，它意味著嚮應用程序中添加具有高度響應能力的交易操作。具體來說，它意味著可以即時更改頁面中的小部件、Web 表單和報告，而無需從伺服器中檢索新頁面。

一種用於構建 Rich Internet Application（RIA）的方法就是使用動態 HTML（Dynamic HTML，DHTML），它是 Ajax、JavaScript、層疊樣式表（Cascading Style Sheet，CSS）和 HTML 的組合（請參閱 參考資料）。但是 DHTML 並不是向 Web 應用程序中添加互動操作的惟一方法。另一種重要方法是使用 Adobe Flash Player，使用它為 Web 站點添加交互操作已經有十年的歷史。

第一版的 Flash 曾是用於創建動畫圖片的工具，而最新版本的 Flash 已經可以託管一個完整的界面，可用於控制 Web 服務訪問並使用 ECMAScript（JavaScript 的正式版本）來提供完整的腳本支持。

了解 Flash

Flash Player 是集成到運行 Microsoft® Windows®、Mac OS X 和 Linux® 的計算機的 Web 瀏覽器中的一個插件。截至本文完稿時，最新版本的 Flash Player 是 V8。它是可以免費獲得的，大多數瀏覽器都附帶安裝了此插件。它十分流行並且具有優秀的客戶機滲透力 —— 而這種滲透力隨著 YouTube 和 Google Video 這類服務的出現得到了提高，這些服務都使用 Flash 顯示視頻流。

Flash Player 只是天平的一端。要發揮作用，Flash Player 還需要使用一個 Flash 動畫。此類動畫通常是使用一種 Flash 的開發工具編譯的文件，其文件擴展名為 .swf。但正如您將在本文中看到的那樣，還可以使用 Ming 庫用幾乎與動態創建圖片相同的方法來動態構建 .swf 文件，並在 Web 伺服器上繪製圖形。Ming 庫利用由 PHP 代碼構建的對象和方法在新的 .swf 文件中構建操作代碼。

您可以通過兩種方法中的任意一種方法來查看 Web 站點中的 .swf 文件。第一種方法只需導航到 .swf 文件的 URL。這樣做將把 Web 伺服器的整個內容區域替換為 Flash 動畫。此方法便於進行調試，但主要的用法還是將動畫嵌入到 HTML Web 頁面的 <object> 標記中。該 <object> 標記然後再通過 URL 引用 SWF 動畫。<object> 方法的優點在於您可以把動畫放在頁面的任意位置，並可通過 JavaScript 代碼進行動態控制，就像處理頁面中的任何其他元素一樣。

清單 1 顯示的是一個引用 SWF 動畫的 <object> 標記的示例。

				  <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="550" HEIGHT="400">  <PARAM NAME="movie" VALUE="lines.swf">  <EMBED src="lines.swf" WIDTH="550" HEIGHT="400"  TYPE="application/x-shockwave-flash"  PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">  </EMBED>  </OBJECT>  

這組標記將引用一個名為 lines.swf 的動畫。內部的 <embed> 標記用於確保 Flash 動畫可以在安裝了插件的各種瀏覽器中播放。

標記還把 Flash Player 的高度和寬度分別指定為 550 像素和 400 像素。非常值得注意的是，Flash 動畫中的圖形都是基於矢量的，這意味著當您使用 Flash 命令繪製線條和文本時，那些元素都被存儲為坐標並且按照匹配顯示區域的比例進行縮放。如您所見，Flash 動畫有自己的坐標系統，您可以按照適合自己的方法使代碼儘可能整潔。

Ming

本文中提供的使用 Flash 動畫的第一種方法是使用 Ming 庫動態生成它們。Ming 庫是一個 PHP 庫，其中有一組映射到 SWF 動畫中的數據類型的對象：子圖形、圖形、文本、點陣圖等等。我將不討論如何構建和安裝 Ming，因為其操作是特定於平台的而且並不特別簡單（請參閱 參考資料）。在本文中，我使用了預編譯的擴展 php_ming.dll 庫用於 Windows 版本的 PHP。

必須指出的是，Ming 仍處於開發階段。截至本文完稿時，庫的版本是 V0.4，並且較老版本中的一些命令在最新版本中不能使用。我使用了 V0.4 撰寫本文，因此，要使用這段代碼，您需要使用這個版本。

清單 2 顯示了使用 Ming 庫實現的 HelloWorld 示例。

清單 2. Hello.php

				  <?php  $f = new SWFFont( '_sans' );    $t = new SWFTextField();  $t->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' );  ?>  

在命令行中運行這段代碼將生成文件 hello.swf。當我在 Web 瀏覽器中打開該文件時，看到了圖 1 所示的結果。

圖 1. 使用 Ming 的 HelloWorld 示例
 
回過頭來查看這段代碼，我做的第一件事是創建指向一個內置字體（_sans）的指針，然後創建文本欄位，設定字體、顏色和大小，最後為其提供一些文本內容（「Hello World」）。再接下來創建了一個 SWFMovie 對象並設定其尺寸。最後，向動畫中添加了文本元素並將動畫保存到文件中。

作為直接構建文件的替代性方法，也可以使用下面的代碼，使 SWF 動畫像頁面那樣輸出，而無需使用 save 方法：

header( 'Content-type: application/x-shockwave-flash' );  $m->output( );  

此過程類似於使用 PHP 中的 ImageMagick 庫來構建點陣圖。對於所有 Ming 示例，我都將使用 save 方法，但您可以根據喜好來選擇是否使用 save 方法。

讓文本動起來

只是將一些文本放入 Flash 動畫中是沒有多大意義的，除非您能讓它動起來。因此我整合了清單 2 中的示例，它包括兩段文本：一部分開始很小後來變得越來越大，而另一部分保持靜態。

清單 3. Text.php

				  <?php  $f = new SWFFont( '_sans' );    $pt = new SWFTextField();  $pt->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' );  ?>  

在命令行中執行這段代碼時，它將生成 text.swf。在 Web 瀏覽器中打開該文件時，我看到了圖 2 所示的圖片。

圖 2. text.swf 文件

文本 「1000」 開始時很小，大小為 350 個點。然後使用 scaleTo() 方法使其增大為 750 個點，方法是對動畫對象使用 nextframe() 方法。

要理解其工作原理，需要了解一點 Flash 製作動畫的方法。Flash 中的動畫就像電影中的動畫一樣運行：按幀運行。子圖形將按幀在動畫框架中移動。一個主要差別是 Flash 不獲取每幀的快照。它存儲子圖形對象在每幀的狀態。

您可能會注意到，我有一個名為 $pt 的變數，該變數具有文本 「1000」。隨後當我把 $pt 添加到動畫中時，獲得了通過 add() 方法返回的名為 $pts 的新對象。該對象是 SWFDisplayItem，表示子圖形的實例。然後我可以圍繞動畫框架的表面逐幀移動實例。這有點兒混亂，但我可以擁有同時移動的多個版本的 「1000」 文本子圖形或 「points」 文本子圖形。

繪製一些圖形

接下來要處理的是矢量圖形。首先僅繪製一條簡單的直線，它從框架的左側頂部到右側底部。

清單 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' );  ?>  

在命令行中運行此腳本，然後查看輸出的 .swf 文件，效果如圖 3 所示。

圖 3. 繪製簡單的直線

好的 —— 這十分簡單，也不怎麼令人激動。那麼我做了什麼？創建了一個新的 SWFShape 對象，然後向其中添加了一些筆觸移動和直線。然後我將其作為子圖形添加到了動畫中。

為了讓它變得更有趣，我使用了與剛才文本中使用的相同的幀式動畫。但在本例中，我用下面所示的代碼使這條直線圍繞動畫的中心旋轉。

清單 5. 旋轉直線

				  <?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->rotate( 10 );    $m->nextframe();  }    $m->save( 'rotate.swf' );  ?>  

在本例中，我從 -100, -100 到 100, 100 畫了一條直線。這將把直線的中心放在坐標 0,0 處。這樣，當我在旋轉圖形時，直線的中心將發生旋轉。

當我向動畫中添加圖形時，將移動返回到框架中心的 SWFDisplayItem。然後用 rotate() 方法使它旋轉並每旋轉一周就增大其框架。

使用圖片

文本和諸如直線、圓、弧、曲線和矩形之類的簡單矢量圖形都是十分優秀的，但在理想的情況下，您必須能訪問這些 Flash 動畫中的圖片。值得慶幸的是，Ming 庫使您可以輕鬆的使用圖片，如下所示。

清單 6. 使用圖片

				  <?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 < 10; $i++ )  {   $is->skewx( 0.02 );  $is->skewy( -0.03 );  $m->nextframe();  }    $m->save( 'image.swf' );  ?>  

在命令行中運行此腳本並在瀏覽器中查看 image.swf，結果如圖 4 所示。

圖 4. 生成的圖片動畫

此腳本在開始時讀取了本地的 .jpeg 文件（在本例中，是我女兒 Megan 的照片）。然後創建一個矩形，並在其中填充圖片。在那之後，它在10 幀處使用了位移效果使圖片稍微移動。

繼續移動

我只是觸及了 Ming 庫可為您提供的操作的表面。在這裡我沒有展示交互部分，在交互部分您可以將簡單的腳本與元素連接起來。（但是，如果換成是交互操作，如果您有一個十分複雜的 Flash 動畫，則可能需要考慮使用 Flash 開發工具來構建 Web 應用程序內與 Web 服務對話的 Flash 動畫。）

構建更加複雜的 Flash 動畫的另外一種選擇是使用諸如 Adobe Flex 或 Laszlo 之類的製作工具，這兩種工具都提供了用於為 Flash 動畫的用戶界面布局的 XML 語法以及一個更輕鬆地常式，可用於開發為界面提供互動操作的 JavaScript。

XML Chart 和 XML Gauge

給我留下深刻印象的兩個 Flash SWF 是 XML Chart 和 XML Gauge，可在 maani.us 獲得（請參閱 參考資料）。使用動畫就可以輕鬆地為 Web 站點提供動態的規格和圖形，您只需在 PHP 應用程序中創建 XML 頁面。

第一步是從站點下載 SWF。然後將其嵌入到 Web 頁面的 <object> 標記中並將 URL 提供給 XML 數據摘要。製作一個 PHP 頁面按照控制所需的格式導出 XML。這些動畫的 XML 格式在站點中得到了詳細說明並且非常易於創建。

結束語

Flash 帶來了一種機會，使您可輕鬆將大量交互操作添加到 Web 應用程序。就像一些小部件樣式的控制項一樣，從微不足道開始，變得越來越流行。XML Chart 和 XML Gauge 提供了機會讓您在投入大量時間了解 Ming、Flex 或 Laszlo 之前先嘗試使用這些類型的 Flash 小部件。無論如何，值得花時間去了解 Flash 及其功能來擴展 Web 2.0 PHP 應用程序的功能及交互操作。