Symbols Sprayer Tools and Scripting

Illustrator 10 features a variety of tools for creating masses of symbol instances, then spraying on transformations like rotation, scale, and opacity changes. This demo shows how to create a school of fish, then make them swim by adding a couple of lines of scripting in Flash.

When you click and hold with the Symbol Sprayer, Illustrator places instances of the selected symbol onto the canvas:



You can specify the rate and density of the flow using the tool options (select the tool and hit Enter on the keyboard). Flow can be controlled by a pressure sensitive Wacom tablet. By holding down Option (Mac)/Alt (Windows), you can reverse the tool's behavior, sucking up instances instead of spraying them down. In fact, you can reverse the behavior of most of the symbolism tools by holding Opt/Alt (making instances smaller instead of larger, more opaque instead of more transparent, etc.):

Click the image above for a larger version.

Note: most, but not all, of the symbolism tools can work efficiently SWFs. The Symbol Stainer (tinter) and Symbol Styler apply transformations that can't be represented directly in Flash, meaning that Illustrator will generate new symbols for affected instances. (Here's an example.)

::> Animating the symbol instances

You can choose to animate your symbol instances using either keyframes or ActionScript. To use keyframes on the instances in Flash, you'll need to select the symbol set in Illustrator and choose Release to Layers (Sequence) from the flyout menu on the Layers palette. Now when you export the SWF, you can export layers as frames or layers as separate SWFs in order to reconstitute the layer stack in Flash.

In this case, though, it will be easier and more interesting to animate the fish using a couple of lines of ActionScript.

  1. Skip the Release to Layers step and export the SWF using either File->Export or Save for Web.
  2. When Flash imports the SWF, all the symbol instances will appear layer 1, frame 1 as graphic instances. Since an instance must be a movie clip to be scriptable, select all and set the instance behavior to Movie Clip (either via the Instance palette in Flash 5, or via the Properties Inspector in Flash MX).
  3. Hit Cmd-E (Mac)/Ctrl-E (Win) to edit a selected instance. Flash will reveal the contents of the symbol (the raw paths making up the fish) on their own.
  4. Hit Cmd-/Ctrl-A to select all, then hit F8 to convert the path artwork into a new movie clip symbol. Name the symbol anything you want. By applying code to this nested symbol, we skip the pain of applying the same code to each of the instances on the main timeline.
  5. With the nested symbol instance selected, launch the ActionScript editor and paste the following lines of code:

onClipEvent (enterFrame) {
  this._x = this._x + random(50);
}

Now when you test the SWF, your fish should swim around like madmen (below).

I have a feeling you can come up with more sophisticated code, in which case you should show me what you come up with. And in case you want them, here are my source files (Mac .SIT and Windows .ZIP).