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
Symbole Grafika Klip filmowy Przycisk Biblioteka Egzemplarze symboli =klony, =wystąpienia, =instancje Biblioteka
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.
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
Tworzenie instancji symbolu Za każdym razem, gdy symbol jest umieszczany w filmie, oznacza to utworzenie jego wystąpienia (klonu, instancji).
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
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
Nazwy instancji
Wstawianie symbolu Wstaw > Nowy symbol lub Ctrl+F8
Konwertowanie do symbolu Gdy mamy gotowy element na stole montażowym Modyfikuj > Konwertuj na symbol lub F8
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
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)
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 ActionScript Nie można dodawać skryptów na osi czasu Nie można do nich stosować filtrów Nie można stosować wygładzania Można stosować efekty kolorów Można je tworzyć z poziomu ActionScript
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.
Sterowanie symbolem Graphic Mimo zsynchronizowania osi czasu symbolu Grafika i braku możliwości zarządzania nim poprzez ActionScript można decydować o tym, od której klatki zacząć odtwarzanie. Służy do tego panel Właściwości
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.
Przyciski Służą do tworzenia interaktywności – wykonują polecenia kodu ActionScript 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 ActionScript i innych przycisków Można za to wstawiać symbole graficzne i klipy Można je tworzyć dynamicznie z poziomu AS
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 stosować samego tekstu)
Stany przycisku W klatce Over wstawiono animację w postaci klipu
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. Pamiętamy, że obiekty z klatki Hit nie są wyświetlane w trakcie odtwarzania pliku SWF
Przycisk przezroczysty
Przyciski interaktywne Interaktywny przycisk, to przycisk leżący na stole montażowym (instancja) reagujący na działania myszy i wykonujący kod ActionScript. Skrypty obsługujące przycisk umieszcza się w ramkach osi czasu dokumentu/klipu filmowego. function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);
Przyciski interaktywne function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);
Zdarzenia myszy Zdarzenia myszy obsługiwane przez klasę obiektów MouseEvent: 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 i zwolnienie przycisku myszy
Odbiorniki zdarzeń myszy Flash może nasłuchiwać zdarzeń myszy w obrębie każdego obiektu należącego do klasy InteractiveObject: przyciski pola tekstowe obiekty z klasy Loader obiekty z klasy Sprite klipy filmowe scena filmu
Ś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
Dynamiczne tworzenie przycisku Przycisk można utworzyć za pomocą ActionScript. Należy w tym celu: posłużyć się konstruktorem obiektu klasy SimpleButton() zdefiniować cztery klatki kluczowe przycisku za pomocą właściwości: upState, overState, downState, oraz hitTestState przechwycić grafikę do stanów przycisku (może być to dowolny obraz, klip, dynamicznie stworzona grafika klasy Shape lub Sprite, pole tekstowe)
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
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ą
Niezależność klipów filmowych Głowna oś czasu zatrzymana akcją stop( ); Oś czasu klipu odtwarzana w pętli
Klipy filmowe Testowanie klipów jest możliwe prawie wyłącznie po wyeksportowaniu filmu do pliku .swf Mogą być sterowane „z zewnątrz” kodem ActionScript 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 ActionScript
Sposoby tworzenia klipów Ręczne (Wstaw > Nowy Symbol> Klip ...) Poprzez utworzenie jego instancji z poziomu ActionScript w klasie MovieClip lub Sprite: var myClip:MovieClip = new MovieClip(); ....//definiowanie grafiki var myMask:Sprite = new Sprite(); addChild(myClip); addChild(myMask); myClip.alpha = 50; myMask.buttonMode = true;
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 scaleX – pozioma skala klipu filmowego, reprezentowana procentowo scaleY – pionowa skala klipu filmowego height – wysokość klipu filmowego w pikselach width – szerokość klipu filmowego w pikselach
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)