Download as pdf or txt
Download as pdf or txt
You are on page 1of 16

ANIMATION NCII – Animation 12b

Governor Pack Road, Baguio City, Philippines 2600


Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

Lip-syncing

Objectives: At the end of this lesson, students shall be able to:


1) Define in their own words what lip-syncing is and explain its importance;
2) Identity the materials, equipment, and software necessary for lip-syncing;
3) Explain the importance of an exposure sheet and mouth codes in the creation of a lip-sync
animation; and
4) Apply the concepts and principles in the module by creating a lip-sync animation for an
original character based on a previously created audio, exposure sheet, and mouth chart.

Introduction – Lip-Syncing
• Lip-Syncing
○ Also known as lipsyncing or lip syncing
○ Movement of a character’s mouth in sync with the audio being heard
▪ Phonetic sounds
- Dialogue or monologue, essentially any time a character is speaking
- Main type of lip-syncing that is created
▪ Pre-life
- Sounds that tend to communicate emotion
- Used to accentuate actions before, during, or after a primary action is being created
- Mouth codes tend to be created outside of the normal mouth chart
- Example: breathe in / out, gasp, grunt, moan, etc.
▪ Diegetic music
- Music that exists within the world
- For lip-syncing, it is mostly music that is sung by any of the characters visible in the shot
- Another type of diegetic music is music that is heard in the radio, or when a character is
in beat with a certain music
- Employs some ideas similar to lip-sync
▪ Sound effects / background noise
- Any other type of sound that is created by the mouth created by a visible character
○ Purposes
▪ Makes the animation more immersive
- Gives the audience the idea that the character owns the voice, rather than a voice
actor dubbing over the character
- Simple opening / closing of the mouth can create this immersion; but it becomes better
if the different mouth codes match the sounds heard from the character
▪ Gives movement to character
- Lip-syncing is a great way to give movement for a character if they are standing still
- Makes the character look like they are alive and not just like an image
• Types of Sync
○ Sound Sync
▪ Syncing the motion (mouth code) exactly to when the sound comes out
▪ Allows for more accurate syncing between the animation and audio
▪ Used in conjunction with more exaggerated mouth codes
▪ Used for:
- Long sounds (especially vowels)
- Exaggerated / articulated sounds
- Stressed syllables in a conversation
- Dialogue with very high intensity

Page 1 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

○ Picture Sync
▪ Offset the animation to one frame from the audio
▪ Sound is heard first, then the animation catches up one frame later
▪ Allows for readability
▪ Used for:
- Normal conversation
- Whispering
- Shorter sounds (especially consonants)
- Unstressed syllables in a conversation
- Blending of sounds
- If the animator does not know which frame to place it on
• Materials and Equipment
○ Audio Recording
▪ Basis for the lip-syncing and all necessary preparations
▪ Done during the pre-production stage with a team including the voice actor(s), sound
director, sound engineers, and director of the animation
▪ All necessary audio must be recorded during this stage
- In some cases, the audio may be rerecorded during the production stages
▪ Audio is processed to create the final output, which will then be used by the production
team to analyze and attempt to sync
- Removal of background sounds and noise
- Removal of unnecessary dead air
- Addition of silence
- Voice modulation
- Addition of equalizers and effects
▪ During the voice recording, a nat pause may be done as well
- Video recording of the voice actor doing their session(s)
- Utilizes the quirks and facial expressions done by the voice actor, which can be used as
reference for the actual character’s action
○ Exposure Sheet
▪ Sheet that provides detailed instructions on an animation
- Actions - Timing
- Dial - Camera instructions
- Layers
▪ Usually used for lip syncing that came from the audio recording
▪ Also used for any animation that requires precise timing, such as:
- Musical numbers / performances - Syncing character movements to
- Playing musical instruments beats / music
- Dancing - Animations with very strict time
- Music videos restraints
▪ Interactions with other aspects of the animation are placed here
- If timing does not need to be very precise, then a time chart would suffice
○ Model Sheets
▪ Reference drawings of how a character looks
▪ Different model sheets would be required for different instances
▪ Used to ensure accuracy and consistency in the design and modeling of the character
during animation
▪ Could also be used in the exposure sheet to determine camera instructions and the style
for the mouth codes

