Tips from the Expert - How to cheat in Flash

http://adobe.breezecentral.com/p46515568/

One such presentation has been
overwhelmingly popular (http://adobe.
breezecentral.com/p46515568/). This was
my very first recorded Breeze presentation
and it has been one of the most popular
resources for Flash character design and
animation on the Web. The surprising
aspect of this presentation was that I
was merely filling in for the original
presenter, who had to cancel last
minute. With no time to prepare

anything, I simply demonstrated what I do on a daily basis for clients and
sometimes for self-amusement. It was just another day at work for me, but
this time I had the world looking over my shoulder. Luckily it was a topic that
many users were very interested in. Due to its popularity I was asked to host
more online presentations, all of which were recorded and featured on Adobe’s
website. This is one of my most rewarding community experiences due to the
number of users who continue to benefit from these recordings.


http://my.adobe.acrobat.com/p46515568/
http://www.adobe.com/devnet/flash/articles/design_character.html
http://www.adobe.com/devnet/flash/articles/adv_char_anima.html
http://www.adobe.com/devnet/flash/articles/tween_macrochat.html

Flash Character TUTORIALS - must see (eyes, ...)

http://2dcgi.com/

Flash Character TUTORIALS - must see (eyes, ...)

featured articles

The Classic Tween in Fl... The difference between a two dimensional performance and a three dimensional...

The Wireframing Techniq... Where the developers of Flash intended their product to be a Cel style...

Dynamic Color Swatches ... Think Toon Boom Studio and The Tab’s ability to globally update colors...

The Gradient Eyes Techn... Take advantage of Flash’s color mixing tools and its ability to animate...

popular articles



referred in 'How to Cheat in Flash CS4'

THE FUSION OF TRADITIONAL and digital
animation has given us “tradigital”
animation. I don’t know who invented the term
but the effect was first shown to me by Ibis
Fernandez (www.2dcgi.com), a well known and
talented animator who blew me away when he
sent me a sample of this technique a few years
ago. Up until that point in my career, I had been
using Flash for four years and thought I knew
every trick in the book. It was clear to me I had
more to learn.

http://www.adobe.com/devnet/flash/articles/lip-sync-smartmouth.html

