Grafika animacyjna w Macromedia Flash Joanna Sekulska-Nalewajko Katedra Informatyki Stosowanej Politechnika Łódzka 2006

2 Wprowadzenie 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. Technologia ta umożliwia tworzenie filmów, gier i aplikacji multimedialnych.

3 Możliwości Flasha Tworzenie grafiki wektorowej Animowanie grafiki Tworzenie interfejsów Tworzenie kodu HTML Programowanie w języku skryptowym

4 Historia Flasha Flash rozpoczął swoje istnienie pod nazwą Splash Animator. Był to niewielki program do animowania obrazów. W 1997 roku firma Macromedia przejęła program FutureSplash i zmieniła jego nazwę na Flash. Program służył do tworzenia grafiki sieciowej. W każdej kolejnej wersji dodawane są nowe elementy, dzięki temu rozszerzane są możliwości programu w dziedzinie interaktywnej grafiki.

5 Formaty filmowe Flasha Pliki Flasha są nazywane „filmami”, bez względu na to, czy są to filmy znajdujące się jeszcze w środowisku autorskim, czy już w postaci finalnej. Filmy robocze mają rozszerzenie.fla Filmy gotowe do oglądania konwertowane są do formatu czytelnego dla procedury odtwarzającej (Flash Player); mają rozszerzenie.swf

6 Publikowanie filmów dla www  Publikacja projektu (.fla) następuje poprzez wybranie opcji Publish w menu File. Plik.swf należy następnie umieścić na serwerze HTTP, odpowiednio wiążąc go z kodem HTML.  Ze względu na nietypową składnię (w porównaniu z klasycznymi obrazami umieszczanymi na stronach WWW – znacznik ), Flash generuje przy okazji dokument HTML, w którym zawarty jest fragment kodu gotowy do skopiowania do docelowego dokumentu.

7 Flash a HTML  Kojarzenie hiperłączy z obiektem Flasha na stronie dokonywane jest przy pomocy języka ActionScript, nie ma w tym udziału HTMLa. ActionScript to język skryptowy podobny w budowie do JavaScript.

8 Publikowanie filmów Format.swf i.html są tworzone (publikowane) domyślnie. Inne formaty należy zaznaczyć, jeśli chce się opublikować tego typu projekt. Każde rozszerzenie ma szereg ustawień zlokalizowanych na osobnej zakładce.

9 Ochrona pliku Jeżeli chcemy uniknąć „dekompilacji” animacji z formatu.swf do pliku projektu.fla, poprzez opcję Publish Settings... z menu File zakładka Flash poprzez zaznaczenie opcji Protect from import i określenie hasła w polu Password możemy zdefiniować hasło chroniące nasze „dzieło”.

10 Odtwarzacz Flash Player Dawniejsze wersje przeglądarek nie obsługiwały materiałów tworzonych we Flashu, konieczne więc było stosowanie specjalnej procedury odtwarzającej – Flash Player. Obecnie, procedury Flash Player są standardem znajdują się w ostatnich wersjach systemu Windows i Macintosh.

11 Okno powitania Otwieranie istniejącego projektu Otwieranie pustego projektu

12 Korzystanie z szablonów otwarcie stron www zawierających informacje, pomoc i instrukcje do programu Szablon pokazu zdjęć Szablon prezentacji

13 Spis szablonów

14 Okno programu FLASH 5

15 Okno programu FLASH 8 Pro

16 Listwa Timeline Okno Timeline zawiera oś czasu służącą do zarządzania warstwami i klatkami składającymi się na animację.

17 Listwa Timeline (2) Obiekt na warstwie „koło” Ikona „dodaj warstwę” i ikona „dodaj warstwę typu Guide” warstwy sceny klatki licznik klatek „Usuń warstwę”

18 Warstwy Warstwy to jeden z najważniejszych elementów naszej animacji. W nich to właśnie umieszczamy elementy które potem będziemy wyświetlać i animować. Ukryta warstwa Wyświetlanie tylko konturów obiektów Warstwa aktywna (podświetlenie) Warstwa zablokowana

19 Warstwy (2) Nazwę warstwy można zmienić, klikając dwukrotnie na tekst Kolejność warstw można zmienić, metodą „przeciągnij i upuść” Zawartość warstwy znajdującej się na dole listy jest przesłaniana obiektami lezącymi na wyższych warstwach.

20 Typy warstw normalna prowadnica ruchu prowadzona maskująca maskowana 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 wykorzystywane jako maski.

