Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author Dermot O' Connor introduces a variety of real-world issues that animators commonly encounter and offers practical solutions to them in Flash. The course covers how to apply gradients to create subtle texture and light characters, reducing the flat look of most cartoons; how to simulate natural phenomenon such as wind, fire, and clouds; how to mimic 3D space; and how to add fades and transitions to create custom cuts between scenes. The course also includes a look at staggers, which can be used to create camera shake, tremor effects, and extreme character reactions.
So now we have our scene with our little phony 3D camera move into the shot, and then the next step would be to just add a few details and things to bring it to life. To completely finish this scene obviously will take a bit of time. So what I'm going to do is, instead of showing you the entire procedure, I'll show you the general process of how I would go about finishing this. So let's click into the scene. I am going to actually delete the old layers just to make some room in here. So we are moving through.
First things first: let's look at the background, and I want to see the entire area. So View>Pasteboard, or Workarea if you're in an older version of Flash, and here is our background; very minimal. I mean there are lots of things we can do to add lines and details to the background. Maybe some doors at the end, and windows and so forth, maybe some roof tiles, and whatnot. But for now I am going to do something a little more basic. I am going to make a new layer, hold down the Alt key, and drag the background, and just make it a full color.
Anything will do for now. And in our Color panel I'm going to go to radial gradient. And this is what we covered in chapter 1, if you're unfamiliar with this. The Gradient Transform tool over here, F; we click on that, and you'll see probably a different gradient depending on whatever last gradient you were playing with. But don't worry, over here we can control the number of colors we have, and where we put the different colors. So I am going to click on the center widget and just drag it roughly around to about here and you can then rotate this out.
Now I want the middle of the scene to be brighter. So I am going to pick a nice bright color, and let's make it a warmer color, something reddish maybe. I know you can't see much right now, because it's so transparent. So this second color here, let's drag that to somewhere. And again, make sure you have selected this H on your color, and let's make that a warm, maybe darker though. So we will bring it down. It's looking nice. And we will fade out to blue, a cooler color, on the outer side.
Let's make these a little more transparent. So I am clicking on the leftmost one, which corresponds to the center of the gradient. Let's bring it down to about 8% and we will bring down the middle one to about, let's try 40%. And look at the difference just with the addition of one simple gradient. It's, you know, with not much time or effort put into it; it's already getting us away from that flat, flashy look. So the next thing I'll show you is how to take one of these cubes, and approach the treatment of lining it.
So I'm going to double-click on that symbol to go into it, and let's make a layer on top. Actually, what I will do is I will duplicate the artwork. So hold down the Alt key and drag, and you will see little plus sign, and let's just padlock and guide out the layer beneath. So it's safely tucked away just in case anything goes wrong. Just go in closer. And I am going to use the Line tool, or N, to simply put some lines on the object. I am just taking care to watch the perspective.
So what I'm going to do here is refine the shape of the object, and it's nice if you can put some little tiny breaks in the silhouette. It will stop it from looking like that little empty cube. And there's going to be some vertical boards here breaking up the shape a little bit. We are not going to spend too long on this, but I will just do enough to give you the idea of the general process. It's pretty basic stuff really. This is the kind of the skill level that you learn in any of the introductory essentials courses at lynda.com.
We are just making lines, filling spaces, and we are going to paint them in. That should be most of them. Now what I want to do is find some different colors to paint inside these areas. So I am going to select, using the Dropper tool; that's this guy. Click that color. It appears here. I am going to pick a darker variant of that, and then just drop that in here. Oops! There is an open gap there somewhere. Let me close that. So what I am going to do instead is select the Fill tool, and tell it to close small gaps, and that took care of that.
Normally, I'd go in and zoom in and really fix that, but we are okay to do this. At the bottom, this, I would like it be a highlight. So again, Eye Dropper tool, select that color, pick a brighter version, and there we go. The same process here; Eye Dropper, select that color, pick a darker one, and drop the darker one in here. And we will put a slightly lighter version of that brown at the bottom. It might be too bright; bring it in. So that's it, and last step: get rid of this.
Delete or Control+X. We don't need that. Double-click on the line to select it all, and this one to get rid of it. And now we have something that looks, like, a little more interesting than our primitive geometry. The next thing, well last thing, really, is to put some gradients on here. So I am going to make two layers. One layer will basically correspond to the front of the box, and I am just Shift+Clicking to select everything here. Control+C, Control+Shift+D in the top layer, and the same process for the shadow part. Control+C, and then in the empty layer Control+Shift+V. So let me padlock our art layer. And on this layer here, which you are seeing now in pink, I am going to make it just a solid color.
I will swap the colors just to do that, or you could just pick any color from the picker here. And now we will go to this area in the color palette and select radial gradient. And it will probably apply some other gradient; the last gradient that we were working on. Now it's just a question of positioning the radial gradient for maximum effect, and I am just going to use the various widgets And again, we covered this in greater detail in Chapter 1. So if you are having trouble following along with this, you might want to have a look in there and see how we did all this.
Now remember basic color theory. It's nice if you have a reddish, brownish color with a gradient that's maybe in a different color family. So I'm going to try to pick a darker blue to really contrast with the orange color, or the brown color, of the box. And maybe we will go with a warmer color for the top there, and this can be pretty subtle. I am going to bring the light of these three, this one now down to 5%; we will make this one a little lower, maybe about 20.
The back one can be pretty dark, falling off into shadow. I am going to actually make it a little darker too. So that's that, and now padlock that, and now go to the background layer. The same thing. I would like to paint this in a radial gradient as well, and the thing is painted with its controls off the edge of the Stage. So Gradient Transform tool, and let's just pull it in. And you might want to have this side illuminated as if it's been hit by a spotlight off the edge of the Stage or something.
So we can play with these positions as well to soften that. And you can, of course, play with the opacity. I am moving pretty fast now. I am just going in, and really no point in calling out colors and opacities anymore. It's really just to give you an idea about how you proceed through creating the colors for this. So there we go! Already somewhat more interesting than the for default. So that's the process of how I would go in and apply the gradient skills previously covered, and some of the lighting issues to creating a scene that's a little more dynamic.
And as you can see, they still move fine. And the only other thing I would probably suggest would be maybe a slightly bolder gradient, maybe with some other lights, maybe behind these boxes. But once you apply more and more of the line work, let me show you the finished result. And here we have the scene completely polished. It's doing exactly the same thing that we have just being seeing in the previous one. All I have done is I have added a lot more line work to the crates. I have repeated the process that you just witnessed with the crate on all five of them.
If you look inside the scene, it's actually surprisingly simple. So I will just very quickly take you through it. There is our lined background. And we have our boxes; I just added a slightly transparent shadow beneath them, but they all have the same gradient trick. There is a, I call it, air. It's really the light level that gives us the dropoff, and creates the illusion of a shadow towards the end of the screen. And then the various crates are deployed on top of that so that they pop out against that layer. If I wanted to, for example, darken them, I would just move that layer up, and then we could darken the layer, or even add a second layer if we think we can get away with it, for different effects.
So, for example, if I wanted to make it stronger, select that layer, and I would simply change the opacity settings of the different parts of the gradient, and do some really drastic alterations to the scene. So it's great fun to have the ability to light scenes, and I think too many of us, when we use Flash, we resign to this very flat, everything is evenly colored, which is after a while that does get a bit boring. So I have been having a lot of fun just messing around with these gradient effects, trying to bring another level to the scenes.
So even though this technically isn't a part of teaching you how to do a tracking shot, I think it's a very important component of making the tracking shots look cool. So I think, with that, we are done with moving the camera around our little fake 3D Flash space.
There are currently no FAQs about Animation Tips and Tricks with Flash Professional.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.