唐山网站建设

设为主页 加入收藏 繁體中文
当前位置:首页 > 文章中心 > 交流共享

使用 PHP 快速天生 Flash 动画

核心提示：使用 PHP 快速天生 Flash 动画

Rich Internet Application 是 Web 2.0 中的新时兴词，并且就 Web 2.0 的实质而言，1个关键组件就是 Adobe Flash。了解如何将 Flash 动画集成到利用程序中，并使用 Ming 库动态天生 Flash 动画。

Web 2.0 引进了 Rich Internet Application。但 Rich Internet Application 的含义是甚么？通常，它意味着向利用程序中添加具有高度响应能力的交易操纵。具体来讲，它意味着可以即时更改页面中的小部件、Web 表单和报告，而无需从服务器中检索新页面。

1种用于构建 Rich Internet Application（RIA）的方法就是使用动态 HTML（Dynamic HTML，DHTML），它是 Ajax、JavaScript、层叠样式表（Cascading Style Sheet，CSS）和 HTML 的组合（请参阅 参考资料）。但是 DHTML 其实不是向 Web 利用程序中添加互动操纵的惟1方法。另1种重要方法是使用 Adobe Flash Player，使用它为 Web 站点添加交互操纵已有10年的历史。

初版的 Flash 曾是用于创建动画图片的工具，而最新版本的 Flash 已可以托管1个完全的界面，可用于控制 Web 服务访问并使用 ECMAScript（JavaScript 的正式版本）来提供完全的脚本支持。

了解 Flash

Flash Player 是集成到运行 Microsoft® Windows®、Mac OS X 和 Linux® 的计算机的 Web 浏览器中的1个插件。截至本文脱稿时，最新版本的 Flash Player 是 V8。它是可以免费取得的，大多数浏览器都附带安装了此插件。它10分流行并且具有优秀的客户机渗透力 —— 而这类渗透力随着 YouTube 和 Google Video 这类服务的出现得到了进步，这些服务都使用 Flash 显示视频流。

Flash Player 只是天平的1端。要发挥作用，Flash Player 还需要使用1个 Flash 动画。此类动画通常是使用1种 Flash 的开发工具编译的文件，其文件扩大名为 .swf。但正如您将在本文中看到的那样，还可使用 Ming 库用几近与动态创建图片相同的方法来动态构建 .swf 文件，并在 Web 服务器上绘制图形。Ming 库利用由 PHP 代码构建的对象和方法在新的 .swf 文件中构建操纵代码。

您可以通过两种方法中的任意1种方法来查看 Web 站点中的 .swf 文件。第1种方法只需导航到 .swf 文件的 URL。这样做将把 Web 服务器的全部内容区域替换为 Flash 动画。此方法便于进行调试，但主要的用法还是将动画嵌进到 HTML Web 页面的 标记中。该 标记然后再通过 URL 援用 SWF 动画。 方法的优点在于您可以把动画放在页面的任意位置，并可通过JavaScript 代码进行动态控制，就像处理页面中的任何其他元素1样。

清单 1 显示的是1个援用 SWF 动画的 标记的示例。

清单 1. 嵌进式 Flash 动画

以下为援用的内容：
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
        version=6,0,40,0"
WIDTH="550" HEIGHT="400">

TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">

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

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

Ming

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

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

清单 2 显示了使用 Ming 库实现的 HelloWorld 示例。

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

回过头来查看这段代码，我做的第1件事是创建指向1个内置字体（_sans）的指针，然后创建文本字段，设定字体、色采和大小，最后为其提供1些文本内容（“Hello World”）。再接下来创建了1个 SWFMovie 对象并设定其尺寸。最后，向动画中添加了文本元素并将动画保存到文件中。

1 2 3 下1页

核心提示：使用 PHP 快速天生 Flash 动画

作为直接构建文件的替换性方法，也能够使用下面的代码，使 SWF 动画像页面那样输出，而无需使用 save 方法：

以下为援用的内容：
header( 'Content-type: application/x-shockwave-flash' );
$m->output( );

此进程类似于使用 PHP 中的 ImageMagick 库来构建位图。对所有 Ming 示例，我都将使用 save 方法，但您可以根据喜好来选择是否是使用 save 方法。

让文本动起来

只是将1些文本放进 Flash 动画中是没有多大意义的，除非您能让它动起来。因此我整合了清单 2 中的示例，它包括两段文本：1部份开始很小后来变得越来越大，而另1部份保持静态。

