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

Prezentacja na temat: "GRAFIKA ANIMACYJNA 1. 2 Grafika Animacyjna wykład 4 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 4 Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2011/2012 opracowanie: dr Joanna Sekulska-Nalewajko

3 GRAFIKA ANIMACYJNA Plan wykładu  Biblioteka filmu  Ustawienia predefiniowane ruchu  Dźwięk we Flash 3

4 GRAFIKA ANIMACYJNA Biblioteka filmu 4 Do biblioteki trafiają wszystkie symbole stworzone „ręcznie” w filmie, a także: zaimportowane obrazy rastrowe, klipy wideo dźwięki komponenty czcionki osadzone w dokumencie Wyjątkiem jest surowa grafika narysowana bezpośrednio na scenie – jej w bibliotece nie ma. Elementy z biblioteki można wstawiać do sceny filmu za pomocą metody „przeciągnij i upuść”.

5 GRAFIKA ANIMACYJNA Organizacja biblioteki 5 Podgląd Organizacja za pomocą folderów i podfolderów Wyszukiwanie obiektu Lista opcji Dodatkowe ikonki – wstaw symbol, wstaw folder, usuń symbol/folder

6 GRAFIKA ANIMACYJNA Dodatkowe funkcje biblioteki 6 Informacje o eksporcie elementu, powiązaniu z zewnętrzną biblioteką lub z elementem w tym samym dokumencie np. komponentem

7 GRAFIKA ANIMACYJNA Wspólne biblioteki 7 Dźwięki Przyciski Klasy

8 GRAFIKA ANIMACYJNA Organizacja wspólnych bibliotek 8

9 GRAFIKA ANIMACYJNA Ustawienia predefiniowane ruchu 9 Dym

10 GRAFIKA ANIMACYJNA Ustawienia predefiniowane ruchu 10 Odbicie-wew-3D

11 GRAFIKA ANIMACYJNA 11 Dźwięk we Flash

12 GRAFIKA ANIMACYJNA 12 Praca z dźwiękiem  Flash zapewnia różne formy wykorzystania dźwięku. Istnieje możliwość: tworzenia dźwięków odtwarzanych bez przerwy, niezależnie od Osi czasu posłużenia się Osią dla zsynchronizowania animacji ze ścieżką dźwiękową przypisywania dźwięków do przycisków dla uzyskania większej interaktywności, sterowania siłą dźwięku dla nadania ścieżce dźwiękowej większej płynności. pobierania metadanych ID3 z pliku mp3

13 GRAFIKA ANIMACYJNA Formaty plików dźwiękowych  MP3 – najpopularniejszy plik dźwiękowy w Internecie; format charakteryzuje się świetną jakością dźwięku i małymi rozmiarami pliku. Sprawdza się bardzo dobrze we Flashu – jest to jedyny format, jaki może być ładowany do pliku Flasha w czasie wykonywania,  WAV – ma większy rozmiar niż MP3, ale zachowuje bardzo wysoką jakość dźwięku – standardowy format w systemie Windows,  AIFF – format podobny do WAV, ale stosowany na komputerach Macintosh, system Windows może mieć problem z tymi plikami. 13

14 GRAFIKA ANIMACYJNA Możliwości wstawiania dźwięku  Import do biblioteki filmu wstawienie ręczne na oś czasu linkowanie dźwięku będącego w bibliotece (AS)  Dołączanie dźwięku z zewnątrz filmu poprzez AS 14

15 GRAFIKA ANIMACYJNA Dźwięk na osi czasu  Dźwięki można importować do biblioteki i wstawiać bezpośrednio na listwę czasową sceny, klipu lub przycisku.  Dźwięk reprezentowany jest wówczas w klatce przez niebieską linię: 15

16 GRAFIKA ANIMACYJNA Dźwięk na osi czasu 16 Ważne jest ustawienie odpowiednich opcji dla dźwięku Ważne jest ustawienie odpowiednich opcji dla dźwięku Dla dźwięku zsynchronizowanego z listwą czasową najlepszym ustawieniem jest opcja URUCHOM: dźwięk odtwarza się automatycznie, nie pozwala na nakładanie się dźwięków, nie uruchamiany jest od początku przy zapętleniu filmu

