2D Character Animation in Adobe Flash - Part 1

[superparodyboy]

i keep messing up on making different actions it all becomes the same plz help

[Base14Productions]

@superparodyboy make sure you're naming them differently and watching where you are in the breadcrumbs

[FrostZap]

how do you make the legs and body and head go in the back..

[Base14Productions]

@FrostZap Send the layers to the bottom to reorder the elements on each layer.

[8comicbookman8]

How much does this software cost?

[SideFlame]

do you still do animation? i'll sub if you do more tuts on it

[AbaiiChalDrin]

I dont have illustrator :(

Do you know any portable version?

[chubloo]

get a quieter keyboard

it's deafening

[mojoj87]

all part of the body is symbol Graphic? why don't you use movieclip?

[latinamericangascan]

Thanks, Base14Productions!

You are the best.

I can now make awesome animations :D

Also BTW your tutorial is the only that worked for me.

[3dgamerman]

Mind blown at the 3d effect.

[mansibabbar18]

So do i import .psd or different parts of image in .tif?

[Base14Productions]

@mansibabbar18 This tutorial uses vectors, but if you want to use bitmap, then psd is best because it has the most reliable transparency.

[mansibabbar18]

@Base14Productions okay just one more ques, coz im a beginer, do u draw vector in Flash or photoshop? I dunno flash actualy, so i hav no idea :3

[Base14Productions]

@mansibabbar18 Draw vectors in Illustrator if you can (it's best for drawing vectors), or Flash if that's all you have/ You can draw vectors in Photoshop too but it doesn't make sense if you're taking it to Flash.

[mansibabbar18]

@Base14Productions Thanks!! im on it now!! :D

[Kaos0111992]

Thank you, but I had found out what I was doing wrong, I never noticed in your video how you said to use Classic Tween when in CS5. Thank you! And if you dont mind me asking, when are more tutorials coming out? Thank you again.

[Kaos0111992]

NEED HELP! It wont let me motion tween, keep getting a message about untweenable layer or something. Im doing exact;y what you say do D:

[Base14Productions]

@Kaos0111992 Trying using separating all elements onto individual layers and then using the "Break Apart" command to reduce them to basic geometry. Then build them back into symbols.

[K3N1203]

hi awsome tut btw :D u rock :D, can u do another one but with the point of hair going the other way cuz i cant seem to do it xD

[SadderYetWiser]

This tutorial rocks! Make more, please.

[dratinifan13]

Thank you for existing. Animation is what I dream on doing with my life.

[intaradearseventeen]

thanks !

[TheMatt7000]

Thank you Sooooooooooooooo much!!!!! OMG! This is the only Flash tutorial that actually shows you how to do something! LMAO

[shroomgurl]

thank you! this is very helpful

[miniroll32]

Hi there,

I've drawn some backgrounds for an animation I'm going to make, I was wondering if it would be possible to scan and import them into Flash for layout purposes?

Or alternatively, since I'm drawing the animation with a tablet, would it be better to animate in Illustrator?

Thanks very much!

[Base14Productions]

@miniroll32 Sure you can import scanned images into Flash, just save them as jpg, tif, psd, or whatever and import them! You can use the Live Trace feature in Illustrator to convert them to vectors too, if you want. Just don't try to actually ANIMATE in Illustrator. That would be very frustrating.

[miniroll32]

@Base14Productions Thanks a lot, thats really helpful! I was just interested because Illustrator obviously offer a lot more in terms of editing, such as many more brush styles etc :(

Would it be possible to save the animation in Flash, and then import it into Photoshop to add some effects to certain frames? I'm sure there's an animation mode on there

[Base14Productions]

@miniroll32 Yes, Recent versions of Photoshop have an animation panel that let's you edit video or image sequences frame by frame. It offers a lot of interesting potential.

[TFproductionsmedia]

I've distributed the graphic symbol into layers but the names of the layers just show up as dots so I can't tell what's what unless I click on the layer on the stage, is there a way to fix this?

[Base14Productions]

@TFproductionsmedia The layer names just show up as dots? Is that because you've just not provided enough room in the panel for the names, and they're just being represented by a ellipsis? Expanding the names area will fix this.

[TFproductionsmedia]

Ah yes, thank you, how did I miss this. :0)

[sakurai126]

Are there any tutorials on creating the character in illustrator first? XD

[Revanchist8525]

i really want to make those type of graphics how did u do it?

[Base14Productions]

@Revanchist8525 The style was designed using shapes with no strokes and soft shadows in Illustrator, then animated in Flash and After Effects.

[Simstyle12]

i have anime studio and its iight. but this looks fun, but idk.

[macjsus]

In illustrator are your poses individual symbols, or do you just have raw vector shapes drawn on a single layer?

[Base14Productions]

There's no such thing as symbols in Illustrator. They're all raw vector shapes on one layer. I wait until I'm in Flash to distribute to layers.

[macjsus]

There are symbols in illustrator, you convert an vector are work in to symbols. The symbol tab is right next to the brushes and appearance tabs, in the standard workspace. In CS3 and CS4 you can export symbols from Illustrator to flash as a graphic or movie clip. The select your artwork and click the new button at the bottom of the symbol tab, and a pop-up will ask you if you want a to create a movie clip or graphic symbol.

[Base14Productions]

Ah, you're right that Illustrator has symbols that can produce instances like in Flash. But unlike Flash, they don't have embedded timelines.

[macjsus]

Yeah for animation in illustrator, you can export layers as frames, kind of like in photoshop to make gif files, however illustrator can export to animations as gif, of swf, becuz it is vector.

[Ruok98Reborn]

confused. when I hit tween the head just like slides downward.. lol any idea what Im going wrong?

[Base14Productions]

This is more than likely caused by not having a consistent pivot point from one keyframe to the next.Make sure you change the location of the pivot point BEFORE copying a keyframe, and then never change it afterward.

[Ruok98Reborn]

thanks so much it worked

[innerguardianXIII]

these maybe be noobish question's but, whatever you draw or have in Adobe Photoshop, you can use in Flash CS3? if so, is it possible to scan a picture, upload it onto Photoshop (maybe sproose them up a bit on there aswell) and upload THAT onto Flash?

[04dstorey]

yeah you can if the background of ur picture is transparent in photoshop it'll be transparent to flash ive tryed it with photoshop cs4 and flash 8

[innerguardianXIII]

awesome, that would come in handy, and also 1 last question, when you do upload them onto flash, doe's the program automatically do that "different body part symbol" thing? like what Base14Productions did with the wing and shadow

[Base14Productions]

If you're talking about "Distribute to Layers," it doesn't automatically do that. You would need to turn all the bitmaps into symbols first, them select all of them and use Modify > Timeline > Distribute to Layers.

[Base14Productions]

Sure. Flash can import any common bitmap file, such as png, jpeg or psd.

[innerguardianXIII]

aaahhhh okay, thank you very much :)

[Ninnmm]

Yes, you can.

[innerguardianXIII]

well thanks for the reply but im kind of lost, what do you mean?

[ArbiterFufalonne]

This is Ninnmm's other account.

What you can do it draw something on photoshop, and select it, then copy it and paste it into flash.

[innerguardianXIII]

oh bit by bit, now i get it, awesome, cheers a bunch :)

