Flash Animation Cartoon Techniques

20 posts / 0 new
Last post
Flash Animation Cartoon Techniques

Hi All,

i'm a classically trained animator working in 3D games...i really want to get bak into 2D and flash gives the ability to be director, animator, layout artist, sound engineer and coffee maker...well -ish!

i have scoured the web and found some wonderful techniques here:
http://www.keyframer.com

I'm practicing away and reading thorugh forums (there are none i can see dedicated to Flash cartoon animation) and was hoping i could request some help.
-How do u manage layers?
if you have a scene with alot of different drawings how do you manage so many symbols? do you place the different arm poses for example on keys withing a graphic symbol?
Don Perro, you mentioned building your character and distributing to Layers within the symbol, but once u put that symbol on the stage how do u manipulate the different parts?

-How do u truck a camera? do u use a plugin/actionscript or do you wave to scale all components up? this can't be easy in a complex scene but seems to be the only explained method.

-how do u swap symbols mid frame? i can swap a symbol on the first frame of a symbol on an animation layer but if i go to another key it ignores my request to swap to another symbol!

Thanks for any help.

Ash

P.S. hi LarryL, i went to Bally and studied under Stuart Holgate while you were there. u let me into the college....how many companies curse your decision know! Good to see you about.

A lot of things depend on your delivery method. Web or TV/Film. I am strictly web so my methods are different from a lot of the others. I hesitate to even outline them here.

http://flashfilmmaker.com has a lot of good information.

Pat Hacker, Visit Scooter's World.

Hi ashdale62,

Seeing as how you're classically trained, I think the best way to handle layers is to picture them as separate cels. One cel/layer can be the body, another can be for the arms, another for just the mouth, etc. I try to keep things very organized when I work, so I organize my layers into different folders to make them more manageable. For example, I would create a folder named "Head", and within that folder will only be layers containing the parts of the head: the eyes, pupils, mouth, eyebrows, and so on. I think this makes for more efficient animating because I'm only dealing with specific layers that I wish to work on instead of hunting through a long list of layers.

As a rule, I generally create separate symbols for every body part that will have movement. The symbols in my library are organized in the same manner as my layers. I've also encountered the same swap symbol problem. I'm not sure why this happens, but I think it has something to do with the tween. I just try to work around the problem. I insert a keyframe on the layer where I want to swap the symbol. Then I make a new layer and drag the keyframe that I just made onto the new layer. I swap the symbol on the new layer, then delete the original keyframe on the old layer. I hope my directions aren't too confusing. Someone else may have an easier solution.

I also don't do many camera movements in Flash. I like to do my camera movements in Adobe After Effects so that I can have more control over the outcome, but this requires me to have my background and characters as separate elements - just like in traditional animation. For simple camera moves, though, I do just select everything and scale. But I still make sure to keep everything on separate layers so that I can control the degree of the scale for different elements.

You may want to check out "The Flash Animator" by Sandro Corsaro. I think it's a good book that explains animating in Flash in more detail. It gives great tips on how to break up your characters and animating with symbols. He also has another book called "Hollywood 2D Digital Animation" that deals more with advanced animating tips and special effects.

Hope this helps. :)

Sharvonique Studios
www.sharvonique.com

Animated By Sharvonique Blog
http://sharvonique.animationblogspot.com

AWN Showcase Gallery

Thanks for your replies, They are great.
here is my fist test!
Dog Walk- Flash Cartoon Animation

Found all my current questions from doing this, the layers and folders is perfect also the problem with swapping Symbols, i was by PhatKow, is to do with tweens, so u are spot on, it is because of the Sync tick button, u need to change all preceeding keys to have sync turned off (i think it forces the tween to chach the next symbol or some such!)

the camera, i had a thought about this. what if you finished you scene on a symbol!? that way you add this symbol to the main stage and scale and track to your hearts content. it seems to work for me but not sure if there are problems with such a method?

i have 'Flash Cartoon Animation: Learn from the Pros' but have to admit the small tutorials on Keyframer.com were far more helpful.

Thanks Again,

Ash

Thanks for your replies, They are great.
here is my fist test!
Dog Walk- Flash Cartoon Animation

...

You might need Flash help but you don't need help animating!

Wow! some great points there.

the changing an entire scene to a symbol and adding it to a new layer is perfect, wasn't sure it could be done, but you confirmed it for me.

Also the keeping all key drawing for a body part in the symbol and using the instance of is perfect. u genius.

