Tutorial: Lip sync, czyli gadająca głowa z Flasha CS4

psd | 12.07.2010, przeczytano 9079 razy

W tym tutorialu Łukasz Przystalski przedstawi podstawowe informacje na temat animacji ruchu ust. Animacje tego typu można wykorzystać podczas tworzenia jakiejkolwiek animacji, w której zechcemy, aby nasz bohater przemówił. Taka animacja może być później wykorzystana na potrzeby internetu, można również użyć jej do stworzenia np. kartki urodzinowej.

artykułów: 35

Informacje wstępne
Jeżeli ktoś z Was próbował już kiedyś zrobić animację ruchu ust jakiejś postaci, być może zaczynał tak jak ja. Pierwszym krokiem było stworzenie różnych kształtów ust, które miały odpowiadać wypowiadanym literom. Później przysłuchiwanie się ścieżce dźwiękowej i próby dopasownia odpowiednich liter wypowiadanego słowa do właściwego miejsca na linii czasu. Ponowne przejrzenie ścieżki dźwiękowej i ewentualne poprawki, jeżeli brakowało którejś litery. I w końcu testowy podgląd dotychczasowej pracy. I tutaj pojawiał się problem. Ścieżka dźwiękowa szła sobie swoim tokiem, natomiast animacja ruchu ust była tragiczna. Trudno w ogóle można było powiedzieć, aby coś było dopasowane. Po prostu klatka po klatce kształty ust postaci pojawiały się i znikały o wiele za szybko, tworząc tym samym ogromny chaos, zamiast imitować płynny ruch ust.

Zacząłem się zastanawiać, co zrobiłem nie tak? Przecież starałem się idealnie dopasować poszczególne litery w każdym wypowiedzianym na ścieżce słowie.

Po przestudiowaniu kilku książek związanych z tym tematem, przyswojeniu kilku tutoriali, a także zwróceniu większej uwagi na to, w jaki sposób wypowiadamy poszczególne słowa, teraz już wiem, gdzie popełniałem błędy.

Przedstawię Wam podstawowe informacje, które na początku przygody z animacją ruchu ust będą przydatne i pomocne.

Podstawowe informacje - kilka rzeczy na początek
Musimy pamiętać o tym, że litery, które wypowiadamy, dzielą się na dwie kategorie. Pierwsza to samogłoski, które są reprezentowane przez otwarte usta tj. A, E, I, O, U. Dźwięk tu wydawany jest, kiedy otwieramy usta. Drugą grupę stanowią spółgłoski, których dźwięk powstaje przy ustach prawie lub całkiem zamkniętych.

Nie starajmy się dopasowywać wszystkich liter w słowie, tylko główne i najwyraźniejsze dźwięki. Kiedy animujemy wypowiedź jakiegoś słowa, pamiętajmy o tym, że kiedy mówimy, nie wypowiadamy poszczególnych liter tego słowa. Wymawiamy dźwięki, sylaby, które poprzez odpowiednie ułożenie ust umożliwiają nam wypowiadanie słów. Przeważnie jest tak, że jeden wypowiedziany przez nas dźwięk, który charakteryzuje się jednym ruchem ust, obejmuje kilka liter z danego słowa. Pamiętajmy, że w naszej mowie nie ma liter, są tylko dźwięki i kształty ust, które odpowiednio się układają, aby te dźwięki wydać.

Każda pozycja ust, która zostanie wstawiona do animacji powinna być widoczna przez co najmniej dwie klatki. Jeżeli pozycje ust będą na jednej klatce, wszystko będzie niewyraźne i wprowadzimy w ten sposób niepotrzebny chaos. Często jednak zdarza się, że dialog jest szybki i mamy mniej niż dwie klatki na poszczególne dźwięki. Jeżeli tak będzie, nie starajmy się złapać każdej sylaby. Jeżeli dialog jest szybki i mamy mniej niż dwie klatki na fonem na naszej linii czasu (fonem to najmniejsza jednostka mowy rozróżnialna dla użytkowników danego języka), postarajmy się zaanimować tylko najbardziej wyraziste dźwięki. Dodatkowo weźmy lusterko i przypatrzmy się jak sami wypowiadamy poszczególne kwestie dialogu. W takim przypadku postarajmy się wychwycić właściwy co najmniej pierwszy i ostatni dźwięk słowa.

Rozgryzanie przykładowego słowa
Spróbujmy teraz zaanimować przykładowe słowo GRAFIKA – kiedy je wypowiadamy, słyszymy wszystkie litery, które je budują. Nie oznacza to, że do animacji musimy wstawiać pozycje ust, które będą odpowiadały każdej z nich.

