GRAFIKA ANIMACYJNA 1 GRAFIKA ANIMACYJNA Podstawy grafiki animacyjnej

GRAFIKA ANIMACYJNA 1

GRAFIKA ANIMACYJNA Podstawy grafiki animacyjnej opracowanie: dr Joanna Sekulska-Nalewajko Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE 2

GRAFIKA ANIMACYJNA Wprowadzenie Ü Flash - to połączenie narzędzi dla zaawansowanego projektanta (grafika) i zaawansowanego programisty Ü Pozwala tworzyć projekty: proste - banery, animowane przyciski rozbudowane – strony www, galerie, gry, aplikacje na urządzenia przenośne, moduły treningowe, prezentacje itp. 3

GRAFIKA ANIMACYJNA Dlaczego Flash? Technologia Flash zapewnia wydajną, strumieniową metodę przesyłania grafiki w Internecie (streaming). Jest więc odpowiedzią na potrzeby projektantów sieciowych, którzy pragną większej ilości grafiki i lepszej nad nią kontroli. Flash umożliwia przesyłanie w sieci grafiki wektorowej. Pliki z grafiką tego typu są bardzo małe, a obrazy są skalowalne, bez utraty ich jakości. 4

GRAFIKA ANIMACYJNA Integralność Flasha Ü Środowisko Flasha jest zintegrowane z innymi produktami Adobe – Dreamweaver, Fireworks – oraz z produktami innych dostawców. Ü Istnieje wiele narzędzi do konwersji materiałów np. wideo do formatu flash, kompresji grafiki, dźwięku. Ü Flash jest elastyczny i rozszerzalny – rozszerzenia są dziełem pasjonatów Flash, dostępne są na stronie Adobe w kategorii Flash /exchange. Niektóre są płatne. 5

GRAFIKA ANIMACYJNA Możliwości Flasha Ü Animacje Ü Praca z grafiką wektorową i bitmapową Ü Klipy dla urządzeń przenośnych i różnych systemów operacyjnych (i. OS, Android) Ü Komunikacja z bazami danych i współpraca z językami skryptowymi Ü Programowanie w języku Action Script 6

GRAFIKA ANIMACYJNA Przykład strony internetowej 7

GRAFIKA ANIMACYJNA 8

GRAFIKA ANIMACYJNA Formularze – języki skryptowe 9

GRAFIKA ANIMACYJNA 10

GRAFIKA ANIMACYJNA Budowa aplikacji Ü Flash jest podzielony na dwie części: Środowisko edycyjne, które służy do przygotowywania filmów i oprogramowania; Odtwarzacz Flash Player, który interpretuje, wyświetla i wykonuje aplikacje zawarte w plikach SWF (Small Web File). 11

GRAFIKA ANIMACYJNA Flash Player Ü Końcowy odbiorca plików SWF musi posiadać odtwarzacz Flash Player, by uruchomić aplikację Flasha. Ü Flash Player jest niemal powszechny, gdyż jest dostępny na 97% komputerów z zainstalowaną przeglądarką internetową. Ü Odtwarzacz jest niewielki i łatwo się go pobiera i aktualizuje. Jest bezpłatny. 12

GRAFIKA ANIMACYJNA Flash Player Lite Ü Od Flash 8 Professional możliwe jest publikowanie filmów i aplikacji dla Flash Player Lite Ü Flash Player Lite służy do odtwarzania filmów w telefonach komórkowych. 13

GRAFIKA ANIMACYJNA Wybór ustawienia przestrzeni roboczej 14

GRAFIKA ANIMACYJNA Adobe Flash Professional CS 5. 5 Ü Zmodyfikowany interfejs użytkownika Ü Ulepszona praca z grafiką Ü Action. Script 3. 0 niskopoziomowy, obiektowy język programowania; szybciej wykonywany niż AS 2. 0; nowa maszyna wirtualna AVM 2; sygnalizacja większej liczby rodzajów błędów; Ü Zgodność wersji 15