i've gotten a few sound bytes and will be trying to animate something to them for practice on scene changes, direction and sound management, all things i've not looked into in Flash as yet.

KEYFRAMER, i have updated the first link in this thread but incase it's screwed again here it is as text

http://www.keyframer.com/
http://www DOT keyframer DOT com

Hope you find stuff on it of interest, it's a brilliant little resource for cartoon animation.

Thanks
Ash

Thank you Graphiteman, very nice of you.

been animating 3D for too long and love 2D alot more. really want to get back into it and i feel flash can do that.

Ash

Great animating Ash! I feel like I know the dog's personality just by its walk.

I also like your tips on symbol swapping Graphiteman. I think I will incorporate them myself. Containing all like elements under 1 main symbol and just referring to the desired keyframe seems like it will make production a lot simpler.

Sharvonique Studios
www.sharvonique.com

Animated By Sharvonique Blog
http://sharvonique.animationblogspot.com

AWN Showcase Gallery

Great animating Ash! I feel like I know the dog's personality just by its walk.

I also like your tips on symbol swapping Graphiteman. I think I will incorporate them myself. Containing all like elements under 1 main symbol and just referring to the desired keyframe seems like it will make production a lot simpler.

And don't forget, you can have symbols within symbols within symbols. The implication of that is you can have the different elelmnets' actions in seperate symbols then composite the character parts into a final symbol AND THEN place the entire character on the stage on one level. In broadcast they may label such symbols as "comps" in the library.

First off, WoW! Am I ever glad I was pointed to this forum! What a great site!

2nd: Excellent animation of the dog, Ash! Very nice indeed! And thanks for asking the questions that I would have asked. In the 6 weeks or so that I've been banging my head against the keyboard with Flash I believe I've learned more just from reading this thread than at any other one sitting.

The symbols (and Nested Symbols! ooooh) idea seems revolutionary to me and I can't wait to implement it, however some of the answers have raised even more questions and I find myself tripping up on my newbieness again.

Would it be possible to get into a little more detail about the actual creating of symbols of which different instances can be applied? I guess not so much their creation but how to design it for maximum efficiency and usage. Things like when a character turns and some elements need to be hidden while others need to show. How does the animator handle layered elements that must change their order? ie: a character scratches his nose and then reaches behind his head? That sort of thing.

I'd sure appreciate as many comments and suggestions on or about this topic from anyone who'd care to share.

Thanks,
slodog

Hi slodog,

Thanks for adding to this post and great questions! we realy need a 'How to List' don't we. there is so much in flash it hurts:D sorry i don't have the know how to answer them, although i presume it just involves alot of Planning. a good rule of thumb is spend have your time planning and half your time animating (not sure if the latter part is saying it wll take half the time if you plan...criptic animators:D)

Here are some questions i asked and had answered by PhatKow over on Macromedias flash forum. hope these can help

Q--When copying a key back onto another (say i modify the last key and copy it back to the first in a cycle or such) why does flash insist on making a second key next to it? i delete this every time it appears.