21 Okno właściwości warstw Nazwa warstwy Wyświetlanie i blokowanie Typ warstwy Wyświetlanie konturów obiektów

22 Wstawianie warstw Z menu Wstaw (Insert) Za pomocą ikon w oknie Timeline

23 Dół okna listwy czasowej Wyśrodkowanie klatki Opcje przenikania klatek (widok „onion skin”) Bieżąca klatka Szybkość odtwarzania klatek Czas trwania dtwarzania

24 „Onion skin”

25 Właściwości filmu

26 Rodzaje klatek Klatki kluczowe – zawierają elementy dla określonego momentu odtwarzania filmu; obiekt umieszczony na scenie trafia do klatki kluczowej; usunięcie klatki kluczowej powoduje skasowanie całej jej zawartości. Na klatki kluczowe może składać się od 1 do kilkuset zwykłych klatek. Klatki te umożliwiają zmianę zawartości warstwy. Początek klatki kluczowej wskazuje czarne kółko – koniec, w przypadku więcej niż jednej klatki, wskazuje pusty prostokąt.

27 Rodzaje klatek (2) Puste klatki kluczowe – umożliwiają rozpoczęcie sekwencji, w której nie będzie zawartości poprzedniej klatki.

28 Typy animacji Animacja poklatkowa (frame by frame) Animacja ruchu (motion tween) Animacja kształtu (shape tween) Sekwencje statyczne.

29 Reprezentacja animacji Klatki kluczowe zawierające animację ruchu Klatki kluczowe zawierające animację kształtu Klatki kluczowe zawierające animację ruchu, lecz bez klatki końcowej Klatki kluczowe zawierające nie zmieniony obiekt (bez animacji ruchu lub kształtu) Klatka z literą a zawiera akcję dodaną za pomocą panelu Actions Czerwona flaga oznacza, że klatka zawiera etykietę lub komentarz

30 Obiekt wektorowy Kontur (kolor, grubość, styl) Tło (obszar, kolor, typ wypełnienia)

31 Właściwości wypełnienia Narzędzie „wypełnienie” z Przybornika Dokery „Color Mixer” i „Color Swatches” Okno dokowane „Properties”

32 Właściwości konturu Narzędzie „wypełnienie” z Przybornika Okno dokowane „Properties” Dokery „Color Mixer” i „Color Swatches”

33 Zaznaczanie obiektów Obiekt nie zaznaczony Zaznaczony kontur Zaznaczone wypełnienie Zaznaczone wypełnienie i kontur Zaznaczona grupa obiektów Zaznaczenie części konturu

34 Modyfikacja obiektów Paleta „Info”Paleta „Transformacja” Położenie, wymiary Skalowanie, Obrót Pochylenie

35 Narzędzia Zaznaczanie obiektów, przenoszenie, modyfikacja kształtu Skalowanie obiektów, modyfikacja wypełnienia gradientowego Linia, lasso Krzywe, Tekst Kształty podstawowe Ołówek, pędzel Kolor obramowania, wypełnianie (kałamarz, wiadro) Pipeta, gumka Nawigacja i powiększenie Kolor konturu Kolor wypełnienia Ustawienia Właściwości aktywnego narzędzia

36 Właściwości tekstu

37 Animacja ruchu Aby utworzyć automatyczną (interpolowaną) animację ruchu lub kształtu należy określić stan początkowy i końcowy, pomiędzy którymi Flash sam wygeneruje animację. W praktyce oznacza to zdefiniowanie dwóch klatek kluczowych. Należy tworzyć po jednej animacji na warstwie: - Zwiększa to czytelność listwy czasowej - Tworzenie kilku animacji na warstwie może być niemożliwe! Należy tworzyć po jednej animacji na warstwie: - Zwiększa to czytelność listwy czasowej - Tworzenie kilku animacji na warstwie może być niemożliwe!

38 Animacja ruchu Animacja wykonywana jest na symbolach – jeśli obiekty nie są symbolami, Flash dokona automatycznej konwersji. Rodzaje animacji ruchu: przesunięcie, obrót, pochylenie, przerzucenie, zmiana rozmiaru, zmiana koloru. Wszystkie te zmiany mogą nastąpić w jednym obiekcie jednocześnie.

39 Animacja ruchu Najszybciej jest narysować obiekt, a następnie zaznaczyć klatkę kluczową i z menu podręcznego wybrać polecenie Create Motion Tween. Wstawienie końcowej klatki kluczowej (F6) spowoduje pojawienie się niebieskich klatek na listwie czasowej. Klatka 1 Klatka 20

40 Ustawienia animacji