17 GRAFIKA ANIMACYJNA Pozostałe opcje Synchronizacji  Zdarzenie – Jeśli film odtwarzany jest w pętli to za każdym razem będzie rozpoczynał się nowy dźwięk nakładając się na już odtwarzany;  Uruchom – nie pozwala na nakładanie się dźwięków; jeśli film odtwarzany jest w pętli to odtwarzanie dźwięku jest kontynuowane;  Zatrzymaj – dźwięk jest umieszczony w 1 klatce i zatrzymany  Strumień – Jeśli film odtwarzany jest w pętli to dźwięk też startuje od początku 17

18 GRAFIKA ANIMACYJNA Dźwięk na osi czasu przycisku 18 Na listwie czasowej przycisku dźwięk umieszczamy w klatce HIT Na listwie czasowej przycisku dźwięk umieszczamy w klatce HIT Dla dźwięku zsynchronizowanego z listwą czasową najlepszym ustawieniem jest także opcja URUCHOM: dźwięk zaczyna odtwarzać się po kliknięciu na przycisk, ale nie pojawiają się kolejne dźwięki przy kolejnym klikaniu na przycisk (brak nakładania się dźwięków)

19 GRAFIKA ANIMACYJNA Efekty dźwięku 19 Efekty z tej listy pozwalają na zarządzanie dźwiękiem osadzonym na listwie czasowej Sceny, klipu lub przycisku. Efekty z tej listy pozwalają na zarządzanie dźwiękiem osadzonym na listwie czasowej Sceny, klipu lub przycisku.

20 GRAFIKA ANIMACYJNA Własny efekt użytkownika 20 Użytkownik może wybrać moment filmu i kanał, w którym chce dokonywać zmian głośności

21 GRAFIKA ANIMACYJNA Dźwięki a ActionScript  Z poziomu ActionScript można nie tylko wczytać do filmu dźwięk z osobnego pliku dźwiękowego ale także sterować odtwarzaniem dźwięku: rozpocząć lub wstrzymać odtwarzanie zmienić głośność lub balans (osobno dla każdego głośnika) –można uzależnić parametry dźwięku od działań użytkownika lub przebiegu animacji odczytać informacje o postępie ładowania lub odtwarzania dźwięku itp. 21

22 GRAFIKA ANIMACYJNA Dźwięk uruchamiany z biblioteki  Dźwięki umieszczone w bibliotece mogą być uruchamiane bez konieczności umieszczania ich na listwie czasowej  Wymaga to udostępniania symboli dźwiękowych z biblioteki środowisku ActionScript 22

23 GRAFIKA ANIMACYJNA Dźwięk uruchamiany z biblioteki  Procedura polega na utworzeniu nowej klasy dla symbolu będącej rozszerzeniem jednej z już istniejących klas (w tym wypadku klasy Sound), dzięki czemu możemy tworzyć nowe egzemplarze danego symbolu dynamicznie (za pomocą funkcji konstruktora) 23

24 GRAFIKA ANIMACYJNA Dźwięk uruchamiany z biblioteki 24 Klasa Adele dziedziczy wszystkie właściwości i metody klasy Sound().

25 GRAFIKA ANIMACYJNA Linkowanie za pomocą przycisku 25 Aby zapobiec nakładaniu się dźwięków, które uruchamiane są po każdym kliknięciu należy użyć metody stopAll() należącej do klasy SoundMixer.

26 GRAFIKA ANIMACYJNA Klasy AS obsługujące dźwięk  Sound  SoundChannel  SoundMixer  SoundTransform  SoundEvent  SoundLoaderContext  ID3Info  Microphone 26

27 GRAFIKA ANIMACYJNA Klasy AS obsługujące dźwięk  Każdy ładowany i odtwarzany dźwięk wymaga własnej instancji klasy Sound oraz często klasy SoundChannel.  Wyjście z wielu instancji SoundChannel jest następnie miksowane razem przez klasę globalną SoundMixer podczas odtwarzania. 27

