«
使用PHP快速生成Flash动画

时间：2008-5-31    作者：Deri    分类： 分享 

   <p>　　Web 2.0 引入了 Rich Internet Application。但 Rich Internet Application 的含义是什么？通常，它意味着向应用程序中添加具有高度响应能力的交易操作。具体来说，它意味着可以即时更改页面中的小部件、Web 表单和报告，而无需从服务器中检索新页面。</p><p>　　一种用于构建 Rich Internet Application（RIA）的方法就是使用动态 HTML（Dynamic HTML，DHTML），它是 Ajax、JavaScript、层叠样式表（Cascading Style Sheet，CSS）和 HTML 的组合。但是 DHTML 并不是向 Web 应用程序中添加互动操作的惟一方法。另一种重要方法是使用 Adobe Flash Player，使用它为 Web 站点添加交互操作已经有十年的历史。</p><p>　　第一版的 Flash 曾是用于创建动画图片的工具，而最新版本的 Flash 已经可以托管一个完整的界面，可用于控制 Web 服务访问并使用 ECMAScript（JavaScript 的正式版本）来提供完整的脚本支持。</p><p>　　了解 Flash</p><p>　　Flash Player 是集成到运行 Microsoft&#174; Windows&#174;、Mac OS X 和 Linux&#174; 的计算机的 Web 浏览器中的一个插件。截至本文完稿时，最新版本的 Flash Player 是 V8。它是可以免费获得的，大多数浏览器都附带安装了此插件。它十分流行并且具有优秀的客户机渗透力 ―― 而这种渗透力随着 YouTube 和 Google Video 这类服务的出现得到了提高，这些服务都使用 Flash 显示视频流。</p><p>　　Flash Player 只是天平的一端。要发挥作用，Flash Player 还需要使用一个 Flash 动画。此类动画通常是使用一种 Flash 的开发工具编译的文件，其文件扩展名为 .swf。但正如您将在本文中看到的那样，还可以使用 Ming 库用几乎与动态创建图片相同的方法来动态构建 .swf 文件，并在 Web 服务器上绘制图形。Ming 库利用由 PHP 代码构建的对象和方法在新的 .swf 文件中构建操作代码。</p>
