Advice for eye blinking animation?

Nimphaea · Post by **Nimphaea** » Mon Feb 23, 2009 6:24 am

Hello everybody!

Thanks to your help I finished my first "real" animation in ASP last week. I will show it as soon as I'm allowed!

Today I have a new question, about a different animation I have to make.

I'm making a small animation of a realistic, (slow) blinking eye, to be specific: the eye of Benjamin Franklin on the 100 dollar paper money. I thought ASP would also be perfect for that, with its image warping features.

It's the first time I'm using ASP for image warping animation. I find it very difficult to get it right. I've tried several different setups of bones in the past hours, but it's not working well yet. Maybe you have some advice for me, being experienced ASP users.

In Photoshop, I've made three different layers out of the image: The upper half of the eye image, the lower half of the eye image and the eye / pupil. I imported these layers into ASP and until now, this is the best bone setup I could come up with for the upper eyelid:

Curently, the eye has bones surrounding the image to prevent it from being warped outside of the eyelids. For the eyelid itself, I made two bones at the sidecorners of the eye, to prevent those from moving. The upper eyelid has three bones, the one in the centr is a parent, the ones besides the center bone are children of that bone.

Because of the fact that the "line of the lashes" has to "shrink" (it had to get smaller because it has to flatten) I'm getting unwanted effects (the image overlapping itself).

Would it be better to animate this another way? What would be your workflow / ideas on this kind of animation? It looks very simple, but it's al lot harder than I thought. Another option is to take it to Photoshop and do it frame by frame with the liquify tool. But maybe you can give me your advice or ideas. Maybe you have a different approach to do this?

slowtiger · Post by **slowtiger** » Mon Feb 23, 2009 6:54 am

I'd start with creating a closed eye in Photoshop first, with some drawing and tweaking of copied parts (or find a good example in the same style somewhere else). Then I'd continue the same way as you do: put the new upper and lower lid on top of the open eye in AS, and rig it with several bones. Tip: if you need an image to shrink and expand in a controlled way, you'll need two lines of bones on each side.

Another way to do this: make a mask which follows the fold over the top lid, and put some cutout closed eye image inside of that. This would go down in two frames. No warping required.

Don't you have problems with scanning in a dollar bill? Recent scanners and Photoshop versions censor this, you can't even open a scan of any current money.

Nimphaea · Post by **Nimphaea** » Mon Feb 23, 2009 7:07 am

Hi Slowtiger, thank you very much for your quick reply!
(you're more a FAST tiger than a slow one in my opinion

)

slowtiger wrote:Tip: if you need an image to shrink and expand in a controlled way, you'll need two lines of bones on each side.

I'm not sure if I understand what you mean. Could you explain a bit more about how you would do this? Would you place them all on the same layer? And how would you parent them?

slowtiger wrote:Don't you have problems with scanning in a dollar bill? Recent scanners and Photoshop versions censor this, you can't even open a scan of any current money.

I got the image from the people who asked me to make the animation for them. It will be part of an animated logo. They are an advertising agency, so I hope for them that everything is allright concerning rights etcetera. I am only asked to make the animation. If I cannot figure out how to do it in ASP, I'll use Photoshop and the liquify filter, but I hope to succeed in making the animation with ASP!

mkelley · Post by **mkelley** » Mon Feb 23, 2009 11:17 am

ST's right (as usual) -- however, if you are determined to do this the way you've started you need more bones.