GRAFIKA ANIMACYJNA Zgodność z poprzednimi wersjami Ü Flash Player gwarantuje pełną zgodność wstecz z dotychczas opublikowanymi treściami. Ü Każda treść, która działała w poprzedniej wersji programu Flash Player, działa także w programie Flash Player 9 i jego późniejszych wersjach. 16

GRAFIKA ANIMACYJNA Zgodność z poprzednimi wersjami Ü Jednak wprowadzenie języka Action. Script 3. 0 w wersji Flash Player 9 stwarza pewne utrudnienia we współdziałaniu między starymi a nowymi treściami działającymi w programie Flash Player 9 lub jego późniejszych wersjach. Ü Dalej wymieniane są te utrudnienia mające związek ze zgodnością wersji: 17

GRAFIKA ANIMACYJNA Zgodność z poprzednimi wersjami Ü Jeden plik nie może zawierać jednocześnie kodu w języku Action. Script 1. 0 lub 2. 0 i kodu w języku Action. Script 3. 0. Ü Kod Action. Script 3. 0 może załadować plik SWF napisany w języku Action. Script 1. 0 lub 2. 0, ale nie ma dostępu do zmiennych i funkcji w takim pliku SWF. 18

GRAFIKA ANIMACYJNA Zgodność z poprzednimi wersjami Ü Pliki SWF napisane w języku Action. Script 1. 0 lub 2. 0 nie mogą ładować plików SWF napisanych w języku Action. Script 3. 0. Ü Załóżmy, że stworzyliśmy odtwarzacz multimedialny w języku AS 2. 0. Odtwarzacz ten ładuje różne treści, także utworzone w języku AS 2. 0. Nie będzie możliwe załadowanie do odtwarzacza nowych treści utworzonych w języku AS 3. 0. 19

GRAFIKA ANIMACYJNA Zgodność z poprzednimi wersjami Ü Jedynym wyjątkiem od tej reguły jest sytuacja, w której plik SWF w języku Action. Script 2. 0 sam zastępuje się plikiem SWF w języku Action. Script 3. 0, a wersja pliku SWF w języku Action. Script 2. 0 nie załadowała uprzednio żadnych treści (na żadnym poziomie). W języku AS 2. 0 plik SWF może wykonać taką operację poprzez wywołanie load. Movie. Num() z zerową wartością 20

GRAFIKA ANIMACYJNA Zgodność z poprzednimi wersjami Ü Co do zasady pliki SWF napisane w języku AS 1. 0 lub 2. 0 wymagają migracji, jeśli mają współdziałać z plikami SWF napisanymi w języku AS 3. 0. 21

GRAFIKA ANIMACYJNA Ograniczenia wersji Flash Player Obsługiwana funkcjonalność Flash Player 7 Może ładować 7 i wcześniejszych SWF opublikowane dla wersji Flash Player 8 Flash Player 9 i 10 8 i wcześniejszych 9 (lub 10) i wcześniejszych Zawiera maszynę AVM 1 i AVM 2 Wykonuje SWF napisane w języku Action. Script 1. 0 i 2. 0 1. 0, 2. 0 i 3. 0 22

GRAFIKA ANIMACYJNA Okno wyboru pliku 23

GRAFIKA ANIMACYJNA Środowisko edycyjne 24

GRAFIKA ANIMACYJNA Podstawowe pojęcia Ü Stół montażowy Ü Oś czasu Ü Scena Ü Warstwa Ü Klatka i ujęcie Ü Animacja Ü Skrypt Action. Script 25

GRAFIKA ANIMACYJNA Stół montażowy Ü Obszar stołu montażowego reprezentuje widzialny obszar tworzonego pliku. Umieszcza się tu wszystkie elementy wizualne. Ü Ustawienia stołu montażowego: Wymiary Kolor tła Ilość klatek wyświetlanych na sekundę Jednostki wymiarowania 26

