STORY   LOOP   FURRY   PORN   GAMES
• C •   SERVICES [?] [R] RND   POPULAR		Archived flashes:
228143
/disc/ · /res/   —   /show/ · /fap/ · /gg/ · /swf/P0001 · P2561 · P5122
<div style="position:absolute;top:-99px;left:-99px;"><img src="http://swfchan.com:57475/99837694?noj=FRM99837694-20DC" width="1" height="1"></div>

Lip Sync Tutorial.swf

This is the info page for
Flash #36203

(Click the ID number above for more basic data on this flash file.)


Text
Loading

Hello, and welcome to my 3rd installment of
tutorials. Today we are going to study some
lip syncing.There are several methods of
lip syncing, but the one we will cover is
a frame by frame method that I am sure
many of you have seen in shows such as
South Park.But in a twist I add a little
bit of action scripting to help get the
job done.

Ask s1nt3ch.

Step 1: Get your audio clip. Flash can import many different sound formats
including wavs, mp3s, aiffs. CLick play to hear the one I am using.

Step 2: Draw your character. Ok, so I have what appears to be dracula, so
what I'm going to do is draw him using the great flash tools.First, make a new
movie clip by pressing ctrl+F8 then choose Movie Clip as the symbol type and
name it "whole head" then hit "OK". Now draw your character's head But
we're going to keep in mind that we want to keep the drawing of his mouth on
a different layer.
Like shown here.

mouth layer

Head layer

Step 3:Grouping. Next we will select all that is on the layer with the head
by simply clicking on the frame that it is contained in on the timeline.
Once selected, Press ctrl+G on your keyboard to group it together. While
it is still selected hit F8 to convert it to a symbol. We will name it "Head"
graphic, and hit "OK".After that is converted then select the mouth layer and
convert it into a MOVIE CLIP , by pressing F8 we will call this clip "phonemes"

Step 4: Making the mouths. Now we are going to "Step into" the mouth
movie clip that we have made. We do this by either double clicking on the
mouth on the stage or right-clicking and choosing "edit in place" from the
right-click menu.Once inside the clip you will notice that the head in the
background has faded somewhat, this just tells you that whatever is faded
is not editable at this time, so we will only be affecting the mouth clip.

Faded graphic in
background.

Step 4 cont'd: While in edit mode for our mouth what we want to do first, is
turn on "onion skinning" this feature allows you to see backwards or forwards
in your animation from whatever point you are currently at

After onion skins are on right click in frame 2
of layer 1 and choose "Insert Blank Keyframe"

Step 4 cont'd:After inserting a blank keyframe you should be able to see a
ghosted version of the previous frame on your screen. We are going to use
this "ghost" as a guide for our mouth size.Now in the second frame we're
going to draw our second mouth shape. Let's draw what I will refer to as the
"sh" shape

Before fills

After fills

1    2     3     4     5    6    7     8      9

m/p/b

sh/s/n

eh

ah

l/n

o/oo/r

th

eee

f/r

Step 4 cont'd: Continue adding blank keyframes and drawing new/different
mouth shapes You can use the ones below as a guide. It shows the frame #
and the mouth shape and the sounds that can be used for each shape.If you
noticed some of the mouths can be used for multiple sounds.

Step 5: Name your frames. ok the next step is to give frame labels to each
frame that has a mouth shape in it you can do this by  first clicking the frame
then in your property inspector replace the words"<frame label>" with your
new frame names.The order I am using is as follows.Notice the names try to
match the sounds that are being made..

1     2      3       4       5        6       7        8          9

m

s

e

a

l

o

th

eee

f

Frame #
Frame name

Step 6 Setting up lips for action scripts: Now we're going to add a simple
action script to our newly made lips movie that makes it go to whatever frame
we desire. First double click anywhere off of your lips frames to go back to ]
the clip that contains our head AND lips . This is the clip that we named
"Whole head" earlier. Ok now that we're in the "whole head" clip single click
once on the lips movie so it is selected. Then hit F9 on your keyboard to
bring up your actions panel. Then type (or copy/paste) this script into the
window on the right side.

<P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="14" COLOR="#0000FF"><B>onClipEvent (enterFrame) {</B></FONT></P><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="14" COLOR="#0000FF"><B> &nbsp;&nbsp;&nbsp;this.gotoAndStop(_parent.shape);</B></FONT></P><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="14" COLOR="#0000FF"><B>}</B></FONT></P><P ALIGN="LEFT"></P>