Specifically, you need bones surrounding the eye to "hold" the rest of it in place while the bones on the lid part warp those down. And, of course, you need to mask the interior of the eye (I'd just cut it out with PS).

I tried this and it came out okay -- not brilliant but it depends on how close you are going to get (an extreme closeup won't be convincing, but seeing Ben's entire face will work fine).

Nimphaea · Post by **Nimphaea** » Mon Feb 23, 2009 1:25 pm

Hi mkelley, thank you very much! I'm still trying to make it work. The problem is that the logo in which this is used is only this eye, and very big...

At the moment I'm getting a better result by making many extremely small bones (bones with the size of a pixel). But still, it's hard to do!

If I succeed, I will show the results and tell you how I did it. And if in the meantime somebody on these forums has a good idea, please let me know.

Thanks again!

slowtiger · Post by **slowtiger** » Mon Feb 23, 2009 1:44 pm

You didn't mention yet if you need to do an ordinary blink, or if the closed eye needs to show more expression, like a wink. The latter definitely needs bones (and would affect a bigger part of the face, too), the first would be much easier with the cutout & mask method.

I found a very large scan of a dollar bill in wikipedia, and to my surprise my Photoshop did open it. That's funny, it complains about Euros when I try to scan them. Anyway, maybe I test the task myself.

Nimphaea · Post by **Nimphaea** » Mon Feb 23, 2009 2:09 pm

Hi slowtiger, thanks again for your reply. I'm so glad these forums exist.

What I'm basically told to do is animate this eye (blinking and _maybe_ other things, if possible to animate), bring it to life.

The eye itself is used by the company as their logo. The logo consists only of this big eye, with added below the text of the company name. The eye in the final animation is bigger than the eye in the picture I added in my first post, so that's really BIG (the stage size in the picture in the first post is the standard stage size, that gives you a bit of the idea how BIG this eye is)... It's too big to be able to "cheat" in the animation, and because the animation only consists of this animated eye, I can't do it "fast", it really has to look neat and "natural".

Until now, very much very small bones are giving me the best results, but it still isn't good. I keep trying in the meantime.

If you need my PSD or ASP file, let me know. Meanwhile, I keep trying to solve this. I like solving puzzles, and I'm certain there must be someway to solve this one

!

synthsin75 · Post by **synthsin75** » Mon Feb 23, 2009 2:42 pm

Here's a start. It's not perfect, but should give you an idea which direction to go. I just copied your posted image, so ignore the bones in that image.

http://www.mediafire.com/?eyazc9ezchz

slowtiger · Post by **slowtiger** » Mon Feb 23, 2009 3:03 pm

I couldn't prevent myself from trying it, so here's my result:

http://www.slowtiger.de/examples/100.html (1,9 MB)

A blink is very fast: only one frame between open and close, and at most 2 between close and open. I made a lid in PS and rigged it with bones in AS, but now I think it's easier to do it with a switch layer, and 2 or 3 lids carefully done in PS.

I'd suggest this workflow: trace the eye outline, the lid, and the pupil in AS. Animate these until you're satisfied with the result. Remeber, fast is better in this case. Render the 3 frames you need and put them into PS as reference. Build the lid from other parts of the image, or draw the missing lines (I do this all the time). Import the images into AS into a switch layer.

I think it's important to have the same density of lines on the closed lid as on other parts of his skin, that's why I copied and drew them.

Nimphaea · Post by **Nimphaea** » Mon Feb 23, 2009 6:05 pm

I'm amazed... How can I thank you for all your help and support?

THANK YOU SO MUCH...! I just don't know what to say...!

You made both great examples.

Slowtiger, that smile is looking great

. Too bad the logo doesn't allow me to show the face. ASP is perfect for that kind of animation! It works really well. Beautiful!

In the meantime, I worked further on my file. I love ASP, what a cool program this is! I can't wait to work further on it tomorrow

.

Here's a little Flash example of what I have made until now:

http://www.flashanimatie.com/projects/as/

I still need to make the "close" frame nicer in Photoshop. When this animation is ready, I'm going to try to make more emotions. I can only use the eye. I'm learning a lot of new cool things, thanks to your help! Again: Thank you so much.

jahnocli · Post by **jahnocli** » Tue Feb 24, 2009 4:55 am

Nice animation!

mkelley · Post by **mkelley** » Tue Feb 24, 2009 5:51 am

Making other emotions with just the eye will involve the eyebrow, since it's the only other thing there that can really "emote".

However, within that will be a lot you can do -- it's amazing how much emotion we read from the brows and lids.

Nimphaea · Post by **Nimphaea** » Thu Feb 26, 2009 8:46 am

The logo animation is finished! I just wanted to show you the end result, because you have been such a big help! I couldn't have done it without you.

Here it is, same URL, new animation!

http://www.flashanimatie.com/projects/as/

Oh, by the way... It's interactive. It follows your mouse, unless your mouse hasn't moved for a few seconds. Then it will play a predefined animation.
It switches its emotions random.
When you move your mouse over it's pupil, he will close his eye, because a mousepointer is sharp

!

Because I had to keep the filesize low, I couldn't add more emotions, but this will do.

I hope you like it, and I hope to learn lots more about Anime Studio trough your kind help.

Thanks again to everybody who helped and inspired me!

slowtiger · Post by **slowtiger** » Thu Feb 26, 2009 8:58 am

*bows deeply*

Perfect. It's a pleasure to help someone who really works until he gets a good result.

synthsin75 · Post by **synthsin75** » Thu Feb 26, 2009 2:05 pm

Very nice work. I love the interaction and range of expression (especially with just the eye).