6 Replies Latest reply on Aug 8, 2017 8:47 AM by oksamurai

    Mouth animation

    Indie767 Level 1

      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?



        • 1. Re: Mouth animation
          RandomlyFish Level 3

          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.

          2 people found this helpful
          • 2. Re: Mouth animation
            deans67202452 Level 3

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

            Character Animator

            1 person found this helpful
            • 3. Re: Mouth animation
              Colin Holgate MVP & Adobe Community Professional

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

              • 4. Re: Mouth animation
                deans67202452 Level 3

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

                • 5. Re: Mouth animation
                  Colin Holgate MVP & Adobe Community Professional

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

                  1 person found this helpful
                  • 6. Re: Mouth animation
                    oksamurai Employee Moderator

                    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:



                    2 people found this helpful