A--when copy/paste more than 1 keyframe, flash decides to create additional keyframes after your pasted ones that contain whatever was previously on the timeline. I have not found any rhyme or reason to it. I'm going to push to get this "feature" resolved for the next release.
-----------------------------------------------------------------------
Q--occasionally when i motion tween i get either Broken lines (is this when an object hasn't been made a symbol or such)

A--yup - sounds like you simply are either not converting object to a symbol BEFORE the motion tween or you have more than 1 symbol on that layer .Cardinal rule: 1 symbol per motion tween per layer and always convert to a symbol before making your 2nd kayeframe and applying motion tween.
-----------------------------------------------------------------------
Q--when i animate to sound in flash it runs fine but when i publish it's out of sinc, am i missing a sampling option or is it to do with the sound or animation skipping frames?

A--Set sound to STREAM - sounds like it's set to EVENT.
-----------------------------------------------------------------------
Q--when publishing to an AVI movie files don't Loop/Play. the first frame is shown and it moves about the scene as expected but the actual movie won't play. Another obvious setting i'm missing?

A--sounds like you are using Movie Clip symbols in yer movie - which is totally fine if your intended output is to the flash player. Movie Clips are dynamic and meant to be played during runtime - when exporting to video everything must be on the main timeline and/or in Graphic symbols. Graphic symbols will be in syn with the main timeline and each other. Movie Clips are not in sync with anything - the have independant timelines. So when exporting to true video format, nothing beyond frame 1 will be rendered.
convert all MC's into graphic symbols.

ADDITIONAL INFO:
MOVIE CLIPS: are dynamically (targeted by actionscript), loop by default, wont render beyond frame 1 unless compiled to flash player. They can have any number of frames and layers.

GRAPHIC SYMBOLS: can have any number of frames and layers. Are in sync with main timeline (useful for cartoon-style animation), can be played while in the flash authoring environment (scrub the timeline show the animation) - good for timing your animations. Can be controlled with the Properites Panel (Loop, Single Frame, Play Once).
-----------------------------------------------------------------------
Q--is there a way of making a hierarchial link between layers or Graphic Symbols. like forward kinematics, so when i rotate the shoulder the forearm and hand follow and so on down the chain?

A--Nope - would be nice - i have made a request to have MOHO-style "bones" animation as part of flash (www.lostmarble.com). But for now see this:
http://www.mudbubble.com/db_tutorials/db_tut_editcenter.html
-----------------------------------------------------------------------
Q--to convert a movie clip to symbol

A--just select the instance on the stage and from the drop doan in the properties panel select "graphic".
-----------------------------------------------------------------------
Q--i animated on the main stage and presumed i could convert the animation to a Graphic or movie symbol later

A--to place animation in symbol:
select all frames (click and drage across all layers/frames).
right click over black - copy frames.
Library > create new symbol.
right click over frame 1 > Paste frames (not "copy"/"paste" BUT "Copy Frames"/"Paste Frames").

Hope these help others.
Thanks
Ash

Thanks, Ash

The last part, "presumed i could convert the animation to a Graphic or movie symbol" is the one that really has me perplexed at the moment as the copy frames(from the main timeline)/paste frames (in graphic symbol edit mode) doesn't seem to be working for me. Works fine when creating a MovieClip symbol but for some reason the paste frames is greyed out when I try to paste frames copied from the main timeline.

Er, perhaps I'm missing a step or something but, as you mentioned about the planning, well, it's not such a great hurdle to just do all the creating in symbol edit. I know that when I finally discover what I'm doing wrong I'll have a good chuckle at my own expense. :)

When selecting the frame you want from a given graphic symbol is there no way to preview that selection to be sure the right one was picked? I'm reading and re-reading through the help chapters on the topic but haven't yet found the answers I need.

slodog

Hi slodog,

A friend of mine just capture this for me and converted it to an AVI. the only things missing are the create symbol button which is off screen and the Tabs for the current scene and Symbols.
other than that i hope this explains correctly, it seems to work for me everytime and since i'm new to this i'm not sure if i'm confusing things, anyways please see Link:

Create Symbol From Timeline.avi
SAMPLE AVI

Right Click and save to disk.

Thanks
Ash

Hi Ash

Thanks very much for taking the time to provide the .avi! My player couldn't seem to locate the proper codec so I couldn't play it, but I appreciate it just the same.

It turns out that I wasn't selecting the frames properly with the mouse but usually when I figure what the mistake is I stop repeating it. :) Was able to start creating Graphic Symbols by copying off the timeline straight away and without much incident after that.

It's making good sense to me now and understand a bit better the difference between the mc symbols and the graphics. Essentially, from what I gather so far, it's good practice to create a graphic symbol that contains the keys I want, selecting the frame from the symbol in each keyframe and do the in betweening on the main timeline. It's a little more clear to me now why the options in the Property Inspector includes the Single Frame (Frame # selected in the box), Play Once (plays the graphic as it we're a mc), and Loop. If Loop or Play Once is selected it'll "play" the symbol as if it were a movieclip with the exception that it's tied to the main timeline.

Does that make sense??? :-P

Was your dog animation done this way and is the entire character one graphic symbol?

thanks,
slodog

Hi Slodog,

Sorry forgot to add a link to the codec:-
http://www.getafile.com/cgi-bin/merlot/get/techsmith/TSCC.exe

Aye, you make a good explanation of MC compared to GS. it seems the most obvious (when explained) use of MC is for action scripts and games as such so really for cartoons GS are all thats needed.

Delilah/Dog walk was done as lots of parts, 23 i think! then when i realised i would want her walking along a background and add other elements i made her into a symbol. it's amazing how many symbols within sybols you can have.
the tails animation is a nested symbol also the eye!

Cheers.
Ash

Ash,

It's amazing how how much one new wrinkle in the grey matter can make the tedium fun again. :-D

