GRAFIKA ANIMACYJNA 1 GRAFIKA ANIMACYJNA Grafika Animacyjna wykad

GRAFIKA ANIMACYJNA 1

GRAFIKA ANIMACYJNA Grafika Animacyjna wykład 3 opracowanie: dr Joanna Sekulska-Nalewajko Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012 2

GRAFIKA ANIMACYJNA Symbole Ü Grafika Ü Klip filmowy Ü Przycisk Egzemplarze symboli w =klony, w =wystąpienia, w =instancje Ü Biblioteka 3

GRAFIKA ANIMACYJNA Definicja i istota symbolu Ü Symbol to element przechowywany w bibliotece z myślą o jednokrotnym lub wielokrotnym zastosowaniu go w filmie. Ü Zaletą symboli jest zmniejszenie rozmiaru plików symbol jest wczytywany do pamięci tylko raz, natomiast w poszczególnych wystąpieniach są przechowywane tylko jego charakterystyki wyświetlania i skrypty. Ü oraz łatwość dokonywania zmian. 4

GRAFIKA ANIMACYJNA Definicja i istota symbolu Ü Symbole umożliwiają: Tworzenie i łączenie automatycznych animacji, Tworzenie interaktywnych filmów, Organizowanie elementów używanych w filmach (wielopoziomowe zagnieżdżenia). grafika przycisk klip 5

GRAFIKA ANIMACYJNA Tworzenie instancji symbolu Ü Za każdym razem, gdy symbol jest umieszczany w filmie, oznacza to utworzenie jego wystąpienia (klonu, instancji). 6

GRAFIKA ANIMACYJNA Instancje symbolu Ü Zmiana oryginału symbolu zostanie odzwierciedlona we wszystkich jego wystąpieniach w filmie. Ü Natomiast zmiana instancji nie ma wpływu na wygląd oryginału w bibliotece 7

GRAFIKA ANIMACYJNA Zmiany wystąpień symboli Ü Sposoby dostosowania wyglądu symboli i ich zachowania w filmie bez zmian obiektu źródłowego w bibliotece. Ü Można zmieniać np. : rozmiar wystąpienia, Kolor, Widoczność Obrót Pochylenie Dodawać filtry 8

GRAFIKA ANIMACYJNA Nazwy instancji 9

GRAFIKA ANIMACYJNA Wstawianie symbolu Ü Wstaw > Nowy symbol lub Ctrl+F 8 10

GRAFIKA ANIMACYJNA Konwertowanie do symbolu Ü Gdy mamy gotowy element na stole montażowym Ü Modyfikuj > Konwertuj na symbol lub F 8 11

GRAFIKA ANIMACYJNA Oś czasu symbolu Ü Każdy symbol ma własną oś czasu, która może przechowywać inne symbole, tekst, wideo i grafikę. Ü Sposób działania osi czasu zależy od typu utworzonego symbolu 12

GRAFIKA ANIMACYJNA Symbol GRAFIKA Ü Może zawierać wiele klatek i warstw oraz animacje Ü Ale oś czasu jest zsynchronizowana z główną listwą czasową (nie odtwarza się, gdy nie jest odtwarzana oś czasu sceny) 13

GRAFIKA ANIMACYJNA Symbol GRAFIKA Ü Są to najczęściej statyczne bitmapy Ü Nie zawierają „zagnieżdżonych animacji” Ü Nie posiadają nazw instancji więc nie można nimi sterować z poziomu kodu Action. Script Ü Nie można dodawać skryptów na osi czasu Ü Nie można do nich stosować filtrów Ü Nie można stosować wygładzania 14

GRAFIKA ANIMACYJNA Okno rejestracji grafiki Pasek edycji wskazujący na aktywny element i zagnieżdżenie symboli Krzyżyk na środku sceny ma współrzędne: x=0 i y=0 Ważne jest wyrównanie kształtów w obrębie symbolu. Kiedy zaczniemy operować symbolami na scenie, okaże się że działanie rotacji i pewnych technik skalowania zależy od tego, gdzie znajduje się środek symbolu. 15

