Upload
tibor
View
36
Download
0
Embed Size (px)
DESCRIPTION
Grafika animacyjna w Macromedia Flash. Joanna Sekulska-Nalewajko Katedra Informatyki Stosowanej Politechnika Łódzka 2006. Wprowadzenie. - PowerPoint PPT Presentation
Citation preview
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