清单 3. Text.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() 方法。

要理解其工作原理，需要了解1点 Flash 制作动画的方法。Flash 中的动画就像电影中的动画1样运行：按帧运行。子图形将按帧在动画框架中移动。1个主要差别是 Flash 不获得每帧的快照。它存储子图形对象在每帧的状态。

您可能会留意到，我有1个名为 $pt 的变量，该变量具有文本 “1000”。随后当我把 $pt 添加到动画中时，取得了通过 add() 方法返回的名为 $pts 的新对象。该对象是 SWFDisplayItem，表示子图形的实例。然后我可以围绕动画框架的表面逐帧移动实例。这有点儿混乱，但我可以具有同时移动的多个版本的 “1000” 文本子图形或 “points” 文本子图形。

绘制1些图形

接下来要处理的是矢量图形。首先仅绘制1条简单的直线，它从框架的左侧顶部到右侧底部。

清单 4. Line.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. 绘制简单的直线

绘制简单的直线

好的 —— 这10分简单，也不怎样使人激动。那末我做了甚么？创建了1个新的 SWFShape 对象，然后向其中添加了1些笔触移动和直线。然后我将其作为子图形添加到了动画中。

上1页 1 2 3 下1页

核心提示：使用 PHP 快速天生 Flash 动画

为了让它变得更有趣，我使用了与刚才文本中使用的相同的帧式动画。但在本例中，我用下面所示的代码使这条直线围绕动画的中心旋转。

清单 5. 旋转直线

以下为援用的内容：
$m = new SWFMovie();
$m->setDimension( 300, 300 );

$s = new SWFShape();
$s->setLine( 5, 0, 0, 0 );
$s->movePenTo( ⑴00, ⑴00 );
$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' );
?>

在本例中，我从 ⑴00, ⑴00 到 100, 100 画了1条直线。这将把直线的中心放在坐标 0,0 处。这样，当我在旋转图形时，直线的中心将产生旋转。

当我向动画中添加图形时，将移动返回到框架中心的 SWFDisplayItem。然后用 rotate() 方法使它旋转并每旋转1周就增大其框架。

使用图片

文本和诸如直线、圆、弧、曲线和矩形之类的简单矢量图形都是10分优秀的，但在理想的情况下，您必须能访问这些 Flash 动画中的图片。值得庆幸的是，Ming 库使您可以轻松的使用图片，以下所示。

清单 6. 使用图片

以下为援用的内容：
$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 的照片）。然后创建1个矩形，并在其中填充图片。在那以后，它在10 帧处使用了位移效果使图片稍微移动。

继续移动

我只是触及了 Ming 库可为您提供的操纵的表面。在这里我没有展现交互部份，在交互部份您可以将简单的脚本与元素连接起来。（但是，假设换成是交互操纵，假设您有1个10分复杂的 Flash 动画，则可能需要考虑使用 Flash 开发工具来构建 Web 利用程序内与 Web 服务对话的 Flash 动画。）

构建更加复杂的 Flash 动画的另外1种选择是使用诸如 Adobe Flex 或 Laszlo 之类的制作工具，这两种工具都提供了用于为 Flash 动画的用户界面布局的 XML 语法和1个更轻松地例程，可用于开发为界面提供互动操纵的 JavaScript。

XML Chart 和 XML Gauge

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

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

结束语

Flash 带来了1种机会，使您可轻松将大量交互操纵添加到 Web 利用程序。就像1些小部件样式的控件1样，从微不足道开始，变得越来越流行。XML Chart 和 XML Gauge 提供了机会让您在投进大量时间了解 Ming、Flex 或 Laszlo 之前先尝试使用这些类型的 Flash 小部件。不管如何，值得花时间往了解 Flash 及其功能来扩大 Web 2.0 PHP 利用程序的功能及交互操纵。

上1页 1 2 3 唐山网站建设www.fw8.net


TAG:方法,文件,动画,文本,图形
评论加载中...
内容：
评论者： 验证码：
  
上一篇: PHP4实际利用经验篇(1)
下一篇: 在VB中兼容非ACCESS数据库的技能

友情链接



联系人：万先生 电话： 邮 箱：admin@fw8.net

冀ICP备11021595号

在线客服
技术支持
点击这里给我发消息
产品咨询
点击这里给我发消息