Join Paul Trani for an in-depth discussion in this video Fine-tuning animation for depth, part of Flash Professional CS5: Animation Projects.
Once you have some basic animation in place, probably what you are going to want to do is refine that animation to potentially even simulate a real-world experience. In this particular case, if I just turn off some of the layers and just show the foreground and the background, if I hit Enter, you can see the background moves faster than the foreground, and in a real-world scenario, this wouldn't happen. I need the foreground to move faster. I am also going to add some additional depth.
So the first thing I am going to do is lock down that foreground and for that background, it, again, moves awfully fast, so I want to come down here to this last frame, this keyframe right here, and since this is a classic tween, I need to actually navigate down to that keyframe, and then I am just going to go ahead and move this image back to the right so it doesn't move as much. It's just going to be the fine art of moving that image and then scrubbing the Timeline.
So all I am doing is clicking up here where these numbers are, and I am really able to determine how much this moves. So I can either modify the first frame or the last frame, but now I am actually getting more of that depth. And that's looking pretty good, but there is more I can do as well. With any object, if it is in the Properties panel, then it can be animated. So what I want to do is I am going to add a blur to the background, because I want it to start out pretty sharp and then blur, and that's going to actually create some nice depth.
For the second keyframe, I am going to go ahead and select that background instance. And under Filters, I am going to add a new filter, and this is going to be Blur. I am going to change the Quality from Low to Medium, and I am just going to click and drag to the right to increase the blur of that background. That looks pretty good. In fact, let's type in about 15 pixels. All right, and if I scrub back, notice how again it's clear. And if I hit Enter, since I have added that nice filter, the background blurs out.
Since I am creating this depth, and I am playing with the focus of your eyes, this foreground image actually needs to be blurred out, since you are focusing on the background. So I am going to select that graphic, and it's going to be the same process of adding a blur. Let's make the Quality Medium, and let's make the blur about 15 pixels. Now you get that nice depth, focusing on the background, and I'll hit the Enter key, and now you can see the background blur out, and then the foreground should sharpen.
I do need to actually select the second keyframe here, and there we go. Let's bring that into focus. There we are. So let's try this one more time. Hit Enter. Background blurs out, and then you can see that image get a lot sharper. All right, so that's looking pretty good, but my next step is to really have this slow down and rest into place, because right now it just all of a sudden stops, and I want to control the easing, as it's known. So I want it to ease out, or slow down slowly as it reaches this second keyframe here.
I am going to select this tween, and if I look at the Properties panel, I can actually control the tween right in here. So I want to change the Ease to Ease Out, so that means clicking and dragging to the right. So ease out 100. Now it will really slow down into place. I am going to do the same thing for this classic tween because you can do with classic or a motion tween. Going to the Tweening properties and clicking and dragging and adjusting that ease, so now it eases out as well.
All right, so I'd say that's looking pretty darn good, and the last thing I am going to animate is this logo, because again, if it's in the Properties panel, it can be animated. With that layer selected, I am going to hold down the Shift key and press the arrow to the right, to kind of bring that into place like that. There it is. I want this logo to fade out, so it's going to start out, just as you see here, and then it's going to fade out, and it should be totally gone by the time it reaches this second keyframe.
If it's in the Properties panel, you can animate it, so I am going to select that graphic. I am going to go to Color Effect, and I am going to change the Color Effect to Alpha. And from there, I can adjust the alpha of this graphic, which is the transparency. I can take that down, and you can watch it disappear. Again, it's 100% right there, and now we can see it fade out. You get the focus on the two people, and the next step is to focus on the message as well.
So I am going to go ahead and do some cleanup to these two layers, because all that happens here is this text just pops in and so does the rectangle. So I will just click and drag this keyframe over, and I am going to make sure this is in the right position, because I am not only going to shrink up using my Free Transform tool, I am going to decrease the height of this bar right here to kind of fit that text just like that, and let's turn on that.
So that's looking a lot better. My graphics are in place, and I will create a motion tween. So it's going to start, potentially. I will just click and drag it so it will off the stage to the right, and in order to see the right side, what I can do is I can change the view to Fit in Window, and now I can sort of drag it off right-hand side like that. And then I can scrub in to about frame 80, then I can position this into place.
Now remember, I don't have to add a keyframe. Flash does that for me automatically. It adds that keyframe right there, and now I can see that that slides into place just like that. I am going to do roughly the same thing for the text. I am going to create a motion tween, and it's going to be positioned to the left and about at frame 80. I want it to slide in, so really, it's just a matter of selecting it and sliding it in, kind of like that. All right, so that slides in just like that, and then my other graphics appear, and let's just make sure the trees will also appear as well as that Replay button.
So I'd say everything looks good. The last edit I am going to do is just to make this text pop off a little more. I can add a drop shadow and again, I am just going to use Filters. Add a drop shadow, and now I can see that text better. In fact, let's blur it out a little more to kind of set it off some more. That's much better. Change the Quality to Medium. Those are the refinements I want to do this simple animation of graphics moving across the screen, but now we have created a lot more depth. In fact, if I do a test movie, you will see that depth that we have created and then that smooth motion as well.
- Creating graphics and reusable assets
- Importing graphics
- Making an object move
- Animating a mask
- Using and customizing motion presets
- Morphing shapes
- Animating in 3D
- Adding bones to a character
- Controlling the Timeline with ActionScript
- Randomizing content