技术开发 频道

使用PHP 快速生成Flash 动画



    文本 “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 格式在站点中得到了详细说明并且非常易于创建。

结束语

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

0
相关文章