Rich Internet Application 是 Web 中的新時髦詞並且就 Web 的實質而言一個關鍵組件就是 Adobe Flash了解如何將 Flash 動畫集成到應用程序中並使用 Ming 庫動態生成 Flash 動畫
Web 引入了 Rich Internet Application但 Rich Internet Application 的含義是什麼？通常它意味著向應用程序中添加具有高度響應能力的交易操作具體來說它意味著可以即時更改頁面中的小部件Web 表單和報告而無需從服務器中檢索新頁面
一種用於構建 Rich Internet Application（RIA）的方法就是使用動態 HTML（Dynamic HTMLDHTML）它是 AjaxJavaScript層疊樣式表（Cascading Style SheetCSS）和 HTML 的組合（請參閱 參考資料）但是 DHTML 並不是向 Web 應用程序中添加互動操作的惟一方法另一種重要方法是使用 Adobe Flash Player使用它為 Web 站點添加交互操作已經有十年的歷史
第一版的 Flash 曾是用於創建動畫圖片的工具而最新版本的 Flash 已經可以托管一個完整的界面可用於控制 Web 服務訪問並使用 ECMAScript（JavaScript 的正式版本）來提供完整的腳本支持
了解 Flash
Flash Player 是集成到運行 Microsoft？ Windows？Mac OS X 和 Linux？ 的計算機的 Web 浏覽器中的一個插件截至本文完稿時最新版本的 Flash Player 是 V它是可以免費獲得的大多數浏覽器都附帶安裝了此插件它十分流行並且具有優秀的客戶機滲透力 —— 而這種滲透力隨著 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 代碼進行動態控制就像處理頁面中的任何其他元素一樣
清單 顯示的是一個引用 SWF 動畫的 <object> 標記的示例
清單 嵌入式 Flash 動畫
<OBJECT classid=clsid:DCDBEAEDcfB
codebase=#
version=
WIDTH= HEIGHT=>
<PARAM NAME=movie VALUE=linesswf>
<EMBED src=linesswf WIDTH= HEIGHT=
TYPE=application/xshockwaveflash
PLUGINSPAGE=>
</EMBED>
</OBJECT>
這組標記將引用一個名為 linesswf 的動畫內部的 <embed> 標記用於確保 Flash 動畫可以在安裝了插件的各種浏覽器中播放
標記還把 Flash Player 的高度和寬度分別指定為 像素和 像素非常值得注意的是Flash 動畫中的圖形都是基於矢量的這意味著當您使用 Flash 命令繪制線條和文本時那些元素都被存儲為坐標並且按照匹配顯示區域的比例進行縮放如您所見Flash 動畫有自己的坐標系統您可以按照適合自己的方法使代碼盡可能整潔
Ming
本文中提供的使用 Flash 動畫的第一種方法是使用 Ming 庫動態生成它們Ming 庫是一個 PHP 庫其中有一組映射到 SWF 動畫中的數據類型的對象子圖形圖形文本位圖等等我將不討論如何構建和安裝 Ming因為其操作是特定於平台的而且並不特別簡單（請參閱 參考資料）在本文中我使用了預編譯的擴展 php_mingdll 庫用於 Windows 版本的 PHP
必須指出的是Ming 仍處於開發階段截至本文完稿時庫的版本是 V並且較老版本中的一些命令在最新版本中不能使用我使用了 V 撰寫本文因此要使用這段代碼您需要使用這個版本
清單 顯示了使用 Ming 庫實現的 HelloWorld 示例
清單 Hellophp
<?php
$f = new SWFFont( _sans );
$t = new SWFTextField();
$t>setFont( $f );
$t>setColor( );
$t>setHeight( );
$t>addString( Hello World );
$m = new SWFMovie();
$m>setDimension( );
$m>add( $t );
$m>save( helloswf );
?>
在命令行中運行這段代碼將生成文件 helloswf當我在 Web 浏覽器中打開該文件時看到了圖 所示的結果
圖 使用 Ming 的 HelloWorld 示例
回過頭來查看這段代碼我做的第一件事是創建指向一個內置字體（_sans）的指針然後創建文本字段設定字體顏色和大小最後為其提供一些文本內容（Hello World）再接下來創建了一個 SWFMovie 對象並設定其尺寸最後向動畫中添加了文本元素並將動畫保存到文件中
作為直接構建文件的替代性方法也可以使用下面的代碼使 SWF 動畫像頁面那樣輸出而無需使用 save 方法
header( Contenttype: application/xshockwaveflash );
$m>output( );
此過程類似於使用 PHP 中的 ImageMagick 庫來構建位圖對於所有 Ming 示例我都將使用 save 方法但您可以根據喜好來選擇是否使用 save 方法
讓文本動起來
只是將一些文本放入 Flash 動畫中是沒有多大意義的除非您能讓它動起來因此我整合了清單 中的示例它包括兩段文本一部分開始很小後來變得越來越大而另一部分保持靜態
清單 Textphp
<?php
$f = new SWFFont( _sans );
$pt = new SWFTextField();
$pt>setFont( $f );
$pt>setColor( );
$pt>setHeight( );
$pt>addString( );
$tt = new SWFTextField();
$tt>setFont( $f );
$tt>setColor( );
$tt>setHeight( );
$tt>addString( Points );
$m = new SWFMovie();
$m>setDimension( );
$pts = $m>add( $pt );
$pts>moveTo( );
$tts = $m>add( $tt );
$tts>moveTo( );
for( $i = ; $i < ; $i++ ) {
$m>nextframe();
$pts>scaleTo( + ( $i / ) + ( $i / ) );
}
$m>save( textswf );
?>
在命令行中執行這段代碼時它將生成 textswf在 Web 浏覽器中打開該文件時我看到了圖 所示的圖片
圖 textswf 文件
文本 開始時很小大小為 個點然後使用 scaleTo() 方法使其增大為 個點方法是對動畫對象使用 nextframe() 方法
要理解其工作原理需要了解一點 Flash 制作動畫的方法Flash 中的動畫就像電影中的動畫一樣運行按幀運行子圖形將按幀在動畫框架中移動一個主要差別是 Flash 不獲取每幀的快照它存儲子圖形對象在每幀的狀態
您可能會注意到我有一個名為 $pt 的變量該變量具有文本 隨後當我把 $pt 添加到動畫中時獲得了通過 add() 方法返回的名為 $pts 的新對象該對象是 SWFDisplayItem表示子圖形的實例然後我可以圍繞動畫框架的表面逐幀移動實例這有點兒混亂但我可以擁有同時移動的多個版本的 文本子圖形或 points 文本子圖形
繪制一些圖形
接下來要處理的是矢量圖形首先僅繪制一條簡單的直線它從框架的左側頂部到右側底部
清單 Linephp
<?php
$m = new SWFMovie();
$m>setDimension( );
$s = new SWFShape();
$s>setLine( );
$s>movePenTo( );
$s>drawLineTo( );
$m>add( $s );
$m>save( lineswf );
?>
在命令行中運行此腳本然後查看輸出的 swf 文件效果如圖 所示
圖 繪制簡單的直線
好的 —— 這十分簡單也不怎麼令人激動那麼我做了什麼？創建了一個新的 SWFShape 對象然後向其中添加了一些筆觸移動和直線然後我將其作為子圖形添加到了動畫中
為了讓它變得更有趣我使用了與剛才文本中使用的相同的幀式動畫但在本例中我用下面所示的代碼使這條直線圍繞動畫的中心旋轉
清單 旋轉直線
<?php
$m = new SWFMovie();
$m>setDimension( );
$s = new SWFShape();
$s>setLine( );
$s>movePenTo( );
$s>drawLineTo( );
$ts = $m>add( $s );
$ts>moveTo( );
for( $i = ; $i < ; $i++ ) {
$ts>rotate( );
$m>nextframe();
}
$m>save( rotateswf );
?>
在本例中我從 到 畫了一條直線這將把直線的中心放在坐標 處這樣當我在旋轉圖形時直線的中心將發生旋轉
當我向動畫中添加圖形時將移動返回到框架中心的 SWFDisplayItem然後用 rotate() 方法使它旋轉並每旋轉一周就增大其框架
使用圖片
文本和諸如直線圓弧曲線和矩形之類的簡單矢量圖形都是十分優秀的但在理想的情況下您必須能訪問這些 Flash 動畫中的圖片值得慶幸的是Ming 庫使您可以輕松的使用圖片如下所示
清單 使用圖片
<?php
$img = new SWFBitmap( file_get_contents( meganjpg ) );
$s = new SWFShape();
$imgf = $s>addFill( $img );
$s>setRightFill( $imgf );
$s>movePenTo( );
$s>drawLineTo( $img>getWidth() );
$s>drawLineTo( $img>getWidth() $img>getHeight() );
$s>drawLineTo( $img>getHeight() );
$s>drawLineTo( );
$m = new SWFMovie();
$m>setDimension( $img>getWidth() * $img>getHeight() * );
$is = $m>add( $s );
$is>moveTo( $img>getWidth() / $img>getHeight() / );
for( $i = ; $i < ; $i++ )
{
$is>skewx( );
$is>skewy( );
$m>nextframe();
}
$m>save( imageswf );
?>
在命令行中運行此腳本並在浏覽器中查看 imageswf結果如圖 所示
圖 生成的圖片動畫
此腳本在開始時讀取了本地的 jpeg 文件（在本例中是我女兒 Megan 的照片）然後創建一個矩形並在其中填充圖片在那之後它在 幀處使用了位移效果使圖片稍微移動
繼續移動
我只是觸及了 Ming 庫可為您提供的操作的表面在這裡我沒有展示交互部分在交互部分您可以將簡單的腳本與元素連接起來（但是如果換成是交互操作如果您有一個十分復雜的 Flash 動畫則可能需要考慮使用 Flash 開發工具來構建 Web 應用程序內與 Web 服務對話的 Flash 動畫）
構建更加復雜的 Flash 動畫的另外一種選擇是使用諸如 Adobe Flex 或 Laszlo 之類的制作工具這兩種工具都提供了用於為 Flash 動畫的用戶界面布局的 XML 語法以及一個更輕松地例程可用於開發為界面提供互動操作的 JavaScript
XML Chart 和 XML Gauge
給我留下深刻印象的兩個 Flash SWF 是 XML Chart 和 XML Gauge可在 maanius 獲得（請參閱 參考資料）使用動畫就可以輕松地為 Web 站點提供動態的規格和圖形您只需在 PHP 應用程序中創建 XML 頁面
第一步是從站點下載 SWF然後將其嵌入到 Web 頁面的 <object> 標記中並將 URL 提供給 XML 數據摘要制作一個 PHP 頁面按照控制所需的格式導出 XML這些動畫的 XML 格式在站點中得到了詳細說明並且非常易於創建
結束語
Flash 帶來了一種機會使您可輕松將大量交互操作添加到 Web 應用程序就像一些小部件樣式的控件一樣從微不足道開始變得越來越流行XML Chart 和 XML Gauge 提供了機會讓您在投入大量時間了解 MingFlex 或 Laszlo 之前先嘗試使用這些類型的 Flash 小部件無論如何值得花時間去了解 Flash 及其功能來擴展 Web PHP 應用程序的功能及交互操作
From:http://tw.wingwit.com/Article/program/PHP/201311/20832.html
