Grafika animacyjna w Macromedia Flash

Joanna Sekulska-Nalewajko

Katedra Informatyki StosowanejPolitechnika Łó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ówFormat .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”

Obiekt na warstwie „koło”

Ikona „dodaj warstwę” i ikona „dodaj warstwę

typu Guide”

Ikona „dodaj warstwę” i ikona „dodaj warstwę

typu Guide”

warstwywarstwy

scenysceny

klatkiklatki licznik klateklicznik klatek

„Usuń warstwę”

„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 warstwaWyś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 ruchuprowadzonamaskują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 warstwyWyświetlanie i blokowanieTyp 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ędziaZaznaczanie obiektów, przenoszenie, modyfikacja kształtuSkalowanie obiektów, modyfikacja wypełnienia gradientowegoLinia, lassoKrzywe, Tekst

Kształty podstawoweOłówek, pędzelKolor obramowania, wypełnianie (kałamarz, wiadro)Pipeta, gumka

Nawigacja i powiększenie

Kolor konturu

Kolor wypełnieniaUstawienia

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

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

dodanieusunię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