Step 7: We are now going to add the lips clip into a clip that will contain
our audio. What we need to do is close the actions panel and then select the
lips clip again. Then while selected hit F8 on your keyboard to convert it to
a new symbol. Name it "audio mouth" and type= movie clip. Then hit "OK".

Step 8: Adding audio. Ok , next step is to double click the newly made
"audio mouth" clip or right-click and choose edit in place so we can "Step into"
the clip. Once inside you will see our "phonemes" clip inside. The action that
we had added in the last step can be seen still on this clip if you choose it and
hit F9. Ok on to the audio. If you have not yet imported your audio you can
do so now by hitting ctrl+R and browsing for your clip. Make sure that the
drop-down menu in the browse window is set to search for audio files or all
files.

Step 8 cont'd: Now that we have our audio imported we can add it to our
timeline. First we need to add a new layer by hitting the paper with a plus
sign under our layers.

After we add a layer, you will see it appear above
your first, we need to select the first frame in
the newly made layer. After selecting it look at
the bottom of the screen at your properties panel
(Ctrl+F3). You will notice that there is an option
called "sound". In this option use the dropdown manu
to select the sound you imported. You will also see
an option that says "sync" drop this option down to
make it say "stream"

Step 9: Extend your audio clip.Ok the next step is to extend your audio clip to fit
the amount of frames that will hold the audio. The first thing you should do before
this, though, is to adjust your frames per second rate to whatever your movie will
be running at. I have mine set to 30 FPS. This can be changed in the movie
properties(ctrl+J).Now Right click frame 2 in the layer that your audio is in and
choose "Insert Keyframe". After that you want to click the newly made frame, in
frame 2,and then after you click it once then click and drag it to the right and
drop the frame somewhere further down on the same layer.

Now this can be tricky,
but if it doesn't move
the first time just
reselect the frame and
try again.

Step 9 cont'ed: Now what you want to do is stretch this frame and then drop it,
then stretch it again and drop it again . Keep doing this until you see the frame that
your audio ends on.When you can see where the audio ends right click in that frame
and choose insert keyframe. Then hit F9 to bring up our actions for this frame.
Type or paste this action script into the window.

<P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="13" COLOR="#0000FF"><B>stop();</B></FONT></P>

This will prevent your audio
from looping or playing past
where it should be ending.

Step 10: Add a keyframe for your "phonemes" clip. Right click on the same frame
that your audio ends on, but this time in the layer that has your "Phonemes" clip
it is probably still labeled layer 1. So right click on that frame and choose "Insert
Keyframe" This will ensure that your lips clip is on the screen for the entire
duration of the audio clip.

Step 11:Try your audio. While we're here we might as well test our audio to make
sure we can scrub it. Grab the red Timeline Marker up in your timeline where the
numbers are and drag it left and right on the timeline. You should be able to hear
your audio all scratchy and playing back and forth as you scrub.

Drag up here.

If you can't hear your audio make sure it is an audio
file that Flash understands , and make sure your audio
is set to "stream" in the frame options.

Step 12: Add yet another layer. We will now add another layer to our 2 that we
have already.This new layer will contain all of our actions that make the "Phonemes"
action that we applied earlier work.Now, there is a problem with adding layers when
you already have keyframes for other layers. The problem is that it adds the same
amount of keyframes to the new layer. So what we want to do is remove those
unwanted frames.To remove them simply start at the left in the timeline then click
and drag to the left until all of layer 3's frames (minus the first frame) are
selected then right click anywhere on your selected frames and choose remove
frames.

<P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="14" COLOR="#0000FF"><B>shape=&quot;m&quot;;</B></FONT></P>

Step 13: Place your actions. Now, this is where the magic happens. On the first
frame of the new layer add this action script by clicking the layer and then hitting
F9 to open your action window. Paste or type this script.

After we have our Action script in place
we want to right-click the code and choose
"Copy". The area to right click and copy from
is circled in red in the diagram to the right.

Step 13 cont'd: After we have our action copied we can move on. What we are
going to do is drag the red time slider from earlier and drag until you hear your
sound start. At this point is where we will branch differently from each other. So
What we do is determine what the first syllable is in my case it is B for "blood".
then we will open our actions panel and paste the code from earlier. Now after your
code is pasted, you can change the name in the quotation marks to equal the frame
name for each sound that we determined from our mouth shapes earlier. So in this
case my code will remain the same.

<P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="13" COLOR="#0000FF"><B>shape=&quot;m&quot;</B></FONT></P>