41 Animacja po ścieżce Dodanie warstwy prowadzącej Charakterystyczne wcięcie warstwy prowadzonej

42 Animacja po ścieżce Klatka 1Klatka 20

43 Przejście kształtu Shape hints

44 Efekty kolorów Brightness - rozjaśnienie Tint – zmiana koloru Alpha – przezroczystość

45 Efekt maski Maski tworzy się przede wszystkim w celu tworzenia efektu reflektora. Potrzebne są trzy warstwy: Tło Obraz odsłaniany Obraz (warstwa) będący maską

46 Układ warstw w efekcie maski Warstwa maskująca i maskowana są łączone automatycznie

47 Bitmapa – obraz wektorowy Flash posiada doskonałe narzędzie do przekształcania bitmap w obiekty wektorowe. Dzięki temu można zrezygnować z tworzenia samemu fotorealistycznych scen filmu, a posłużyć się obrazami trasowanymi. Narzędzie to znajduje się w menu Modify, gdzie wybieramy opcję – Bitmap – a potem - trace bitmap.

48 Opcje trasowania bitmapy Wartość progu (color treshold) = (im większy próg, tym mniejsza liczba kolorów). Jeżeli różnica wartości kolorów RGB porównywanych dwóch pikseli jest mniejsza niż zadany próg, to uznaje się, że te dwa piksele mają tę samą barwę. Maska (minimum area) = Liczba sąsiadujących pikseli branych pod uwagę przy określaniu koloru danego piksela. Dopasowanie krzywych (curve fit). Wygładzanie (corner treshold) – próg narożników – wyrównywanie nierówności; im więcej narożników wyrównano, tym mniejsze podobieństwo do oryginały ale i mniejszy plik.

49 Próg RGB = 100 Maska = 8 Próg RGB = 200 Maska = 50 Próg RGB = 50 Maska = 10 Obraz oryginalny

50 Rezultat

51 Część II Symbole Grafika (Graphic) Przycisk (Button) Klip (Movie Clip) Biblioteka Action Script Importowanie dźwięków Obsługa dźwięków

52 Kształty i wypełnienia Jeżeli kilka niezgrupowanych kształtów zostanie umieszczonych na tej samej warstwie będą one w różny sposób oddziaływały na siebie. Gdy na jakimś kształcie zostanie zastosowane nowe wypełnienie, to zastąpi ono już istniejące wypełnienie i kontur.

53 Kształty i wypełnienia (2) Gdy identyczne wypełnienia zostaną umieszczone razem lub będą nachodzić na siebie, zostaną scalone i staną się jednym wypełnieniem. Aby przenosić kształty bez obawy, że zostaną one w jakiś sposób zdeformowane można: Pogrupować je; Umieścić każdy kształt na oddzielnej warstwie.

54 Symbole W filmach programu Flash symbole służą do: Optymalizacji rozmiaru pliku, Tworzenia i łączenia automatycznych animacji, Tworzenia interaktywnych filmów, Organizowania elementów używanych w filmach.

55 Symbole (2) Symbole są przechowywane w bibliotece. Za każdym razem, gdy symbol jest umieszczany w filmie, oznacza to utworzenie jego wystąpienia (instance). Stosowanie symboli i wystąpień powoduje zmniejszenie rozmiaru plików wynikowych – symbol jest wczytywany do pamięci tylko raz, natomiast w poszczególnych wystąpieniach są przechowywane tylko jego charakterystyki wyświetlania i skrypty. Wystąpienia symboli często są w różny sposób formatowane – mogą się różnić kształtem i kolorem oraz zawierać odmienne skrypty.

56 Tworzenie symbolu Przejście do rejestracji symbolu następuje automatycznie.

57 Okno rejestracji Movie Clip

58 Przekształcenie w symbol

59 Przycisk – listwa czasowa Klatki reprezentują stany przycisku: Up – gdy przycisk jest wyciśnięty Over – gdy najechaliśmy na przycisk myszką Down – gdy przycisk jest wciśnięty Hit – pole reakcji

60 Stany przycisku Przetestowanie przycisku umieszczonego na scenie umożliwia opcja Enable Simple buttons

61 Stany przycisku Przetestowanie przycisku umieszczonego na scenie umożliwia opcja Enable Simple buttons

62 Biblioteka filmu Do biblioteki trafiają wszystkie symbole stworzone w filmie, a także zaimportowane zdjęcia i dźwięki. Elementy z biblioteki można wstawiać do sceny filmu za pomocą metody „przeciągnij i upuść”.