Gdybyśmy to zrobili, otrzymalibyśmy mniej więcej coś takiego jak przykład – grafika1.fla. Aby zmieścić wszystkie pozycje ust w tym krótkim słowie, co najmniej w dwóch momentach wstawiona pozycja ust musiałaby zostać zmieszczona tylko na jednej klatce. Wprowadziło to pewien chaos, ponieważ usta otwierają się i wypowiadają poszczególne litery tego słowa, ale my tak nie mówimy w rzeczywistości. Kiedy wypowiadamy słowo, nie wypowiadamy poszczególnych liter w słowie. Nie mówimy G – R – A – F – I – K – A. Mówimy GRA – FI – KA.

Przyjrzyjmy się przykładowi grafika2.fla. Ograniczyłem w nim pozycję ust do liter R, A, F, I, K, A. Całość wygląda lepiej, nie ma już szumu, który był w pierwszym przykładzie, a to dlatego, że każda pozycja ust znajduje się na co najmniej dwóch klatkach.

Pójdźmy o krok dalej. W przykładzie grafika3.fla są następujące pozycje ust A, F, I, A. Litera F rozdziela dwie samogłoski, które są przedstawione jako otwarte usta. F jako usta prawie zamknięte kontrastuje z nimi i dzięki temu ich ruch jest uwidoczniony.

Ostateczną moją propozycją jest przykład grafika4.fla. Usunąłem z niego klatkę kluczową odpowiedzialną za literę I. Dodatkowo opóźniłem o jedną klatkę literę F i przyśpieszyłem o dwie klatki literę A.

W ten oto sposób udało nam się zaanimować wypowiedź jednego słowa, ograniczając kluczowe klatki z siedmiu w pierwszym przykładzie do czterech w przykładzie 3 (grafika3.fla), i do ostatecznie 3 w przykładzie 4 (grafika4.fla). Równocześnie nie straciliśmy przy tym wyraźności wypowiadanego słowa.

Przygotowanie ścieżki dźwiękowej
Ścieżki dźwiękowe możemy pozyskać z wielu źródeł. Możemy zakupić jakąś lub znaleźć darmową w internecie. Możemy również poprosić kogoś o nagranie lub sami nagrać wcześniej przygotowany tekst. W tutorialu użyłem dwóch ścieżek. Pierwsza jest ścieżką angielską ściągniętą ze strony z darmowymi wave'ami. Druga ścieżka została nagrana przez mojego znajomego. Jest to fragment bajki jego autorstwa o Karolu Odkrywcy. Ścieżka ta została nagrana w celach późniejszej animacji tejże bajki.

Kiedy już mamy ścieżkę, którą będziemy chcieli wykorzystać, warto przesłuchać ją kilka razy. Powinniśmy zwrócić uwagę na to w jakim tempie jest ona czytana, czy jest czytana wyraźnie i czy każde słowo jest oddzielnie akcentowane. Przysłuchajmy się czy może jest to fragment potocznej rozmowy, w której wyrazy są zlepiane ze sobą, przez co zmuszeni będziemy trochę inaczej do nich podejść przy animowaniu. Kiedy już osłuchaliśmy się ze ścieżką, możemy dodatkowo wydrukować tekst wypowiedzi. Będziemy mogli na nim zaznaczyć, w których miejscach poszczególne dźwięki na ścieżce zostają dodatkowo przedłużone, a które skrócone.

Przydatne może okazać się także lustro przed, którym mamy możliwość zaobserwowania zachowania własnych ust podczas wypowiadania poszczególnych słów.

Tak przygotowani możemy przejść do Flasha.

Przygotowanie dokumentu
Otwieramy Flasha i otwieramy przykład z tutoriala Head.fla (File > Open). Zostanie załadowana głowa, której użyłem do przykładów stworzonych w tym tutorialu (głowa postaci przygotowana do bajki Karol Odkrywca). Dokument ten ma ustawiony Frame Rate (ilość klatek na sekundę) na 24. Jeżeli nie będziemy potrzebować aż tylu klatek na sekundę, możemy to zmienić, wchodząc do Modify > Document. Otwieramy Bibliotekę, jeżeli nie mamy już jej rozwiniętej w widoku programu (Window > Library). Będziemy w niej widzieć wszystkie symbole oraz pliki, które dołączyłem do tego dokumentu. Znajdują się tam trzy katalogi. Dźwięki, w którym znajdują się wykorzystane do animacji ścieżki dźwiękowe. Kolejnym katalogiem jest karol, gdzie znajdują się wszystkie symbole tworzące głowę bohatera. Ostatnim katalogiem są usta, w którym zamieszczone są wszystkie symbole przedstawiające poszczególne kształty ust.

