Hack 30 Deja New Animations

Repeating animations are efficient but get dull fast. Create nonrepeating animation cycles to add variety without excessive overhead or resorting to ActionScript.

Tweens are the animation method of choice for the non-code-savvy animator, but they suffer from a number of limitations. The most obvious is that they are less conducive to interactivity than scripted motion. That's fine for many applications of Flash, particularly animated cartoons.

Animations require another common feature that cannot normally be performed without using scripted animation: random or nonrepeating movement. Tweens are fixed animations, so they are never random and simply repeat.

For example, assume we had two tweens contained within two separate movie clips, one of 10 frames and one of 20 frames. If we played both tweens continuously as part of the same overall animation, that animation would repeat every 20 frames. The user experience suffers because the animation appears repetitive.

If we were animating clouds across the Stage for a 30-second shot, we could create 30 seconds of animation, but that would be time consuming. We should instead animate a single cloud or several clouds and combine them to fill the sky and create variation. But if that 30-second looping animation was used as a background for a 5-minute cartoon, it would get repetitive. Ideally, our sky would consist of many individual animated clips that rarely repeat.

The standard way around this is to lock yourself in a room for a week and learn ActionScript and the joys of Math.random( ). The hacky way is to use prime numbers in your tween animations.

A prime number is any number that is evenly divisible only by itself and 1. The prime numbers between 1 and 100 are 2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, and 97. You can quickly look up additional prime numbers by searching for "prime number" or "prime series" on the Web.

The big deal about prime numbers is their indivisibility. A mathematical consequence of this is that the lowest common multiple of two primes is the product of the primes themselves (i.e., the prime numbers multiplied together).

Applying this to our situation, if you have two animations of lengths n and m, where n an m are prime numbers, a third animation combining the first two won't repeat for n times m frames. So, if you change your two animation tweens so that both have frame lengths that are prime numbers (say, 11 and 19), an animation combining the two movie clips will not repeat for the longest time possible?the product of the two frame lengths. That's only once every 209 frames (every 20.9 seconds at a frame rate of 10 fps), rather than the original of every 20 frames (once every 2 seconds). Not bad considering our longest animation is only 19 frames. So, making sure that each looping tween animation has a frame length that is a prime number (a different prime number from other animations), you can create an animation that takes a long time to repeat.

A good example of the use of prime numbers is a FLA I have had for so long that it may be the first Flash file I ever created. I wanted to create an animated study of a butterfly at rest. Like most real moving things, the motion of a butterfly is random and nonrepeating:

• The wings occasionally open and close, even if the butterfly has no intention of taking off.

• The antennae move.

• The whole insect constantly jitters around slightly.

Figure 4-7 shows a few frames from the animation, my first real attempt at animation all those years ago.

Figure 4-7. The butterfly animation

But I had no idea how to make the butterfly animation appear random and lifelike, as opposed to an obvious and mechanical-looking, repeating tween loop. I had been working with Flash for only a morning and did not know much about Flash ActionScript (which at the time wasn't that much anyway?I had learned the 15-20 or so actions available by the same afternoon!).

The way I did it was to use separate tweens for the three animating parts:

• The tween for the wings is 97 frames long.

• The tween for the antennae is 31 frames long.

• The whole butterfly moved in the final "jitter" animation, which is 41 frames long.

Thus, the whole butterfly animation is 97 31 41 frames long, or approximately three hours between repeats (at 12 fps). Nobody would wait that long to see the repeat, but given that it was the first Flash content I had ever pulled off, I came pretty close.

To see a finished example of the butterfly animation, download butterfly.fla from this book's web site.

Final Thoughts

Although creating nonrepeating animations with ActionScript is often easier, some animations just work better as tweens. The problem with tweening is, of course, that the animation is then fixed and repeating. The use of a little math and a bit of lateral thinking can easily address this problem.