GRAFIKA ANIMACYJNA Sterowanie symbolem Graphic Ü Mimo zsynchronizowania osi czasu symbolu Grafika i braku możliwości zarządzania nim poprzez Action. Script można decydować o tym, od której klatki zacząć odtwarzanie. Ü Służy do tego panel Właściwości 16

GRAFIKA ANIMACYJNA Dlaczego stosować symbol Graphic? Ü Generowanie kształtów w każdej klatce na scenie czasami zajmuje zbyt dużo zasobów i cykli procesora. – Zastosowanie egzemplarza symbolu grafiki zużyje mniej zasobów, ponieważ jest to kopia symbolu przechowywanego w bibliotece. – W każdej klatce Flash odwoła się do oryginału i wprowadzi tylko zmiany charakterystyczne dla egzemplarza. ÜZ uwagi na prosty charakter tych symboli najlepiej reprezentować nimi statyczną grafikę lub proste animacje. 17

GRAFIKA ANIMACYJNA Przyciski Ü Służą do tworzenia interaktywności – wykonują polecenia kodu Action. Script Ü Posiadają różne stany (Up, Over, Down, Hit) i reagują na zdarzenia myszy lub klawiatury Ü Można stosować do nich filtry i efekty koloru. Ü Do klatek przycisku nie można wstawiać skryptów Action. Script i innych przycisków 18