Page 2 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

○ Mouth Codes
▪ Series of mouth movements and shapes that correspond to a phonetic sound created by
a character
▪ Sounds are created beforehand or created based on the exposure sheet (which is based
off the audio recording)
▪ Placed in a mouth chart
- Mouth chart – collection of mouth codes for a certain character; allows for easier
referencing
▪ How mouth codes are used for:
- Traditional – placed in a cheat sheet for easier tracing
- Digital – placed as individual PNG / GIF files; transparency is required
• Software Options
○ Animation Software with Available Audio Import Feature
Animation Software Platform and Payment Scheme Characteristics
Adobe Photoshop Desktop (Windows, Mac, Linux) • Import existing audio only
Monthly subscription • Can be viewed in either frame or
timeline view
• Placed in a separate layer
• Can technically be edited, but is
not recommended
Animation Desk Desktop (Windows) • Import existing audio only
Mobile (Android, iOS) • Can only be added once the
Free animation is complete
• Cannot be edited once placed
in the animation
FlipaClip Mobile (Android, iOS) • Can be recorded immediately,
Free from a (paid) set pack, or by
importing audio (paid)
• Has a separate interface
• Cannot be edited once placed
in the animation
Krita Desktop (Windows, Mac, Linux) • In beta version
Free • Import existing audio
• Audio doesn’t sync properly
when listening to select frames in
the animation
• Requires ffmpeg extenstion
OpenToonz Desktop (Windows) • Import existing audio
Free • Has x-sheet view, which allows for
easier syncing with frames
• Cannot be edited once placed
in the animation
• Requires ffmpeg extension
TV Paint Desktop (Windows, Mac) • Import existing audio
One-time payment • Has x-sheet view, which allows for
easier syncing with frames
• Cannot be edited once placed
in the animation

Page 3 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

○ Video Editing Software


▪ Can be used by students who are adept in video editing software
- Recommended only to those who have already existing video editing skills and
software
- Can also be used by students who do not have many options on utilizing proper
animation software
- Can also be used by students mainly using traditional animation
▪ Can be used similarly to that of an animation software
- Steps are very similar
- Some steps can be shuffled, or new steps may be added
- Is also akin to compositing after all frames have been done
▪ Still requires a separate animation / illustration software
- Used to draw the mouth codes and animation frames beforehand
- Animation frames (except the mouth codes) are in moving image / video format
- Separate mouth codes are in a transparent image format (PNG / GIF)

Note: For the activity, students may use a combination of different techniques that would best
suit their current skills and equipment. However, it is recommended to do the lip-syncing by
copy-pasting available mouth codes to prevent any redrawing. As such, there is also a need to
point out of the importance of preparation, particularly the outputs from Modules 8 and 9.

Steps in Lip-Syncing
• Preparation
○ Record Audio
▪ For best results, the audio must be created before the actual production stages
▪ Audio must be edited to be in its final format before going on the next step:
- Removal of outtakes
- Removal of unnecessary background noise
- Timing and splicing
- Addition of white noise
- Noise and background noise removal
- Voice modulation settings (pitch, volume, tuning)
- Effects (layering)
- Equalizer settings and final touches
▪ It is recommended to only using one audio file for the entire animation
- If there are multiple audio files that need to be used, it is recommended that they all be
collated into one audio file with the proper timing
▪ Utilize a separate audio editing software to finalize and export it to its final format:
- MP3 (MPEG-3) – recommended format; usually compatible to all devices
- WAV (Waveform Audio File) – Windows
- M4A (MPEG-4 Part 14) – Mac / iOS devices

Page 4 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

○ Create Exposure Sheet