Przygotowanie głowy
Przechodzimy do pierwszej klatki z głową, wybieramy symbol i klikamy na niego dwukrotnie. Zostaniemy przeniesieni wewnątrz symbolu, gdzie teraz dokonamy kilku zmian.

Pierwsza klatka głowy ma ustawione domyślnie zamknięte usta. Usta te również wyrażają litery M, B, P (jak przedstawione w podstawowych informacjach). Przechodzimy do kolejnej klatki i wciskamy [F6], aby wstawić kolejną klatkę kluczową (Insert > Timeline > Key Frame). Symbol z poprzedniej klatki zostanie skopiowany na kolejną. Zaznaczamy usta i klikamy na nie prawym przyciskiem myszy. Z menu wybieramy opcję Swap Symbol (Modify > Symbol > Swap Symbol) i w nowym oknie wybieramy symbol o nazwie A. Kiedy symbol ust zostanie zamieniony, zauważymy, że nie pasuje trochę rozmiarem do głowy. Zmniejszamy go, aby mniej więcej zmieścił się na twarzy.

Modyfikacja kształtu głowy
Dodatkowo możemy wydłużyć głowę postaci. Zaznaczmy więc symbol głowy, wciskamy [Q] (Free Transform Tool), i wydłużamy dół głowy. Dzięki temu będziemy mogli trochę zwiększyć rozmiar ust. Powiększamy usta, tak aby usta znajdowały się w jej obrębie. Dodatkowo zwęzimy trochę głowę. Będziemy musieli także przesunąć trochę uszy do środka oraz zwęzić włosy. Przechodzimy do klatki kolejnej i powtarzamy powyższe kroki, aż wstawimy wszystkie symbole ust. Na początku, dopóki nie zapamiętamy, która klatka głowy odpowiedzialna jest, za które usta, możemy rozpisać to sobie na kartce.

Ustawienia symbolu
Wychodzimy z edycji symbolu - klikając dwukrotnie dowolny obszar poza symbolem. Przechodzimy do zakładki Properties, wybieramy typ symbolu Graphic i przechodzimy do zakładki Looping. Tam w Options wybieramy Single Frame. Przygotowany przez nas symbol powinien wyglądać mniej więcej jak symbol Head_Ready.

Teraz podczas dopasowywania ruchu ust, kiedy będziemy chcieli wstawić odpowiednie usta, wstawiamy kluczową klatkę, przechodzimy do Properties > Looping i pod okienkiem Options wpisujemy numer klatki, na której znajduje się pożądany przez nas kształt ust.

Można to również zrobić innym sposobem. Tworzymy tyle symboli głowy, ile mamy kształtów ust. W momencie, kiedy potrzebujemy zmienić kształt ust, tworzymy kluczową klatkę, naciskamy prawym przyciskiem myszy na symbol głowy, wybieramy Swap File i wybieramy potrzebny nam symbol głowy.

Import dźwięku
Tworzymy nową warstwę i zmieniamy jej nazwę na dźwięk. Przeciągamy na pierwszą czystą kluczową klatkę (ang. Blank Key Frame – BKK) pierwszą ścieżkę dźwiękową - pl. Przechodzimy do klatki ok. 450 i wciskamy [F5] (Insert Frame) dla warstwy dźwięk. Ścieżka dźwiękowa powinna się zakończyć na ok. 440. klatce. W klatce 460. tworzymy BKK i przeciągamy na nią drugą ścieżkę dźwiękową – ang. Wybieramy warstwę z głową i również wstawiamy klatkę w tym samym momencie, w którym kończą nam się klatki z dźwiękiem.

Dopasowywanie do ścieżki
Pierwszymi wypowiedzianymi słowami w ścieżce są: W tym momencie obydwaj spojrzeli na siebie... Przechodzimy do klatki, w której słyszymy W i jedną klatkę przed nią wstawiamy kluczową klatkę. Przechodzimy do panelu Properties i w zakładce Looping wybieramy numer klatki, który odpowiada nam za literę F, V. Dla przykładowego symbolu jest to klatka 5. Na osi czasu (Timeline) przechodzimy do klatki 15. i wstawiamy kolejną kluczową klatkę. Słyszymy tutaj literę Y. Wybieramy kształt ust odpowiadający za CDGJKSTXZ. Przechodzimy do klatki 18. i wstawiamy kolejną KK (kluczową klatkę). Wybieramy tutaj kształt ust odpowiadający za literę O. Przechodzimy do klatki 23, wstawiamy KK i wybieramy klatkę reprezentującą literę E. Przechodzimy do klatki 28, wstawiamy KK i wybieramy klatkę odpowiadającą za CDGJKSTXZ. Kolejna klatka to 30. Wstawiamy KK i wybieramy literkę O. W następnej klatce 38 wstawiamy KK i wybieramy A. Przechodzimy do klatki 42 i wstawiamy tu CDGJKSTXZ, w klatce 46 wstawiamy O. W kolejnej klatce 52 wstawiamy E, dalej w klatce 55 wstawiamy MBP. Później w 58 klatce wstawiamy A, w klatce 61 wstawiamy CDGJKSTXZ. I w ostatniej klatce 64 wstawimy E.