[billytalent132]

couldint find the download page : (aney one help me out ?

[Base14Productions]

You can find the link by clicking "more info" under the video description.

[Derkunstler]

Sorry. I´m new to Flash and don´t know some basics yet. How do you select the shape behind, as you did first with the head, and then got the eyes and beak to the screen again? (at 3:50)

The tutorial looks great! Thank you!

[Base14Productions]

What happened there was when I converted the head to a symbol, it was automatically brought to the front, covering up the eyes and beak. I then sent the head symbol to the back to make the eys and beak back o top again.

[FunkyFredMoviez]

this is awesome! i learned so much. but two things: um how do you put all of the different actionscriptthings together to make a full animation? and how would you make like blinks and expression changes in the character? is that different actions?

[Base14Productions]

None of these animations involve action script, they're all symbols and the way I am animating, each symbol contains a character action, such as a head turn or a run or jump or whatever. Particular face animation is extra detail that can be added with an animated symbol. I'll be doing a tutorial in the future to show how I combine all the character animation into one scene.

[TheRealHITMAN666]

LOL, all the characters emotions, PLUS. the character on fire! XD

[svideomonkey08]

you should make a tutorial on making characters in illustrator XD

[svideomonkey08]

sweet vid. ok a couple questions. at the end you said you could import your action into the animation. So you could import your character into a background and everything? and could you upload more than one character to the animation? thanks!!! 5*

[Base14Productions]

Good question! Once I've finished the character animation in Flash I export it as a .png sequence and import that as footage into After Effects. Then I add backgrounds, props, etc. I'll be releasing a tutorial about that process soon.

[slyrocks3]

That's what I thought. Thanks though!

[slyrocks3]

How can you download this for free? everyone I see costs 700$!

[Base14Productions]

You can download and try Flash for free from Adobe's website for 30 days, but after that you will have to pay to keep using it, I'm afraid. If you're a student, you can get a discount, which I recommend. It is well worth it.

[svideomonkey08]

ok thanks! that really helps a ton! i hope to see the tutorial soon!!!

[iamgabbyface]

Its hard to follow, maybe next time spice up the volume a little bit more.

ANd perhaps use some zooms and say what tools your using?

[JorJorMogBoy]

Nice tutorial series! I like the character designs; simple, yet elegant.

[xKoutax]

where did you find those character sheets? How could I make my own in that character style?

[Base14Productions]

I made the character sheets myself. The style is 2D shapes in Illustrator with carefully-applied shadows.

[PowerpointPrince]

I bet this is the way they animate making feinds! ^-^

[Yaoiloverel]

Thank you so much. I have been looking for some good flash tutorials. And I'm glad to say that in you I have found what I have been looking for. I look forward to your next tutorial.

[Base14Productions]

I'm glad you liked it. Be sure to check out Part 2 and Part 3, both of which be found on my Base14 Channel!

[nextblain]

aye nice tut, i went to ur website XD