Flash CS4 Animating Puppets

Great tutorial! I am new to Flash, but found it helpful. David has a great instructional style.

Thanks, Patricia!

I’ve never seen Tom look more active.. The tutorial was great, am looking forward to trying to get Tom dancing too

how can I see this tutorial?
i can’t see=..=

i only see a bit of video,

hey,i saw over the tut, thanx a lots

yeah, very funny tutorial!

Al, as, and Robert,

Thanks! And glad you were finally able to see the video, as.

[...] Flash CS4 Animating Puppets [...]

Cool stuff man!!!

a very good tutorial

David,
(no real parallel to the gueniss’ commercial)
BRILLIANT!
I was a studio art major- ie. i have been a moron when it comes to the tech specs of computers, graphic design, anything else that doesn’t use power generated by hamsters running on wheels.
thanks to adobe’s ‘trial’ (pleading 5th!) software, i have been able to extend my capabilities to the point of actually buying (yes, folks) CS4 web premium!!! (it’s like when you actually start supporting NPR for the first time after years of listening and feeling guilty) (don’t tell the bosses)

but because of adobe’s availability, and guys like you creating EXCELLENT tutorials you have earned a new customer from someone who didn’t know acrobat reader from austrailopithicines (Neanderthal would have been a better word choice)

so, THANK YOU!!
eternally indebted (seriously!)
Travis

vid ain’t workin ;( … and I downloaded flashplayer, what gives?

Great tut!
(I noticed a typo in the opening paragraph. I think it probably was supposed to say “create and control their OWN dancing puppet.”

Loved it, that was I looking for all my life, ))

Great!… now what about if my puppet is made of lines? i mean i want to joint all lines… mmm i think is going to be difficult to explain this, so if you send me and email, that will be AWESOME.
thanks!

Great tut. Just what I’ve been looking for. Thanks!

EMG, Travis, Scott, and Rachel,

Thanks! (Yes, Travis, you nailed that typo. I’ll let Layers know.)

Xhuman,

I don’t control the content of this website (other than recording the actual video), so I’m afraid I can’t personally do any troubleshooting on the server. I have noticed that high network traffic occasionally causes videos to pause, which makes sense. Might that be it?

Jr.canest,

If your puppet is made of lines, the placement of your bones does become more of a challenge, for sure. Fortunately, Flash gives you three options for how those bones look. One in particular is very skinny, which may help. Draw your first bone, then select the armature itself (click its frame in the Timeline panel). When the armature selected, look at the Options area of the Property inspector. You’ll see a Style drop down menu with the choices Wire, Solid, and Line. Solid is the default; Wire is a “wire frame” version of Solid, and Line is what it sounds like.

Pixiebrush,

Glad to hear it!

This video was simply amazing!! Bravo!! I have always wondered. This is my first experience with flash. I have a CS4 and so far I am trying to just learn how to use it. This video was seriously awesome!!!

Mary,

Thanks! This tutorial was fun to record. I’m enjoying CS4 too.

I love learning like this. Thanks David. I wonder whether I would have got some decent grades in high school if it were all tutorials instead of text books.

Daniel,

Thanks for the comment!

[...] looked at David Stiller’s tutorial and Lee Brimelow’s blog on the subject, I decided to see how easy it would be to do something [...]

hey i have a problem it say that i cant operate in bitmap or something like that it say “cannot blink bitmap objects ” i need HELP plz

ABSMMS,

My guess is that you’re trying to use the Bone tool to connect bitmaps (imported raster images). You’ll have to convert those bitmaps to symbols first — either a graphic or movie clip — and that should clear it up for you.

[...] Simply constraints applied to skeleton joints create faux-physics that look very convincing. Have a look here if you’ve not seen these in [...]

Is the Bone Tool only for flash cs4? I have Flash CS3 professional and I cant seem to find the bone tool. Is there the bone tool in cs3? Or is there something I could download to add the tool?

Rockie,

The Bone tool is a new feature of Flash CS4 and not available as an official plug-in for Flash CS3 or other previous versions. You might find a 3rd party extension as an alternative (e.g. flashextension.net/, under the Tools section), but if you do, it isn’t likely to behave the same as demonstrated here.

Great video for even beginners. Well done. Thanks for showing me how the bone tool works.

there is a way to control the move of bones with actionscript ?

Hi.. HELP PLEASE…

I am having the same problem someone else mentioned .. “cannot blink bitmap objects ” when trying to add bones..

In my case, i imported an image that was done in another program, basically it’s a drawing of an arm (chose this one to try this stuff out).. I tried saving for web from Photoshop into PNG-24 transparancy hoping for compatibility, then imported to Flash.. I wanted to put bones in the pic of the arm and hand, appropriate places, and make it wave as a test before trying more complex images..

BUT.. I keep getting the same problem with the bitmap error.. then when I convert to symbol, it will show the first bone when I click to create them, but when letting go of the mouse the bone won’t set, it disappears..

Can you tell me how to resolve this please??

Thanks very much…

ps. Also, thank you for the helpful videos..

have tried converting to symbol, both graphic and movie, it didn’t work..

Hi,
I am wondering if there is an option in cs4 to lock bones in place (constrain)?In anime studio the bones system works pretty much the same.In A.S. if you want to do a walk cycle or move the body but leave the feet in place the bones in the feet can be locked down so they won’t move.Is that possible in cs4?If not it should be.It makes animating so much easier.

Thanks this really helped!

To Jm …

Thanks!

To Need to know …

Yes, you can access bones via ActionScript. Tom and I put an exmaple of this in our book, Foundation Flash CS4 for Designers (friends of ED). If you visit the book’s website, you’ll find this example in the Chapter 8 sample files. It’s the one called SteamEngine.fla. (See FoundationFlashCS4.com.)