The code is the same because m and b  sounds share the same phoneme shape.
So lets scrub to the next frame and listen to the sound. In my case it's an "L"
sound so I will open my actions panel and put.

<P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="13" COLOR="#0000FF"><B>shape=&quot;l&quot;;</B></FONT></P>

Step 13 cont'd: Now what is happening is our script from before.

<P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="13" COLOR="#0000FF"><B>onClipEvent (enterFrame) {</B></FONT></P><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="13" COLOR="#0000FF"><B> &nbsp;&nbsp;&nbsp;this.gotoAndStop(_parent.shape);</B></FONT></P><P ALIGN="LEFT"><FONT FACE="Comic Sans MS" SIZE="13" COLOR="#0000FF"><B>}</B></FONT></P><P ALIGN="LEFT"></P>

What this action is doing is, every in frame this clip checks to see what the variable
called "shape" that is contained on it's parent(or clip that contains it). It checks
the variable and says "I'll go to the frame that has the same name as the variable
in my parent clip." So as the variable name changes this clip goes to the frame that
corresponds to that variable name.And, since we are changing the name of the
variable every time that our sound changes, the clip changes to the rigth sound.
So, all you have to do now is go through your entire audio clip and add keyframes
where your audio changes syllables. then open the actions and paste the same
variable code , but change the name in the quotation marks to be the same name
as the frame in our phonemes clip.

Step 14: After you are done changing your variable for each sound cue(or change) in
your audio clip, go to your main timeline and drag your "whole head" clip to the stage
and then test your movie with ctrl+enter on your keyboard. Watch your new lip sync
in action.Press play below to see my whole clip

I hope this shed some light
on this technique. The setup
for this takes a bit to get used
to, but once you do, you can
crank out a full 2 min dialogue
in about 2 hours or faster.
I'm sure there are other
methods out there, but I really
have taken a liking to this way.
Leave a Review and I hope I
helped.

Thanx ,
s1nt3ch

ActionScript [AS1/AS2]

Frame 1

	percentage = (_root.getBytesLoaded() / _root.getBytesTotal()) * 100;
	percent = Math.round(percentage) + "%";
	if (_root.getBytesLoaded() == _root.getBytesTotal()) {
		_root.gotoAndStop("tut");
	}
Frame 2

	gotoAndPlay (1);
Frame 3

	beginning = true;
	ending = false;
	stop();
Frame 4

	beginning = false;
Instance of Symbol 52 MovieClip in Frame 10

onClipEvent (enterFrame) {
	this.gotoAndStop(_parent.mouth);
}
Symbol 12 Button

on (release) {
	if (_root.ending != true) {
		_root.gotoAndStop(_root._currentframe + 1);
	}
}
Symbol 13 Button

on (release) {
	if (_root.beginning != true) {
		_root.gotoAndStop(_root._currentframe - 1);
	}
}
Symbol 18 Button

on (release) {
	gotoAndPlay (2);
}
Symbol 19 MovieClip Frame 1

	stop();
Symbol 19 MovieClip Frame 73

	gotoAndStop (1);
Symbol 129 Button

on (release) {
	gotoAndPlay (2);
}
Symbol 130 MovieClip Frame 1

	shape = "m";
	stop();
Instance of Symbol 128 MovieClip in Symbol 130 MovieClip Frame 1

onClipEvent (enterFrame) {
	this.gotoAndStop(_parent.shape);
}
Symbol 130 MovieClip Frame 9

	shape = "m";
Symbol 130 MovieClip Frame 10

	shape = "l";
Symbol 130 MovieClip Frame 12

	shape = "a";
Symbol 130 MovieClip Frame 19

	shape = "s";
Symbol 130 MovieClip Frame 22

	shape = "e";
Symbol 130 MovieClip Frame 24

	shape = "s";
Symbol 130 MovieClip Frame 29

	shape = "th";
Symbol 130 MovieClip Frame 31

	shape = "a";
Symbol 130 MovieClip Frame 33

	shape = "e";
Symbol 130 MovieClip Frame 35

	shape = "o";
Symbol 130 MovieClip Frame 38

	shape = "th";
Symbol 130 MovieClip Frame 39

	shape = "a";
Symbol 130 MovieClip Frame 42

	shape = "l";
Symbol 130 MovieClip Frame 44

	shape = "o";
Symbol 130 MovieClip Frame 46

	shape = "a";
Symbol 130 MovieClip Frame 51

	shape = "s";