28 GRAFIKA ANIMACYJNA Klasa Sound  obsługuje ładowanie dźwięku,  zarządza podstawowymi właściwościami dźwięku  rozpoczyna odtwarzanie dźwięku  Wczytując dźwięk musimy powołać jego egzemplarz jako obiekt tej klasy.  Dopiero wówczas możemy zarządzać dźwiękiem, np. w pierwszej koleności użyć metody play() ; . 28

29 GRAFIKA ANIMACYJNA Klasa SoundChannel  Egzemplarz tej klasy powstaje automatycznie przy powołaniu obiektu klasy Sound (udostępnia go program Flash Player i środowisko AIR a więc po rozpoczęciu odtwarzania dźwięku)  Klasa wyposażona jest we własności, dzięki którym możemy sterować dźwiękiem: jedną z własności jest obiekt SoundTransform, który pozwala kontrolować globalne natężenie dźwięku oraz jego balans. służy także do zatrzymywania odtwarzania informuje o postępie odtwarzania 29

30 GRAFIKA ANIMACYJNA  Klasa SoundMixer umożliwia kontrolowanie danych wyjściowych, jeśli wymagane jest kontrolowanie dźwięku połączonego czyli odtwarzania na raz kilku plików dźwiękowych; przykładem użycia tej klasy jest metoda stopAll(); 30 SoundMixer

31 GRAFIKA ANIMACYJNA SoundTransform  Klasa SoundTransform zawiera wartości sterujące głośnością dźwięku oraz panoramowaniem.  Obiekt SoundTransform można zastosować do konkretnego obiektu SoundChannel, do globalnego obiektu SoundMixer, lub, miedzy innymi, do obiektu Microphone. 31

32 GRAFIKA ANIMACYJNA ID3Info  Obiekt ID3Info zawiera właściwości reprezentujące metadane ID3, często przechowywane w plikach dźwiękowych mp3. 32

33 GRAFIKA ANIMACYJNA SoundLoaderContext  Klasa SoundLoaderContext określa, ile sekund buforowania należy zastosować podczas ładowania dźwięku, oraz czy podczas ładowania program Flash Player lub AIR ma szukać na serwerze pliku strategii.  Obiekt SoundLoaderContext jest używany jako parametr metody Sound.load(). 33

34 GRAFIKA ANIMACYJNA Microphone  Klasa Microphone reprezentuje mikrofon lub inne urządzenie wejściowe dźwiękowe podłączone do komputera użytkownika.  Obiekt Microphone steruje wzmocnieniem, częstotliwością próbkowania oraz innymi wielkościami charakterystycznymi dla jego własnego strumienia dźwiękowego. Klasy Sound, SoundChannel i SoundMixer nie są używane dla danych dźwiękowych uzyskanych z mikrofonu 34

35 GRAFIKA ANIMACYJNA Dźwięk z zewnętrznych plików  Zalety ładowania plików dźwiękowych dopiero w trakcie odtwarzania filmów: Mniejszy rozmiar pliku SWF Odtwarzanie strumieniowe: odtwarzanie zewnętrznego pliku audio można rozpocząć od początku pliku dźwiękowego podczas ładowania pozostałej części pliku. 35

36 GRAFIKA ANIMACYJNA Przykład skryptu - uruchomienie 36  Wymagane jest:  powołanie instancji obiektu z klasy Sound  określenie pliku dźwiękowego, który chcemy wczytać ( URLRequest )  wczytanie tego pliku – metoda load();  uruchomienie dźwięku – metoda play();

37 GRAFIKA ANIMACYJNA Metoda play()  Metoda ta przyjmuje trzy opcjonalne parametry: przesunięcie w czasie (w milisekundach) mySound.play(10000) liczba odtworzeń dźwięku mySound.play(0,3) mySound.play(0,99999) trzecim parametrem jest obiekt SoundTransform 37 Rozpoczęcie odtwarzania nastąpi od 10 sekundy utworu. Dźwięk rozpocznie się od początku utworu i zostanie powtórzony 3 razy.