63 Organizacja biblioteki Podgląd Organizacja za pomocą folderów i podfolderów Sortowanie alfabetyczne Lista opcji Dodatkowe ikonki – wstaw symbol, wstaw folder, usuń symbol/folder

64 Biblioteka ogólna W bibliotece ogólnej (Common library) przechowywane są elementy dostępne dla każdego filmu. Pogrupowane są w grupy podobnych symboli. Aby utworzyć nową bibliotekę ogólną należy stworzyć nowy film i jego bibliotekę (z symbolami, które chcemy upowszechnić), a następnie zapisujemy film w katalogu programu Flash, podkatalogu Libraries. Aby usunąć bibliotekę ogólną należy skasować stosowny plik we wspomnianym katalogu.

65 Instancja symbolu Instancja to wystąpienie symbolu w filmie. Można zmieniać rozmiar wystąpienia, kolor: Zmiany zastosowane w wystąpieniu nie odnoszą się do samego symbolu.

66 Struktura filmu - sceny Scena jest sekwencją o określonej nazwie i własnej osi czasu. Może mieć od jednej do tysięcy klatek. Zaznaczona scena staje się aktywna powielenie dodanie usunięcie sceny Jeśli nie są stosowane skrypty, sceny są odtwarzane w kolejności, w jakiej występują na palecie Scene.

67 Movie Explorer Służy do przeglądania scen i zagnieżdżonych animacji – dzięki niemu można edytować obiekty i należący do filmu kod ActionScript.

68 Action Script - Dodawanie kodu Argumenty poleceń pojawiają się na rozwijanej liście Język skryptowy podobny w budowie do JavaScript

69 Index – spis poleceń Najważniejsze polecenia ActionScript zebrane są w postaci alfabetycznej listy, w folderze Index.

70 Najważniejsze akcje gotoAndPlay Powoduje przeskok wskaźnika odtwarzania do innej klatki na osi czasu bieżącej lub innej sceny. Treść tej instrukcji zmienia się w zależności od wybranych parametrów (nazwy sceny, numeru klatki lub etykiety klatki): gotoAndPlay("newFrame"); gotoAndPlay("sceneTwo", 1); gotoAndPlay(5);

71 Najważniejsze akcje (2) gotoAndStop Powoduje przeskok wskaźnika odtwarzania do innej klatki na osi czasu bieżącej lub innej sceny i zatrzymanie odtwarzania filmu w tej klatce. gotoAndStop("newFrame"); gotoAndStop("sceneTwo", 1); gotoAndStop(5);

72 Najważniejsze akcje (3) stopAllSounds Powoduje zatrzymanie odtwarzania wszystkich dźwięków Akcję można wstawić do klatki lub powiązać z przyciskiem

73 Najważniejsze akcje (4) Stop() Zatrzymuje odtwarzanie filmu. Może nyć na przykład stosowana do zezwalania na cykliczne wykonywanie symboli klipów filmowych. W połączeniu z akcjami Play() i GoTo() użytymi do przycisków umożliwoa zdefiniowanie mechanizmu odtwarzania filmu na życzenie użytkownika.

74 Najważniejsze akcje (5) Play() Służy do odtwarzania, ponownego uruchamiania.

75 Najważniejsze akcje (6) loadMovie Służy do wczytywania innych filmów w formacie.swf, a także plików graficznych JPEG, GIF (statyczne) i PNG. do bieżącego filmu. Ponadto, pozwala na wielodostęp podczas wczytywania. loadMovie("circle.swf", mySquare); loadMovie("circle.swf", this); loadMovie("image1.jpg", logo_mc); loadMovieNum() – wczytanie na określony poziom.

76 Najważniejsze akcje (6) duplicateMovieClip Akcja służy do duplikowania wystąpień klipów. duplicateMovieClip ("1", "2", „3”); 1 – nazwa wystąpienia powielanego klipu, 2 - nowa nazwa skopiowanego klipu, 3 - Poziom kopiowania klipu

77 Najważniejsze akcje (7) on (event); Pozwala powiązać inne akcje z działaniem wykonywanym myszką lub przyciskiem. on (keyPress „8”) on (rollOver) on (rollOut) on (press) on (relase)

78 Dźwięki Format.mp3 daje najkorzystniejszy stosunek rozmiaru pliku do jakości. Aby użyć dźwięki w filmach należy je zaimportować, a następnie dobrać odpowiednie właściwości dźwięku.

79 Dźwięki StopAllSounds(); Akcja zatrzymuje wszystkie dźwięki