To NewOobie …

Make sure to convert *all* your bitmaps to symbols first. It’s not enough just to convert one. Every “link in the chain” — every bone in the armature — must be a symbol.

To Daniel …

There are optional constraints for the bones in Flash, but I’m not sure they operate in the way you’re expecting (they might!). For example, you can limit the rotation of a shin bone at the knee, so the shin doesn’t bend the knee backwards, but depending on how you rigged up the rest of your model, the upper leg might indeed move if you pull the torso, or even the arms. Make sure to experiment with your rigging. You’ll see the constrain properties in the Property inspector when you select a given bone.

To Tyler …

Thanks!

Hi,
This tutorial is great for a starting point, but are there any more tutorials on puppets? I would like to see more complex puppets like that of an animal or one that is more flexible in the middle of the torso and not just the hip area, so that it can have a more natural arch in the body and not have too much stiff animation.

I guess I can figure out how to add more joints but seeing more tutorials on more complex puppets gives me an better idea on how it can be done or if there’s an easier more efficient way. Anyway, thanks a bunch for this tutorial and many more in the future.

Thank you, David, for such an excellent tutorial. It helped me a lot to understand animation using bones.
Still, I’ve come to situation where I cannot find any solution. I’ve made a running man (you can see it here http://www.idealex.lv/prewiew/) using bones. I would like to know is it possible to avoid man’s legs going below the ground line? Is it possible to make a leg which lower part moves fairly horizontally?

Thank you very mush for any answer and sorry for my poor English.

awesome thanks your great teaching!

How is the head connected to the bone rig? It seems there’s only one bone from the root of the rig to the head handle… how does that bind the head to that particular bone?

thanks a lot…

i just have installed my update to CS4,

this is a very good presentation.

HOLA SALUDOS DESDE COLOMBIA, ERES MUY AMABLE, DIFERENTE A LOS DEMAS QUE PUBLICAN UN VIDEO TUTO, LO DIGO POR QUE EXPLICA MUY DETALLADAMENTE EL BUEN USO DE LOS HUESOS Y COMO SE PODRIA MEJORAR UNA ANIMACION FELICITACIONES ESTA ES LA GENTE QUE NECESITAMO PARA PODER APRENDER FACIL Y MUY CHEVERE BUENO ESPERO ME CONTACTES PARA PREGUNTARTE ALGUN TRUCO SI NO ES MUCHA MOLESTIA
DIOS LO BENDIGA

Sorry but where are the files for this?

To Rina C …

> This tutorial is great for a starting point,
> but are there any more tutorials on puppets?

As of this reply, this video is the only bones-related tutorial I’ve recorded for Layers personally. I suspect there are more out there, but as with anything else, the trick is to find them!

> I guess I can figure out how to add more joints
> but seeing more tutorials on more complex puppets
> gives me an better idea on how it can be done or
> if there’s an easier more efficient way.

Every new feature if Flash has its pluses and minuses. In the case of bone rigging, the benefit of the articulation is “paid for” by the potentially tedious task of adding bones. Fortunately, it’s easy enough to keep adding them, even if it takes a while.

If you like, you can check out the sample files from Chapter 8 of Tom Green’s and my Foundation Flash CS4 for Designers. You’ll find a rigging that connects the fingers of a hand, as well as another full-body puppet (”Richard”) at this URL:

http://www.foundationflashcs4.com/sample-files.html

To Vanda …

> I would like to know is it possible to avoid
> [a running character's] legs going below the
> ground line?

Try experimenting with the “Joint: X Translation” area of the Property inspector when you select one of the leg bones. When you enable joint translation, you can move bones horizontally and/or vertically along their joints. That may help you!

To Johnny …

Thanks!

To Norberto …

> How is the head connected to the bone rig?

You can’t really see it in the video, but Tom’s head actually has two bones on it (check the sample files for this tutorial to see them). The first bone is tiny, and it attaches his head to the neck, which is the hub for all the other extremities. The second bone attaches the stand-in movie clip (the “drag handle”) to the head.

To Urg …

Thanks!

To Juan …

I’m afraid I don’t speak Spanish, so I got a friend of mine to translate. Thank you so much for your kind words! I hope you can understand my reply. You may indeed contact me with additional questions (visit quip.net for a contact form). The speed of my reply is always dependent on my schedule, which varies greatly, but I do try to answer everyone eventually!

To Adamanta …

> Sorry but where are the files for this?

Thanks for bringing this up! When I originally recorded this video, Flash CS4 wasn’t yet commercially available, but I supplied Layers Magazine with sample files shortly after CS4 entered the market. Unfortunately, we had a miscommunication, and those files didn’t make it up until just yesterday (July 7), but they’re up now.

De Venezuela, EXCELENTE TUTORIAL! Muy fácil para los que apenas nos adentramos en Flash!

Angel,

Gracias!

Man you rock! That was awesome, very handy for my puppet project! Thanks!

Joshua
————————————–
bestflashwebsites.blogspot.com

Thank you Adobe for making the effort to hire such incredible people to provide this library of tutorials!

Flashy and Chris,

Thanks for the kind words! I’m glad you like the video!

[...] Simply constraints applied to skeleton joints create faux-physics that look very convincing. Have a look here if you’ve not seen these in [...]

[...] IK Bones IK Bones allows the users to create and arrange symbols in a collection called an Armature. These armatures contain bones that have relationships with other elements which can be animated. http://www.lynda.com/home/DisplayCourseN.aspx?lpk2=696 http://www.layersmagazine.com/flash-cs4-animating-puppets.html [...]