用PHP 快速產生 Flash 動畫的方法

使用 Ming 庫動態構建 Flash 動畫

Rich Internet Application 是 Web 2.0 中的新時髦詞，並且就 Web 2.0 的實質而言，一個關鍵組件就是 Adobe Flash。瞭解如何將 Flash 動畫整合到應用程式中，並使用 Ming 庫動態產生 Flash 動畫。

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

一種用於構建 Rich Internet Application（RIA）的方法就是使用動態超文字標記語言（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 的電腦的 網頁瀏覽器中的一個外掛程式。截至本文完稿時，最新版本的 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> 標記的樣本。

清單 1. 嵌入式 Flash 動畫

<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。當我在 網頁瀏覽器中開啟該檔案時，看到了圖 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。在 網頁瀏覽器中開啟該檔案時，我看到了圖 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 應用程式的功能及互動操作。