So my tutorials haven't been coming out as soon as I hoped, and part of the reason is that it's hard to dedicate the time needed to make a good tutorial for you when there's not much in it for me.
So I'm going to try something here. The tutorials will always be free, but if you'd like, you can buy the FLA file so that you can really see what it is I'm doing (right now, the files are only available for CS3 and up, but if you're interested in older versions, let me know).
Each file is 3 bucks, through PayPal, and then I'll e-mail you a .zip of the file you purchased. The price seems pretty reasonable, and honestly the best way I've found to learn Flash is to look at the files of people who know what they're doing.
The tutorials with FLA's available so far are
The Walk Cycle Tutorial
The Water Cycle Tutorial
Using Symbols to Animate Traditionally
Perspective in Flash
The Dolly Shot Tutorials (different FLA's are included for part 1 and 2)
The Looping Pan and Multiplane Pan Tutorials (different FLA's are included for the pan and the multiplane pan)
Tuesday, December 9, 2008
Wednesday, August 20, 2008
Tutorials Coming Soon
After working with beginner animators in Malaysia for six months, I have a bunch of ideas for tutorials. There's stuff to cover regarding basic Flash workflow tricks, creating Flash friendly characters, setting up your scene in Flash to animate, approaches to animating a Flash character, effectively using embedded symbols and the list goes on and on.
I can cover these in any order so if you have a preference, post a comment. Also if there's something you'd like to be covered, let me know.
I can cover these in any order so if you have a preference, post a comment. Also if there's something you'd like to be covered, let me know.
Friday, December 21, 2007
Water Cycle Tutorial
Update: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the more complex water cycle shown in the swf bellow.
Here is a swf of the type of water animation this tutorial covers.
And as a special treat, I made this lesson a video tutorial.
CLICK HERE TO WATCH!
It's my first video tutorial, so any feedback on what I could do better in the future would be appreciated.
Here is a swf of the type of water animation this tutorial covers.
And as a special treat, I made this lesson a video tutorial.
CLICK HERE TO WATCH!
It's my first video tutorial, so any feedback on what I could do better in the future would be appreciated.
Saturday, November 17, 2007
Using Symbols to Clean Up Traditional Animation in Flash
Update: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the final line work for the example bellow so you can see exactly how I used the symbol to draw the heads.
There are no rules for how you animate in Flash. Most people limit their drawings and just move stuff around because it's fast and easy to get something moving. I'm not going to go into this subject further, I've already written about it here.
But you can use Flash to do completely traditional hand drawn animation. My favorite example is Mr. Coo. And if you're too lazy to follow that link, PLEASE at least watch this YouTube Clip.
Okay, on to the tutorial. While you can traditionally animate in Flash, you can also use symbols to make the process of cleaning up your work easier. But first let me make one thing clear, when you're roughing out your animation, DON'T USE SYMBOLS. Your main concern should be movement, so draw rough and loose on the stage. You do need to be thinking about overall proportions (or else clean up will be hell), but not get stuck on small things like the exact placement of the nostrils.
Here's an example of some rough animation I was given to clean up.
This was all just paint on the stage. No Symbols. I don't actually know who animated this, but they did all the hard work for me. The only part that was going to take some time was cleaning up the head. It's rotating a lot, and moving around all over the screen, meaning if I'm cleaning up the head on frame 25, it'd be really hard for me to compare it with the head I've already drawn on frame 21, or frame 5 etc etc.
If only there was some way to keep the head stationary...But wait, there is!
You do your clean up of the head inside a symbol, then out on the stage, you go to the next frame, move the symbol to the new head's position, rotate and scale the symbol so that the axis and size of the old head matches the axis and size of the new head you're about to draw, go inside the symbol, and clean it up that way. Now when you want to check your head proportions and masses, your old head is right there, making it much easier to keep your heads consistent.
Here are a few shots of my clean up frames, with the head symbol selected, so you can see how I moved the symbol around.
And here's a screen grab of me inside the head symbol. As you can see, I also put a quick trace of the 3/4 model head on a guide layer in the symbol, so that I could reference it for proportions as I was drawing my new heads. For those of you who don't know, you can put anything you want on a guide layer because it won't show up once you're outside of the symbol.
Also the drawing is on a few layers, because I animated his whiskers separate from the rest of his head, and for the last few frames there are three layers because I animated his hair separate from the head and whiskers.
So here is what the head symbol looks like all by itself. (I've slowed it down to 15 frames per second so you can actually see the drawings).
Now you'll notice I didn't actually keep the head sizes consistent inside the symbol. I would have liked to, but our clean up technique required a really thin line weight, so massively scaling up and down the head symbol to keep everything the same size would have resulted in inconsistencies in line thicknesses between frames.
And here is the final cleaned up animation. It's not perfect, I had a day to clean this whole thing so I was moving really quickly and made some bad choices in terms of how far the head should rotate in each frame. And the hair is a bit of a mess, I didn't have time to figure out a good flow for it. Also the final linework wasn't actually red, I just made it that way so that it would stand out a bit more from the background, since the line weight is so thin.
And once more: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the final line work so you can see exactly how I used the symbol to draw the heads.
A quick note. I did this clean up for the studio Dancing Diablo, for a Bronx Zoo commercial. My friend Dan Forgione animated most of the spots, and they came out really great. After being animated in Flash, each frame was exported as a PNG and colored in Painter. Reginald Butler was the lead painter and also did an amazing job.
If you want to see some finished shots, Dan put a bunch on his reel here.
And while we're giving credit, they were directed by Dancing Diablo CEO/ Creative Director, Beatriz Helena Ramos, produced by Joellen Marlow, and commissioned by the advertising agency Deutsch, Inc.
There are no rules for how you animate in Flash. Most people limit their drawings and just move stuff around because it's fast and easy to get something moving. I'm not going to go into this subject further, I've already written about it here.
But you can use Flash to do completely traditional hand drawn animation. My favorite example is Mr. Coo. And if you're too lazy to follow that link, PLEASE at least watch this YouTube Clip.
Okay, on to the tutorial. While you can traditionally animate in Flash, you can also use symbols to make the process of cleaning up your work easier. But first let me make one thing clear, when you're roughing out your animation, DON'T USE SYMBOLS. Your main concern should be movement, so draw rough and loose on the stage. You do need to be thinking about overall proportions (or else clean up will be hell), but not get stuck on small things like the exact placement of the nostrils.
Here's an example of some rough animation I was given to clean up.
This was all just paint on the stage. No Symbols. I don't actually know who animated this, but they did all the hard work for me. The only part that was going to take some time was cleaning up the head. It's rotating a lot, and moving around all over the screen, meaning if I'm cleaning up the head on frame 25, it'd be really hard for me to compare it with the head I've already drawn on frame 21, or frame 5 etc etc.
If only there was some way to keep the head stationary...But wait, there is!
You do your clean up of the head inside a symbol, then out on the stage, you go to the next frame, move the symbol to the new head's position, rotate and scale the symbol so that the axis and size of the old head matches the axis and size of the new head you're about to draw, go inside the symbol, and clean it up that way. Now when you want to check your head proportions and masses, your old head is right there, making it much easier to keep your heads consistent.
Here are a few shots of my clean up frames, with the head symbol selected, so you can see how I moved the symbol around.
And here's a screen grab of me inside the head symbol. As you can see, I also put a quick trace of the 3/4 model head on a guide layer in the symbol, so that I could reference it for proportions as I was drawing my new heads. For those of you who don't know, you can put anything you want on a guide layer because it won't show up once you're outside of the symbol.Also the drawing is on a few layers, because I animated his whiskers separate from the rest of his head, and for the last few frames there are three layers because I animated his hair separate from the head and whiskers.
So here is what the head symbol looks like all by itself. (I've slowed it down to 15 frames per second so you can actually see the drawings).
Now you'll notice I didn't actually keep the head sizes consistent inside the symbol. I would have liked to, but our clean up technique required a really thin line weight, so massively scaling up and down the head symbol to keep everything the same size would have resulted in inconsistencies in line thicknesses between frames.
And here is the final cleaned up animation. It's not perfect, I had a day to clean this whole thing so I was moving really quickly and made some bad choices in terms of how far the head should rotate in each frame. And the hair is a bit of a mess, I didn't have time to figure out a good flow for it. Also the final linework wasn't actually red, I just made it that way so that it would stand out a bit more from the background, since the line weight is so thin.
And once more: I am now offering this tutorial's FLA for 3 dollars through PayPal. Currently it's only available for Flash CS3 and up, but if there's demand I can make it for other versions as well. The FLA includes the final line work so you can see exactly how I used the symbol to draw the heads.
A quick note. I did this clean up for the studio Dancing Diablo, for a Bronx Zoo commercial. My friend Dan Forgione animated most of the spots, and they came out really great. After being animated in Flash, each frame was exported as a PNG and colored in Painter. Reginald Butler was the lead painter and also did an amazing job.
If you want to see some finished shots, Dan put a bunch on his reel here.
And while we're giving credit, they were directed by Dancing Diablo CEO/ Creative Director, Beatriz Helena Ramos, produced by Joellen Marlow, and commissioned by the advertising agency Deutsch, Inc.
Subscribe to:
Posts (Atom)