| Backgrounds in traditional animations are created for each shot. But there are plenty of ways to reuse (there's that word again) a background. Background artists don't get a lot of recognition, but they are just as important as the character animator. A background artist is charged with creating an environment that fits the actions that take place in each scene. If you're creating a scary animation, your background probably won't be a field of daisies with bird's chirping and rainbows in the sky, now, will it? It will probably be dark and intense . You're setting a mood. So what kind of techniques can you use in animating a background? Controlling the panning of the background is also critical when you are working with a looped animation such as a walking sequence. Remember, if your character stops, the background should stop at the same time. Alternately, if your character stops to take a rest and the background keeps panning, you character needs to move backward with the scenery , as if someone were driving by and filming your character as he went past. This could be a nearly endless topic. There's so much that you can do in Flash to add life to your background. For the sake of brevity, let's keep things simple and talk about panning the background. When you pan a background, you are basically just tweening it across the Stage. Your background can be a single layer, or you can go for multiple layers to create the illusion of depth. One thing to keep in mind when you're creating backgrounds that will be panned (this may sound obvious) is that they need to be substantially wider than the Stage. Twice the width of your screen is a good rule of thumb. If you're really sneaky, you can make the left side of your background match up with the right side. That way, you can actually put your background in a looping movie clip and give the impression that you are continuously panning in one direction. Now with a looping background that pans in one direction, you can add a walking loop animation of your character and have him facing in the opposite direction that your background is panning. Now you've created the impression that a camera is panning alongside your character walking. When you are panning a background with multiple layers, you need to think about the camera position and relative depth of your layers. Here are a few rules of thumb when working with multiple layers: -
Objects that are far away usually appear to be darker or fainter than objects that are closer to you. -
Objects in the foreground appear to move faster than objects in the background. -
The farther back in the background layer an object is, the less detail it needs. You'll put these concepts to practice in the next exercise. Exercise 10.5 Animating Your Character and Background This file has already been started for you. You'll be setting up the animated background. -
Open BobWalks.fla from the Chapter_10/Assets folder on the CD. First you'll set up your scrolling background, and then you'll animate Bob and add him to the scene. You're going to build a scrolling background with two layers. Tip You'll be sorely tempted to use gradients and alpha transparency when you build these backgrounds because the effects that you can get are so cool. Try not to do thator, at least, be judicious in your use of these techniques. Both gradients and alpha transparency, particularly combined with animation, are very processor- intensive . Use flat, solid colors where you can. You don't want to bring your visitor's processor to its knees. -
Rename Layer 1 Trees , and drag a copy of the Trees graphic symbol from the Library onto the Stage. -
Align the Trees symbol so that it is justified with the right side of the Stage. The top of the symbol should be aligned with the top of the Stage. -
Add another layer, and name it Grass. Drag a copy of the Grass symbol from the Library onto the Stage. Align the right side of the Grass symbol with the right side of the Stage. The bottom of the Grass symbol should be aligned with the bottom of the Trees symbol. -
Notice that the two graphic symbols on the different layers are different lengths. If you tween them so that their left sides line up with the left side of the Stage at the same time, they will appear to move at different speeds. The longest symbol will move the slowest, and the shortest symbol will move the fastest . -
Place a keyframe in both layers at frame 50 ( roughly 4 seconds of play time). -
In frame 50, align the left side of each movie clip with the left side of the Stage. -
Apply your tween by selecting any frame between 1 and 50 (in both layers); right- or Control-click and select Create Motion Tween. -
Save and test your movie. If you watch closely, you'll see that the Grass symbol is moving faster than the Trees symbol so that you get an aspect change, and this enhances the depth effect. You've got your background in place; now you need to get Bob moving. -
You should still be working with BobWalks.fla. Create a new blank movie clip, and name it Bob. -
Double-click the BobParts folder in the Library. Bob has four different body positions : LegsBack LegsForward LegsRest LegsUp Your mission, should you choose to accept it, is to arrange these movie clips into a good moving sequence for Bob. -
For the moment, use just four keyframesone for each of Bob's body positions. As an example, you could place the movie clips in the following order: Frame 1: LegsUp Frame 2: LegsForward Frame 3: LegsBack Frame 4: LegsRest Add the four movie clips to the Stage on successive frames . -
From the main menu, select Control > Loop Playback, and then press Enter or Return to play the movie clip. Press Enter or Return again to stop the animation. don't know about you, but I just don't think that Bob would move like that. At least, not unless he was being poked by an electric cattle prod. Bob is a big guy; his movements should probably be more deliberate . This is going to require some effort on his part. -
Use LegsUp as the starting frame. For Bob to lift those legs up probably takes some effort. I imagine that he'd drop them pretty quickly, so leave LegsForward in frame 2. -
When Bob drops his legs, I think he'll take a short rest before pulling himself forward. Insert a regular frame after frame 2 by selecting frame 2 and pressing F5. Frame 4 should now be LegsBack. Frame 5 should be LegsRest. -
After Bob makes it through one complete walk cycle, I think he'll take a rest. Select frame 10 and press F5 to extend your timeline. -
Press Enter or Return to test your movie clip again. Bob's movements look a little more natural now. -
Return to the main timeline, and drag a copy of Bob from the Library onto the Stage. -
Test your movie. Doesn't quite look right, does it? When Bob stops moving, the background keeps scrolling. Your options are either to stop the background scroll or to make Bob move with the scroll. The simplest thing to do is to make Bob move with the scroll. Anytime Bob stops to rest, he needs to slide back with the background tween. -
Double-click the Bob movie clip in the Library to open it Symbol-Editing mode. Most of your sequence is in pretty good shape. All you really need to do is add in a motion tween at the end to get Bob to slide backward while he's at rest. -
Insert a keyframe in frame 10 of the Bob layer in the Bob movie clip. Even though you haven't moved the new instance of Bob yet, go ahead and right- or Control-click and select Create Motion Tween from the pop-up menu. -
How far are you going to move Bob? That's easy. Just go back to your main time-line and measure how far the Grass clip moves in five frames. It's about 130 pixels. -
Open the Bob movie clip again. Make sure that you have your rulers turned on (View > Rulers), and drag a guide from the left ruler onto the Stage. Align the guide with the front of the instance of Bob on frame 5. -
Drag a second guide onto the Stage, and position it 130 pixels to the right of the first guide. Select frame 10, and use your arrow keys to align the front of Bob with the second guide. -
Save and test your movie. Bob should take a step, stop, and move in synchronization with the background scenery. Not only do you have a character in motion, but you have your background in motion as well. Where could you go from here? You could add soundthe sound of Bob moving or the background noises. You could add additional layers with assorted forest creatures popping up. The possibilities are endless. It all depends, of course, on the story.  |
