Tworzenie automatycznej animacji ruchu

INTERAKTYWNA
KOMUNIKACJA WIZUALNA
1
Animacja i edytor ruchu
2
•Animacja „klatka po klatce”
•Edycja wielu klatek animacji jednocześnie i tryb
przenikania się klatek
•Animacja kształtu
•Wskaźniki zmiany kształtu
•Animacja ruchu
•Modyfikowanie ścieżek ruchu
•Korzystanie z ustawień predefiniowanych ruchu
•Krzywa dynamiki i edytor ruchu
•Animacja klasyczna – klasyczne linie pomocnicze ruchu
3
•Animacja to proces tworzenia efektu ruchu lub zmian
zachodzących w czasie.
•Flash – zmiana zawartości kolejnych klatek filmu
(zmiana dotyczy dowolnej kombinacji – poruszający się
obiekt może zmieniać swój kolor)
•Do utworzenia animacji wystarczy jedna klatka –
grafika przekształcana za pomocą poleceń języka Action
Script
4
Podstawowe metody animacji we Flashu:
•Animacja poklatkowa („klatka po klatce”) – tworzona
poprzez modyfikowanie kolejnych klatek filmu.
5
Podstawowe metody animacji we Flashu:
•Animacja automatyczna oparta na klatkach
kluczowych – tworzona w oparciu o zawartość
pierwszej i ostatniej klatki sekwencji.
•Flash automatycznie oblicza zawartość klatek pośrednich
6
Animacja poklatkowa:
•Tworzenie oddzielnych rysunków w każdej klatce
•Idealna metoda przygotowywania animacji wymagających
subtelnych zmian- mimika twarzy
•Żmudne i czasochłonne tworzenie oddzielnych rysunków
w każdej klatce
•Konieczność umieszczania w pliku wielu rysunków – duży
rozmiar pliku
•We Flashu każdy niezależny rysunek – klatka kluczowa
Keyframe.swf
7
Dodawanie klatek kluczowych:
Aby przekształcić zwykłą klatkę w klatkę kluczową:
•Wstaw->Oś czasu->Klatka kluczowa
•F6
•Kliknij prawym klawiszem myszy i wybierz Wstaw
klatkę kluczową
8
Etapy tworzenia animacji klatka po klatce:
1. Zaznacz klatkę od której rozpocznie się animacja.
Przekształć w klatkę kluczową
1. Narysuj w zaznaczonej klatce (lub zaimportuj) pierwszy
obrazek sekwencji
1. Kliknij następną klatkę i skopiuj do niej zawartość
poprzedniej (F6) lub (jeśli tworzymy od nowa) przekształć
ją w pustą klatkę kluczową (F7)
1. Kontynuuj dodawanie nowych klatek kluczowych i
modyfikowanie ich zwartości
1. Przetestuj animację (Sterowanie->Odtwórz lub Testuj)
9
Tworzenie animacji poklatkowej
Zad. Utwórz animację poklatkową biegnący koń. Przetestuj.
Zmień szybkość odtwarzania. Przetestuj.
Aby zmienić szybkość odtwarzania:
•
•
•
Kliknij w obszarze roboczym poza stołem montażowym, aby usunąć zaznaczenie
wszystkich obiektów na stole montażowym.
W Inspektorze właściwości zostaną wyświetlone właściwości dokumentu.
Aby otworzyć Inspektora właściwości, wybierz opcję Okno -> Właściwości.
Uwaga: Jeżeli chcemy przekształcić wklejony obiekt –
Modyfikuj->Przekształć ->np. Odbij pionowo
10
Tworzenie animacji poklatkowej
•
•
•
•
Wklej biegnące konie
Prawy myszy ->Rozdziel
Prawy myszy->Odznacz wszystko
Narzędzie lasso
zaznacz jednego konia
• Prawy myszy ->Kopiuj
11
Modyfikowanie sekwencji wieloklatkowych:
• W zachowaniu płynności animacji pomaga
umieszczenie większej liczby klatek pośrednich
zwykłych (F5) między klatkami kluczowymi (utworzenie
zakresu) lub zwiększenie liczby klatek kluczowych
(wydłużenie sekwencji)
• Dodatkowe klatki pośrednie „wstrzymują ” animację
(głowa się nie porusza, motyl cały czas się
przemieszcza)
FaceFramebyframe.swf
12
Modyfikowanie sekwencji wieloklatkowych:
Zastosowanie pustych klatek kluczowychprzykład
Blankframes.swf
13
Zad. Utwórz animację „migający napis”. Przetestuj.
14
Modyfikowanie sekwencji wieloklatkowych:
Tryb przenikania klatek (onion skinning)
pozwala oglądać zawartość wielu klatek równocześnie,
gdyż są wyświetlane jako półprzeźroczyste.
Standardowo bieżąca klatka wyświetlana normalnie,
pozostałe – półprzeźroczyste.
Ustawienie liczby klatek wyświetlanych w trybie
przenikania – Modyfikuj Znaczniki Przenikania.
15
Modyfikowanie sekwencji wieloklatkowych:Tryb przenikania klatek (onion skinning):
• Tryb Onion Skin (przenikanie ujęć) –
animowany obiekt wyświetlany w całości
• Tryb Onion Skin Outline (obrysy przenikania
ujęć) – wyświetlane wyłącznie krawędzie obiektu
16
Modyfikowanie sekwencji wieloklatkowychJednoczesna edycja grupy klatek
• Ręczna edycja poszczególnych klatek bardzo
czasochłonna (zmiana koloru, położenia …)
• Po uaktywnieniu opcji Edytuj wiele klatek można
zaznaczyć różne elementy obiektu w dowolnej
klatce , a następnie je modyfikować
17
Zad.
• Narysuj pędzlem prosty obiekt w pierwszej klatce.
• Skopiuj obiekt do kolejnych klatek kluczowych(F6), przesuwając
go w kolejnych klatkach.
• Przetestuj opcje: obrysy łusek cebuli oraz łuski cebuli
• Wybierz opcję edytuj wiele klatek, zaznacz wszystkie obiekty
i zmień ich kolor
18
Animacja automatyczna (tweening)
• Tworzona w oparciu o zawartość pierwszej
i ostatniej klatki sekwencji
• Flash automatycznie oblicza zawartość klatek
pośrednich
• Zapamiętywane tylko klatki kluczowe i zmiany
między nimi
• Prostota wprowadzania zmian do istniejących
sekwencji (modyfikowanie klatek kluczowych)
19
Animacja
• Animacja kształtu (zielone klatki)
• Animacja ruchu (niebieskie klatki)-tylko dla
symboli
20
Animacja kształtu
• Animacja kształtu prostych elementów
graficznych
• Nie można robić animacji kształtu dla grup,
instancji symboli ani tekstu w polach
tekstowych
• Animowanie kolorów
• Najlepiej – każdy kształt na osobnej warstwie
( łatwiejsze zmiany)
21
Automatyczna animacja kształtu
SmileTween.swf
22
Tworzenie automatycznej animacji kształtu:
1. Zaznacz klatkę początkową (klatka kluczowa F6)
1. Narysuj początkową wersję obrazu
(nie symbol, tekst, grupa)
2. Wstaw klatkę kluczową (F6) na końcu animacji
i zmodyfikuj jej zawartość
3. Zaznacz pierwsza klatkę kluczową zakresu animacji
4. Wybierz Wstaw->Animacja kształtu
5. Przetestuj animację (Sterowanie->Odtwórz)
23
Tworzenie animacji kształtu
Właściwości animacji:
Dynamika - zróżnicowanie szybkości animacji
zakres -100, 100
wartość ujemna – na początku animacja przebiega
powoli, potem przyspiesza
Mieszanie – metoda zmiany kształtu
opcja rozśrodkowujący- łagodne kształty
przejściowe
opcja kątowy – w kształtach przejściowych
zachowane narożniki i linie proste
24
Tworzenie animacji kształtu
Funkcja automatycznej animacji kształtu –
zawsze „najkrótsze” możliwe przejście od jednej formy
do drugiej (EyeTween.swf)
25
Tworzenie animacji kształtu
Rozwiązanie problemu:
1. Dodanie pośrednich klatek kluczowych
1. Wykorzystanie wskaźników zmiany kształtu
26
Tworzenie animacji kształtu
Wskaźniki zmiany kształtu:
• Służą do precyzyjnego sterowania zmianami kształtu
• Określają w kształcie początkowym punkty odpowiadające
punktom w kształcie końcowym
•
EyeTween.swf i EyeTweenHints.swf
27
Tworzenie animacji kształtu
Wskaźniki zmiany kształtu:
• Zaznacz początkową klatkę animacji kształtu
• Wybierz Modyfikuj->Kształt->Dodaj punkty zmiany kształtu
(czerwone kółeczko z literą)
• Korzystając z narzędzia zaznaczenie umieść wskaźnik
w odpowiednim punkcie początkowego kształtu
• Przejdź do końcowej klatki kluczowej i umieść wskaźnik
zmiany kształtu w odpowiednim miejscu
• Dodawaj i zmieniaj położenie kolejnych punktów zmiany
28
Tworzenie animacji kształtu
Zad. Utwórz animację kształtu:
Klatka 1 – koło
Klatka 10 – gwiazdka
Wykorzystaj wskaźniki zmiany kształtu
(Modyfikuj->Kształt->Dodaj punkty zmiany kształtu)
(góra-góra, dół-dół oraz góra-dół, dół-gora)
ANIMkSZTALTU1.swf, ANIMkSZTALTU2.swf
29
Animacja ruchu
(Motion Tweening)
Służy do płynnego przemieszczania obiektu z punktu
początkowego do końcowego
Stosowana do:
• Klipów filmowych
• Symboli graficznych
• Edytowalnego tekstu
30
Animacja ruchu
(Motion Tweening)
Animacja ruchu obiektu:
• Przemieszczanie
• Skalowanie
• Obrót
• Pochylenie
Uwaga. Każdy obiekt w oddzielnej warstwie!
31
Tworzenie animacji ruchu:
1. Zaznacz klatkę początkową (klatka kluczowa F6)
1. Narysuj początkową wersję obiektu (symbol lub
tekst)
2. Wprowadź animację: zaznacz obiekt na stole
montażowym i wybierz Wstaw->Animacja ruchu
(kolor niebieski, jeśli jest obiekt docelowy -początkowa
klatka kluczowa z czarną kropką, jeśli nie – z białą)
4. Przejdź do klatki końcowej
4. Zaznacz obiekt docelowy i zmodyfikuj używając
narzędzi i właściwości
32
Tworzenie animacji ruchu:
Modyfikowanie właściwości automatycznej animacji
ruchu
Zmiany poprzez:
• Narzędzie Zaznaczenie
• Narzędzie Przekształć
• Dodatkowe opcje w Panelu właściwości
• Dynamika – steruje wzorcem interpolacji ruchu
0-taka sama zmiana we wszystkich klatkach
większa od 0 – szybki ruch i spowolnienie
mniejsza od 0 – powolny ruch i przyspieszenie
Krzywa ruchu - przyspieszanie i zwalnianie
w dowolnym miejscu (potem omówimy)
33
Tworzenie animacji ruchu:
Modyfikowanie właściwości animacji ruchu
Zmiany poprzez:
• Dodatkowe opcje w Panelu właściwości
• Dynamika
• Obrót – automatyczna animacja ruchu obrotowego
Określamy:
-Liczbę obrotów lub liczbę stopni obrotu (Flash
przelicza)
-Kierunek obrotu (brak, w prawo, w lewo)
(brak – obrót w kierunku który wymaga
najmniejszego kąta zmiany położenia)
34
Tworzenie animacji ruchu:
Modyfikowanie właściwości animacji ruchu
Zmiany poprzez:
• Dodatkowe opcje w Panelu właściwości
• Dynamika
• Obrót – automatyczna animacja ruchu obrotowego
• Orientuj do ścieżki – ruch obiektu wzdłuż
specjalnej ścieżki ruchu. Animacja nie po prostej,
ale wzdłuż ścieżki związanej z obiektem. (potem
omówimy)
35
Tworzenie animacji ruchu:
Modyfikowanie właściwości automatycznej animacji
ruchu
Zmiany poprzez:
• Dodatkowe opcje w Panelu właściwości
• Dynamika
• Obrót – automatyczna animacja ruchu obrotowego
• Orientuj do ścieżki
• Synchronizuj symbole graficzne- gwarantuje
poprawne zapętlenie animacji symbolu w głównym
filmie. Dla animacji zawartej w symbolu graficznymFlash automatycznie dostosuje liczbę klatek
36
Tworzenie animacji ruchu
Zad. Utwórz animację ruchu:
Klatka 1 – zdjęcie np. motyla, samochodu
(początek sceny)
Klatka 10 – motyl przesunięty (koniec sceny)
Wykorzystaj dynamikę i obrót (np. Obróć 10 razy)
Opcja Edycja (dla dynamiki)
MOTYLEK.swf , MOTYLEK1.swf
37
Tworzenie animacji ruchu
Edycja ścieżek ruchu:
• Ścieżki ruchu tworzone automatycznie w tej samej
warstwie co obiekt docelowy.
38
Tworzenie animacji ruchu
Tworzenie i edycja ścieżki ruchu:
• Zaznacz klatkę początkową (klatka kluczowa F6)
• Narysuj początkową wersję obiektu
• Wprowadź animację: zaznacz obiekt na stole
montażowym i wybierz Wstaw->Animacja ruchu
• Przejdź do klatki końcowej
• Zaznacz obiekt docelowy i przesuń do nowego
położenia
Na stole montażowym ukaże się niebieska linia –
najkrótsza ścieżka łącząca początkową pozycję obiektu
z nową. Liczba kropek – liczba klatek
39
Tworzenie automatycznej animacji ruchu
Opcja orientuj do ścieżki
Aby obiekt nie zachowywał cały czas tej samej orientacji
do ścieżki (obiekt „obraca się” zgodnie ze ścieżką)
40
Tworzenie automatycznej animacji ruchu
Punkt odniesienia i punkt środkowy:
Sposób poruszania się animowanego obiektu wzdłuż
ścieżki ruchu zależy również od położenia punktu
odniesienie symbolu.
Standardowo – punkt odniesienia w środku symbolu.
41
Tworzenie automatycznej animacji ruchu
Aby zmienić punkt odniesienia:
• Zaznacz symbol w I klatce kluczowej
• W panelu Narzędzia wybierz Przekształcenia swobodne
i przeciągnij punkt odniesienia (małe białe kółko) w inne
miejsce.
(lub Modyfikuj->Przekształć->Przekształcenie swobodne)
42
Tworzenie automatycznej animacji ruchu
Zad.a. Wybierz opcję orientuj do ścieżki dla animacji
z porzedniego zadania
Zad.b. Zmień punkt odniesienia dla animacji
z poprzedniego zadania
43
Tworzenie automatycznej animacji ruchu
Edytor ruchu-dopracowywanie ustawień dynamiki
i właściwości animacji:
• W`standardowej przestrzeni roboczej – zakładka obok Osi
czasu
• Wyświetlanie: Okno->Edytor ruchu
44
Tworzenie automatycznej animacji ruchu
Edytor ruchu:
• Zapewnia podgląd poszczególnych właściwości animacji
• Wartości w każdej klatce kluczowej danej właściwości
można przeglądać i modyfikować
45
Tworzenie automatycznej animacji ruchu
Edytor ruchu-modyfikacja krzywych właściwości:
•
•
•
•
Ruch podstawowy (wartości położenia X i Y oraz obrotu Z).
Transformacja (pochylenie i skalowanie)
Efekt koloru
Filtry (rozmycie, cień, blask, itd….)
46
Tworzenie automatycznej animacji ruchu
Edycja krzywych animacji i klatek kluczowych właściwości
ruchu - modyfikacja krzywych właściwości:
• Edycja za pomocą narzędzia Zaznaczenie lub Pióro
• Przeciąganie punktów kontrolnych w lewo lub prawo
• W lewo – wcześniejsze dojście do określonej wartości
• W prawo-późniejsze dojście do określonej wartości
• Control+Zaznaczenie w miejscu, gdzie jest punkt kontrolny–
usunięcie punktu kontrolnego
• Control+Zaznaczenie w miejscu, gdzie nie ma punktu
kontrolnego– dodanie punktu kontrolnego
47
Tworzenie automatycznej animacji ruchu
Krzywe dynamiki
• Predefiniowane wzorce interpolacji, które umożliwiają
sterowanie tym, jaka część całkowitej zamiany następuje
w poszczególnych sekcjach zaresu animacji
MotylEdytorRuchuDynamikaSprezyna.swf
48
Tworzenie automatycznej animacji ruchu
Predefiniowane krzywe dynamiki
• Linie proste o stałym nachyleniu, zapewniają stałość ruchu
• Linie o łagodnej krzywiźnie zapewniają gładkie
przyspieszenie lub spowolnienie
• Nagłe wybrzuszenia krzywej zapewniają skokowy ruch
• Płaskie poziome linie zapewniają pauzę –animacja trwa, ale
nie ma żadnych zmian w obiekcie
• Linie pionowe zapewniają szybkie skoki
49
Tworzenie automatycznej animacji ruchu
Ustawienia predefiniowane ruchu:
Zbiór predefiniowanych ustawień ruchu – gotowe do użycia
animacje ruchu np.. Spadanie obiektu itd., zgodne z
prawami fizyki.
Korzystanie z predefiniowanych ustawień ruchu:
• Otwórz Okno->Ustawienia predefiniowane ruchu
• Zaznacz obiekt docelowy i wybierz Zastosuj
Animacja – spadająca piłka
50
Tworzenie automatycznej animacji ruchu
Łączenie sekwencji animacji:
• Poszczególne sekwencje animacji powinny być na
osobnych osiach czasu
• Łatwiejsza modyfikacja
• Gdy sekwencje animacji traktowane jako symbole –
niezależna kontrola za pomocą języka Action Script
•
Zasada: elementy zależne od siebie przypisane do tego
samego symbolu
51
Tworzenie automatycznej animacji ruchu
Łączenie sekwencji animacji:
52
Tworzenie automatycznej animacji ruchu
Przenoszenie animacji na osobne osie czasu symboli:
1. Zaznacz zakres lub trzymając naciśnięty Shift kliknij klatkę
początkową i końcową sekwencji, którą oddzielamy
2. Kopiuj klatki (Wybierz Edycja->Oś czasu->Kopiuj Klatki)
3. Wstaw nowy symbol (Wybierz Wstaw->Nowy Symbol)
Typ grafika lub klip filmowy. Nadaj nazwę.
4. Automatycznie pojawi się oś czasu dla nowego symbolu.
5. Wklej skopiowane klatki: zaznacz pierwszą klatkę na osi
czasu symbolu i wybierz Edycja-> Oś czasu->Wklej klatki
53
Tworzenie automatycznej animacji ruchu
Łączenie sekwencji animacji:
54
Tworzenie automatycznej animacji ruchu
Łączenie sekwencji animacji:
55
Tworzenie automatycznej animacji ruchu
Modyfikowanie i ponowne użycie animowanych symboli:
• W bibliotece klip filmowy
• W pliku – wiele instancji klipu
• Każda instancja może zostać przeskalowana, przesunięta
• Podstawowe elementy konstrukcyjne klatek kluczowych
pozostają nie zmienione
Motylkiaponowneuzycieklipu.swf
56
Tworzenie automatycznej animacji ruchu
Zad. Zapisz animację z poprzedniego zadania jako klip
filmowy. Wykorzystaj ponownie klip przekształcając
jego kolejne instancje
57
Tworzenie automatycznej animacji ruchu
Tworzenie i edycja ścieżki ruchu:
• Utwórz animację klasyczną
• Dodaj linię ruchu
• Prawy myszy-> Dodaj klasyczne linie ruchu
• Za pomocą narzędzia Pióro, Ołówek, linia, Okrąg, Pędzel
lub prostokąt narysuj odpowiednią ścieżkę
• Przeciągnij środek animowanego symbolu na początek
linii w 1 klatce i na koniec w ostatniej
58
Animacja klasyczna
Utwórz animacje klasyczną uwzględniającą:
• zmianę położenia
• obrót
• Skalowanie
59
Podsumowanie:
• Animacja
„klatka po klatce”
•Edycja wielu klatek animacji jednocześnie i tryb
przenikania się klatek
•Automatyczna animacja kształtu
•Wskaźniki zmiany kształtu
•Automatyczna animacja ruchu
•Modyfikowanie ścieżek ruchu
•Korzystanie z ustawień predefiniowanych ruchu
•Krzywa dynamiki i edytor ruchu
Animacja klasyczna – klasyczne linie pomocnicze ruchu
60