38 GRAFIKA ANIMACYJNA Wstrzymanie odtwarzania  Służy do tego metoda stop() klasy SoundChannel !!!  Musimy najpierw powołać obiekt tej klasy i przypisać do niego odtwarzany dźwięk  Dopiero po tych zabiegach wolno nam użyć metody stop() : var myChannel:SoundChannel = mySound.play(); myChannel.stop();  Ale w celu zatrzymania zarówno ładowania, jak i odtwarzania dźwięku przesyłanego strumieniowo należy wywołać metodę Sound.close(). 38 Można użyć też metody stopAll() klasy SoundMixer

39 GRAFIKA ANIMACYJNA Pauza i wznawianie dźwięku  Dzięki właściwości position obiektu SoundChannel możemy wiedzieć jaki jest bieżący czas odtwarzania nagrania (w milisekundach)  Informację tę możemy przechwycić do zmiennej, a następnie wartość tę wykorzystać jako parametr w metodzie play() obiektu Sound. var myChannel:SoundChannel = mySound.play(); var pausePosition:int; pausePosition = myChannel.position; 39

40 GRAFIKA ANIMACYJNA Pauza i wznawianie dźwięku 40

41 GRAFIKA ANIMACYJNA Modyfikacja dźwięku  Aby zmienić ogólną głośność i balans dźwięku należy wprowadzić trzeci parametr do metody play()  Wymaga on użycia obiektu klasy SoundTransform – należy więc go utworzyć:  Następnie należy ustawić własność tego obiektu:  I użyć go jako trzeciego parametru metody play() : 41

42 GRAFIKA ANIMACYJNA Modyfikacja dźwięku  Aby zmienić głośność lub balans dźwięku, który jest już odtwarzany należy przypisać obiekt SoundTransform do własności soundTransform obiektu SoundChannel : 42

43 GRAFIKA ANIMACYJNA Właściwości obiektu SoundTransform  volume wyciszenieod 0 do 1  pan balans głośnikówod -1 do 1  leftToLeft głośnik lewyod 0 do 1  leftToRight przeniesienieod 0 do 1  rightToLeft przeniesienieod 0 do 1  rightToRight głośnik prawyod 0 do 1 43

44 GRAFIKA ANIMACYJNA Postęp ładowania  Powinniśmy kontrolować postęp ładowania dźwięku oraz ewentualne występowanie błędów. Jeśli dźwięk jest dość duży, może on nie zostać całkowicie załadowany, a próba odtworzenia niezaładowanego dźwięku może skończyć się błędem wykonywania. Obiekt Sound dysponuje pewną liczbą różnych zdarzeń w procesie ładowania dźwięku:  open (Event.OPEN), progress (ProgressEvent.PROGRESS), id3 (Event.ID3),  complete (Event.COMPLETE), ioError (IOErrorEvent.IO_ERROR) 44

45 GRAFIKA ANIMACYJNA Odtworzenie dźwięku po zładowaniu var s:Sound = new Sound(); s.addEventListener(Event.COMPLETE, onSoundLoaded); var req:URLRequest = new URLRequest("bigSound.mp3"); s.load(req); function onSoundLoaded(event:Event):void { var localSound:Sound = event.target as Sound; localSound.play(); } 45

46 GRAFIKA ANIMACYJNA Informacja o postępie ładowania var s:Sound = new Sound(); s.addEventListener(ProgressEvent.PROGRESS, onLoadProgress); s.addEventListener(IOErrorEvent.IO_ERROR, onIOError); var req:URLRequest = new URLRequest("bigSound.mp3"); s.load(req); function onLoadProgress(event:ProgressEvent):void { var loadedPct:uint = Math.round(100 * (event.bytesLoaded / event.bytesTotal)); trace("The sound is " + loadedPct + "% loaded."); } function onIOError(event:IOErrorEvent) { trace("The sound could not be loaded: " + event.text); } 46