GRAFIKA ANIMACYJNA Listwa czasowa przycisku Klatki reprezentują stany przycisku: W górze – gdy przycisk jest wyciśnięty Over – gdy najechaliśmy na przycisk myszką Down – gdy przycisk jest wciśnięty Hit – pole reakcji (do definiowania obszaru aktywnego nie należy 19

GRAFIKA ANIMACYJNA Stany przycisku W klatce Over wstawiono animację w postaci klipu 20

GRAFIKA ANIMACYJNA Przycisk przezroczysty Ü Często chcemy, aby jakieś „niewidzialne” elementy były interaktywne, np. tło filmu Ü Należy stworzyć przycisk, który w klatce Hit będzie zawierał obiekt o wielkości interesującego nas pola reakcji. w Pamiętamy, że obiekty z klatki Hit nie są wyświetlane w trakcie odtwarzania pliku SWF 21

GRAFIKA ANIMACYJNA Przycisk przezroczysty 22

GRAFIKA ANIMACYJNA Przyciski interaktywne Ü Interaktywny przycisk, to przycisk leżący na stole montażowym (instancja) reagujący na działania myszy i wykonujący kod Action. Script. Ü Skrypty obsługujące przycisk umieszcza się w ramkach osi czasu function show. Hello(event: Mouse. Event): void{ dokumentu/klipu filmowego. if (powitanie_mc. current. Label=="goout"){ powitanie_mc. goto. And. Play("goin"); } } start_btn. add. Event. Listener(Mouse. Event. CLICK, show. Hello); 23

GRAFIKA ANIMACYJNA Przyciski interaktywne function show. Hello(event: Mouse. Event): void{ if (powitanie_mc. current. Label=="goout"){ powitanie_mc. goto. And. Play("goin"); } } start_btn. add. Event. Listener(Mouse. Event. CLICK, show. Hello); 24

GRAFIKA ANIMACYJNA Zdarzenia myszy Ü Zdarzenia myszy obsługiwane przez klasę obiektów Mouse. Event: – MOUSE_OVER – kursor myszy nad obiektem – MOUSE_DOWN – przycisk myszy jest wciśnięty – MOUSE_UP – przycisk myszy nie jest wciśnięty – MOUSE_MOVE – przesunięcie myszy kursora po ekranie – MOUSE_OUT – kursor opuszcza obszar obiektu docelowego – MOUSE_WHEEL – kółko myszy obraca się – CLICK – naciśnięcie i zwolnienie przycisku myszy – DOUBLE_CLICK – szybkie dwukrotne naciśnięcie 25 i zwolnienie przycisku myszy

GRAFIKA ANIMACYJNA Odbiorniki zdarzeń myszy Ü Flash może nasłuchiwać zdarzeń myszy w obrębie każdego obiektu należącego do klasy Interactive. Object: przyciski pola tekstowe obiekty z klasy Loader obiekty z klasy Sprite klipy filmowe scena filmu 26

GRAFIKA ANIMACYJNA Śledzenie przycisku Ü Domyślnie jedno zdarzenie przycisku wpływa na jeden egzemplarz przycisku Ü Możliwe jest także współdziałanie wielu egzemplarzy przycisków, np. w menu rozwijanym 27

GRAFIKA ANIMACYJNA Dynamiczne tworzenie przycisku Ü Przycisk można utworzyć za pomocą Action. Script. Należy w tym celu: posłużyć się konstruktorem obiektu klasy Simple. Button() zdefiniować cztery klatki kluczowe przycisku za pomocą właściwości: up. State, over. State, down. State, oraz hit. Test. State przechwycić grafikę do stanów przycisku (może być to dowolny obraz, klip, dynamicznie stworzona grafika klasy 28

GRAFIKA ANIMACYJNA Dynamiczne tworzenie przycisku Importowanie klas tworzonych obiektów Zdefiniowanie grafiki dla stanu Up przycisku Zdefiniowanie grafiki dla stanu Over przycisku Konstruktor nowego obiektu typu przycisk Zdefiniowanie zawartości klatek kluczowych przycisku Dodanie przycisku do listy wyświetlania 29

GRAFIKA ANIMACYJNA Klipy filmowe Ü Są to niezależne od głównej listwy czasowej, najważniejsze składniki filmów Ü Często przypominają małe aplikacje Odtwarzane są nawet wówczas, gdy: – odtwarzanie głównego filmu jest zatrzymane – przydzielono im w głównym filmie mniej klatek niż same zawierają 30

GRAFIKA ANIMACYJNA Niezależność klipów filmowych Głowna oś czasu zatrzymana akcją stop( ); Oś czasu klipu odtwarzana w pętli 31

GRAFIKA ANIMACYJNA Klipy filmowe Ü Testowanie klipów jest możliwe prawie wyłącznie po wyeksportowaniu filmu do pliku. swf Ü Mogą być sterowane „z zewnątrz” kodem Action. Script i same mogą zawierać kod Ü Można stosować do nich filtry Ü Można z nich wykonać przyciski klipów filmowych (bardziej złożone przyciski) Ü Można je tworzyć dynamicznie z poziomu Action. Script 32

GRAFIKA ANIMACYJNA Sposoby tworzenia klipów Ü Ręczne (Wstaw > Nowy Symbol> Klip. . . ) Ü Poprzez utworzenie jego instancji z poziomu Action. Script w klasie Movie. Clip lub Sprite: var my. Clip: Movie. Clip = new Movie. Clip(); . . //definiowanie grafiki var my. Mask: Sprite = new Sprite(); . . //definiowanie grafiki add. Child(my. Clip); add. Child(my. Mask); my. Clip. alpha = 50; my. Mask. button. Mode = true; 33

GRAFIKA ANIMACYJNA Manipulowanie klipami Ü Zmiana właściwości klipów poprzez AS: x – pozioma pozycja klipu filmowego na scenie y – pionowa pozycja klipu filmowego na scenie scale. X – pozioma skala klipu filmowego, reprezentowana procentowo scale. Y – pionowa skala klipu filmowego height – wysokość klipu filmowego w pikselach width – szerokość klipu filmowego w 34

GRAFIKA ANIMACYJNA Manipulowanie klipami alpha – poziom przezroczystości klipu filmowego w skali od 0 do 1 rotation – rotacja klipu filmowego w stopniach visible – wartość logiczna określająca, czy klip jest widoczny (true), czy niewidoczny (false) 35