Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna wykład 3 Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012.

Podobne prezentacje


Prezentacja na temat: "GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna wykład 3 Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012."— Zapis prezentacji:

1 GRAFIKA ANIMACYJNA 1

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

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

4 GRAFIKA ANIMACYJNA 4 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.

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

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

7 GRAFIKA ANIMACYJNA 7 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

8 GRAFIKA ANIMACYJNA 8 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

9 GRAFIKA ANIMACYJNA 9 Nazwy instancji

10 GRAFIKA ANIMACYJNA Wstawianie symbolu  Wstaw > Nowy symbol lub Ctrl+F8 10

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

12 GRAFIKA ANIMACYJNA 12 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

13 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

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

15 GRAFIKA ANIMACYJNA Okno rejestracji grafiki 15 Krzyżyk na środku sceny ma współrzędne: x=0 i y=0 Krzyżyk na środku sceny ma współrzędne: x=0 i y=0 Pasek edycji wskazujący na aktywny element i zagnieżdżenie symboli 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. 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.

16 GRAFIKA ANIMACYJNA 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 16

17 GRAFIKA ANIMACYJNA 17 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.

18 GRAFIKA ANIMACYJNA 18 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

19 GRAFIKA ANIMACYJNA Listwa czasowa przycisku 19 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)

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

21 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.  Pamiętamy, że obiekty z klatki Hit nie są wyświetlane w trakcie odtwarzania pliku SWF 21

22 GRAFIKA ANIMACYJNA Przycisk przezroczysty 22

23 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 ActionScript.  Skrypty obsługujące przycisk umieszcza się w ramkach osi czasu dokumentu/klipu filmowego. 23 function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);

24 GRAFIKA ANIMACYJNA Przyciski interaktywne 24 function showHello(event:MouseEvent):void{ if (powitanie_mc.currentLabel=="goout"){ powitanie_mc.gotoAndPlay("goin");} } start_btn.addEventListener(MouseEvent.CLICK, showHello);

25 GRAFIKA ANIMACYJNA 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 25

26 GRAFIKA ANIMACYJNA 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 26

27 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

28 GRAFIKA ANIMACYJNA 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) 28

29 GRAFIKA ANIMACYJNA Dynamiczne tworzenie przycisku 29 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

30 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

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

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

33 GRAFIKA ANIMACYJNA Sposoby tworzenia klipów  Ręczne ( Wstaw > Nowy Symbol > Klip...)  Poprzez utworzenie jego instancji z poziomu ActionScript w klasie MovieClip lub Sprite: 33 var myClip:MovieClip = new MovieClip();....//definiowanie grafiki var myMask:Sprite = new Sprite();....//definiowanie grafiki addChild(myClip); addChild(myMask); myClip.alpha = 50; myMask.buttonMode = true;

34 GRAFIKA ANIMACYJNA 34 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

35 GRAFIKA ANIMACYJNA 35 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 )


Pobierz ppt "GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna wykład 3 Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012."

Podobne prezentacje


Reklamy Google