▪ Based from the audio
recording, create the
exposure sheet
▪ Items to fill out:
- Production
information
- Special instructions
- Dial
- Camera movement
- Actions
- Layers
▪ Considerations:
- Method of timing and
how that affects the
timing per frame
- Consistent
consultation with the
audio recording and
its waveform
- Consider when to use
sound sync or picture
sync
- Look into the
storyboard as basis for
the camera
movement
- Create the timing as
precisely as possible
- Understand
interactions between
the dial, actions,
layers, and camera
movement
○ Create Mouth Codes
▪ Based from the dial sounds found in the exposure sheet
- Best done for short time animation projects (one shots, short animated films, etc.)
- If the character is part of an episodic animation / an animation that has a long running
time, then all possible mouth codes are created beforehand
▪ Designed, rendered, and cleaned-up based on the character models
- Take into consideration the design of the mouth codes from the character design and
personality
- Look into the nat pause as well to get inspiration with the movements of the voice
actor’s mouth
- For short time animation projects, look into the layouting to where the mouth codes are
supposed to be used to optimize the sizing
- For long time animation projects, it is recommended that the mouth codes be done
through vector graphics so that it can be resized without compromising quality
- Must be cleaned-up according to the specifications for line quality for the animation

Page 5 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

▪ Export the mouth codes as separate transparent image files


- Allows for easier retrieval and placement in the animation during the production stages
- Can be exported with white space or without white space
- Ensure that proper naming conventions are used to prevent any confusion on similar
mouth codes or image files that are too small in size
- PNG (Portable Network Graphics) is recommended for use for raster graphics
- GIF (Graphical Interchange Format) is recommended for use for vector graphics

With white space Without white space


• Significant amount of transparent • All unnecessary white space has
(white) space is surrounding the been trimmed out surrounding the
mouth code mouth code
• White space is pre-determined • Allows for placement and resizing
according to the layout of the when necessary
character in relation to the frame • Best used if the character tends to
(using the field guide) move around (i.e. swaying, walking,
• Automatically places the mouth small facial and body movements)
code to the desired spot without but not changing their perspective /
resizing or recalibrating view
• Best done if a character is mostly • Best used for episodic / long timed
stationary animation projects
• Best used for short time, single, or pre- • Best done if the mouth code is
determined animations vectored to allow for seamless
• Used mostly if the animation is raster resizing without compromise on
graphics quality

Page 6 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

▪ Optional: add to a repository


- Utilize a repository that is linked to the animation software
- Import the necessary mouth codes in a software before the actual production
- Allows for easier importing between animating lip-sync and animating normal actions
- Only applicable for specific software
- For those who do not have a repository, then it should be placed into separate layers
- Examples: SmartMouth extension for Adobe Flash, Adobe Bridge, pre-made mouth
charts for ToonBoom

• Lip-Syncing Proper
○ Notes:
▪ For this part, Krita shall be used as the main animation software for this tutorial
▪ But any animation software with available audio will do
▪ The steps placed here is also applicable for those who will be using video editing tools and
traditional animation
○ Add Audio
▪ Add in the audio first before anything in the animation software
- This is because the audio will be the basis for the lip-syncing and other movements
- Ensure that the audio has been refined to its final version
- Ensure that the audio is only one
▪ In the Timeline docker, a very small icon of a speaker located at the top left corner
indicates the available audio options

Page 7 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

▪ Interface for audio in Krita


- Open audio: Imports pre-recorded audio from the
user’s computer; supports MP3, OGM, and WAV files;
also indicates that only one audio file can be used for
the entire animation sequence
- Mute: Toggle button that mutes / unmutes the audio
- Remove audio: Allows for the removal of existing audio
- Volume: Slider that allows for the adjustment of the
volume of the audio in the animation file
▪ Add audio
- Place the keyframe selector at the very first frame (either frame 0 or frame 1)
- Locate the audio icon (speaker) at the top left corner of the Timeline docker
- Open and select “Open audio”
- Select the audio file from the computer files
▪ The audio is not visible
- After importing, there is no visible change from the interface (i.e. no new layer, no file
name of the audio, etc.)
- As such, the user’s own auditory senses and scrubbing functionality is necessary to
position frames
- Evidence of it being imported is seen when playing the Play button in the Animation
docker, and it would be heard
- Selecting a specific frame and playing the audio from there allows the user to
understand to which part of the audio is played in the frame
- The audio feature is not very stable, and some lapses on the consistency of the audio
can be heard

