So far we've worked with the simplest kind of animation: linear tweening between keyframes. However, this is only the beginning of what you can do with Flash. As we progress we'll be moving from animation--presentation of a single determined sequence--to simulation, where movements are governed by complex logic or by chance. Simulated objects don't simply move, they behave. Any interactivity that goes beyond simple point-and-click or page-to-page transitions must depend on behavior and simulation.
Before we get to simulation proper, we need to work through the transition from simple timeline animations to more complicated stuff. The Flash movies above show two approaches to compound animation: making more than one object (Movie Clip) simultaneously active in the main movie.
1: Timeline Solution
|
The first of the two movies shown above, Pulsar 1, contains four copies of the same Movie Clip called basicPulse. This Movie Clip contains a single element, the ring of large dots, which is animated in a simple tween from its initial state (60 px by 60 px, fully opaque) to a terminal state 10 frames later (scaled up 900%, transparency at 90%). This basic element is shown as a separate movie at right. |
The compound movie Pulsar 1 contains four layers, each of which consists of a keyframe containing an instance of the basic element, followed by ten blank frames. None of these sequences are tweened. Tweened animation is needed only once, within the basicPulse Movie Clip. In Flash any Movie Clip that contains a sequence of frames will play those frames whenever it is on stage.
If we wanted only one copy of basicPulse to be active, we could simply have dropped an instance of that Movie Clip into a single frame--this is exactly what we've done for the solo example shown above. When more than one instance is involved, however, we need a more complex timeline. Here's a snapshot:
As you can see, the frame sequences are both stacked and staggered. This allows us to introduce successive instances (copies) of basicPulse as time passes. A new instance of the basic Movie Clip becomes active every five frames. The previous instances remain active until they have run through the ten frames allotted to them. Because unoccupied (white) space in a layer is read as transparent, we can see several waves of pulsing dots at once.
2: Scripted Solution
Have a closer look at the two examples at the top of this page. Both repeat the same actions regularly, but he first example, Pulsar 1, contains an inelegant lag or stutter. This is because it's built on a timeline architecture, as opposed to Pulsar 2, which uses scripts to control its animation. (In fact we could eliminate this stutter from the timeline example but we'd have to add considerable complexity to the design.)
Pulsar 2 is built on radically different principles. Its basic element is just the ring-of-dots Movie Clip (dotRing) that underlies basicPulse. BasicPulse itself is not used; in fact there are no frame sequences at all in this movie. The entire architecture consists of four layers each containing only a single keyframe.
Animation here is accomplished through ActionScript instructions written in an enterFrame handler on each instance of dotRing. The enterFrame handler executes the instructions it contains every time the Flash player accesses its frame--which in this case is twelve times per second.
We'll introduce scripting in detail next week. For the moment, here's an introductory peek at the mechanism that runs one of the scripted animations:
onClipEvent(enterFrame){
this._alpha -=6;
this._width +=12;
this._height +=12;
if(this._width > 180 ){
this._width = 24;
this._height = 24;
this._alpha = 100;
}
}
The term this is shorthand that refers to the object that contains the script--in this case an instance of the dotRing Movie Clip. The instructions you see tell Flash to do various things to this instance of dotRing: dial its alpha setting (transparency) down by 6% and increase its width and height by 12 pixels. The if condition sets a limit on these activities. Once the ring has expanded beyond 180 pixels in width (also in height, since both height and width increase by the same amount), the object is reset to 24 pixels and 100% opacity, which was its initial state.
There's a bit more to the architecture of Pulsar 2 than we have space to explain here, but it's all based on the instructions you see above. You can download the source file (pulsar2.fla in MMShare/compoundAnimationDemo) to study the example more closely.
3: Scripts and Behavior
|
If scripting and timeline animation can accomplish basically the same thing, why choose one over the other? Because the scripting approach can do everything timelines can and more. As we suggested, scripting is the key to dynamic, emergent, or organic behavior. Consider this last variation on the pulsar theme, where the changes being fed to width, height, and alpha are selected at random from within a certain range. The source file for this movie, pulsar3.fla, can also be found in MMShare/compoundAnimationDemo. |
Finally, in case you're wondering why we would want things to trade mechanical repetition in favor of organic behavior, consider this last simple simulation:
