清單 2 顯示了使用 Ming 庫實現的 HelloWorld 示例。
<?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 所示的結果。
回過頭來查看這段代碼,我做的第一件事是創建指向一個內置字體(_sans)的指針,然後創建文本字段,設定字體、顏色和大小,最後為其提供 一些文本內容(“Hello World”)。再接下來創建了一個 SWFMovie
對象並設定其尺寸。最後,向動畫中添加了文本元素並將動畫保存到文件中。
作為直接構建文件的替代性方法,也可以使用下面的代碼,使 SWF 動畫像頁面那樣輸出,而無需使用 save 方法:
header( 'Content-type: application/x-shockwave-flash' );
$m->output( );
此過程類似於使用 PHP 中的 ImageMagick 庫來構建位圖。對於所有 Ming 示例,我都將使用 save 方法,但您可以根據喜好來選擇是否使用 save 方法。
讓文本動起來
只是將一些文本放入 Flash 動畫中是沒有多大意義的,除非您能讓它動起來。因此我整合了清單 2 中的示例,它包括兩段文本:一部分開始很小後來變得越來越大,而另一部分保持靜態。
<?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 所示的圖片。
文本 “1000” 開始時很小,大小為 350 個點。然後使用 scaleTo()
方法使其增大為 750 個點,方法是對動畫對象使用 nextframe()
方法。
要理解其工作原理,需要了解一點 Flash 制作動畫的方法。Flash 中的動畫就像電影中的動畫一樣運行:按幀運行。子圖形將按幀在動畫框架中移動。一個主要差別是 Flash 不獲取每幀的快照。它存儲子圖形對象在每幀的狀態。
您可能會注意到,我有一個名為 $pt
的變量,該變量具有文本 “1000”。隨後當我把 $pt
添加到動畫中時,獲得了通過 add()
方法返回的名為 $pts
的新對象。該對象是 SWFDisplayItem
, 表示子圖形的實例。然後我可以圍繞動畫框架的表面逐幀移動實例。 這有點兒混亂,但我可以擁有同時移動的多個版本的 “1000” 文本子圖形或 “points” 文本子圖形。
繪制一些圖形
接下來要處理的是矢量圖形。首先僅繪制一條簡單的直線,它從框架的左側頂部到右側底部。
<?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 所示。
好的 —— 這十分簡單,也不怎麼令人激動。那麼我做了什麼?創建了一個新的 SWFShape
對象,然後向其中添加了一些筆觸移動和直線。然後我將其作為子圖形添加到了動畫中。
為了讓它變得更有趣,我使用了與剛才文本中使用的相同的幀式動畫。但在本例中,我用下面所示的代碼使這條直線圍繞動畫的中心旋轉。
<?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 庫使您可以輕松的使用圖片,如下所示。
<?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 所示。
此腳本在開始時讀取了本地的 .jpeg 文件(在本例中,是我女兒 Megan 的照片)。然後創建一個矩形,並在其中填充圖片。在那之後,它在10 幀處使用了位移效果使圖片稍微移動。
繼續移動
我只是觸及了 Ming 庫可為您提供的操作的表面。在這裡我沒有展示交互部分,在交互部分您可以將簡單的腳本與元素連接起來。(但是,如果換成是交互操作,如果您有一個十分復雜 的 Flash 動畫,則可能需要考慮使用 Flash 開發工具來構建 Web 應用程序內與 Web 服務對話的 Flash 動畫。)
構建更加復雜的 Flash 動畫的另外一種選擇是使用諸如 Adobe Flex 或 Laszlo 之類的制作工具,這兩種工具都提供了用於為 Flash 動畫的用戶界面布局的 XML 語法以及一個更輕松地例程,可用於開發為界面提供互動操作的 JavaScript。