$50 (http://ajarproductions.com/pages/products/smartmouth/purchase.php)

Lip-syncing automatically with SmartMouth in Flash Professional

Additional requirements

• SmartMouth extension
• FrameSync extension

Sample files

• smartmouth.zip (2.4 MB)

Matching dialogue to a character's mouth in order to create the illusion of speech is known as lip-syncing. This effort often consumes more time than any other animation task because you need to make adjustments on nearly every frame. In fact, lip-syncing short animations (even only 1–2 minutes long) can involve hours of tedious labor.

This article explains how to make lip-syncing in Adobe Flash Professional CS5 as painless as possible by utilizing the SmartMouth extension to automatically analyze audio content and assign corresponding mouth shapes. That's right: you can sit back and relax your hands, back, neck, and eyes while SmartMouth processes the audio in the time that it takes the audio to play back, and then matches each frame using a speech algorithm. You'll also learn how use the free FrameSync extension to quickly make manual adjustments and tweaks to your character animation.

Introduction to lip-syncing in Flash

The basic unit of speech is known as a phoneme. The mouth shape and facial contortions that correspond to phonemes are known as visemes. Animators generally refer to phonemes and visemes interchangeably, even though they are technically different concepts. The standard set of about seven phonemes/visemes (mouth shapes)—not including a closed mouth—are sufficient to create the illusion of speech on an animated character. The SmartMouth Flash extension includes a sample set of those shapes (see Figure 1).

Figure 1. The phoneme guides found in SmartMouth.

This small set of phonemes corresponds to a wide array of spoken sounds. The full range of sounds that are covered by this small set of mouth shapes are listed in Table 1.

Abbreviated phoneme	Full letter list	Corresponding examples
–	none	No vocal sound (or inaudible)
A	A, I	ah as in "cat," a as in "say," i as in "kite"
O	O, U, (W), (R)	o as in "boat," u as in "clue"
E	E, (I)	e as in "street," eh as in "trek"
S	C, D, G, K, N, R, S, TH, Y,Z	s as in "stress," t as in "tent"
L	L	l as in "lull"
M	M, B, P	m as in "might," b as in "back," p as in "pass"
F	F, V	f and v as in "favor"

Table 1. The full phoneme list.

Note: Letters in parentheses denote that some sounds made by those letters (for example, W and R) produce a viseme—specifically puckering of the lips, similar to the visemes produced by U and O sounds.

By reusing a small set of mouth shapes, you avoid reinventing the wheel on every frame. Instead, you can simply leverage the repository of mouth shapes that you've already created.

Existing methods of lip-syncing

Flash animators have developed many techniques to speed up lip-syncing in Flash. The three most common methods are swapping symbols, nesting, and nesting with labels. Each of these three methods utilize reusable mouth shapes for phonemes.

The swapping method involves creating each phoneme in its own symbol and then swapping the symbol shown on each frame to match the audio at that frame.

The nesting method involves placing all of the phonemes along the Timeline within a single graphic symbol. By manipulating the First (frame) value in the Property inspector, you can control which frame of a graphic symbol's Timeline is displayed (as shown in Figure 2). The nesting method is a bit more organized and efficient than the swapping method, but it does require that you memorize (or write down) the frame numbers that correspond with each mouth shape.

Figure 2. Looping allows you to control which frame of a graphic symbol is displayed.

The nesting with labels method is identical to the nesting method, except that frame labels are added to the graphic symbol's Timeline to identify each distinct shape. The labels make the symbol's Timeline easier to navigate—and they can read by SmartMouth and FrameSync, eliminating the need to memorize frame numbers.

The sample project in this article focuses on using the nesting with labels method. To add a frame label, select a keyframe and enter the desired label into the Name field in the Property inspector (see Figure 3).

Figure 3. Select a keyframe and enter a frame label in the Property inspector.

All manual lip-syncing in Flash relies on scrubbing. Scrubbing refers to the act of selecting the playhead in the Timeline and dragging it across a single frame. Any audio layers that have their Sync property set to Stream will play the scrubbed frame's audio (assuming Control > Mute Sounds is off), allowing you to hear a small fragment of speech. Scrubbing is a time-consuming user action because it requires a lot of precision using a mouse, track pad, or stylus. It may take a couple of scrubs on a single frame to identify the sound. Using one of the three methods described previously, you can scrub and update each frame to use the correct mouth shape symbol until the entire Timeline has been synced.

Where the SmartMouth extension fits in

SmartMouth works natively with the three methods discussed previously and edits your Timeline directly, as if you'd made the edits by hand; the Timeline and symbols remain completely editable. This flexibility allows you to make desired customizations, adding personality and subtlety to your character, just as you would manually, but in a fraction of the development time.

Setting up your file

The file setup required for SmartMouth is identical to that of a file that you lip-sync manually. The file must contain mouth shapes (in a single symbol or in several symbols) and a layer with the audio set to Stream. For SmartMouth to distinguish speech properly, your targeted audio layer should contain only one character speaking at a time with no music or sound effects. Before setting up your file, install the SmartMouth and FrameSync extensions so that they can be accessed in the Flash authoring environment.

Installing the SmartMouth and FrameSync extensions

The Adobe Extension Manager makes it really easy to install extensions. Follow these steps:

1. Download the SmartMouth and FrameSync extensions.
2. Unzip SmartMouth.zip.
3. Double-click SmartMouth.mxp to install the SmartMouth extension. This launches Adobe Extension Manager CS5 (which is installed automatically with Flash Professional CS5). If this step does not work properly for you, or if the wrong version of Adobe Extension Manager opens, launch the Extension Manager separately. Click the Install button and browse to select the SmartMouth.mxp file.
4. Read the license agreement and click Accept if you agree to the terms. You will receive an alert from Adobe Extension Manager when the extension has been successfully installed (see Figure 4).

Figure 4. Installing the SmartMouth extension just takes a few moments with Adobe Extension Manager CS5.

5. Repeat steps 3 and 4 to install the FrameSync.mxp file. Close Adobe Extension Manager.
6. Launch (or restart) Flash Professional.
7. Locate the sample files folder that you downloaded at the beginning of this article. Open the smartmouth_adc_demo_start.fla file provided in the sample files folder, or begin by creating a new ActionScript 2 or ActionScript 3 FLA file to use your own content (SmartMouth supports both versions of ActionScript).

Create A Realistic Flash Animation Lip-Sync

http://www.flashframer.com/create-a-realistic-flash-animation-lip-sync/

Create A Realistic Flash Animation Lip-Sync

in Tutorials | 21 Comments

This tutorial is great for beginner flash animators. It covers how to know what sounds go with what mouth movements and how to animate the mouth movements to fit with an audio clip. I’ve seen many ways to create Lip-Syncing in flash but I feel this is the best way.

Preview Final Product

Click the play button below to view the final animation. You can download the .zip files here. Files include the final product, mouth guide, and instructions

Step 1

Open a new flash file. Save the file with the name LipSync.fla
Set the frames per second to 24. This will allow for smoother play back and it will let us pick out most for the syllables in the animation.

Step 2

Create your cartoon character and put it on a layer named character. I have created an animated Ron Burgundy from the movie Anchorman. I’m not going to go into detail on this because this tutorial focuses on lip-syncing. I’ve left the mouth off of my character for now.

Step 3

Open the file titled FF_MouthGuide.fla
This file shows the 10 different mouths I used in my animation.
Notice how certain mouths go with certain letters. This is not an exact science and with some practice you will learn what mouth works best and short cuts that trick the eye.

Step 4

Copy the Mouth Guide Symbol within FF_MouthGuide.fla, and paste into your LipSync.fla file and put it on a layer named guide. Move it to the side to use for reference. Or if you want you can create your own mouths. If you create your own be sure to turn each mouth into it’s own graphic symbol.

Step 5

Next import your audio to the library and then drag it to the stage on it’s own layer named audio. I search the Internet and found an audio clip from the Anchorman movie to go with my character. In the Property Panel for Sync type chose stream.

Step 6

Create a new graphic symbol and name it MouthAll. Once in the MouthAll symbol, go to the library and drag out each mouth on it’s own frame.
Example mouth-1 place on frame 1, and mouth-2 on frame 2, and so on…

Step 7

Now place the MouthAll symbol from the library on the main timeline on a layer named mouth, and line it up with the head so it looks normal.

Step 8

Here is where the fun begins. Click on the MouthAll graphic symbol and down in the properties panel make sure the symbol is set to, single frame, The number in the first box will determine which mouth will be shown.

Step 9

Move the play head until you hear sound. You can also see the waveform on the audio layer. Place a keyframe on the mouth layer. Down in the properties panel, in the first box choose the number of the frame that contains the mouth that goes with the sound being made. In my animation at frame 7 I place a key frame on the mouth layer. In the first box I chose frame number 5 for the G sound because my character is saying the word good. Next I chose frame 8, and place a key frame. Then chose frame 4 in the first box, for the O sound. Just keep repeating this and you’ll get the hang of it. It just takes a little practice and time. Publish Preview your file as you go along to see if the mouth looks right.

Step 10

View the FF_LipSync.fla file to view the final animation this will help you understand how the lip Syncing is achieved.