使用 PHP 快速生成 Flash 动画|CNIBS PHP文章管理系统

使用 PHP 快速生成 Flash 动画

PHP,Flash
2007-10-07 21:09:39

字体大中小收藏推荐打印关闭

				

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#

        version=6,0,40,0"

WIDTH="550" HEIGHT="400">

<PARAM NAME="movie" VALUE="lines.swf">

<EMBED src="lines.swf" WIDTH="550" HEIGHT="400"

TYPE="application/x-shockwave-flash"

PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

</EMBED>

</OBJECT>

这组标记将引用一个名为 lines.swf 的动画。内部的 <embed> 标记用于确保 Flash 动画可以在安装了插件的各种浏览器中播放。

标记还把 Flash Player 的高度和宽度分别指定为 550 像素和 400 像素。非常值得注意的是，Flash 动画中的图形都是基于矢量的，这意味着当您使用 Flash 命令绘制线条和文本时，那些元素都被存储为坐标并且按照匹配显示区域的比例进行缩放。如您所见，Flash 动画有自己的坐标系统，您可以按照适合自己的方法使代码尽可能整洁。

回页首

Ming

本文中提供的使用 Flash 动画的第一种方法是使用 Ming 库动态生成它们。Ming 库是一个 PHP 库，其中有一组映射到 SWF 动画中的数据类型的对象：子图形、图形、文本、位图等等。我将不讨论如何构建和安装 Ming，因为其操作是特定于平台的而且并不特别简单（请参阅参考资料）。在本文中，我使用了预编译的扩展 php_ming.dll 库用于 Windows 版本的 PHP。

必须指出的是，Ming 仍处于开发阶段。截至本文完稿时，库的版本是 V0.4，并且较老版本中的一些命令在最新版本中不能使用。我使用了 V0.4 撰写本文，因此，要使用这段代码，您需要使用这个版本。

清单 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 示例

回过头来查看这段代码，我做的第一件事是创建指向一个内置字体（_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 文件

文本 “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。

回页首

XML Chart 和 XML Gauge

给我留下深刻印象的两个 Flash SWF 是 XML Chart 和 XML Gauge，可在 maani.us 获得（请参阅参考资料）。使用动画就可以轻松地为 Web 站点提供动态的规格和图形，您只需在 PHP 应用程序中创建 XML 页面。

第一步是从站点下载 SWF。然后将其嵌入到 Web 页面的 <object> 标记中并将 URL 提供给 XML 数据摘要。制作一个 PHP 页面按照控制所需的格式导出 XML。这些动画的 XML 格式在站点中得到了详细说明并且非常易于创建。

来自:不详作者: 未知责任编辑:admin | 返回顶部

用户评论

文章分类

站内搜索