Using Multiple Animation Components

By combining components, we have the potential to create animation effects way beyond the original intentions of the components. Let us explore the ways components can be combined.

Overlapping Components

Simply overlaying one component on top of another is an effective way of producing some interesting results.

Oftentimes, we will want to align our components on top of each other to achieve symmetric results, as in Figure 6.31. Here, we have one instance of the Seeds component with a specially modified SeedShape and one instance of the Pond Ripples component with a high amount of transparency. The components have been placed on unique layers within the movie. We do this because it eases the editing process, allowing quick access to either component through the selection of its layer.

Figure 6.31: A combination of the Pond Ripple and Seeds components produced this complementary design.

A few variations of this same theme produced some very interesting results. All of the images in Figure 6.32 are snapshots of the same composition. The composition is a simple movie containing four instances of the Pond Ripple component and one instance of Seeds component.

Figure 6.32: Screenshots of a movie containing multiple components

Common Multiples

Another method for increasing the visual interest of the animation components is to lay them out side by side. Due to the unique randomization properties of these components, each one will be slightly different. The juxtaposition of common multiples is a great way to induce contrast and comparison by the observer.

Figure 6.33 shows some common multiples of the Parallel Bars component using text as the shape. Some varieties of basic Pond Ripples are shown in Figure 6.34.

Figure 6.33: Multiple screenshots of the Parallel Bars component with a custom BarShape using the word hope

Figure 6.34: Due to the random nature of the Pond Ripples component, the same setup will produce thousands of different arrangements.

Masked

Flash MX amazed many developers with its support for dynamic masks. A dynamic mask is simply a process of using a changing shape as a view into the layers below it. By using an animation component as a dynamic mask for another animation component below it, we can create some fantastic results.

In Figure 6.35, I've used a Seeds component with particularly large seeds as a mask for a high resolution Concentric Path below it.

Figure 6.35: A Seeds component being used as a mask for the high resolution Concentric Path component below it. The result is an unusual organic-shaped construct.

Similarly, an inspirational complexity created with Pebbles and Parallel Bars is shown in Figure 6.36.

Figure 6.36: A Parallel Bars component being used as a mask for a Pebbles component below it. This might have made for some great wallpaper in 1973.

Embedded

For our final exploration using multiple components, we will attempt something a bit dangerous: embedding a component as a basic building element of another component. Why is this dangerous? First of all, with extreme enough settings, every one of these animation components has the potential of consuming all available resources on just about any computer. So by embedding one component within the other, we are compounding the complexity of our scene.

For the sake of setting a good example, let's abandon caution and get right into it. The images in Figure 6.37 were created by two different instances of the Seeds component. The major difference between the two is the scales used for the seeds.

Figure 6.37: By embedding a Concentric Path component as the SeedShape for the Seeds component, we produce something greater than the sum of its parts.

To make each seed element a concentric path, the graphic element in the SeedShape movie clip was replaced with a single instance of the Concentric Path component. To lighten the computational load a bit, the Concentric Path was set to draw only one path, at a fairly low resolution, and with only seven rings.

Both Seeds instances were set to generate 42 seeds, meaning that 84 Concentric Paths were drawn each time the movie ran. We definitely did not want to draw all these paths at the same time, so the Show Build Process setting was set to True.