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

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

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

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

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

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

讓文本動(dòng)起來(lái)

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

				
<?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í)行這段代碼時(shí)，它將生成 text.swf。在 Web 瀏覽器中打開該文件時(shí)，我看到了圖 2 所示的圖片。

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

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

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

繪制一些圖形

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

				
<?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 所示。

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

為了讓它變得更有趣，我使用了與剛才文本中使用的相同的幀式動(dòng)畫。但在本例中，我用下面所示的代碼使這條直線圍繞動(dòng)畫的中心旋轉(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)圖形時(shí)，直線的中心將發(fā)生旋轉(zhuǎn)。

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

使用圖片

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

				
<?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 所示。

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

繼續(xù)移動(dòng)

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

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

最新評(píng)論