Video reference: https://imgur.com/b5L9s24


▪ Some lapses for the audio (in Krita):
- Accuracy is not guaranteed
- Looping of the statement can be heard at the very last part during the first loop
- Placement of the audio when hearing it on a specific frame may be earlier / delayed
than the actual one
- Audio becomes more delayed the more it is played in a loop
- Limiting the end of the frame (when playing) is not applicable if the audio is too long
Page 8 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

▪ Determine end of the audio


- This would aid in making the audio more stable and prevent any looping issues when
animating
- Look into the exposure sheet and waveform to get a very good idea to the specific
frame that it ends
- Play the animation using the Animation docker to attempt to see if it matches up
- Utilize trial and error techniques to have the correct end time of the audio
- If done properly, then the audio would not loop at the end

▪ Other features for the audio (Krita)


- Krita saves the location of the audio file
- If the audio file is removed or renamed, Krita will not be able to find it
- Krita informs that the the file was moved or deleted the next time the Krita file is opened
○ Animate Character Movements
▪ Animate character movements without the mouth
- Use a new layer if necessary, but it is optional
- Create a rough sketch of the character’s movements without the mouth (facial
expressions change, body movements, turns, etc.)
- Make sure that the movements coincide with the audio
- Utilize familiar concepts and techniques to animate (pose-to-pose animation,
separation, animation smears, etc.)
- In this step, utilize the exposure sheet as the main source of timing
- Indicate the rough placement of the mouth to countercheck the sizing and to help with
the placement later on
- When drawing the placement of the mouth, add the upper teeth, middlemost part of
the mouth, and its sides for a more accurate placement
- Make sure to add the necessary production information (frame labels, time chart,
special instructions, other production information)

Image reference: https://i.imgur.com/G462ToC.gif

Page 9 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

▪ Render, clean-up, and color the movements


- Utilize as many layers as needed in order to render and clean-up the animation
- Ensure that the line quality style is consistent with the mouth codes
- Utilize familiar clean-up concepts and techniques
- Color when necessary, but it is not required
- Once finished, lock this layer to prevent any obstructions during the lip-sync proper

Image reference: https://i.imgur.com/cRsJgXw.gif


○ Adding Mouth Codes
▪ Import mouth codes to animation file
- Go to the File header and select “Import animation frames…”

- A new window will pop out at the center of the canvas. Click on the “Add Images”
button at the lower left corner to import the necessary mouth codes

Page 10 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

- After importing, notice how the mouth codes will appear in reverse alphabetical order.
Click on the OK button afterwards

- Once imported, the mouth codes will appear at a new layer that is at the foreground
- Take note of naming conventions per layer to prevent confusion

- Note that the mouth codes are arranged alphabetically

Image reference: https://i.imgur.com/sLAnFuF.gif


▪ Animate mouth codes using straight ahead animation
- Due to the limitations brought upon by Canvas, it is recommended to animate the
mouth codes using straight ahead animation
- This would allow immediate correction if the mouth code is not in sync with the audio
- Instances of pose-to-pose animation may be done, but is done so rarely
- This is done by treating the stressed sounds as the keyframes
▪ Ensuring timing for the mouth codes:
- Utilize the exposure sheet as the first source, but not the main source as there might be
inconsistencies
- Use the audio as the main tool to ensure consistency between the audio and visuals
- It is also recommended to play the audio from the very start and not at a specific point
for a higher chance of consistency of the audio and the frames
- Utilize sound sync if the audio is exaggerated, stressed, and/or slower
- Utilize picture sync if the audio is unstressed, faster, or unsure where to place the frame

Page 11 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

▪ Create a new layer for mouth codes

▪ Create blank frame


- On the mouth codes layer, right click on the first frame that needs to be animated

