Drawing API example: Algorithmic Visual Generator
Flash Player 9 and later, Adobe AIR 1.0 and
Algorithmic Visual Generator example dynamically draws to the stage several
“satellites”, or circles moving in a circular orbit. Among the features explored
Using the drawing API to draw a basic shape with dynamic
Connecting user interaction with the properties that are
used in a draw
Conveying animation by clearing the stage on each frame and
The example in the previous subsection animated a solitary “satellite”
event. This example
expands upon this, building a control panel with series of sliders
that immediately update the visual display of several satellites.
This example formalizes the code into external classes and wraps
the satellite creation code into a loop, storing a reference to
each satellite in a
To get the application files for this sample, see
The application files can be found in the folder Samples/AlgorithmicVisualGenerator.
This folder contains the following files:
The main application file in Flash Professional
The class that provides the main functionality
of the application, including drawing satellites on the stage and
responding to events from the control panel to update the variables
that affect the drawing of satellites.
A class that manages user interaction with
several sliders and dispatching events when this occurs.
A class which represents the display object
that rotates in an orbit around a central point and contains properties
related to its current draw state.
Setting the listeners
The application first creates three listeners. The first listens
for a dispatched event from the control panel that a rebuild of
the satellites is necessary. The second listens to changes to the
size of the SWF file’s stage. The third listens for each passing
frame in the SWF file and to redraw using the
Creating the satellites
Once these listeners are set, the
is called. This function first calls the
which empties the
array and clears any
previous draws to the stage. This is necessary since the
be recalled whenever the control panel sends an event to do so,
such as when the color settings have been changed. In such a case,
the satellites must be removed and recreated.
The function then creates the satellites, setting the initial
properties needed for creation, such as a the
which starts at a random position in the orbit, and the
which in this example does not change once the satellite has been
As each satellite is created, a reference to it is added to the
function is called, it will
update to all satellites in this array.
Updating the satellite position
function is the heart of
the application’s animation process. It is called for every frame,
at a rate equal the framerate of the SWF file. Because the variables
of the draw change slightly, this conveys the appearance of animation.
The function first clears all previous draws and redraws the
background. Then, it loops through each satellite container and
property of each satellite,
and updates the
that may have changed from user interaction with the control panel.
Finally, the satellite updates to its new position by calling the
of the Satellite class.
Note that the counter,
, only increments up
variable. This is because
if the user has limited the amount of satellites that are displayed
through the control panel, the remaining satellites in the loop
should not be redrawn but should instead be hidden. This occurs
in a loop which immediately follows the loop responsible for drawing.
When the doEveryFrame() function completes, the number of
in position across the screen.
Responding to user interaction
User interaction occurs via the control panel, which is managed
by the ControlPanel class. This class sets a listener along with
the individual minimum, maximum, and default values of each slider.
As the user moves these sliders, the
is called. This function updates the properties of the control panel.
If the change requires a rebuild of the display, an event is dispatched
which is then handled in the main application file. As the control panel
settings change, the
each satellite with the updated variables.
This example is only a basic schematic of how to generate visuals
using the drawing API. It uses relatively few lines of code to create
an interactive experience that appears quite complex. Even so, this
example could be extended with minor changes. A few ideas:
function could increment
the color value of the satellite.
function could shrink
or expand the satellite radius over time.
The satellite radius does not have to be circular; it could
use the Math class to move according to a sine wave, for example.
Satellites could use hit detection with other satellites.
The drawing API can be used as an alternative to creating visual
effects in the Flash authoring environment, drawing basic shapes
at run time. But it can also be used to create visual effects of
a variety and scope that are not possible to create by hand. Using
the drawing API and a bit of mathematics, the ActionScript author can
give life to many unexpected creations.