绘制 API 示例:算法可视化生成器

Flash Player 9 和更高版本,Adobe AIR 1.0 和更高版本

Algorithmic Visual Generator 示例在舞台上动态绘制几个“卫星”,即在圆形轨道中运动的圆形物。要阐述的功能包括:

  • 使用绘图 API 绘制具有动态外观的基本形状

  • 将用户交互与绘图中使用的属性相关联

  • 清除每个帧中的舞台内容并重绘以利用原有的动画

上一小节中的示例使用 Event.ENTER_FRAME 事件对唯一的“卫星”进行动画处理。该示例在此基础之上进一步扩展,生成一个包含一系列滑块的控制面板,这些滑块会立即更新若干卫星的可视显示内容。此示例将代码格式设置为外部类,并将卫星创建代码包装在循环中,以将对每个卫星的引用存储在 satellites 数组中。

若要获取此范例的应用程序文件,请参阅 www.adobe.com/go/learn_programmingAS3samples_flash_cn。可以在 Samples/AlgorithmicVisualGenerator 文件夹中找到应用程序文件。此文件夹包含以下文件:

文件

说明

AlgorithmicVisualGenerator.fla

Flash Professional 中的主应用程序文件 (FLA)。

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

此类提供应用程序的主要功能,其中包括在舞台上绘制卫星,以及从控制面板中响应事件以更新影响卫星绘制的变量。

com/example/programmingas3/algorithmic/ControlPanel.as

此类管理用户与几个滑块之间的交互并在发生此类交互时调度事件。

com/example/programmingas3/algorithmic/Satellite.as

此类表示在轨道中围绕中心点旋转的显示对象,并包含与其当前绘制状态有关的属性。

设置侦听器

应用程序先创建三个侦听器。第一个侦听器侦听从控制面板中调度的事件:必须对卫星进行重新构建。第二个侦听器侦听对 SWF 文件的舞台大小的更改。第三个侦听器侦听 SWF 文件中每个经过的帧,并使用 doEveryFrame() 函数进行重绘。

创建卫星

在设置这些侦听器后,将调用 build() 函数。此函数先调用 clear() 函数,后者清空 satellites 数组,并清除以前在舞台上绘制的任何内容。这是必要的,因为每当控制面板发送事件来执行此操作时,都可能会重新调用 build() 函数,例如在颜色设置已发生变化时。在这种情况下,必须删除并重新创建卫星。

该函数随后创建一些卫星,并设置创建所需的初始属性,如 position 变量(从轨道中的随机位置开始)和 color 变量(在本示例中,该变量在创建卫星后不会发生改变)。

创建每个卫星时,会将对它的引用添加到 satellites 数组中。调用 doEveryFrame() 函数时,它将更新此数组中的所有卫星。

更新卫星位置

doEveryFrame() 函数是应用程序动画过程的核心。将为每个帧调用该函数,频率等于 SWF 文件的帧频。由于绘制变量略微发生了变化,因此,这会利用原有的动画外观。

该函数先清除以前绘制的所有内容,然后再重绘背景。接下来,它循环访问每个卫星容器,增加每个卫星的 position 属性以及更新 radiusorbitRadius 属性(这些属性可能由于用户与控制面板的交互而发生了变化)。最后,通过调用 Satellite 类的 draw() 方法,在新位置对卫星进行更新。

请注意,计数器 i 最多只增加到 visibleSatellites 变量。这是因为,如果用户通过控制面板限制了显示的卫星数,则不会重绘循环中的其余卫星,而应将其隐藏起来。这种情况发生在紧靠负责绘制的循环后面的循环中。

当 doEveryFrame() 函数完成时,将在屏幕上的位置中更新 visibleSatellites 数量。

响应用户交互

用户交互是通过控制面板发生的,它是由 ControlPanel 类管理的。此类设置一个侦听器,并为每个滑块设置单独的最小、最大和默认值。当用户移动这些滑块时,将调用 changeSetting() 函数。此函数更新控制面板的属性。如果更改需要重新构建显示内容,则会调度一个事件,随后将在主应用程序文件中对该事件进行处理。当控制面板设置发生变化时,doEveryFrame() 函数将使用更新的变量绘制每个卫星。

进一步自定义

本示例只是概要介绍了使用绘图 API 生成可视内容方面的基础知识。它使用相对较少的几行代码来创建似乎非常复杂的交互式体验。尽管如此,您还是可以对本示例进行较小的改动以进行扩展。下面列出了一些很好的方法:

  • doEveryFrame() 函数可以增加卫星的颜色值。

  • doEveryFrame() 函数可能会随着时间的推移缩小或增大卫星半径。

  • 卫星并不一定是圆形的,例如,可以使用 Math 类根据正弦波来移动其半径。

  • 卫星可以使用碰撞检测来检查是否与其他卫星重叠。

可以将绘图 API 作为在 Flash 创作环境中创建视觉效果的替代方法,以便在运行时绘制基本形状。但是,它也可以用来创建涵盖范围很广且无法手动创建的各种视觉效果。通过使用绘图 API 和一些数学函数,ActionScript 作者可能实现很多意想不到的创作效果。