Search form

Making Flash Look Like Cel Animation?

32 posts / 0 new
Last post
Making Flash Look Like Cel Animation?

Hi everyone. I'm using Flash to make a cartoon soon, and I'm doing it frame-by-frame. In general, Flash has a pretty distinct look to it though, and I'm trying to get more of an old-fashioned cel look. I'd use the term "retro" but that might be confused with the blocky, thick-line style in Dexter's Lab, Powerpuff Girls, etc.

I'm not entirely sure how to go about making Flash look like cel animation though. Any ideas?

So far I've planned to use painted backdrops instead of vector ones, and use less-vibrant colours. I'll also use pretty thin lines for the character animation, and hopefully this should help me get the effect I want.

Does anybody know of any other techniques or tips that might be useful in making it look like cel animation? Or to make it look like an older film? I was considering adding some simulated film grain or dust to "age" the picture, but most of the time that "fake" aging is very over-the-top and distracting.

Basically the look I want is something like 60's-early 80's animation. I know that's considered to be the 'Dark Ages' of animation, but I kinda like the look of animation from that era.

But didn't you just say...

So now thumbnails have been around since before the thirties? Wow, I didn't realize the web was that old. :rolleyes:

Rather than chastising everyone else, why not just offer a mea culpa and move on?

Mea culpa! But thumbnails have been used in the graphic arts since their beginnings, they amount to nothing more than sketches, not keyframes.

Pat Hacker, Visit Scooter's World.

EustaceScrubb, that's been unbelievably helpful! Thanks! Those bloglinks are really encouraging, and I'll definitely check out TVPaint too! Thanks! :D

but it's really "radio with pictures"* and not animation.

* Can't remember who invented this term.

If I recall, "illustrated radio" or "visual radio" was the term coined by Chuck Jones to describe the vast majority of what was being churned out by H&B and other television animation companies at that time.

"EustaceScrubb" has left the building

seems i missed this thread. my 0.02c are to plan things on paper i.e get your key poses doen traditionally.

take them to Flash. a bunch of your shots might need additional in betweens, some might not.

the look, would also depend on colour and lighting. both of which you can control if you do your ink & paint in photoshop or gimp.

So what are your creating your work in programwise? You don't sound like you are creating them in Flash...why not? Frame by frame, does mean you have no concept of timing?

How long have you been using Flash and which version?

Pat Hacker, Visit Scooter's World.

Hi Cap'n. What style are you looking to animate in? Pinnochio? GI Joe? Flintstones? Star Trek? All these are animated traditionally from that time period. If you let us know what you want it to look like, we can maybe give you some better ideas to help you.

Aloha,
the Ape

...we must all face a choice, between what is right... and what is easy."

Perhaps give us a link to what you see as cel shaded...lot's of definitions of that out there.

Pat Hacker, Visit Scooter's World.

If you're using a Wacom, this isn't that hard. But you'll basically be doing a lot of drawing. Don't use motion tweens. You can use them as guides to get from point A to point B, but always fine tune positioning and take the tweens out.

Thumbnail poses by hand, scan them in and use them as a guide. Draw motion arcs on another layer. Rebuild your char every frame. Basically, don't let Flash make ANY decisions! Think in classical terms: antic/over-shoot/ settle. Watch a piece of animation with the kind of timing you want frame by frame, sketch and take notes. If you know what you're doing, Flash won't stop you from doing a decent piece of animation. But don't expect to get a classic style of animation if you leave it on autopilot. And avoid those damn cutesy little eye blink noises!

Thumbnail poses by hand,!

Do you mean keyframes?

Pat Hacker, Visit Scooter's World.

No; he means thumbnails. Two completely different things.