<p> </p>

   <p>　　您可以通过两种方法中的任意一种方法来查看 Web 站点中的 .swf 文件。第一种方法只需导航到 .swf 文件的 URL。这样做将把 Web 服务器的整个内容区域替换为 Flash 动画。此方法便于进行调试，但主要的用法还是将动画嵌入到 HTML Web 页面的 <object> 标记中。该 <object> 标记然后再通过 URL 引用 SWF 动画。<object> 方法的优点在于您可以把动画放在页面的任意位置，并可通过 JavaScript 代码进行动态控制，就像处理页面中的任何其他元素一样。</p><p>　　清单 1 显示的是一个引用 SWF 动画的 <object> 标记的示例。</p><p>　　清单 1. 嵌入式 Flash 动画<code><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"<br />codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#<br />　　　　version=6,0,40,0"<br />WIDTH="550" HEIGHT="400"><br /><PARAM NAME="movie" VALUE="lines.swf"><br /><EMBED src="lines.swf" WIDTH="550" HEIGHT="400"<br />TYPE="application/x-shockwave-flash"<br />PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"><br /></EMBED><br /></OBJECT></code></p><p>　　这组标记将引用一个名为 lines.swf 的动画。内部的 <embed> 标记用于确保 Flash 动画可以在安装了插件的各种浏览器中播放。</p><p>　　标记还把 Flash Player 的高度和宽度分别指定为 550 像素和 400 像素。非常值得注意的是，Flash 动画中的图形都是基于矢量的，这意味着当您使用 Flash 命令绘制线条和文本时，那些元素都被存储为坐标并且按照匹配显示区域的比例进行缩放。如您所见，Flash 动画有自己的坐标系统，您可以按照适合自己的方法使代码尽可能整洁。</p>
 <p> </p>

   <p>　　Ming</p><p>　　本文中提供的使用 Flash 动画的第一种方法是使用 Ming 库动态生成它们。Ming 库是一个 PHP 库，其中有一组映射到 SWF 动画中的数据类型的对象：子图形、图形、文本、位图等等。我将不讨论如何构建和安装 Ming，因为其操作是特定于平台的而且并不特别简单。在本文中，我使用了预编译的扩展 php_ming.dll 库用于 Windows 版本的 PHP。</p><p>　　必须指出的是，Ming 仍处于开发阶段。截至本文完稿时，库的版本是 V0.4，并且较老版本中的一些命令在最新版本中不能使用。我使用了 V0.4 撰写本文，因此，要使用这段代码，您需要使用这个版本。</p><p>　　清单 2 显示了使用 Ming 库实现的 HelloWorld 示例。</p><p>　　清单 2. Hello.php<code><?php<br />$f = new SWFFont( '_sans' );<br />$t = new SWFTextField();<br />$t->setFont( $f );<br />$t->setColor( 0, 0, 0 );<br />$t->setHeight( 400 );<br />$t->addString( 'Hello World' );<br />$m = new SWFMovie();<br />$m->setDimension( 2500, 800 );<br />$m->add( $t );<br />$m->save( 'hello.swf' );<br />?></code></p><p>　　在命令行中运行这段代码将生成文件 hello.swf。当我在 Web 浏览器中打开该文件时，看到了图 1 所示的结果。</p><p>　　图 1. 使用 Ming 的 HelloWorld 示例</p><p>　　<img src="/content/uploadfile/200805/2008053117364076.jpg" onclick="get_larger(this)" alt="使用PHP快速生成Flash动画" /></p><p>　　回过头来查看这段代码，我做的第一件事是创建指向一个内置字体（_sans）的指针，然后创建文本字段，设定字体、颜色和大小，最后为其提供一些文本内容（“Hello World”）。再接下来创建了一个 SWFMovie 对象并设定其尺寸。最后，向动画中添加了文本元素并将动画保存到文件中。</p>
 <p> </p>

   <p>　　作为直接构建文件的替代性方法，也可以使用下面的代码，使 SWF 动画像页面那样输出，而无需使用 save 方法：</p><code>header( 'Content-type: application/x-shockwave-flash' );<br />$m->output( );</code></p><p>　　此过程类似于使用 PHP 中的 ImageMagick 库来构建位图。对于所有 Ming 示例，我都将使用 save 方法，但您可以根据喜好来选择是否使用 save 方法。</p><p>　　让文本动起来</p><p>　　只是将一些文本放入 Flash 动画中是没有多大意义的，除非您能让它动起来。因此我整合了清单 2 中的示例，它包括两段文本：一部分开始很小后来变得越来越大，而另一部分保持静态。</p><p>　　清单 3. Text.php<code><?php<br />$f = new SWFFont( '_sans' );<br />$pt = new SWFTextField();<br />$pt->setFont( $f );<br />$pt->setColor( 0, 0, 0 );<br />$pt->setHeight( 400 );<br />$pt->addString( '1000' );<br />$tt = new SWFTextField();<br />$tt->setFont( $f );<br />$tt->setColor( 192, 192, 192, 90 );<br />$tt->setHeight( 350 );<br />$tt->addString( 'Points' );<br />$m = new SWFMovie();<br />$m->setDimension( 2500, 800 );<br />$pts = $m->add( $pt );<br />$pts->moveTo( 0, 0 );<br />$tts = $m->add( $tt );<br />$tts->moveTo( 1300, 200 );<br />for( $i = 0; $i < 10; $i++ ) {<br />　$m->nextframe();<br />　$pts->scaleTo( 1.0 + ( $i / 10.0 ), 1.0 + ( $i / 10.0 ) );<br />}<br />$m->save( 'text.swf' );<br />?></code></p><p>　　在命令行中执行这段代码时，它将生成 text.swf。在 Web 浏览器中打开该文件时，我看到了图 2 所示的图片。</p>
 <p> </p>

   <p>　　图 2. text.swf 文件</p><p>　　<img src="/content/uploadfile/200805/2008053117364175.jpg" onclick="get_larger(this)" alt="使用PHP快速生成Flash动画" /></p><p>　　文本 “1000” 开始时很小，大小为 350 个点。然后使用 scaleTo() 方法使其增大为 750 个点，方法是对动画对象使用 nextframe() 方法。</p><p>　　要理解其工作原理，需要了解一点 Flash 制作动画的方法。Flash 中的动画就像电影中的动画一样运行：按帧运行。子图形将按帧在动画框架中移动。一个主要差别是 Flash 不获取每帧的快照。它存储子图形对象在每帧的状态。</p><p>　　您可能会注意到，我有一个名为 $pt 的变量，该变量具有文本 “1000”。随后当我把 $pt 添加到动画中时，获得了通过 add() 方法返回的名为 $pts 的新对象。该对象是 SWFDisplayItem，表示子图形的实例。然后我可以围绕动画框架的表面逐帧移动实例。这有点儿混乱，但我可以拥有同时移动的多个版本的 “1000” 文本子图形或 “points” 文本子图形。</p><p>　　绘制一些图形</p><p>　　接下来要处理的是矢量图形。首先仅绘制一条简单的直线，它从框架的左侧顶部到右侧底部。</p><p>　　清单 4. Line.php<code><?php<br />$m = new SWFMovie();<br />$m->setDimension( 300, 300 );<br />$s = new SWFShape();<br />$s->setLine( 10, 0, 0, 0 );<br />$s->movePenTo( 10, 10 );<br />$s->drawLineTo( 290, 290 );<br />$m->add( $s );<br />$m->save( 'line.swf' );<br />?></code></p><p>　　在命令行中运行此脚本，然后查看输出的 .swf 文件，效果如图 3 所示。</p><p>　　图 3. 绘制简单的直线</p><p>　　<img src="/content/uploadfile/200805/2008053117364128.jpg" onclick="get_larger(this)" alt="使用PHP快速生成Flash动画" /></p>
 <p> </p>

   <p>　　好的 ―― 这十分简单，也不怎么令人激动。那么我做了什么？创建了一个新的 SWFShape 对象，然后向其中添加了一些笔触移动和直线。然后我将其作为子图形添加到了动画中。</p><p>　　为了让它变得更有趣，我使用了与刚才文本中使用的相同的帧式动画。但在本例中，我用下面所示的代码使这条直线围绕动画的中心旋转。</p><p>　　清单 5. 旋转直线<code><?php<br />$m = new SWFMovie();<br />$m->setDimension( 300, 300 );<br />$s = new SWFShape();<br />$s->setLine( 5, 0, 0, 0 );<br />$s->movePenTo( -100, -100 );<br />$s->drawLineTo( 100, 100 );<br />$ts = $m->add( $s );<br />$ts->moveTo( 150, 150 );<br />for( $i = 0; $i < 100; $i++ ) {<br />　$ts->rotate( 10 );<br />　$m->nextframe();<br />}<br />$m->save( 'rotate.swf' );<br />?></code></p><p>　　在本例中，我从 -100, -100 到 100, 100 画了一条直线。这将把直线的中心放在坐标 0,0 处。这样，当我在旋转图形时，直线的中心将发生旋转。</p><p>　　当我向动画中添加图形时，将移动返回到框架中心的 SWFDisplayItem。然后用 rotate() 方法使它旋转并每旋转一周就增大其框架。</p><p>　　使用图片</p><p>　　文本和诸如直线、圆、弧、曲线和矩形之类的简单矢量图形都是十分优秀的，但在理想的情况下，您必须能访问这些 Flash 动画中的图片。值得庆幸的是，Ming 库使您可以轻松的使用图片，如下所示。</p><p>　　清单 6. 使用图片<code><?php<br />$img = new SWFBitmap( file_get_contents( 'megan.jpg' ) );<br />$s = new SWFShape();<br />$imgf = $s->addFill( $img );<br />$s->setRightFill( $imgf );<br />$s->movePenTo( 0, 0 );<br />$s->drawLineTo( $img->getWidth(), 0 );<br />$s->drawLineTo( $img->getWidth(), $img->getHeight() );<br />$s->drawLineTo( 0, $img->getHeight() );<br />$s->drawLineTo( 0, 0 );<br />$m = new SWFMovie();<br />$m->setDimension( $img->getWidth() * 2, $img->getHeight() * 2 );<br />$is = $m->add( $s );<br />$is->moveTo( $img->getWidth() / 2, $img->getHeight() / 2 );<br />for( $i = 0; $i < 10; $i++ )<br />{<br />$is->skewx( 0.02 );<br />$is->skewy( -0.03 );<br />$m->nextframe();<br />}<br />$m->save( 'image.swf' );<br />?></code></p>
 <p> </p>

   <p>　　在命令行中运行此脚本并在浏览器中查看 image.swf，结果如图 4 所示。</p><p>　　图 4. 生成的图片动画</p><p>　　<img src="/content/uploadfile/200805/2008053117364225.jpg" onclick="get_larger(this)" alt="使用PHP快速生成Flash动画" /></p><p>　　此脚本在开始时读取了本地的 .jpeg 文件（在本例中，是我女儿 Megan 的照片）。然后创建一个矩形，并在其中填充图片。在那之后，它在10 帧处使用了位移效果使图片稍微移动。</p><p>　　继续移动</p><p>　　我只是触及了 Ming 库可为您提供的操作的表面。在这里我没有展示交互部分，在交互部分您可以将简单的脚本与元素连接起来。（但是，如果换成是交互操作，如果您有一个十分复杂的 Flash 动画，则可能需要考虑使用 Flash 开发工具来构建 Web 应用程序内与 Web 服务对话的 Flash 动画。）</p><p>　　构建更加复杂的 Flash 动画的另外一种选择是使用诸如 Adobe Flex 或 Laszlo 之类的制作工具，这两种工具都提供了用于为 Flash 动画的用户界面布局的 XML 语法以及一个更轻松地例程，可用于开发为界面提供互动操作的 JavaScript。</p><p>　　XML Chart 和 XML Gauge</p><p>　　给我留下深刻印象的两个 Flash SWF 是 XML Chart 和 XML Gauge，可在 maani.us 获得。使用动画就可以轻松地为 Web 站点提供动态的规格和图形，您只需在 PHP 应用程序中创建 XML 页面。</p><p>　　第一步是从站点下载 SWF。然后将其嵌入到 Web 页面的 <object> 标记中并将 URL 提供给 XML 数据摘要。制作一个 PHP 页面按照控制所需的格式导出 XML。这些动画的 XML 格式在站点中得到了详细说明并且非常易于创建。</p><p>　　结束语</p><p>　　Flash 带来了一种机会，使您可轻松将大量交互操作添加到 Web 应用程序。就像一些小部件样式的控件一样，从微不足道开始，变得越来越流行。XML Chart 和 XML Gauge 提供了机会让您在投入大量时间了解 Ming、Flex 或 Laszlo 之前先尝试使用这些类型的 Flash 小部件。无论如何，值得花时间去了解 Flash 及其功能来扩展 Web 2.0 PHP 应用程序的功能及交互操作。</p>