Podstawy grafiki animacyjnej opracowanie: dr Joanna Sekulska-Nalewajko Wykład dla Studiów Podyplomowych GRAFIKA KOMPUTEROWA I TECHNIKI MULTIMEDIALNE Rok akademicki 2013/2014

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.

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.

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.

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

Przykład strony internetowej

Formularze – języki skryptowe

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).

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.

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.

Wybór ustawienia przestrzeni roboczej

Adobe Flash Professional CS 5.5 Zmodyfikowany interfejs użytkownika Ulepszona praca z grafiką ActionScript 3.0 niskopoziomowy, obiektowy język programowania; szybciej wykonywany niż AS 2.0; nowa maszyna wirtualna AVM2; sygnalizacja większej liczby rodzajów błędów; Zgodność wersji

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.

Zgodność z poprzednimi wersjami Jednak wprowadzenie języka ActionScript 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:

Zgodność z poprzednimi wersjami Jeden plik nie może zawierać jednocześnie kodu w języku ActionScript 1.0 lub 2.0 i kodu w języku ActionScript 3.0. Kod ActionScript 3.0 może załadować plik SWF napisany w języku ActionScript 1.0 lub 2.0, ale nie ma dostępu do zmiennych i funkcji w takim pliku SWF.

Zgodność z poprzednimi wersjami Pliki SWF napisane w języku ActionScript 1.0 lub 2.0 nie mogą ładować plików SWF napisanych w języku ActionScript 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.

Zgodność z poprzednimi wersjami Jedynym wyjątkiem od tej reguły jest sytuacja, w której plik SWF w języku ActionScript 2.0 sam zastępuje się plikiem SWF w języku ActionScript 3.0, a wersja pliku SWF w języku ActionScript 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 loadMovieNum() z zerową wartością parametru level.

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.

Ograniczenia wersji Flash Player Obsługiwana funkcjonalność Flash Player 7 Flash Player 8 Flash Player 9 i 10 Może ładować SWF opublikowane dla wersji 7 i wcześniejszych 8 i wcześniejszych 9 (lub 10) i wcześniejszych Zawiera maszynę AVM AVM1 AVM1 i AVM2 Wykonuje SWF napisane w języku ActionScript 1.0 i 2.0 1.0, 2.0 i 3.0

Okno wyboru pliku

Środowisko edycyjne

Podstawowe pojęcia Stół montażowy Oś czasu Scena Warstwa Klatka i ujęcie Animacja Skrypt ActionScript

Ustawienia stołu montażowego: 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

Położenie stołu montażowego

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

Modyfikacja dokumentu Modyfikuj > Dokument

Właściwości stołu montażowego

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.

Zarządzanie osią czasu

Etykiety klatek

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

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

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

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.

Okno właściwości warstw

Korzystanie z odrębnych warstw: 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

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.

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)

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

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

Podgląd obiektu na listwie czasowej Podgląd w kontekście

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