To clarify, I'm doing almost everything in Flash, but I'm not planning to use any tweens or anything (even just a little bit of that seems to ruin the effect I want). I'll be animating each frame by hand (on twos, at least, if not threes).
I can draw and animate in a classical style, but what I'm looking for are techniques to make it look like it was filmed with cels and a rostrum camera, rather than done digitally-- Perhaps little ideas like "don't use pure blacks for the lines, use a dark grey instead" or "don't use really bright colours that wouldn't be possibly on a TV monitor".
Those ones are kind of obvious though, and I guess it's sort of a silly question anyway... I'm trying to make it look analog as opposed to digital, but without actually doing it the old-fashioned way. I'm not sure if it's really possible (but then again, it's sort of a matter of opinion).

So animators use thumbnails as a reasonable course in animation? I always thought thumbnails were a secondary graphic to a bacic animation. One that allowed those on lower level computers and isps to sample work without having to down load the entire piece. Animators now use them for compiling?

Pat Hacker, Visit Scooter's World.

To clarify, I'm doing almost everything in Flash, but I'm not planning to use any tweens or anything (even just a little bit of that seems to ruin the effect I want). I'll be animating each frame by hand (on twos, at least, if not threes).
I can draw and animate in a classical style, but what I'm looking for are techniques to make it look like it was filmed with cels and a rostrum camera, rather than done digitally-- Perhaps little ideas like "don't use pure blacks for the lines, use a dark grey instead" or "don't use really bright colours that wouldn't be possibly on a TV monitor".
Those ones are kind of obvious though, and I guess it's sort of a silly question anyway... I'm trying to make it look analog as opposed to digital, but without actually doing it the old-fashioned way. I'm not sure if it's really possible (but then again, it's sort of a matter of opinion).

Color is a personal issue. Stay within your vision. As to outlines I'd go with something less than black, but then that's going to depend on your concept as well. I don't do a lot with line, I prefer a painterly attitude.

Semi transparent overlays over backgrounds can help to give you a sense of lighting. If you've never seen that and your interested perhaps I can post some examples.

Pat Hacker, Visit Scooter's World.

So animators use thumbnails as a reasonable course in animation? I always thought thumbnails were a secondary graphic to a bacic animation. One that allowed those on lower level computers and isps to sample work without having to down load the entire piece. Animators now use them for compiling?

Animators use small, low-detail sketches, or thumbnails, to plan out poses, positions, attitudes, etc. It's a technique nearly as old as the medium itself. Every animator worth his salt will do thumbnails before they start on a shot.

Tools like Flash allow for these thumbnails to be imported and timed to see if a shot is working, saving further time and effort in the animation process by finding out early if something isn't working.

Yes, I was talking about keyframe poses. If you look at the extras on Toy Story, the animator shows a page of thumbnails for Woody. They're used as a guide like a Leica reel for posing out the keyframes. It's pretty common.

I didn't mean any insult, Captain. It sounds like you know your stuff. On my student Flash film, I started the backgrounds in Flash. Just built the basic structure in vector, then did a 500 dpi image export, and opened it up in Photoshop. This softened the lines just a bit, and allowed for more texture in the color.

If you exported the animation as an image sequence and colored in Photoshop, it might give you a richer look. But it would also be a lot of work and eat up some major memory. I also got a nice flicker by putting a layer of black over everything and varying the alpha on that layer between 5 and 10%. But that was for an image actually on a movie screen. Good luck!

Animators use small, low-detail sketches, or thumbnails, to plan out poses, positions, attitudes, etc. It's a technique nearly as old as the medium itself. Every animator worth his salt will do thumbnails before they start on a shot.

Tools like Flash allow for these thumbnails to be imported and timed to see if a shot is working, saving further time and effort in the animation process by finding out early if something isn't working.

Sounds good, but not somthing I've ever picked up on while researching animation, either computer or traditional. Thumbnails are more a web term.

Pat Hacker, Visit Scooter's World.

Animators use small, low-detail sketches, or thumbnails, to plan out poses, positions, attitudes, etc. It's a technique nearly as old as the medium itself. Every animator worth his salt will do thumbnails before they start on a shot.

Tools like Flash allow for these thumbnails to be imported and timed to see if a shot is working, saving further time and effort in the animation process by finding out early if something isn't working.

Are these thumbnails by chance part of a storyboard?

Pat Hacker, Visit Scooter's World.

Are these thumbnails by chance part of a storyboard?

No. They are some times based off the story board, but the animator draws them to work out the actions and poses for his or her shot. They are not full sized drawings.

Storyboards get across the general pose/action/emotion of the character. Thumbnail drawings break the action of the shot down a little more. Thumbnails are little more than doodles on 3" x 3" post-it notes or the like.

Thumbnail drawings
http://www.awn.com/tooninstitute/lessonplan/thumbnail.htm
http://photos1.blogger.com/blogger/508/2740/1600/mermaid-1.jpg
http://photos1.blogger.com/blogger/508/2740/1600/55530499_0b202bdfea_o.6.jpg

Cap'n, if you have After Effects I would recommend putting a subtle film grain texture over your final animation. This will soften the sharpness of Flash's vector lines. It sounds like you know what you are doing. Remember to show us your short when it's finished. We'd like to check it out.

Dr. Spector mentioned to scan in your thumbnails. If you have a wacom tablet, I'd just draw them directly into Flash and save some time.

aloha,
the Ape

...we must all face a choice, between what is right... and what is easy."

I bow to the boss.

Pat Hacker, Visit Scooter's World.

Sounds good, but not somthing I've ever picked up on while researching animation, either computer or traditional. Thumbnails are more a web term.

The term has been around in traditional animation since the 1930's .

Drawing small , exploratory sketches , referred to as "thumbnail" drawings (or "thumbnailing" a scene) is a well-known term and procedure in traditional animation and the terminology/ practice has been carried over into computer animation by Pixar and others.

Examples abound , but look particularly on pages 236 - 237 , page 292 (the thumbnails of the pig running on the exposure sheet) and page 412 of "The Illusion of Life" book by Frank Thomas and Ollie Johnston .

AnimationMeat.com has posted notes called The Art of Thumbnailing, illustrated with Milt Kahl's thumbnail drawings from The Rescuers. The Spline Doctor's blog (run by five Pixar animators) has quite a bit of discussion of thumbnailing and examples of thumbnail drawings done for Pixar movies as well as thumbnails from hand-drawn Disney films:

Spline Doc's on Thumbnailing

Heck, if you don't do your thumbnails before you start animating you're going to have a hard time of it once you get into the sweatbox.

"EustaceScrubb" has left the building

Good examples from Animated Ape , too . I was posting before I saw his post or I would have let that suffice .

"EustaceScrubb" has left the building

Don't get too smug every one. Dr. Specter did admit he was talking about keyframes. And thumbnails are prevalent in cartoons, graphic arts and playwriting way before the thirties.

Pat Hacker, Visit Scooter's World.

I'm trying to get more of an old-fashioned cel look.
I'm not entirely sure how to go about making Flash look like cel animation though.

Take a look at the work of a Canadian studio called Copernicus .

Murray Bain, one of the partners at Copernicus has a blog where he discusses some of their techniques.

Cold Hard Flash did an interview with Copernicus director Brad Cayford on the making-of a music video that Copernicus did for The Jimmy Swift Band song Turnaround . The interview discusses the hybrid techniques Copernicus uses to make their Flash-based work look more like traditional cel animation.

Recently I saw a short film made by Anik Rosenbaum, drawn frame-by-frame in Flash using a Wacom tablet called The Autumnal Walk which looks really nice.

"EustaceScrubb" has left the building

Cap'n, if you have After Effects I would recommend putting a subtle film grain texture over your final animation. This will soften the sharpness of Flash's vector lines. It sounds like you know what you are doing. Remember to show us your short when it's finished. We'd like to check it out.

Dr. Spector mentioned to scan in your thumbnails. If you have a wacom tablet, I'd just draw them directly into Flash and save some time.

aloha,
the Ape

Thanks a lot! I'll look into getting AfterEffects. :) And yeah, I'm using a Wacom tablet, so I'm just drawing them right into Flash.

I'll definitely post it here when it's done, but right now it's still in the conceptual stage... I'm still tinkering with the character designs, I've done a bit of the music for it, and written about half the script... No animation yet though.

Don't get too smug every one. Dr. Specter did admit he was talking about keyframes. And thumbnails are prevalent in cartoons, graphic arts and playwriting way before the thirties.

Hey! we're allowed to be smug, We're animators, this is our media. We all think we know what we're talking about and we have the right to get pissed off at whomever threatens what we believe to be true! :p just kidding, all is vanity

This is a helpful thread, I've been wondering the same thing for my short. I've been doing all the rough animation in Flash but was wondering if there was a better way/nicer program to do the cleanup. Flash works well enough for animating, but it's so darn precise in the line-making. I guess exporting and redrawing each frame in Photoshop would take too much memory, huh? I'd just really like to get away from Flash for the cleanup altogether, if I can.

Right now, this is pretty much how my rough animation looks like in Flash.

That's pretty nice, Komori. If it were me who made it, I would just ink it directly in Flash. I will either use the line tool or brush tool. Painstaking, I suppose. Right now it looks wonderful already; I would just close the areas up and fill them up with color. But that's just my opinion.

Exporting to Photoshop and cleaning it up there too would probably look even better. The possibilities here are endless!

Blog

First off, great work Komori. Looking forward to seeing a a cleaned up version.

Second, I totally agree with using After Effects for film grain and things like that. They also have that option in Premier. But I also think that if you were to add a slight "drop shadow" to your characters, it might give it a nice cell look. I used to notice slight shadows coming off the characters in older Simpsons cartoons. I assume its from the stacking of individual cells. I think they do the same thing with the Southpark shows now.

Hope that's clear. Just another option.

KalEl118

This is a helpful thread, I've been wondering the same thing for my short. I've been doing all the rough animation in Flash but was wondering if there was a better way/nicer program to do the cleanup. Flash works well enough for animating, but it's so darn precise in the line-making. I guess exporting and redrawing each frame in Photoshop would take too much memory, huh? I'd just really like to get away from Flash for the cleanup altogether, if I can.

Right now, this is pretty much how my rough animation looks like in Flash.

Your rough test looks good .

I agree with you that Flash is not ideal for precise clean-up, though there are people doing amazing things with Flash , which shows how resourceful and adaptable some artists can be. (I've never been able to warm up to Flash, but that's just me. I prefer TVPaint ) If you want to keep working in Flash ,but have more of a classic cel animation look to your final clean-ups take a look at the work of Jessica Borutski. She does some really nice clean-up/inking in Flash.
I find her work very inspiring from a design standpoint and from the expressive animation she is able to get done using Flash.

Search through her current blog page and archived blog pages for examples.

[URL=http://jessicaborutski.blogspot.com/]Jessica Borutski blog
[/URL]

I'm thinking particularly of the drawings shown in these posts on her blog:

Jessica Bortuski Flash Clean Ups 1

Jessica Borutski Clean Ups 2

Jessica Borutski Clean Ups 3

(click on any of those images on her blog to see them larger).

I have in my notes that Jessica says she uses " a Wacom tablet in Flash for the inking. Use the Pen tool. Smoothing set to -50 . " I also have in my notes that she draws the character layout poses first on paper.
Then import to Flash to clean it up. Break the character up in symbols. Group the body parts into symbols. Then from the first pose the other poses are created. Redraw a lot of different drawings within a symbol.
As ann example: create an arm symbol, then draw many arms within it. . A good way to stay away from the typical "Flash" look is NO "TWEENING" EVER, EVER!!!! As long as every pose you create is beautiful, and instead of letting the computer do the "tweening" you actually animate between the poses/symbols it will look like traditional animation.

Her film , "I Like Pandas" is on YouTube , and a few brief test clips from her current film in production "The Good Little Bunny with the Big Bad Teeth"
so you can see this technique in action.

Good Little Bunny test clip 1

Good Little Bunny test clip 2

I Like Pandas

------

You could also work in a bitmap application like TVPaint , then if it's important to you to have the final in vector format you could convert your bitmap clean ups by importing them through a program like Delineate or Illustrator "Live Trace" (auto-tracing bitmap to vector).
If your bitmap clean ups are very clean and saved out at a high-resolution then they will be relatively easy to convert to vector with Delineate or Illustrator Live Trace. Delineate makes the images into SVG (scalable vector graphics) files, which then have to be opened in Illustrator , batch processed to save out as AI files , then can be opened in Flash or ToonBoom. I believe the next version of Flash is supposed to have the capability of directly importing SVG files, so this step would not be necessary . It sounds more complicated than it is , but it is a bit of an extra step to get the bitmap clean ups converted over to vector , then imported to Flash or ToonBoom for the final .

You could also import the bitmap roughs animated in TVPaint to ToonBoom Studio or Flash to do the final clean ups on a vector level. I've never done this , but I've heard of it being done successfully. I prefer to do both my roughs and cleanups in TVPaint, then if the final drawings need to be in vector format I will convert to vector using one of the methods mentioned above.

"EustaceScrubb" has left the building

Don't get too smug every one. Dr. Specter did admit he was talking about keyframes. And thumbnails are prevalent in cartoons, graphic arts and playwriting way before the thirties.

But didn't you just say...

Sounds good, but not somthing I've ever picked up on while researching animation, either computer or traditional. Thumbnails are more a web term.

So now thumbnails have been around since before the thirties? Wow, I didn't realize the web was that old. :rolleyes:

Rather than chastising everyone else, why not just offer a mea culpa and move on?

Actually, my Dad said he had to crank-start his first computer. It would just sit there and backfire for a minute-- of course, they were steam-powered back then.

I just love to sit with some thumbnail paper and a .5 tech pencil, then make a leica from that. It's pure composition and timing. In Flash, they just make the cartoon from there. I think going to boarding would be a lot better, of course. The ability to split things up into different layers easily is the main thing I like about digital boarding. It takes you right into layout.

On Sept 1st, ToonBoom Studio 4 comes out. That's where I'll jump on. I've used Harmony, and it's pretty neat. Of course, Studio's $300 and Harmony is thousands. But many of the tools and interfaces are the same. Studio generates a standard X-sheet, and has nice, IK, camera-based multiplaning abilities. But my favorite feature's the digital animation disc. You press ctrl and alt and you can rotate the image to any angle. The Wacom feels really incomplete without it, now. The disc also comes with Studio Express which is under $100.