HIDDEN.POWER.of.FLASH.MX COMPONENTS

Animation Component Suite

The Hidden Power of Flash MX Components is an awesome book exploring the untapped potential of components in Flash MX, written by Scott Hamlin of Eyeland Studio and published by Sybex.

My contribution to the book was a suite of five animation components and a chapter exploring their implementation in the Flash MX development environment.

This book is ideal for anyone interested in learning the fundamentals of Flash MX components.

The ingenious Brandon Williams also contributed to the book.

The Animation Component Suite includes the following Flash MX Components

Pond Ripples

Pond Ripple Animation Component

The Pond Ripples component generates concentric geometric structures of colored discs. In many ways, this component is similar to the Parallel Bars component. One particularly interesting difference with this component, however, is the method in which the individual discs of the structure are animated. These discs breathe.

The Pond Rings animation component creates a concentric arrangement of colored discs. Properties of the Pond Ripple include ring thickness, color variations, chaotic offsets, and a special ‘breathing’ behavior.

To use the Pond Rings component, drag an instance from the Components Panel in Flash MX to the stage. The component must be installed before you can use it.

The following are all properties of the Pond Ripple component. Using these settings, a wide spectrum of possible appearances and behaviors are possible:

Outer Radius

This value determines the overall size of the component. To determine the actual size of the component in pixels, simply multiply the radius by 2.

Ring Thickness, Ring Thickness Variation

The first of these determines the maximum thickness of each colored ring in the Pond Ripples in pixels. Experiment with this setting; if only a few colors are defined, several skinny rings of the same color will be created, giving the illusion of one fat ring, so you may want to add colors to see thin rings. Ring Thickness Variation allows ring thickness to be sized randomly; the higher the value, the more randomly sized the rings.

Centerpoint Offset, Centerpoint Offset Variation

The Centerpoint Offset pixel number repositions individual rings some random amount from the center of the ripple. Higher numbers provide more room in which the rings might move around. The default value of 0 keeps all rings perfectly centered. The Variation value is a percentage that allows each ring’s offset value to be randomized further. Higher values cause a more chaotic distribution of rings, while lower values generally keep rings within the same range.

Color Mixing Chaos

This percentage determines to what extent the colors in the Color Points array will be mixed when applied to the rings. See the first example of this component for an illustration and further explanation on Color Mixing Chaos.

Breathing Intensity

This number controls the depth of breath each ring takes. Larger values produce more exaggerated breaths. A value of 0 produces rings that do not breathe at all.

Breathing Variation

This percentage is used to mix up the times that rings take their breaths. A value of 0 creates rings that breathe simultaneously (so the entire structure grows and contracts together), while higher values create with rings that breathe further and further out of sync.

Lifetime

This setting imposes a specified time for the component to live. After the number of seconds entered has been reached, the Pond Ripples component begins to die. This is especially useful if many Pond Ripples are being created and some need to be destroyed to keep CPU resources plentiful. The Lifetime value is unique to the Pond Ripples component. A Lifetime value of 0 gives the Pond Ripples indefinite life.

Fade Out

This Boolean value is used in conjunction with the Lifetime value. If set to True, the entire Pond Ripples effect fades away at the end of its lifetime.

Show Build Process

This Boolean value controls the method in which the Pond Ripples effect is assembled. A setting of True shows the construction process of each ring being attached from the center outward. A value of False instantly displays the entire Pond Ripples. This component parameter is common to most of the other animation components

Parallel Bars

Parallel Bars Animation Component

The Parallel Bars component fills a region of space with dynamic, animated vertical bars. Each bar slides and switches positions the others in near continual, random fashion.

The Parallel Bars component creates an array of sliding bars with special settings to control behavior, size, and range of color. In the example above, two Parallel Bar components have been placed one above the other.

To use the Parallel Bars component, drag an instance from the Components Panel of Flash MX to the stage. Change the properties by first selecting the instance, then adjusting the settings in the custom user interface.

