Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Flash Professional CS5: Character Animation, Dermot O' Connor explains the process of character animation in Flash, using nested symbols and motion and shape tweening to create believable characters. The course covers the process from start to finish, from rigging a character to creating a walk cycle animation. Along the way, Dermot demonstrates techniques such as animating eye blinks, head turns, and mouth movements during dialogue. Exercise files accompany the course.
When you create your images in Flash, there are several different looks that you can assign to your character and each of these looks has its own pros and cons and I'm going to be covering each of them. So the three major looks that most people use are the Line tool, the Fill or the flat color, so you can see the line on the left, fill in the middle, flat on the right. So the pros of the Line tool are it's very fast and easy to draw. So let's just pick that nice little solid area and do a good demonstration. So I'm going to match the line weight of the character we were looking at here, a little bit heavier.
So we just draw and we can create our character very quickly, very easily. So it has speed on its side and ease-of-use. The line weight can be changed very easily. Let's just select everything, go into our Line tool, and as you can see I'm changing the Stroke size, quite brazenly. Let's make it lighter. That gives you a great deal of power over the weight of the image. And then also it has a very small file size, because we're dealing with many of the smallest number of points that we could use to create this image. It's hard to see how we could make it much smaller than this.
Now on the downside, when you scale the Line tool, it tends to clump and it looks quite ugly. Let me show you what that looks like. I'll do all three together for comparison. Let's scale this down, and zoom in just a little bit, and the weird thing happens with the Line tool when it hits a certain point, it seems to stop getting smaller. The flat color and the fill character are legible, even at this tiny size. You can still kind of make out arms and legs and such.
The line character is a bit of a clumped thing and if you have a lot of these it looks quite ugly and eye-catching. This causes pretty large problems. So let's undo that. The other disadvantage is that the line weight is so consistent that it doesn't vary, so therefore it just ends up looking extremely mechanical. If you especially need to compare to the middle character who looks like he was drawn by an ink brush or something a little more creative, this seems to have been carved in. It just looks like it's been machined. It's not a nice look I think.
Another disadvantage when playing animation with the Line tool, I found that you don't get quite as good a frame rate strangely enough as you will when you're working with these flat color areas. Another disadvantage is that when different lines of different colors overlap, it can be very difficult to control which line is on top. So I'll show you what that looks like. If I grab this line here and pull it out, it's then blobbing over the black line. If I wanted to put the black line on top of that, I'm not quite sure how I would rather do it frankly. Even when I make a new black and pop it down, this one still wants to be on top.
And if it happened to put the lines on different layers, it's a terrible chore. So let's undo all that. So slightly hard to control some of the graphical elements in there, and the big one for me, if you are into animation and you create your image out of these lines, and let's say you want to shape tween from this pose to this pose, here's what happens. All the lines disappear on the in-between frames, and if you wanted to correct out the process, it's pretty dire. You have to keyframe all of the secondary ones.
You have to then fill them with the Ink Bottle tool frame-by-frame and if you have many, many frames, this is really tedious, and then you've got to paint out this little guy at the top because of course that's not going to look good here. So it's pretty boring and it's just honestly not suitable. So that's the Line tool and that's why we won't be using it. So that leaves us with the Fill tool and the Flat Color tool. So let's look at the Fill tool. The Fill tool has the advantage of looking much nicer, where you can taper the line so that it looks it's been drawn by an actual artist.
It scales down much more nicely as we saw if we zoom out. It still looks good whereas this is clumpy. I've not been able to detect any major frame rate impact as I did with the Line tool. On the disadvantage, it takes a little longer than the Line tool to draw and if we look at the points, the geometry inside with the Subselection tool, just click on this, and you can see that of course there is an inter line. There is an outer line. They've been colored in. Let's go a little tighter on this, so you can see exactly what I mean. So I've got an inter line for one side of the stroke and then outer for the other, and then these are filled with a solid color.
So of course this is doubled in points of the line version and the other disadvantage of this is that it can make shape tweening a little trickier and I'll show you an example there. Here's an arm where we've roughly colored it and painted it with the same technique and if I do a shape tween on this from this pose to this pose, it begins to break apart, and this means that I have to add lots of secondary shape hints and other points to try to encourage it to not mutate like this. So that by no means is a deal-breaker.
We can work around this problem, but it does create a little more time that we have to spend tweaking all these points. So ideally what I like is a system that combines some of the strengths of both and also that looks good. So that would be our flat color version, and in this case you can see there are the areas that don't have any line work at all because the flat color basically speaks for itself. I think this style looks great. I think visually, stylistically, it's the most sophisticated of all the Flash looks and you have seen that all over the place. If you watch commercials very carefully, it'll come up a lot in some of the animated ads and there's a reason for that.
The reason being it is the most adaptable to Flash and that's the fastest and it allows for very cool physical action. So as a good rule of thumb, the more detail your figure has, the harder it'll be to animate. So obviously the flat color having fewer points is easier to animate. Now the disadvantage of the Flat Color tool occurs if you move two areas of the same color in front of one another. Hands can get disappeared and if you move the hand in front of the face, they're in the same color areas. There is no black outline to keep them separated.
So that's why we've added these little areas of shades. We've had to add these and little areas of bright and these can be increased in color or contrast if needed to. A closer approach to what we're seeing here on the physical left arm of the character. So as you can see here with the dark color of the background hand, that's the workaround for not losing that against the body. If that arm were the same color and we began moving it around, we wouldn't know where the chest ended and the arm began. So I don't see extra engineering that we have to do on our character's color and these little shadow areas to be so dire that we have to not use it.
So I think this look is definitely the optimal one and this is the design style that we'll be animating with, not for this particular character, but an original one of our own. So that's essentially it. So the weaknesses of the line and the pure fill character will be abandoned and we will work as best as we can with pure color. It'll be a lot less struggle and I think a little more enjoyable for us. The end result looks pretty cool.
There are currently no FAQs about Flash Professional CS5: Character Animation.
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.