- Building the Story
- Storyboarding Your Action
- Character Animation Basics
- Adding Life to Your Character
- Animating Your Backgrounds
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Animating Your Backgrounds
Backgrounds in traditional animations are created for each shot. However, 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 birds chirping and rainbows in the sky, 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 critical when you are working with a looped animation such as a walking sequence. Remember that 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 or she went past.
This discussion can 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 is that they need to be substantially wider than the Stage. (This might sound obvious, but it is worth mentioning.) 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.
With a looping background that pans in one direction, you can add a walking loop animation of your character and have him face in the opposite direction that your background is panning. Now you've created the impression that a camera is panning alongside your character, who is 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 put these concepts to practice in the next exercise.
Exercise 11.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 Examples/Chapter11 folder on the CD.
-
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 Stage.
-
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.
-
Place a keyframe in both layers at frame 50 (which marks 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.
-
You should still be working with BobWalks.fla. Create a new blank movie clip, and name it Bob.
-
Bob has four body positions:
-
l LegsBack
-
l LegsForward
-
l LegsRest
-
l LegsUp
-
For the moment, use just four keyframes—one for each of Bob's body positions. As an example, you could place the movie clips in the following order:
-
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.
-
Use LegsUp as the starting frame. For Bob to lift his legs 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.
-
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.
-
Return to the main Timeline, and add a layer named Mr. Bob. Move the layer between the grass and the trees. 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.
-
Double-click the Bob movie clip in the Library to open it in Symbol-Editing mode. Most of your sequence is in pretty good shape. All you really need to do is to add 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 Timeline 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.
-
Drag a second guide onto the Stage, and position it 130 pixels to the right of the first guide.
-
Save and test your movie.
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 that, or, at least, try to be judicious in your use of these techniques. Gradients and alpha transparency, particularly when 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.
The longest symbol moves the slowest, and the shortest symbol moves the quickest.
If you watch closely, you'll see that the Grass symbol is moving faster than the Trees symbol. This creates an aspect change and enhances the depth effect.
You've got your background in place; now you need to get Bob moving.
Your mission, should you choose to accept it, is to arrange these movie clips into a good moving sequence for Bob.
Frame 1: LegsUp
Frame 2: LegsForward
Frame 3: LegsBack
Frame 4: LegsRest
Add the four movie clips to the Stage on successive frames.
I 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 a cattle prod. Bob is a big guy; his movements should probably be more deliberate. This is going to require some effort on his part.
Frame 4 should now be LegsBack.
Frame 5 should be LegsRest.
Bob's movements look a little more natural now.
The simplest thing to do is to make Bob move with the scroll. When Bob stops to rest, he needs to slide back with the background tween.
Align the guide with the front of the instance of Bob on frame 5.
Select frame 10, and use your arrow keys to align the front of Bob with the second guide.
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 sound—the 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.