The following are all properties of the Parallel Bars component:

Region Width, Region Height

The width and height of the area to be filled with bars, measured in pixels.

Bar Thickness, Bar Thickness Variation

Bar Thickness is the maximum width of each bar, measured in pixels. Bar Thickness Variation is the percentage of variation in that thickness; a value of 0 forces all bars to be the same width. A Bar Thickness Variation value of 100 randomizes each bar’s thickness within the maximum set by Bar Thickness.

Movement Frequency

The frequency with which the bars change position, measured in milliseconds. The lower this number is, the faster and more chaotic the bars’ movement seems.

Movement Chaos

A percentage that introduces randomness in almost every aspect of the bars’ movement. A higher number causes more unpredictable, chaotic movement, while a lower number causes smooth, more rhythmic movement.

Movement Velocity

The speed with which the bars actually move on the screen. A value of 1000 causes the bars to move so fast that they seem to blink into their next position. Low values cause gentle, sweeping movements.

Movement Variation

A percentage that controls the differences in speeds between the individual bars. A high number produces bars that move at all kinds of different speeds, while a low number generally keeps the bars moving at the same rate.

Enable Collision Detection

Setting this Boolean value to True causes the bars to bounce off of each other while moving. Setting it to False allows the bars to move freely, often over and under other bars.

Seeds

Seeds Animation Component

The Seeds component generates a seed pattern with natural, radiating configurations. The Seeds component uses the naturally occurring angle of 137.5 degrees to generate a computational structure of intriguing geometric form.

The Seeds component creates an arrangement of movie clips in a spiral radiating pattern, a form often seen in nature. The geometric pattern is constructued with a well known, yet not entirely understood, rotational technique. Simply put, each new graphic object is placed adjacent to the last at precisely 137.5 degrees. The resulting formation consists of several nested spirals, their components enumerating the sequence of the Fibonacci series (1, 1, 2, 3, 5, 8, 13, 21, … ).

The Seeds Component also allows the setting of color, internal and external radii, seed size, and a special ‘breathing’ behavior.

To use the Seeds component (it must first be installed), drag an instance of it from the Components Panel in Flash MX to the stage. Change the component’s properties by first selecting it, then adjusting the settings through the custom user interface.

The following are all the properties of the Seeds component:

Outer Radius, Inner Radius

The outside and inside radii of the seed arrangement. All seeds will be placed between the outer and inner radii.

Outside Seed Scale, Inside Seed Scale

These set the scale of the seeds at the outside and inside of the arrangement. Individual seeds are exponentially scaled within a range of sizes defined at both the outside and inside of the arrangement.

Color Mixing Chaos

This percentage determines to what extent the colors in the Color Points array will be mixed when applied to the seeds.

Breathing Intensity

This value controls the depth of breaths each seed takes. Larger values produce more exaggerated breaths. A value of 0 produces seeds that do not breathe at all.

Breathing Variation

This percentage is used to mix up the times that seeds take their breaths. A value of 0 creates a seed arrangement with seeds that breathe simultaneously, while higher values create a seed arrangement with seeds that breathe further and further out of sync.

Show Build Process

This Boolean value determines if the construction of the seed arrangement is shown as it happens or after it has completed. If this value is set to True, the seeds are placed one at a time, starting from the outside edge. If it is set to False, the seed arrangement is instantaneously constructed and shown all at once.

Pebbles

The Pebbles component creates a computationally arranged field of simple graphic objects. It’s general-purpose nature makes it a powerful tool in creating many diverse effects with minimal effort. By dragging a single instance of this component on the stage, an entire universe of self similar movie clips can be instantly generated.

The Pebbles animation component instantly arranges a field of self-similar objects across a predefined area. The component is usefull in instances where a large number of Movieclips need to be scattered across some region of space.

To use the Pebbles component, drag an instance from the Components Panel of Flash MX to the stage. Set the properties of the component by selecting it. To use this component it must first be installed.

