INTERAKTYWNA KOMUNIKACJA WIZUALNA

Transkrypt

1 INTERAKTYWNA KOMUNIKACJA WIZUALNA 1

2 Animacja i edytor ruchu 2

3 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 3

4 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

5 Podstawowe metody animacji we Flashu: Animacja poklatkowa ( klatka po klatce ) tworzona poprzez modyfikowanie kolejnych klatek filmu. 5

6 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 Automatyczna animacja kształtu (shape tweening) Automatyczna animacja ruchu (motion tweening) 6

7 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

8 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

9 Etapy tworzenia animacji klatka po klatce: Zaznacz klatkę od której rozpocznie się animacja. Przekształć w klatkę kluczową Narysuj w zaznaczonej klatce (lub zaimportuj) pierwszy obrazek sekwencji Kliknij następną klatkę i skopiuj do niej zawartość poprzedniej (F6) lub (jeśli tworzymy od nowa) przekształć ją w pustą klatkę kluczową (F7) Kontynuuj dodawanie nowych klatek kluczowych i modyfikowanie ich zwartości Przetestuj animację (Sterowanie->Odtworz lub Testuj) 9

10 Tworzenie automatycznej animacji ruchu 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

11 Tworzenie automatycznej animacji ruchu Wklej biegnące konie Prawy myszy ->Rozdziel Prawy myszy->odznacz wszystko Narzędzie lasso, zaznaczanie wielokątne, zaznacz wielokąt z jednym koniem, Prawy myszy ->Kopiuj 11

12 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

13 Modyfikowanie sekwencji wieloklatkowych: Zastosowanie pustych klatek kluczowychprzykład Blankframes.swf 13

14 Tworzenie automatycznej animacji ruchu Zad. Utwórz animację migający napis. Przetestuj. 14

15 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

16 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

17 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

18 Tworzenie automatycznej animacji ruchu 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

19 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

20 Animacja automatyczna (tweening) Automatyczna animacja kształtu (zielone klatki, strzałki) Automatyczna animacja ruchu (niebieskie klatki) 20

21 Automatyczna 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

22 Automatyczna animacja kształtu SmileTween.swf 22

23 Tworzenie automatycznej animacji kształtu: Zaznacz klatkę początkową (klatka kluczowa F6) Narysuj początkową wersję obrazu (nie symbol, tekst, grupa) Wstaw klatkę kluczową (F6) na końcu animacji i zmodyfikuj jej zawartość Zaznacz pierwsza klatkę kluczową zakresu animacji Wybierz Wstaw->Animacja kształtu Przetestuj animację (Sterowanie->Odtwórz) 23

24 Tworzenie automatycznej 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

25 Tworzenie automatycznej animacji kształtu Funkcja automatycznej animacji kształtu zawsze najkrótsze możliwe przejście od jednej formy do drugiej (EyeTween.swf) 25

26 Tworzenie automatycznej animacji kształtu Rozwiązanie problemu: 6. Dodanie pośrednich klatek kluczowych 8. Wykorzystanie wskaźników zmiany kształtu 26

27 Tworzenie automatycznej 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

28 Tworzenie automatycznej 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

29 Tworzenie automatycznej 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

30 Automatyczna 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

31 Automatyczna animacja ruchu (Motion Tweening) Animacja ruchu obiektu: Przemieszczanie Skalowanie Obrót Pochylenie Uwaga. Każdy obiekt w oddzielnej warstwie! 31

32 Tworzenie automatycznej animacji ruchu: Zaznacz klatkę początkową (klatka kluczowa F6) Narysuj początkową wersję obiektu (symbol lub tekst) 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łą) Przejdź do klatki końcowej Zaznacz obiekt docelowy i zmodyfikuj używając narzędzi i właściwości 32

33 Tworzenie automatycznej 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

34 Tworzenie automatycznej 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 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

35 Tworzenie automatycznej 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 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

36 Tworzenie automatycznej 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

37 Tworzenie automatycznej 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

38 Tworzenie automatycznej animacji ruchu Edycja ścieżek ruchu: Ścieżki ruchu tworzone automatycznie w tej samej warstwie co obiekt docelowy. 38

39 Tworzenie automatycznej 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

40 Tworzenie automatycznej animacji ruchu Tworzenie i edycja ścieżki ruchu: Utwórz animację ruchu Dodaj linię ruchu Wstaw->Oś czasu->linia ruchu Prawy myszy Dodaj linię ruchu Za pomoca 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 40

41 Tworzenie automatycznej animacji ruchu Zmiana ścieżki ruchu: Narzędzie Zaznaczenie Narzędzie Zaznaczenie cząstkowe Narzędzie Pióro (Modyfikowanie punktów kontrolnych i uchwytów w celu uzyskania pożądanej krzywizny) 41

42 Tworzenie automatycznej animacji ruchu Zad. Zmień ścieżkę ruchu dla animacji z poprzedniego zadania. 42

43 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ą) 43

44 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. 44

45 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) 45

46 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 46

47 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 47

48 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 48

49 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ć 49

50 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.) 50

51 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 51

52 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 52

53 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 53

54 Tworzenie automatycznej animacji ruchu Utwórz automatyczną animację ruchu uwzględniającą: zmianę położenia obrót Skalowanie Edytuj krzywe dynamiki : 54

55 Tworzenie automatycznej animacji ruchu Edytuj krzywe dynamiki : 55

56 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 56

57 Tworzenie automatycznej animacji ruchu Łączenie sekwencji animacji: 57

58 Tworzenie automatycznej animacji ruchu Przenoszenie animacji na osobne osie czasu symboli: Zaznacz zakres lub trzymając naciśnięty Shift kliknij klatkę początkową i końcową sekwencji, którą oddzielamy Kopiuj klatki (Wybierz Edycja->Oś czasu->kopiuj Klatki) Wstaw nowy symbol (Wybierz Wstaw->Nowy Symbol) Typ grafika lub klip filmowy. Nadaj nazwę. Automatycznie pojawi się oś czasu dla nowego symbolu. Wklej skopiowane klatki: zaznacz pierwszą klatkę na osi czasu symbolu i wybierz Edycja-> Oś czasu->wklej klatki 58

59 Tworzenie automatycznej animacji ruchu Łączenie sekwencji animacji: 59

60 Tworzenie automatycznej animacji ruchu Łączenie sekwencji animacji: 60

61 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 61

62 Tworzenie automatycznej animacji ruchu Zad. Zapisz animację z poprzedniego zadania jako klip filmowy. Wykorzystaj ponownie klip przekształcając jego kolejne instancje 62

63 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 63