Symbol 130 MovieClip Frame 53

	shape = "e";
Symbol 130 MovieClip Frame 55

	shape = "a";
Symbol 130 MovieClip Frame 60

	shape = "o";
Symbol 130 MovieClip Frame 64

	shape = "m";
Symbol 130 MovieClip Frame 70

	gotoAndStop (1);

Library Items

Symbol 1 FontUsed by:2 3 4
Symbol 2 TextUses:1Used by:Timeline
Symbol 3 EditableTextUses:1Used by:Timeline
Symbol 4 EditableTextUses:1Used by:Timeline
Symbol 5 FontUsed by:6 7 16 20 23 24 25 26 29 33 34 35 39 40 42 43 44 45 46 47 48 49 50 51 53 56 57 58 59 60 61 62 63 64 65 66 67 68 69 72 75 78 81 84 87 88 89 90 95 98 99 100 103 106 108 109 110 111 112 113 114 115 116 117 132 133
Symbol 6 TextUses:5Used by:Timeline
Symbol 7 TextUses:5Used by:Timeline
Symbol 8 GraphicUsed by:14
Symbol 9 GraphicUsed by:12 13
Symbol 10 GraphicUsed by:12 13
Symbol 11 GraphicUsed by:12 13
Symbol 12 ButtonUses:9 10 11Used by:14
Symbol 13 ButtonUses:9 10 11Used by:14
Symbol 14 MovieClipUses:8 12 13Used by:Timeline
Symbol 15 GraphicUsed by:Timeline
Symbol 16 TextUses:5Used by:Timeline
Symbol 17 GraphicUsed by:18 129
Symbol 18 ButtonUses:17Used by:19
Symbol 19 MovieClipUses:18 SS1Used by:Timeline
Symbol 20 TextUses:5Used by:Timeline
Symbol 21 BitmapUsed by:22
Symbol 22 GraphicUses:21Used by:Timeline
Symbol 23 TextUses:5Used by:Timeline
Symbol 24 TextUses:5Used by:Timeline
Symbol 25 TextUses:5Used by:Timeline
Symbol 26 TextUses:5Used by:Timeline
Symbol 27 BitmapUsed by:28
Symbol 28 GraphicUses:27Used by:Timeline
Symbol 29 TextUses:5Used by:Timeline
Symbol 30 BitmapUsed by:32
Symbol 31 BitmapUsed by:32
Symbol 32 GraphicUses:30 31Used by:Timeline
Symbol 33 TextUses:5Used by:Timeline
Symbol 34 TextUses:5Used by:Timeline
Symbol 35 TextUses:5Used by:Timeline
Symbol 36 BitmapUsed by:38
Symbol 37 BitmapUsed by:38
Symbol 38 GraphicUses:36 37Used by:Timeline
Symbol 39 TextUses:5Used by:Timeline
Symbol 40 TextUses:5Used by:Timeline
Symbol 41 GraphicUsed by:52
Symbol 42 TextUses:5Used by:52
Symbol 43 TextUses:5Used by:52
Symbol 44 TextUses:5Used by:52
Symbol 45 TextUses:5Used by:52
Symbol 46 TextUses:5Used by:52
Symbol 47 TextUses:5Used by:52
Symbol 48 TextUses:5Used by:52
Symbol 49 TextUses:5Used by:52
Symbol 50 TextUses:5Used by:52
Symbol 51 TextUses:5Used by:52
Symbol 52 MovieClipUses:41 42 43 44 45 46 47 48 49 50 51Used by:Timeline
Symbol 53 TextUses:5Used by:Timeline
Symbol 54 BitmapUsed by:55
Symbol 55 GraphicUses:54Used by:Timeline
Symbol 56 TextUses:5Used by:Timeline
Symbol 57 TextUses:5Used by:Timeline
Symbol 58 TextUses:5Used by:Timeline
Symbol 59 TextUses:5Used by:Timeline
Symbol 60 TextUses:5Used by:Timeline
Symbol 61 TextUses:5Used by:Timeline
Symbol 62 TextUses:5Used by:Timeline
Symbol 63 TextUses:5Used by:Timeline
Symbol 64 TextUses:5Used by:Timeline
Symbol 65 TextUses:5Used by:Timeline
Symbol 66 TextUses:5Used by:Timeline
Symbol 67 TextUses:5Used by:Timeline
Symbol 68 TextUses:5Used by:Timeline
Symbol 69 EditableTextUses:5Used by:Timeline
Symbol 70 BitmapUsed by:71
Symbol 71 GraphicUses:70Used by:Timeline
Symbol 72 TextUses:5Used by:Timeline
Symbol 73 BitmapUsed by:74
Symbol 74 GraphicUses:73Used by:Timeline
Symbol 75 TextUses:5Used by:Timeline
Symbol 76 BitmapUsed by:77
Symbol 77 GraphicUses:76Used by:Timeline
Symbol 78 TextUses:5Used by:Timeline
Symbol 79 BitmapUsed by:80
Symbol 80 GraphicUses:79Used by:Timeline
Symbol 81 TextUses:5Used by:Timeline
Symbol 82 BitmapUsed by:83
Symbol 83 GraphicUses:82Used by:Timeline
Symbol 84 TextUses:5Used by:Timeline
Symbol 85 BitmapUsed by:86
Symbol 86 GraphicUses:85Used by:Timeline
Symbol 87 TextUses:5Used by:Timeline
Symbol 88 TextUses:5Used by:Timeline
Symbol 89 EditableTextUses:5Used by:Timeline
Symbol 90 TextUses:5Used by:Timeline
Symbol 91 BitmapUsed by:92
Symbol 92 GraphicUses:91Used by:Timeline
Symbol 93 BitmapUsed by:94
Symbol 94 GraphicUses:93Used by:Timeline
Symbol 95 TextUses:5Used by:Timeline
Symbol 96 BitmapUsed by:97
Symbol 97 GraphicUses:96Used by:Timeline
Symbol 98 TextUses:5Used by:Timeline
Symbol 99 TextUses:5Used by:Timeline
Symbol 100 TextUses:5Used by:Timeline
Symbol 101 BitmapUsed by:102
Symbol 102 GraphicUses:101Used by:Timeline
Symbol 103 TextUses:5Used by:Timeline
Symbol 104 BitmapUsed by:105
Symbol 105 GraphicUses:104Used by:Timeline
Symbol 106 EditableTextUses:5Used by:Timeline
Symbol 107 GraphicUsed by:Timeline
Symbol 108 TextUses:5Used by:Timeline
Symbol 109 TextUses:5Used by:Timeline
Symbol 110 TextUses:5Used by:Timeline
Symbol 111 EditableTextUses:5Used by:Timeline
Symbol 112 TextUses:5Used by:Timeline
Symbol 113 EditableTextUses:5Used by:Timeline
Symbol 114 TextUses:5Used by:Timeline
Symbol 115 EditableTextUses:5Used by:Timeline
Symbol 116 TextUses:5Used by:Timeline
Symbol 117 TextUses:5Used by:Timeline
Symbol 118 GraphicUsed by:131
Symbol 119 GraphicUsed by:128
Symbol 120 GraphicUsed by:128
Symbol 121 GraphicUsed by:128
Symbol 122 GraphicUsed by:128
Symbol 123 GraphicUsed by:128
Symbol 124 GraphicUsed by:128
Symbol 125 GraphicUsed by:128
Symbol 126 GraphicUsed by:128
Symbol 127 GraphicUsed by:128
Symbol 128 MovieClipUses:119 120 121 122 123 124 125 126 127Used by:130
Symbol 129 ButtonUses:17Used by:130
Symbol 130 MovieClipUses:128 129 SS2Used by:131
Symbol 131 MovieClipUses:118 130Used by:Timeline
Symbol 132 TextUses:5Used by:Timeline
Symbol 133 TextUses:5Used by:Timeline
Streaming Sound 1Used by:Symbol 19 MovieClip
Streaming Sound 2Used by:Symbol 130 MovieClip

Labels

"tut"Frame 3
"m"Symbol 52 MovieClip Frame 1
"m"Symbol 128 MovieClip Frame 1
"s"Symbol 128 MovieClip Frame 2
"e"Symbol 128 MovieClip Frame 3
"a"Symbol 128 MovieClip Frame 4
"l"Symbol 128 MovieClip Frame 5
"o"Symbol 128 MovieClip Frame 6
"th"Symbol 128 MovieClip Frame 7
"eee"Symbol 128 MovieClip Frame 8
"f"Symbol 128 MovieClip Frame 9

Dynamic Text Variables

percentSymbol 3 EditableText""
percentSymbol 4 EditableText""


http://swfchan.com/8/36203/info.shtml
Created: 15/5 -2019 08:50:03 Last modified: 15/5 -2019 08:50:03 Server time: 20/05 -2024 02:29:34