GRAFIKA ANIMACYJNA Położenie stołu montażowego 27

GRAFIKA ANIMACYJNA Właściwości dokumentu Dołączenie pliku AS Właściwości stołu montażowego 28

GRAFIKA ANIMACYJNA Modyfikacja dokumentu Ü Modyfikuj > Dokument 29

GRAFIKA ANIMACYJNA Właściwości stołu montażowego 30

GRAFIKA ANIMACYJNA Oś czasu Listwa czasowa to miejsce prowadzenia animacji, czyli zmian na scenie zachodzących w czasie. Każda klatka na listwie czasowej odpowiada kadrowi animacji. 31

GRAFIKA ANIMACYJNA Zarządzanie osią czasu 32

GRAFIKA ANIMACYJNA Etykiety klatek 33

GRAFIKA ANIMACYJNA Reprezentacja animacji Właściwości warstw (wybrane polecenia) 34

GRAFIKA ANIMACYJNA Zarządzanie warstwami Ü Warstwy zawierają grafikę podlegającą animacji, komponenty, skrypty i dźwięki. Ü Zarządzanie warstwami to: – Dodawanie i usuwanie – Zmiana kolejności – Ukrywanie i blokowanie – Nazywanie – Ustalenie typu warstwy 35

GRAFIKA ANIMACYJNA Zarządzanie warstwami Warstwa ukryta i zablokowana Zmiana nazwy warstwy Ikona dodawania warstw Ikona usuwania warstw Obiekt na warstwie „animacja koło” 36

GRAFIKA ANIMACYJNA Typy warstw Warstwa prowadząca służy tylko do animacji ruchu (motion tweening). Ü Warstwa maskująca służy do maskowania obiektów leżących na warstwie maskowanej. Ü Ü Uwaga! Ponieważ warstwy prowadzące i maskujące przekształcają swoją zawartość, nie należy umieszczać na nich obiektów innych niż ścieżki ruchu lub wykorzystywanych jako maski. 37

GRAFIKA ANIMACYJNA Okno właściwości warstw 38

GRAFIKA ANIMACYJNA Dlaczego warstwy? Ü Korzystanie z odrębnych warstw: Jest nieodzowne w przypadku jednoczesnej animacji kilku obiektów, jeśli nie są zgrupowane. Zapobiega wchodzeniu grafiki statycznej we wzajemne interakcje Zwiększa czytelność projektu 39

GRAFIKA ANIMACYJNA Interakcje obiektów Ü Gdy na tej samej warstwie na jakimś kształcie zostanie narysowany inny obiekt, to zastąpi on już istniejące wypełnienie i kontur. 40

GRAFIKA ANIMACYJNA Interakcje obiektów Ü Gdy na tej samej warstwie na jakimś kształcie zostanie narysowany inny obiekt o identycznym wypełnieniu (a obydwa obiekty będą bez konturów), obiekty te zostaną scalone i staną się jednym wypełnieniem. Ü Aby zapobiec deformacji obiektów można: – Pogrupować je; – Umieścić każdy kształt na oddzielnych warstwach. – Przed rysowaniem włączyć opcję Rysowanie obiektów (J) 41

GRAFIKA ANIMACYJNA Dolny margines listwy czasowej Sterowanie odtwarzaniem Przenikanie ujęć („onion skin”) Czas trwania odtwarzania Szybkość odtwarzania klatek Bieżąca klatka 42

GRAFIKA ANIMACYJNA Opcje wyświetlania listwy Ü Zestaw opcji wyświetlania rozwija się w prawym górnym rogu listwy Ü Służy do ustalenia : szerokości klatek i wysokości warstw reprezentacji obiektów w warstwach 43

GRAFIKA ANIMACYJNA Podgląd obiektu na listwie czasowej Ü Podgląd w kontekście 44

GRAFIKA ANIMACYJNA Przenikanie ujęć przenikanie ujęć z edycją wielu latek obrysy przenikania ujęć z edycją wielu latek 45