This topic alone has cleared up some other questions that had been bouncing around in the back of my head too, like "how can I reduce the clutter on the timeline?". Bringing a character to life is one thing but creating an environment for him to play, as well as adding other characters to play with was a concept that had my head reeling with visions of timelines of epic proportions!

The nested symbols is another great boon, I find, since motion tweening and shape tweening give very different results. I've had more than one good laugh at my own expense as I watched hours of work "blow up" and do all sorts of weird stuff when I tried to play it. -grin-

I had been playing around with a dog character when you'd first posted Delilah however mine is a more cartoony, bouncy-gait, tongue-flailing type of animal... hardly an animal at all. He's on the shelf for the time being and I decided to try a bird in flight (yeah, go for the easy stuff straight off!) which has been some fun.

Thanks to you, Graphiteman, and these forums for all the great help. Finding ones way, especially in a new medium, is one thing but getting pointed in the right direction makes it much less daunting. :-)

thanks,
slodog

.............. u genius.

..............

Not ! I assure you. :)

I learned the hard way. Self-taught in Flash for a couple years but I used the timeline as a glorified dope sheet and didn't bother with swapping, instances and such. Then I got a job on a broadcast cartoon and these tricks made the rounds and somehow escaped me.

But come to think of it, in hindsight the studio didn't know much more about flash at that time. I did a well animated test but with the benfit of hindsight looking at my timeline they should have been able to tell what I didn't know.
All it took was someone spending 10 minutes with me explaining.by then it was too late and my reputation as being too slow was secured.

More than happy to share if it saves someone future grief.

Exporting layers from flash

Hi All,

Actually there is an awesome tool to do just that. You can have an unlimited number of layers in Flash. Then choose export, it will export in 3 formats, SWF, Quicktime, and PNG with alpha support. You can select frame ranges, and layers to export to. It even has the ability to change DPI upon export. An awesome tool, go to: http://www.4gsw.com

--
Tazz, animator

Flash Layer Exporting

Hi All,

Actually there is an awesome tool to do just that. You can have an unlimited number of layers in Flash. Then choose export, it will export in 3 formats, SWF, Quicktime, and PNG with alpha support. You can select frame ranges, and layers to export to. It even has the ability to change DPI upon export. An awesome tool, go to: http://www.4gsw.com

--
Tazz, animator

Hi All,

i'm a classically trained animator working in 3D games...i really want to get bak into 2D and flash gives the ability to be director, animator, layout artist, sound engineer and coffee maker...well -ish!

i have scoured the web and found some wonderful techniques here:
http://www.keyframer.com/ .

Don't work.

I'm practicing away and reading thorugh forums (there are none i can see dedicated to Flash cartoon animation) and was hoping i could request some help.
-How do u manage layers?
if you have a scene with alot of different drawings how do you manage so many symbols? do you place the different arm poses for example on keys withing a graphic symbol?
Don Perro, you mentioned building your character and distributing to Layers within the symbol, but once u put that symbol on the stage how do u manipulate the different parts?.

In the properties area there's an "instance of :" tab. If you, for example saved 6 mouths in one symbol (doesn't have to be as a movie clip. Movie clips are only important if you are manipulating by actionscript and if you save as a movie clip it won't show when you export to an avi or mov) AS A GRAPHIC. (Yes an animated element as a graphic symbol) At that "instance of :" tab you can set that symbol to play in that layer as a "loop", to "play once" or "single frame" which will hold that symbol until another frame of the symbol is chosen as an instance. Next to that area you will see a number. That number is the frame of the animation from the symbol from which you want to play.
There is a swap button and that does what it says but you won't need to swap mouths or legs or what have you if you keep all those respective elements for example under one symbol.

-How do u truck a camera? do u use a plugin/actionscript or do you wave to scale all components up? this can't be easy in a complex scene but seems to be the only explained method.?.

Depending on what you are doing your layout may have to be bigger than the stage.
What I do is once the animation on the stage is done, copy all layers. Under insert>new symbol and paste your entire scene under one symbol. Scale and motion tween that enitre scenario as you would any symbol.

-how do u swap symbols mid frame? i can swap a symbol on the first frame of a symbol on an animation layer but if i go to another key it ignores my request to swap to another symbol!.?.

Perhaps you misunderstand what that little number box on the "instance of:" panel is. It is the frame of your symbol not the timeline you are working in. If you input frame 60 and your symbol is not made up of 60 or more frames then it just can't do it.