The following are all the properties of the Pebbles component:

Region Width, Region Height

The width and height of the area in which to place pebbles, measured in pixels.

Pebble Size, Pebble Size Variation

The average size of each pebble created, measured in pixels. The variation between pebbles is measured as a percent of the Pebble Size. For example, a Pebble Size of 10 with a Pebble Size Variation of 50 would produce pebbles ranging from 5 to 15 pixels.

Rotation Speed

This value adjusts the speed with which the pebbles rotate. Each pebble has a built-in rotational property that allows it to orbit a single point. Higher values will produce faster rotation. Negative values will produce rotation in the opposite direction, generally counterclockwise.

Rotation Variation

This percentage sets the rotational variability between individual pebbles. The larger the number is, the more extreme the differences in rotation speed between pebbles.

Show Build Process

The placement of individual pebbles within the field can be animated. Setting this Boolean value to True shows each pebble as it is created. Setting it to False instantaneously shows the entire pebble field.

Concentric Path

Concentric Path Animation Component

The Concentric Path component draws a random walking, concentric path. Starting from the outside, a single line works its way inward by following prescribed paths of a given radius. At random intervals, it drops one ring towards the center and, based on settings within the component, chooses to continue going in the direction that it was, or switches and heads back the other way. The result is a geometric construction similar to a maze or the artistic work of the ancient Mimbres people of North America.

The Conentric Path component was inspired by the geometric designs of the ancient Mimbres people of North America. A single instance of the component generates a randomly walking path that follows a series a concentric rings. A wide array of settings allow a great deal of customization.

To use the Concentric Path component, drag an instance from the Components Panel in Flash MX to the stage. The component must be installed before you can use it.

The following are all properties of the Concentric Path component.

Number Of Rings

Controls the number of unique ring levels the path will follow on its journey towards the center.

Erase Old Paths After

Controls the frequency with which old paths will be erased. Each time the drawn line of the Concentric Path reaches the center, it begins again at the outside radius. Paths eventually begin to overlap each other and also require more and more CPU resources, so the Erase Old Paths After value can be used to wipe the old paths away after so many have been drawn.

Draw Only Once

Setting this Boolean value to True forces the component to draw only one path.

Outer Radius, Inner Radius

These values control the outside and inside radii of the Concentric Path. Double the outer number to figure the total size in pixels. The Inner Radius should not be greater than the Outer Radius.

Resolution

The Concentric Path is drawn using a large number of straight lines. The Resolution is a value that controls how closely together the straight lines are placed. The smaller the values, the higher the resolution of the path. Extremely large values begin to show the straight lines at higher radii. This can also be used as an interesting effect.

Line Thickness, Line Color

The first parameter controls the width in pixels of the drawn line; a value of 0 creates a hairline path. The second describes the color and opacity of the line; all paths of the Concentric Path use the same color.

Chance Of Drop

A percentage that determines how often the path drops to the next ring. High values create paths that quickly reach the center. Low values create paths that tend to circle the origin before dropping in.

Chance Of Switch

You use this percentage to be used in combination with the Chance Of Drop value. This value determines how likely it is that the path will switch directions (clockwise or counterclockwise) after it drops. High values create paths that switch back and forth quite a bit. Low values create paths that tend to spiral towards the center.

Random Wandering

This value adds a nice little arbitrary walk to the path as it is drawn. A value of 0 creates a perfectly round path, while higher values tend to create a path that looks hand drawn.

XYZ Rotation

Using this setting, in degrees, the Concentric Path can be instructed to rotate about any of its axes. If the component seems to rotate too fast, try using decimal values (0.01). Positive values will rotate the path clockwise, while negative values will rotate the path counterclockwise.

Development Images

Images of the Animation Components

The development of these animation components went through so many stages of refinement and modification that the only reasonable way to document the process was the screenshot. It need not be said that a still image tells a shorter story than an animation. Here are some of my favorite short stories: