Grafika animacyjna w Macromedia Flash

1. 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 <object></object>), 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 Szablon pokazu zdjęć Szablon prezentacji otwarcie stron www zawierających informacje, pomoc i instrukcje do programu

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) licznik klatek klatki sceny warstwy Ikona „dodaj warstwę” i ikona „dodaj warstwę typu Guide” „Usuń warstwę” Obiekt na warstwie „koło”

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 Czas trwania dtwarzania Szybkość odtwarzania klatek Bieżąca klatka Opcje przenikania klatek (widok „onion skin”) Wyśrodkowanie klatki

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 Dokery „Color Mixer” i „Color Swatches” Narzędzie „wypełnienie” z Przybornika Okno dokowane „Properties”

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

33. Zaznaczanie obiektów Zaznaczone wypełnienie i kontur Zaznaczona grupa obiektów Obiekt nie zaznaczony Zaznaczony kontur Zaznaczone wypełnienie 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!

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 Klatka 1 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 20

40. Ustawienia animacji

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

42. Animacja po ścieżce Klatka 1 Klatka 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) = 1-500 (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) = 1-1000. 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. Obraz oryginalny Próg RGB = 50 Maska = 10 Próg RGB = 100 Maska = 8 Próg RGB = 200 Maska = 50

50. Rezultat