Advice for eye blinking animation?

Wondering how to accomplish a certain animation task? Ask here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Nimphaea
Posts: 75
Joined: Sun Aug 08, 2004 12:46 pm

Advice for eye blinking animation?

Post by Nimphaea »

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:

Image

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?
User avatar
slowtiger
Posts: 6067
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Post by slowtiger »

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
Posts: 75
Joined: Sun Aug 08, 2004 12:46 pm

Post by Nimphaea »

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! :)
User avatar
mkelley
Posts: 1647
Joined: Fri Nov 02, 2007 5:29 pm
Location: Sunny Florida
Contact:

Post by mkelley »

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
Posts: 75
Joined: Sun Aug 08, 2004 12:46 pm

Post by Nimphaea »

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! :)
User avatar
slowtiger
Posts: 6067
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Post by slowtiger »

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
Posts: 75
Joined: Sun Aug 08, 2004 12:46 pm

Post by Nimphaea »

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 ;) !
User avatar
synthsin75
Posts: 9934
Joined: Mon Jan 14, 2008 11:20 pm
Location: Oklahoma
Contact:

Post by synthsin75 »

Image

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

:wink:
User avatar
slowtiger
Posts: 6067
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Post by slowtiger »

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
Posts: 75
Joined: Sun Aug 08, 2004 12:46 pm

Post by Nimphaea »

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 :D . 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 :D .

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.
User avatar
jahnocli
Posts: 3471
Joined: Fri Oct 29, 2004 2:13 pm
Location: UK

Post by jahnocli »

Nice animation!
You can't have everything. Where would you put it?
User avatar
mkelley
Posts: 1647
Joined: Fri Nov 02, 2007 5:29 pm
Location: Sunny Florida
Contact:

Post by mkelley »

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
Posts: 75
Joined: Sun Aug 08, 2004 12:46 pm

Post by Nimphaea »

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!
Last edited by Nimphaea on Thu Feb 26, 2009 6:00 pm, edited 1 time in total.
User avatar
slowtiger
Posts: 6067
Joined: Thu Feb 16, 2006 6:53 pm
Location: Berlin, Germany
Contact:

Post by slowtiger »

*bows deeply*

Perfect. It's a pleasure to help someone who really works until he gets a good result.
User avatar
synthsin75
Posts: 9934
Joined: Mon Jan 14, 2008 11:20 pm
Location: Oklahoma
Contact:

Post by synthsin75 »

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