Testowanie animacji
Tym oto sposobem udało nam się zaanimować pierwsze kilka wyrazów tekstu. Możemy to teraz przetestować naciskając kombinację klawiszy [CTRL]+[ENTER] lub wybierając Control > Test Movie.

Dopasowywanie do ścieżki cd.
Podobnie dopasowujemy resztą ścieżki dźwiękowej. Praca czasami może być mozolna, ale efekt, jaki uzyskamy, na pewno nam to wynagrodzi.

Czasami zdarza się, że wystąpią dwie długie samogłoski bezpośrednio po sobie. Wtedy powinniśmy złamać zasady i pomiędzy nie wstawić jakąś zamkniętą spółgłoskę np. CDGJKSTXZ lub MBP, pomimo tego, że jej w rzeczywistości nie ma w słowie i że jej nie słyszymy. Robimy to po to, aby stworzyć kontrast pomiędzy tymi samogłoskami.

Dopieszczanie animacji – dodanie mrugania
Mamy już zaminowany ruch ust, ale czegoś jeszcze brakuje. Oczy naszego bohatera nie mrugają. Ciężko wyobrazić sobie, aby ktoś podczas mówienia nie mrugał.

Tworzymy nową warstwę i nazywamy ją mruganie. Wybieramy np. klatkę 10 i wstawiamy BKK (Blank KeyFrame – Czystą klatkę Kluczową) naciskając [F7] lub wybierając Insert > Timeline > Blank Keyframe. Wybieramy symbol eye_closed, który znajduje się w katalogu Karol – Głowa – Oczy i przeciągamy go do nowo utworzonej BKK na nowej warstwie. Dopasowujemy wielkość symbolu, tak aby zakrywało prawe oko. Teraz albo kopiujemy symbol eye_closed, albo przeciągamy go ponownie z Library i ustawiamy go, tak aby zakrył drugie oko. Pamiętajmy, aby obrócić symbol horyzontalnie. Przechodzimy do klatki 19. i tworzymy tam BKK. Symbole z warstwy mruganie znikną. Teraz, aby powtórzyć mruganie, wystarczy skopiować kluczową klatkę, na której znajdują się symbole eye_closed zasłaniające oczy i wkleić ją w dowolnym miejscu na linii czasu (Timeline) na warstwie mruganie. Jeżeli będzie to potrzebne, to dopasujmy ich wielkość i pozycję do oczu. Tworząc BKK kilka klatek dalej, usuniemy powyższe symbole.

Postarajmy się, aby mruganie nie było powtarzalne. W rzeczywistości przecież nie mrugamy za każdym razem w ten sam sposób.

Publikacja animacji
Teraz możemy opublikować animację i zapisać ją w wybranym przez nas formacie. Wejdźmy do File > Publish settings. W nowo otwartym oknie możemy wybrać format naszej publikacji. Ja wybrałem plik SWF. Dodatkowo, przechodząc do zakładki Flash, możemy ustawić kilka dodatkowych parametrów tj. jakość dźwięku, obrazu, czy wersja Flash Playera lub wersja ActionScript.

Po wybraniu zadowalających nas parametrów naciskamy przycisk Publish i po chwili nowy plik pojawi nam się w katalogu, w którym zapisany mamy dokument.

Zakończenie
Powyższe kroki ułatwią początkującym stworzyć ich pierwsze mówiące postacie. Tutorial nie przedstawia tworzenia animacji na miarę Disney'a, gdyż do tego potrzeba o wiele, wiele więcej pracy. Jednak bez problemu możemy wykorzystać to we wszelkiego rodzaju prostych animacjach, w których będziemy chcieli, aby nasz bohater przemówił.

Mam nadzieję, że przedstawione informacje okażą się dla Was pomocne.

Łukasz Przystalski
Artykuł pochodzi z magazynu .PSD
www.psdmag.org

+ + + + +

Tekst opublikował użytkownik: psd
Więcej informacji o użytkowniku

Komentarze

Przewiń do góry

Zaloguj się i dodaj komentarz

Signs.pl nie odpowiada za treść zamieszczanych przez użytkowników wpisów i komentarzy. Publikowanie treści naruszających przepisy prawa skutkuje odpowiedzialnością karną i cywilną autora.

Najnowsze w tym dziale: