Transcript wyklad

Grafika animacyjna w
Macromedia Flash
Joanna Sekulska-Nalewajko
Katedra Informatyki Stosowanej
Politechnika Łódzka
2006
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.
2
Możliwości Flasha





Tworzenie grafiki wektorowej
Animowanie grafiki
Tworzenie interfejsów
Tworzenie kodu HTML
Programowanie w języku skryptowym
3
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.
4
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
5
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.
6
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.
7
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.
8
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”.
9
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.
10
Okno powitania
Otwieranie istniejącego projektu
Otwieranie pustego projektu
11
Korzystanie z szablonów
Szablon pokazu zdjęć
Szablon prezentacji
otwarcie stron www zawierających
informacje, pomoc i instrukcje do
programu
12
Spis szablonów
13
Okno programu FLASH 5
14
Okno programu FLASH 8 Pro
15
Listwa Timeline

Okno Timeline zawiera oś czasu służącą
do zarządzania warstwami i klatkami
składającymi się na animację.
16
Listwa Timeline (2)
klatki
licznik klatek
sceny
warstwy
Ikona „dodaj warstwę” i ikona
„dodaj warstwę typu Guide”
Obiekt na
warstwie „koło”
„Usuń warstwę”
17
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
18
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.
19
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.
20
Okno właściwości warstw
Nazwa warstwy
Wyświetlanie i blokowanie
Typ warstwy
Wyświetlanie konturów
obiektów
21
Wstawianie warstw
Z menu Wstaw (Insert)
Za pomocą ikon w oknie Timeline
22
Dół okna listwy czasowej
Czas trwania dtwarzania
Szybkość odtwarzania klatek
Bieżąca klatka
Opcje przenikania klatek
(widok „onion skin”)
Wyśrodkowanie
klatki
23
„Onion skin”
24
Właściwości filmu
25
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.
26
Rodzaje klatek (2)

Puste klatki kluczowe – umożliwiają
rozpoczęcie sekwencji, w której nie
będzie zawartości poprzedniej klatki.
27
Typy animacji




Animacja poklatkowa (frame by frame)
Animacja ruchu (motion tween)
Animacja kształtu (shape tween)
Sekwencje statyczne.
28
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
29
Obiekt wektorowy
Kontur
(kolor, grubość, styl)
Tło
(obszar, kolor, typ wypełnienia)
30
Właściwości wypełnienia
Narzędzie „wypełnienie” z
Przybornika
Dokery „Color Mixer”
i „Color Swatches”
Okno dokowane „Properties”
31
Właściwości konturu
Narzędzie „wypełnienie” z
Przybornika
Dokery „Color Mixer”
i „Color Swatches”
Okno dokowane „Properties”
32
Zaznaczanie obiektów
Obiekt nie
zaznaczony
Zaznaczony
kontur
Zaznaczone
wypełnienie
Zaznaczenie części
konturu
Zaznaczone
wypełnienie
i kontur
Zaznaczona
grupa
obiektów
33
Modyfikacja obiektów
Paleta „Info”
Paleta „Transformacja”
Położenie,
Skalowanie,
wymiary
Obrót
Pochylenie
34
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
35
Właściwości tekstu
36
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!
37
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.
38
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
39
Ustawienia animacji
40
Animacja po ścieżce
Charakterystyczne
wcięcie warstwy
prowadzonej
Dodanie warstwy
prowadzącej
41
Animacja po ścieżce
Klatka 1
Klatka 20
42
Przejście kształtu
Shape hints
43
Efekty kolorów
Brightness - rozjaśnienie
Tint – zmiana koloru
Alpha – przezroczystość
44
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ą
45
Układ warstw w efekcie maski
Warstwa maskująca i maskowana są łączone
automatycznie
46
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.
47
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.
48
Obraz oryginalny
Próg RGB = 50
Próg RGB = 100
Próg RGB = 200
Maska = 10
Maska = 8
Maska = 50
49
Rezultat
50
Część II

Symbole






Grafika (Graphic)
Przycisk (Button)
Klip (Movie Clip)
Biblioteka
Action Script
Importowanie dźwięków

Obsługa dźwięków
51
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.
52
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.
53
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.
54
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.
55
Tworzenie symbolu
Przejście do rejestracji symbolu następuje automatycznie.
56
Okno rejestracji Movie Clip
57
Przekształcenie w symbol
58
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
59
Stany przycisku
Przetestowanie przycisku
umieszczonego na scenie umożliwia
opcja Enable Simple buttons
60
Stany przycisku
Przetestowanie przycisku
umieszczonego na scenie umożliwia
opcja Enable Simple buttons
61
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ść”.
62
Organizacja biblioteki
Lista opcji
Podgląd
Sortowanie alfabetyczne
Organizacja za pomocą folderów
i podfolderów
Dodatkowe ikonki – wstaw symbol,
wstaw folder, usuń symbol/folder
63
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.
64
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.
65
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.
66
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.
67
Action Script - Dodawanie
kodu
Argumenty
poleceń
pojawiają się
na rozwijanej
liście
Język skryptowy podobny w budowie do JavaScript
68
Index – spis poleceń
Najważniejsze polecenia ActionScript
zebrane są w postaci alfabetycznej
listy, w folderze Index.
69
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);
70
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);
71
Najważniejsze akcje (3)

stopAllSounds
 Powoduje zatrzymanie odtwarzania wszystkich
dźwięków
 Akcję można wstawić do klatki lub powiązać z
przyciskiem
72
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.
73
Najważniejsze akcje (5)

Play()
 Służy do odtwarzania, ponownego uruchamiania.
74
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.
75
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
76
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)
77
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.
78
Dźwięki


StopAllSounds();
Akcja zatrzymuje wszystkie dźwięki
79