Customizing the Artwork Used by Animation Components

Now that we've introduced the animation components, let's get started using them. The goal of this section is to get you comfortable using the components in creative ways through simple modification of the artwork used by the component.

Each one of these animation components, with the exception of the Concentric Path, uses a basic geometric shape to build itself up. These shapes are located in their own movie clips, so that you can easily edit them without interfering with the complex programming behind the component.

Modified Seeds

Let's start off with one of my favorites, the Seeds component. As we learned earlier in the chapter, the Seeds component uses the golden ratio to lay down multiple instances of a single graphic object, the SeedShape.

Start a new movie and drag an instance of the Seeds component out onto the stage. Now open the movie's library. Notice how the SeedsComponent movie clip has been added along with a folder called Component Elements. Inside that folder are two more folders called Designer Elements and Developer Elements (see Figure 6.21). This is where all the assets required to make the Seeds component are located. Of particular interest to us are the assets located in the Designer Elements folder. Open it and edit the SeedShape movie clip.

Figure 6.21: After you have dragged the Seeds component into your movie, your library will contain all the elements required to build the seed arrangement.

The SeedShape is a very simple movie clip. Within the first and only frame exists a graphic shape, shown in Figure 6.22, roughly translated to be a seed.

Figure 6.22: Editing the SeedShape movie clip

Now here's the secret: this shape can be anything! We can draw a thousand different forms here and come up with some pretty spectacular results. We can even add a tween, or multiple frames of animation. Really, the SeedShape movie clip can be any valid Flash movie object- even another animation component, as we will see later in the chapter.

There are a couple things to keep in mind when editing these shapes. Note how the shape is centered with the registration mark. This is not required, but it is important if you want your seeds to be placed where you expect them to be through the settings in the Seeds component parameters.

Also, notice how the seed roughly fits within the green guidelines. Those green lines have been pulled into the stage to mark a 100×100 pixel area. Again, it is not required that the shape fit within this area, but if you want the numeric settings for size in the component parameters to remain consistent, the shapes should be approximately 100×100 pixels.

Modified Pond Ripples

The Pond Ripples component offers some interesting opportunities for customization because of the concentric nature of its composition. Similar to the Seeds component, the Pond Ripples component uses a movie clip called PondShape as the basic graphic building block of the final arrangement. Modifying the graphic shape on the first frame of the PondShape movie clip allows us to completely change the effects this component is capable of.

Here's a great example of just how wild these animation effects can become with a few home-brewed shapes. Using the hand-drawn shape shown in Figure 6.23 as the pond shape, I produced the animation in Figure 6.24.

Figure 6.23: An irregular, hand-drawn shape as the PondShape

Figure 6.24: The resulting pond ripple

Note the orientation of the PondShape in the resulting Pond Ripple arrangement. An Alpha setting of 15 creates a nice effect, especially in the center, where there is a high amount of overlap. When breathing, this component-driven, computational specimen seems to take on a life of its own, pulsating to an internal, almost self-determined interval. This, in fact, cannot actually be true, but this should be the goal of the computational designer.

Another example that takes advantage of the breathing animation is built from the PondShape movie clip shown in Figure 6.25, creating the effect in Figure 6.26. This structure looks amazing when viewed in motion because the spindles and gears pulse in and out as it breathes, giving the whole structure a kind of "broken timepiece" effect.

Figure 6.25: Another irregular, hand-drawn shape as the PondShape

Figure 6.26: The resulting Pond Ripple arrangement resembles a broken timepiece.

Modified Parallel Bars

We certainly aren't limited to only drawing abstract shapes. Figure 6.27 shows some great examples that use the Parallel Bars component to move around some stylized text, in an array of diverse colors. Keep in mind that when using text as an animated object, you must break apart the text to its graphic equivalent, or embed the font outline.

Figure 6.27: Using the same shape modification techniques as in the previous section, the Parallel Bars component can render moving fields of text.

Modified Pebbles

It's hard to describe just how fun it is to throw some hand-drawn shapes into a computational system. With minimal effort, a complex landscape of form and function (admittedly, mostly form) can be brought to life.

The field of modified Pebbles in Figure 6.28 is a great example of how to have fun. The basic shape used to create this pattern resembles a wheat chaff (Figure 6.29).

Figure 6.28: The Pebbles component in this example is using a custom-drawn shape to produce a random field of drifting symbols.

Figure 6.29: A custom shape for the PebbleShape movie clip

Of course, do not forget that all of this, as I try to show in Figure 6.30, is gracefully animated!

Figure 6.30: Some additional inspirational Pebble arrangements using custom shapes