- Select “Create blank frame”

▪ Copy and paste the necessary mouth code


- Turn off visibility of the mouth codes layer and character animation layer

- Turn on visibility of the reference mouth codes layer

- Go to the reference mouth codes layer and find the correct mouth code

Page 12 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

- Copy needed mouth code

- Turn off visibility of the reference mouth codes layer

- Turn on visibility of the mouth codes layer and character animation layer

- Paste the frame on the blank frame

- Add frame label for every mouth code

Image reference: https://i.imgur.com/Og2B1fY.gif


Page 13 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

• Using Video Editing Software


○ Draw, animate, clean-up, and color all elements in a separate animation / illustration software
or traditionally
▪ Character animation
▪ Mouth codes
▪ Frame label and time chart
○ Ensure that the frame rate is 24 frames per second
▪ Default for most video editing software is either 25fps or 30 fps
○ Add audio to video editing software
○ Understand the exposure time needed for one drawing:
▪ 1s (24 drawings per second) – around 0.042 seconds
▪ 2s (12 drawings per second) – around 0.084 seconds
▪ 3s (8 drawings per second) – around 0.125 seconds
○ Place all character animation in one layer and then time according to the audio
○ Place all mouth codes in another layer and then time according to the audio
○ Place all frame labels and time charts according to the placement of the other elements

Additional Tips
• Exposure sheet greatly helps with the planning of the animation
○ It helps give a good idea as to the location of each dial more specifically
○ Allows better planning of the character and camera movements in line with the lip-syncing
○ Can give as much detail as possible before doing the actual animation
• Exposure sheet may not be in sync with the actual animation
○ This can be due to:
▪ Change of the audio during the production stages (and the exposure sheet is not
updated)
▪ Error in placement of the dial (by the keyframe animator)
• Improvise based on the audio
○ Use the exposure sheet as a means to detect the mouth code for the given audio
○ However, if it does not connect, then there is a need to improvise
○ If unsure of the placement of the mouth code based on the sound, either
▪ Delay the frame by one (aka picture sync)
▪ Remove the mouth code from the animation
• No need to animate every syllable
○ Animating every syllable removes any nuances from the voice acting since the stressed
sounds are not as stressed as desired
○ Times when a syllable can be forfeited:
▪ Blending sounds
▪ Sounds that last only one frame or less (especially if animating on 2s and 3s)
• Exaggerate if possible
○ Ensure that the exaggeration is in accordance with the character design and audio

References
• Blair, P. (1994). Animation. Walter Foster Publishing: California.
• Krita Docs. (n.d.). Audio for Animation. Retrieved from
https://docs.krita.org/en/reference_manual/audio_for_animation.html
• Technical Education and Skills Development Authority (2018 February 27). Training Regulations for
Animation NCII – Version 02. Quezon City
• Williams, R. (2001). Animator’s Survival Kit. Faber and Faber: United States.

Page 14 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

ACTIVITY 10: Lip-Sync


