A5 - Face Expressions

On this page

In this assignment we'll use Adobe Animate to create a character with a series of facial expressions. You'll be using the Looping property for Graphic Symbol and the Frame picker to create the facial expressions.

This Youtube video gives you an overview of the process. Refer to the step by step process below the video.

Key Thing to Think About

  • While a simple face is adequate for this assignment, feel free to add more complexity and detail to the animation.

What to Do

  1. Create a new HTML5 Canvas in Adobe Animate, change the size of the Stage from the default to something that is a little larger – 1920 px by 1080 px works well.
  2. Create a place holder shape for your face in the first frame of the animation - a circle will work fine. You can change the appearance to look like a face in the next step.
  3. Select your placeholder and use Modify>Convert to Symbol. Make sure that you use Graphic as the option for this step. If you accidentally converted your graphic to a Movie Clip you can change this in the properties under the Object tab.
  4. By default the graphic is set to Loop (rectangle with an arrow). Choose the single frame option under the Looping option.
  5. In the Library, double click on the "gear" for your graphic symbol to open it in an editor.
  6. In the timeline for the graphic use one layer for the background of your face. Extend it for 10 frames.
  7. Insert a layer above your background layer where you'll add your features. You'll need 10 key frames (one key frame for each expression). Change the eye positions, make your face wink, raise it's eyebrows.
  8. Once you've completed the series of expressions for the face you're ready to add them to the main timeline.
  9. In the main timeline use Insert>Timeline>Keyframe or right-click>Insert Keyframe. Repeat the process with variable sections of frames to change the how long the expression is visible. At each Keyframe select the Graphic Symbol and then use the Frame picker to select an expression.
  10. Create a folder in M (Media):\ [INGRAM]\2020\2D Animation\Your Name\A5
  11. Save the edited animation and place the .fla file in your student folder.
  12. Export the animation as a .swf file in the assignment folder.
  13. Put a comment in Canvas that you've completed the assignment

Pro Tips

  • Label your layers so you know what is on each layer.
  • Name your symbols so that they are easy to identify

Search