使用 Ming 庫動態(tài)構(gòu)建 Flash 動畫

Rich Internet Application 是 Web 2.0 中的新時髦詞，并且就 Web 2.0 的實質(zhì)而言，一個關(guān)鍵組件就是 Adobe Flash。了解如何將 Flash 動畫集成到應(yīng)用程序中，并使用 Ming 庫動態(tài)生成 Flash 動畫。

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

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

第一版的 Flash 曾是用于創(chuàng)建動畫圖片的工具，而最新版本的 Flash 已經(jīng)可以托管一個完整的界面，可用于控制 Web 服務(wù)訪問并使用 ECMAScript（JavaScript 的正式版本）來提供完整的腳本支持。

了解 Flash

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

Flash Player 只是天平的一端。要發(fā)揮作用，F(xiàn)lash Player 還需要使用一個 Flash 動畫。此類動畫通常是使用一種 Flash 的開發(fā)工具編譯的文件，其文件擴(kuò)展名為 .swf。但正如您將在本文中看到的那樣，還可以使用 Ming 庫用幾乎與動態(tài)創(chuàng)建圖片相同的方法來動態(tài)構(gòu)建 .swf 文件，并在 Web 服務(wù)器上繪制圖形。Ming 庫利用由 PHP 代碼構(gòu)建的對象和方法在新的 .swf 文件中構(gòu)建操作代碼。

您可以通過兩種方法中的任意一種方法來查看 Web 站點(diǎn)中的 .swf 文件。第一種方法只需導(dǎo)航到 .swf 文件的 URL。這樣做將把 Web 服務(wù)器的整個內(nèi)容區(qū)域替換為 Flash 動畫。此方法便于進(jìn)行調(diào)試，但主要的用法還是將動畫嵌入到 HTML Web 頁面的 <object> 標(biāo)記中。該 <object> 標(biāo)記然后再通過 URL 引用 SWF 動畫。<object> 方法的優(yōu)點(diǎn)在于您可以把動畫放在頁面的任意位置，并可通過 JavaScript 代碼進(jìn)行動態(tài)控制，就像處理頁面中的任何其他元素一樣。

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

清單 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>

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

標(biāo)記還把 Flash Player 的高度和寬度分別指定為 550 像素和 400 像素。非常值得注意的是，F(xiàn)lash 動畫中的圖形都是基于矢量的，這意味著當(dāng)您使用 Flash 命令繪制線條和文本時，那些元素都被存儲為坐標(biāo)并且按照匹配顯示區(qū)域的比例進(jìn)行縮放。如您所見，F(xiàn)lash 動畫有自己的坐標(biāo)系統(tǒng)，您可以按照適合自己的方法使代碼盡可能整潔。

Ming

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

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

清單 2 顯示了使用 Ming 庫實現(xiàn)的 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' );
?>

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

圖 1. 使用 Ming 的 HelloWorld 示例

回過頭來查看這段代碼，我做的第一件事是創(chuàng)建指向一個內(nèi)置字體（_sans）的指針，然后創(chuàng)建文本字段，設(shè)定字體、顏色和大小，最后為其提供一些文本內(nèi)容（“Hello World”）。再接下來創(chuàng)建了一個 SWFMovie 對象并設(shè)定其尺寸。最后，向動畫中添加了文本元素并將動畫保存到文件中。

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

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

此過程類似于使用 PHP 中的 ImageMagick 庫來構(gòu)建位圖。對于所有 Ming 示例，我都將使用 save 方法，但您可以根據(jù)喜好來選擇是否使用 save 方法。

讓文本動起來

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

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

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

圖 2. text.swf 文件

文本 “1000” 開始時很小，大小為 350 個點(diǎn)。然后使用 scaleTo() 方法使其增大為 750 個點(diǎn)，方法是對動畫對象使用 nextframe() 方法。

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

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

回頁首

繪制一些圖形

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

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

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

圖 3. 繪制簡單的直線

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

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

清單 5. 旋轉(zhuǎn)直線

				
<?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 畫了一條直線。這將把直線的中心放在坐標(biāo) 0,0 處。這樣，當(dāng)我在旋轉(zhuǎn)圖形時，直線的中心將發(fā)生旋轉(zhuǎn)。

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

使用圖片

文本和諸如直線、圓、弧、曲線和矩形之類的簡單矢量圖形都是十分優(yōu)秀的，但在理想的情況下，您必須能訪問這些 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' );
?>

在命令行中運(yùn)行此腳本并在瀏覽器中查看 image.swf，結(jié)果如圖 4 所示。

圖 4. 生成的圖片動畫

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

繼續(xù)移動

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

構(gòu)建更加復(fù)雜的 Flash 動畫的另外一種選擇是使用諸如 Adobe Flex 或 Laszlo 之類的制作工具，這兩種工具都提供了用于為 Flash 動畫的用戶界面布局的 XML 語法以及一個更輕松地例程，可用于開發(fā)為界面提供互動操作的 JavaScript。

XML Chart 和 XML Gauge

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

第一步是從站點(diǎn)下載 SWF。然后將其嵌入到 Web 頁面的 <object> 標(biāo)記中并將 URL 提供給 XML 數(shù)據(jù)摘要。制作一個 PHP 頁面按照控制所需的格式導(dǎo)出 XML。這些動畫的 XML 格式在站點(diǎn)中得到了詳細(xì)說明并且非常易于創(chuàng)建。

結(jié)束語

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

最新評論