Instructions: Create an animation of an original character saying their motto.
• Preparations
o Have the exposure sheet filled up and ready. Use the submission from Activity 8.2 - Exposure
Sheet.
o Have the mouth codes ready. Each mouth code must be cleaned-up and final. Keep
each mouth code in a separate transparent image file (GIF/PNG) for easier referencing
later. Utilize the output from Activity 9 - Mouth Codes.
o If using a video editing tool, have the other movements ready (cleaned-up).
• Design
o Use either traditional animation, paperless animation, or a combination of both.
o Use any animation software, illustration software, video editing software, any combination
of the stated software, and any other software that is available to you and can be useful in
the creation of the activity.
o The entire animation must be at least 3 seconds with around 3-5 seconds of lip-syncing.
Additional seconds can be added for character movement.
o Character must be at least half-body or close in the frame.
o Any view is applicable, except for back view during the lip-sync.
o All elements of the lip-sync must be cleaned-up.
▪ Line style can be according to whichever style you want.
▪ Technique of clean-up is according to the student (traditional, pen tool, freehand).
▪ Consistency of the clean-up line must be observed for all elements of the animation.
▪ Use a dark neutral color for the clean-up (black, dark gray, dark brown).
• Lip-Syncing
o There must be around 3-5 seconds of lip-syncing.
o Lip-sync must be visible (front, side, 3/4).
o Ensure that the mouth codes are varying from one another to make it as clear as possible.
o Use either sound sync, picture sync, or a combination of both.
o Use the exposure sheet as a guide, but deviation is acceptable and to be expected.
• Character Movement
o The character can do movement before, after, or during the actual lip-sync.
o There should be at least one facial expression change and one body movement change.
o Use the exposure sheet as a guide, but deviation may be done, as long as it adheres to the
previous instructions.
• Submission
o Add a time chart and frame labels accordingly.
o Frame size should be at least 500px in height, and should be landscape.
o Submission should be in MP4 format only. Use a converter if necessary.
o Audio of the voice recording is necessary in the submission.
o One can also add sound effects and background music, but should enhance the main
voice recording and not overwhelm it.
• How to Submit
o File extension type should be .mp4 only.
o File name: LastName, FirstName – ICT Ani 12_ - Module 10 Activity
• Submission Channels
o Canvas K-12 LMS (Assignments)
o Google Forms: https://forms.gle/AcCVawqxsqR6o3338

Page 15 of 16
ANIMATION NCII – Animation 12b
Governor Pack Road, Baguio City, Philippines 2600
Tel. Nos.: (+6374) 442-3316, 442-8220; 444-2786;
442-2564; 442-8219; 442-8256; Fax No.: 442-6268 Grade Level/Section: ICT Ani 12 A, B, C, and D
Email: email@uc-bcf.edu.ph; Website: www.uc-bcf.edu.ph

MODULE 10 – Ani12b Subject Teacher: Lovely Jenn A. Reformado

• Sample Output

Video Link: https://youtu.be/LhNSqvNRCEk


Rubric:
Lip-Syncing Character Animation and Record Keeping Policies and
Clean-Up Quality Control
10 (excellent) – Output 10 (excellent) – Output 10 (excellent) – All production
showcases excellent usage of showcases excellent one facial information necessary are
proper mouth codes in expression and body animation present; naming convention of
accordance with the timing of that help enhance the output; the file name and proper file
the audio; nuances on lip- line quality is consistent and type were followed
syncing were also observed helps bring the entire
that help enhance the output animation together
8 (above average) – Output 8 (above average) – Output 8 (above average) –
showcases usage of proper showcases one facial Production information are
mouth codes in accordance expression and body animation mostly present and
with the timing of the audio that help enhance the output unnecessary information
with few errors; some nuances with few errors; line quality is maybe present; naming
on lip-syncing were also consistent and helps bring the convention of the file name
observed that help enhance entire animation together and proper file type were
the output followed
6 (satisfactory) – Output 6 (satisfactory) – Output 6 (satisfactory) – Production
showcases usage of mouth showcases one facial information are mostly present,
codes in accordance with the expression and body animation and some unnecessary
timing of the audio with errors; with significant errors; line information is present; naming
nuances on lip-syncing is not quality is somewhat consistent convention of the file name
present, or was observed but but does not help with the and proper file type may have
did not enhance the output quality of the animation been followed
4 (fair) – Output showcases 4 (fair) – Output lacks either the 4 (fair) – Some production
mostly improper usage of facial expression or body information is present and
mouth codes in accordance to animation that help enhance unnecessary information is
the timing of the audio; usage the output; clean-up may or present; naming convention of
of lip-sycing deters the quality may not have been done for the file name or proper file type
of the output this output were not followed
2 (needs improvement) – There 2 (needs improvement) – 2 (needs improvement) – No
is a need to understand how to Output lacks facial expression production information is
do proper lip-syncing before and body animation that help present; naming convention of
undergoing the activity enhance the output; clean-up the file name and proper
was not done for this output filetype were not followed
Page 16 of 16

You might also like