Mouth animation

Engaged ,
Aug 05, 2017 Aug 05, 2017

Copy link to clipboard

Copied

I'm learning Animate and don't have my head wrapped around the program as of yet. I created a character in Illustrator and I can animate (from my computer camera) all head elements except for the mouth. I can use an existing template to animate mouth movements but I cannot achieve movement from from my Illustrator file. Can Animate use only existing mouth templates? Or can I create and animate a mouth of my own design? If so, what is the trick to do so?

Thanks.

Views

1.1K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 05, 2017 Aug 05, 2017

Copy link to clipboard

Copied

You could create different mouth vector shapes in Illustrator, with for example each shape on a separate layer, and then import that illustrator file into Animate. In window that appear when you import the file, you should see a dropdown next to "Convert layers to:". Change that to Keyframes, and then select import.

You should now see gray boxes on the timeline panel, which represents separate Keyframes. When you play the animation (Ctrl + Enter / Command + Enter), you will see that it will quickly jump between each mouth shape. At this point you could move the Keyframes around to create an animation.

But I would recommend putting those Keyframes into a graphic symbol, which would allow you to easily reuse and swap the mouth shapes in different parts of your animation. To do that, you should first copy the Keyframes on the timeline, which you can do by pressing the left mouse button on the first Keyframe and dragging the cursor to the last Keyframe. Now that they're highlighted, you need to right click on them and select Copy Frames.

Next you want to create the symbol that is going to hold each of those Keyframes you just copied. To do that, you can click on the first Keyframe, which will highlight all the graphics you have placed on that Keyframe. Then right-click on any part of the graphic, or press F8. This brings up a window for creating a symbol. On that window there's a dropdown to change the type of the symbol, set that to graphic.

To finish the symbol, you can double click on the symbol you have created to edit it. Now you should see that there's only one Keyframe on the timeline, that's because each symbol got their own separate timelines and layers. To add the Keyframes to symbol, right click on the first Keyframe and select Paste Layers, which will overwrite the first Keyframe and add the other Keyframes you copied.

Once you're done editing the symbol, you can double-click anywhere outside of the graphics in the symbol, which will bring you back to the main timeline, where you started.

Now you only need the first Keyframe on the main timeline, so you can delete the rest by highlighting them (like you did before when you were copying the Keyframes) and then right click and select Remove Frames.

Now to change the Keyframe that the symbol displays, first select the symbol and then click Window (at the top) and select Frame Picker. That panel lets you pick between any of the Keyframes inside the symbol. You should see a dropdown that is set to Loop, change it to Single Frame, to ensure that the animation inside the symbol doesn't play.

To make an animation with the symbol, you'll need more Keyframes on the main timeline. To add more, you can click on the first Keyframe on the timeline and press F6. This creates an exact copy of the first keyframe and put's it right after the first. On that frame you can pick a different Keyframe for the symbol, using the Frame Picker panel. And to make a Keyframe play for a longer period of time, you can select it and press F5.

I hope this answers your question, but if you have unsure about anything, just let me know.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 06, 2017 Aug 06, 2017

Copy link to clipboard

Copied

This is in the wrong forum, I believe you are looking for Character Animator

Character Animator

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 06, 2017 Aug 06, 2017

Copy link to clipboard

Copied

It's hard to tell so far. Everything could apply to Adobe Animate.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Aug 06, 2017 Aug 06, 2017

Copy link to clipboard

Copied

Nah, he is 'animating' "(from my computer camera)"

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 06, 2017 Aug 06, 2017

Copy link to clipboard

Copied

That does sound a lot like Character Animator. Do you want us to move this discussion over to that forum?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Aug 08, 2017 Aug 08, 2017

Copy link to clipboard

Copied

LATEST

You can definitely make your own custom mouths. You just have to make sure they're in a Mouth group inside your Head group and named correctly. See this video for a little more help:

https://youtu.be/9VG5R7fxuVE?t=14m1s

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines