程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> PHP生成Flash動畫的實現代碼

PHP生成Flash動畫的實現代碼

編輯:關於PHP編程

其中有一組映射到 SWF 動畫中的數據類型的對象:子圖形、圖形、文本、位圖等等。在本文中,我使用了預編譯的擴展 php_ming.dll 庫用於 Windows 版本的 PHP。

清單 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。當我在 Web 浏覽器中打開該文件時,看到了圖 1 所示的結果。


圖 1. 使用 Ming 的 HelloWorld 示例
使用 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。在 Web 浏覽器中打開該文件時,我看到了圖 2 所示的圖片。


圖 2. text.swf 文件
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。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved