[ Pobierz całość w formacie PDF ]
136
PORADY
Kurs Macromedia Flasha MX 2004 (część I)
Nawigator (pomiędzy
scenami)
Dzięki niemu każdy fragment
filmu ma odrębną instancję.
Linia czasowa
Tutaj znajdują się klatki naszej
animacji. Czarne kropki ozna-
czają klatki kluczowe.
Nazwa klipu
Dokument flashowy to anima-
cja, którą nazywamy klipem.
Mikser kolorów
W tym miejscu możemy pre-
cyzyjnie określić kolor każde-
go obiektu.
Panel narzędzi
Podstawowy przybornik, na
którym znajdują się narzędzia
do tworzenia grafiki.
Biblioteka obiektów
To lista wszystkich używanych
w projekcie
obiektów. Jedna
z kolumn określa ich typ.
Narzędzia łapka i lupa
Pozwalają na przesuwanie
i przybliżanie wszystkich
obiektów graficznych.
Miejsce do wpisywa-
nia kodu Action Script
Okno pozwalające na edycję
kodu sterującego klipem.
Narzędzia kolorów
Dzięki nim ustalimy barwy
obrysów i tła dla poszczegól-
nych obiektów.
Pozost
ałe zakładki
Umożliwiają np. określenie
wzajemnego położenia obiek-
tów albo ich transformacji.
Panel opcji (zależne od
wybranego narzędzia)
W tym panelu pojawiają się
dodatkowe opcje, które po-
zwalają zdefiniować parame-
try danego narzędzia, np. to,
czy lupa ma oddalać czy przy-
bliżać obiekty.
Nawigator akcji
i scen
Panel właściwości (menu zależne
od zaznaczonego obiektu)
Tutaj ustalamy dodatkowe parametry zazna-
czonych obiektów, np. ich wielkość.
Nowa maska/war-
stwa/folder warstw
Tworzenie ciekawych efektów graficznych na strony WWW
Zabłyśnij w Sieci
W pierwszym odcinku naszego kursu poka-
żemy, jak przygotować animowane logo CHIP-a.
Na każdej literze nazwy naszego magazynu za-
prezentujemy inny efekt. I tak C będzie się poja-
wiało w wyniku transformacji kształtów, a litera
H poprzez płynną zmianę stopnia przezroczysto-
ści. Na przykładzie I nauczymy się, jak wyko-
rzystać tzw. animację poklatkową. W wypadku
P postaramy się zaś przybliżyć ideę dynamicznej
zmiany tła danego obiektu.
Internet ewoluuje, a minimalizm statycznych stron HTML przestał już
wystarczać. Jeśli chcesz się wyróżnić, skorzystaj z Flasha – dzięki niemu
Twój serwis WWW nabierze rumieńców.
Michał Michalski, Filip Zagórski
Parametry klipu
Aby utworzyć nowy projekt w programie Flash,
należy skorzystać z funkcji
File | New | Flash
Document
(
[Ctrl]+[N]
). Jeżeli w głównym oknie
programu nie widać panelu
Properties,
wci-
skamy skrót
[Shift]+[F3]
bądź też wybieramy
opcję
Window | Properties.
Następnie zmienia-
my rozmiary nowo tworzonego filmu, klikając
przycisk
Size.
Pojawi się wówczas okno, w któ-
rym możemy dostosować wymiary (Dimensions):
szerokość (Width) ustalamy w naszym projek-
cie na 250 pikseli, a wysokość (Height) na
80. Tutaj definiujemy też prędkość odtwarzania
naszego filmu. Zwiększenie jej spowoduje płyn-
niejsze przechodzenie pomiędzy poszczególny-
mi ujęciami i scenami, ale powiększy przy tym
rozmiar klipu wynikowego. W kolejnym kroku
internetowych z pewnością zetknął
się z obiektami graficznymi wygenerowanymi
dzięki programowi Flash. Nie każdy jednak miał
okazję zobaczyć, jak takie filmy powstają. Oka-
zuje się, że ich tworzenie nie jest bardzo trud-
ne, chociaż wymaga czasu i zaangażowania.
Flash to przede wszystkim ogromne bogac-
two możliwości. Oferuje on bowiem nie tylko
funkcje tworzenia efektownych animacji gra-
ficznych, ale też kompletnych i rozbudowanych
aplikacji internetowych. W dokumentach Fla-
sha z łatwością połączymy wszystkie elementy
potrzebne do utworzenia witryny WWW w spój-
ną całość.
Pierwszą część naszego kursu rozpocznie-
my od zapoznania się z metodą działania Fla-
sha oraz interfejsem użytkownika. Nauczymy się
tworzyć podstawowe elementy graficzne i ani-
macje, a także skorzystamy z najprostszych
funkcji języka ActionScript.
prędkość odtwarzania mierzona w klatkach
na sekundę.
– Na głównej linii czasowej (tzw. TimeLine),
która obrazuje proces odtwarzania filmu
klatka po klatce, umieszczamy przygotowa-
ne wcześniej obiekty. Są nimi elementy gra-
ficzne, klipy, efekty czy dźwięki.
– Obiekty możemy grupować na po-
szczególnych warstwach, które układa-
my w kolejności od najwyższej do najniż-
szej (definujemy w ten sposób hierarchię ich
wyświetlania). Obiekty z warstwy położonej
wyżej zasłaniają te, które znajdują się pod
nimi.
– Na warstwach dokonujemy wszystkich pod-
stawowych operacji. Przede wszystkim rysu-
jemy oraz umieszczamy na nich tzw. sym-
bole i komponenty. Do symboli należą Mo-
vie Clip (klip filmowy z niezależnym zbiorem
warstw i niezależną listwą czasową), Button
(przycisk) oraz Graphic (obiekt graficzny).
Warstwy grupujemy też w foldery.
– Klatki każdego filmu dzielą się na zwykłe
(Frames) i kluczowe (KeyFrames). Tylko te
ostatnie zawierają elementy, które wprowa-
dzają zmiany w animacji.
Flash w skrócie
– Tworzenie animacji we Flashu zaczynamy od
ustawienia podstawowych parametrów kli-
pu. Należą do nich np. wielkość okna lub
Podczas przekształcania obrazów bitmapo-
wych
warto wypróbować różne parametry.
Od jakości obrazka zależy, które ustawienia
okażą się najlepsze.
CHIP
| SIERPIEŃ 2005
K
ażdy z nas podczas przeglądania stron
Kurs Macromedia Flasha MX 2004 (część I)
PORADY
137
ustawiamy tło dokumentu (Background Color)
na czerwone i zapisujemy plik poleceniem
File
| Save
(
[Ctrl]+[S]
) jako
logo.fla.
Przydatna jest też opcja powiększa-
nia i zmniejszania widoku elementów klipu,
znajdujących się w obszarze roboczym. W tym
celu posługujemy się poleceniem
View | Zoom |
In
(
[Ctrl]+[=]
). Przybliżenie lub oddalenie pulpi-
tu z łatwością wykonamy też narzędziem
Zoom
Tool
z panelu
Tools
(po wybraniu narzędzia na-
leży zaznaczyć obszar powiększenia).
wciśnięty klawisz
[Shift],
zaznaczamy poszcze-
gólne litery napisu CHIP.
Gdy wskazaliśmy już wszystkie elementy,
przesuwamy je w inne miejsce na scenie. Po-
zostałe obiekty nie będą nam już potrzebne,
więc zaznaczamy je (rysujemy prostokąt naoko-
ło) i kasujemy (
[Delete]
). Korzystając z narzę-
dzia
Zoom Tool,
powiększamy obraz, a następ-
nie wybieramy
Tools | Subselection Tool
(
[A]
).
Po kliknięciu krawędzi jednej z liter pojawi się
na niej zielone obramowanie z szeregiem bia-
łych kwadratów w narożnikach (są to tzw. an-
chor points). Zaznaczając niektóre z nich i wci-
skając klawisz
[Delete],
możemy wygładzić
krawędzie liter. Każdą krawędź przenieśmy do
osobnej warstwy, co ułatwi i uporządkuje naszą
pracę. Za pomocą narzędzia
Selection Tool
za-
znaczamy literę C i wycinamy ją (
[Ctrl]+[X]
lub
polecenie
Edit | Cut
).
W kolejnym kroku dodamy nową war-
stwę. Klikamy więc znak dodawania warstwy
(„+”) lub wybieramy polecenie
Insert | Time-
line | Layer.
Następnie dwukrotnie klikamy na-
zwę nowo powstałej warstwy, po czym zmie-
niamy ją na c. Zaznaczamy pierwszą klatkę
tej warstwy i wybieramy polecenie
Edit | Pa-
ste in Place
lub używamy skrótu
[Ctrl]+[Shi-
ft]+[V].
Z pozostałymi literami postępuje-
my w sposób analogiczny, czyli przenosimy je
do kolejno tworzonych warstw, którym później
przypisujemy odpowiednie nazwy.
Skróty klawiaturowe
File (Plik):
[Ctrl]+[Shift]+[F12]
–
Publish Settings
– ustawienia plików wynikowych;
[Shift]+[F12]
–
Publish
– publikowanie pliku
(wygenerowanie kodu HTML i pliku SWF).
Edit (Edycja):
[Ctrl]+[X], [Ctrl]+[C], [Ctrl]+[V], [Ctrl]+[A]
– tak jak w większości aplikacji oznaczają kolej-
no: wycięcie, kopiowanie, wklejenie, zaznacze-
nie wszystkiego;
[Ctrl]+[Shift]+[V]
– wklejenie w miejscu
(współrzędne X, Y wklejenia są te same
co kopiowanego/wyciętego obiektu);
[Ctrl]+[=]
/
[Ctrl]+[-]
– powiększenie/
pomniejszenie;
[Ctrl]+[F8]
– wstawienie nowego symbolu
(bądź zamiana obecnie zaznaczonego fragmen-
tu na symbol);
[Ctrl]+[G]
– grupuj.
Przygotowanie grafiki
Przyszedł czas na przygotowanie pierwszych
elementów graficznych. Import grafiki do doku-
mentu jest możliwy dzięki poleceniu
File | Im-
port | Import to Stage
(
[Ctrl]+[R]
). Wybieramy
znajdujący się na płycie CHIP-a plik
chip_logo.
gif.
Klikamy zaimportowany rysunek i wydaje-
my polecenie
Modify | Bitmap | Trace bitmap.
Pojawi się wówczas okno dialogowe, w którym
wpisujemy następujące wartości:
Color thre-
shold:
128,
Minimum area:
1 pixel,
Curve fit:
pixels,
Corner Threshold:
Few Corners.
Color Threshold
(wartość od 1 do 500) ozna-
cza maksymalną dopuszczalną różnicę pomiędzy
kolorami, dla której dwa piksele traktowane są
jako punkty o tym samym kolorze. Duże wartości
tego parametru powodują redukcję liczby kolo-
rów (znikają delikatne różnice pomiędzy poszcze-
gólnymi odcieniami).
Minimum area
(wartość od
1 do 1000) to liczba otaczających dany element
pikseli, które są brane pod uwagę, gdy danemu
punktowi przyporządkowywany jest kolor.
Curve
fit
umożliwia natomiast dopasowanie stylu krzy-
wych znajdujących się w dokumencie – od bardzo
poszarpanych (Pixels) do bardzo wygładzonych
(Very Smooth). Za pomocą ostatniej z wymienio-
nych opcji –
Corner threshold
– określimy nato-
miast, z ilu punktów mają się składać narożniki
wszystkich elementów.
Control (Kontrola):
[Enter]
– odtwarzanie;
[.]
– klatka poprzednia/
[,]
– klatka następna;
[Ctrl]+[Enter]
– testowanie filmu;
[Ctrl]+[Shift]+[Enter]
– debugowanie filmu;
[Ctrl]+[Alt]+[Enter]
– testowanie sceny.
Tools (Narzędzia):
[V]
–
Selection
– podstawowe narzędzie;
[A]
–
Subselection
– zaznaczanie elementów
składowych;
[N]
–
Line
– rysowanie linii;
[T]
–
Text
– pisanie tekstów;
[O]
–
Oval
– rysowanie elips (przy wciśniętym
klawiszu
[Shift]
rysujemy koła);
[R]
–
Rectangle
– rysowanie prostokątów
(z wciśniętym
[Shift]
rysujemy kwadraty);
[I]
–
Eyedropper
– pipeta (pobieranie koloru);
[Q]
–
Freetransform
– narzędzie umożliwiające
zmianę rozmiarów i położenia elementów;
[Y]
–
Pencil
– ołówek;
[E]
–
Eraser
– gumka;
[H]
–
Hand
– „ręka” – służy do przesuwania
sceny;
[M], [Z]
–
Zoom/Magnify
– lupa.
Konwersja do symboli
Najpierw zajmijmy się literą C. Na jej przykła-
dzie pokażemy nie tylko pewien efekt, ale przy-
swoimy też pojęcia związane ze strukturą filmu.
Sam efekt polega na płynnej modyfikacji kształ-
tu elementu wyjściowego aż do osiągnięcia po-
staci elementu końcowego. To ciekawy i często
wykorzystywany element animacji Flash.
Kiedy zaznaczymy literę C, na panelu
Pro-
perties
zobaczymy napis
Shape,
a poniżej
wymiary: W (width) – szerokość, H (height)
– wysokość, X,Y – współrzędne lewego gór-
nego rogu. Teraz musimy przekształcić ten
obiekt w symbol. W tym celu wydajemy pole-
cenie
Modify | Convert to Symbol
(
[F8]
). Po-
jawi się wówczas okno, w którym zmieniamy
nazwę (z Symbol 1 na c_mc), a następnie wy-
bieramy typ symbolu
Behavior | Movie Clip.
Powinniśmy też dokonać zmian w panelu
Pro-
perties.
W opcji
Instance Name
wpisujemy na-
zwę c_mc (końcówka _mc przyda się później).
Zamieniliśmy zaimportowany element graficz-
ny w klip filmowy (Movie Clip). Klip filmowy jest
jednym z wbudowanych symboli Flasha i cha-
rakteryzuje się tym, że ma swoją niezależną li-
nię czasową – to swoisty „film w filmie”.
Po zaznaczeniu litery (ale już jako klipu) na
jej środku pojawi się nieduży okrąg, który nale-
ży kliknąć dwukrotnie, aby przejść do trybu edy-
cji symbolu. W trybie, w którym pracowaliśmy
do tej pory, jesteśmy w stanie dokonywać
Zaznaczanie elementów
Aby zaznaczyć poszczególne elementy zaimpor-
towanej grafiki, wybieramy narzędzie
Selection
Tool
(jest ono dostępne po wciśnięciu klawisza
[V]
bądź w menu narzędziowym). Na początku
klikamy poza obiektem, a następnie, trzymając
jedynie zmian wymiarów i położenia symbolu,
nie możemy natomiast zmieniać jego zawarto-
ści. W trybie edycji symbolu nad listwą czasową
obok napisu Scene 1 pojawia się nazwa c_mc.
Zauważmy, że zniknęły poprzednio utworzone
warstwy. Oczywiście nie definitywnie: zaczyna-
my bowiem budować nowy film z odrębną li-
nią czasową i własnymi warstwami, ale będzie
on umiejscowiony na głównej scenie naszego
właściwego filmu. W ten sposób Flash umoż-
liwia konstruowanie dokumentów przy zacho-
waniu zasad modularności. Poszczególne klipy,
sekwencje czy grafiki stanowią odrębne elemen-
ty, z których składa się cała animacja.
Czytelne nazywanie kolejnych warstw
jest
szczególnie ważne podczas pracy przy rozbu-
dowanych projektach. Warto wyrobić w sobie
odpowiednie nawyki.
Zmiana kształtu
Zmieńmy nazwę warstwy z Layer 1 na c, a na-
stępnie dodajmy do niej dwie klatki kluczowe,
czyli miejsca, w których możemy wprowa-
dzać zmiany w filmie. Zaznaczamy klatkę nr
138
»
CHIP
| SIERPIEŃ 2005
138
PORADY
Kurs Macromedia Flasha MX 2004 (część I)
wygląda zbudowany przez nas efekt, ogląda-
jąc go klatka po klatce. Służą do tego skróty:
[.]
i
[,]
albo polecenia
Control | Step Forward
One Frame
oraz
Control | Step Backward One
Frame.
Zaznaczmy klatkę nr 15, wciśnijmy klawisz
[Shift]
i wybierzmy klatkę nr 30. Następnie
przesuńmy zgrupowaną w ten sposób część fil-
mu, tak aby zajmowała ona miejsce aż do klat-
ki o numerze 45. W kolejnym kroku wstawia-
my klatkę kluczową w miejscu nr 15. Usuwamy
znajdujący się tam kształt (
[Delete]
), rysujemy
prostokąt (
Tools | Rectangle Tool
) i zmienia-
my jego wymiary na: W=41, H=7, położenie
na X=0 i Y=47, a kolor wypełnienia na szary
(#999999). Gdy przetestujemy film (
[Ctrl]+[En-
ter]
), zobaczymy, że kształt c zmienia się bez-
ustannie, tzn. po dojściu do klatki nr 45 wraca
do klatki o numerze 1.
Poprawmy to tak, by transformacja następo-
wała tylko raz. W tym celu należy dodać nową
warstwę (
Insert | Timeline | Layer
), którą na-
zywamy actions. Będzie ona służyła do przecho-
wywania różnych poleceń sterujących odtwa-
rzaniem animacji. Zaznaczamy klatkę nr 45 tej
warstwy i wstawiamy klatkę kluczową. Rozwija-
my panel
Window | Development Panels | Ac-
tions
i wpisujemy w nim następujący fragment
kodu: stop(). Z opcji, które staną się wtedy do-
stępne, wybieramy
Global Functions | Timeline
Control | Stop.
Wykonanie tych czynności spo-
woduje wywołanie funkcji stop() w trzydziestej
klatce filmu oraz jego zatrzymanie. Wychodzi-
my z trybu edycji symbolu na główną scenę,
klikając zakładkę Scene 1. Przy tworzeniu tego
efektu nauczyliśmy się poruszać w środowisku
Flasha, a przy generowaniu kolejnych poradzimy
sobie o wiele szybciej.
Siedem grzechów
W okienku dialogowym
Convert to Symbol
właściwość Behavior ustawiamy jako Movie
Clip i nadajemy jej nazwę c_mc. Pozostałe
parametry ustawiamy jako domyślne.
Pycha
– próba „przejęcia kontroli” nad użyt-
kownikiem (full screen, brak przycisku Wstecz,
Zamknij).
Chciwość
– myślenie na zasadzie: „Najpierw
wymyślę to, jak mi się podoba, a później coś,
żeby odbiorcę zatrzymać przy komputerze”.
Nieczystość
– tworzenie aplikacji flashowej
za pomocą metody „copy & paste”. Wklejanie
kawałków kodu z różnych skryptów powoduja-
ce niespójność logiczno-nazewniczą.
Zazdrość
– próba stworzenia „oryginalniejszej”
(czytaj: mniej przejrzystej) strony od konkuren-
cji. Ślepa uliczka – użytkownik nie wie, jak się
poruszać po stronie.
Nieumiarkowanie
– całkowite zastąpienie
HTML-a Flashem, zamiast traktowania jako uzu-
pełnienie (w większości rozwiązań lepsze efekty
daje łączenie obu metod tworzenia witryn).
Gniew
– duże rozmiary plików. Niekorzystanie
z możliwości optymalizacji grafiki, „streamin-
gu” muzyki, niestosowanie preloaderów. W tym
wypadku narażasz się na gniew internauty.
Lenistwo
– przepisywanie kodu ActionScriptu
z tutoriali bez jego dokładnego zrozumienia.
30 i wstawiamy nową klatkę kluczową. W tym
celu prawym przyciskiem myszy klikamy tę klat-
kę i wybieramy polecenie
Insert Keyframe.
Mo-
żemy też skorzystać z menu głównego progra-
mu:
Insert | Timeline | Keyframe
(
[F6]
). Podob-
ną czynność wykonajmy dla klatki nr 15.
Po wstawieniu obu klatek kluczowych klika-
my symbol litery. Za pomocą polecenia
Modify
| Transform | Rotate 90 CCW
obracamy lite-
rę o 90 stopni w kierunku przeciwnym do ru-
chu wskazówek zegara. Następnie wybieramy
dowolną klatkę pomiędzy numerami 16 i 29, po
czym ją zaznaczamy. W panelu
Properties
po-
jawi się lista właściwości, za pomocą których
możemy określić dodatkowe parametry klatki.
Zmieniamy opcję
Tween
na
Shape,
co spowo-
duje wygenerowanie wszystkich klatek pośred-
nich (pomiędzy klatkami o numerach 15 i 30).
Dzięki temu będzie się w nich płynnie zmie-
niał kształt, którego wyjściowa forma znajdu-
je się w klatce nr 15, a ostateczna w klatce nr
30. Możemy teraz przetestować cały film (
[Ctrl]
+[Enter]
albo
Control | Test Movie
) bądź też
jedynie obecnie edytowany symbol (
[Enter]
al-
bo
Control | Play
).
krycia ustawiamy na 0%. Przechodzimy do klat-
ki nr 45 i powtarzamy te czynności, z tą różni-
cą, że wartość
Alpha
ustawiamy na 100%. Wy-
bieramy którąś klatkę pośrednią i właściwość
Tween | Motion.
Wstawmy jeszcze w odpo-
wiednim miejscu kod ActionScript, który zatrzy-
ma efekt po jego wykonaniu.
Klatka za klatką
Czasem efekt, który chcemy osiągnąć, jest na
tyle skomplikowany, że nie da się go zautoma-
tyzować jakimś narzędziem Flasha. Wtedy mu-
simy każdą klatkę kluczową wyedytować osob-
no. W ten sposób wracamy do korzeni fascynu-
jącej sztuki animacji.
Zamieniamy literę I na symbol Movie
Clip o nazwie i_mc. Przechodzimy do trybu
edycji, po czym zmieniamy nazwę głównej war-
stwy na mysz. W klatce nr 15 wstawiamy klat-
kę kluczową. Za pomocą narzędzia
Oval Tool
(
[O]
) rysujemy koło w kolorze białym o średni-
cy 24 pikseli. Następnie przesuwamy jego śro-
dek na współrzędne: X=-1, Y=37. Wykorzystu-
jąc narzędzie
Line Tool
(
[N]
), rysujemy poziomą
linię o długości około 30 pikseli (aby rysować
po prostej, najlepiej jest przytrzymać klawisz
[Shift]
). Poleceniem
Modify | Shape | Convert
Pojawiająca się litera
Kolejny efekt wykorzystuje opcję ustalenia stop-
nia przezroczystości dowolnego elementu gra-
ficznego. Możemy więc w kolejnych klatkach
animacji zmieniać tę właściwość (od 0 do 100),
tak by w trakcie odtwarzania wydawało się, że
obiekt pojawia się lub znika.
Litera H znajduje się już w warstwie o na-
zwie h. Obiekt graficzny należy teraz zamie-
nić na klip filmowy. Nowy symbol nazwijmy h_
mc. Przechodzimy do trybu edycji symbolu. Li-
tera powinna być już zaznaczona, a jeżeli nie
jest, to za pomocą narzędzia
Selection Tool
należy ją zaznaczyć. Wybieramy
Modify | Co-
nvert to Symbol,
jako nazwę wpisujemy h_
gr, a opcję
Behavior
ustalamy na
Graphic.
Ta
zmiana jest konieczna, ponieważ chcemy wyko-
nać efekt, który jest możliwy tylko dla symboli
graficznych. Następnie wstawiamy klatkę klu-
czową w miejscu o numerze 45. Cofamy się do
klatki pierwszej i klikamy znajdującą się w niej
literę. W panelu
Properties
pojawią się usta-
wienia dostępne dla symboli graficznych. Usta-
lamy właściwość
Color
na
Alpha,
a wartość
Płynność animacji
W następnych krokach zajmiemy się dodaniem
płynnego przejścia pomiędzy klatkami pierw-
szą i piętnastą. Usuwamy pierwszą klatkę (
[De-
lete]
lub
[Backspace]
). Wybieramy narzędzie
Rectangle Tool
(
[R]
) z panelu
Tools,
zazna-
czamy kolor wypełnienia na biały, a kolor ob-
rysu na opcję
No Color
(biały kwadrat z czer-
woną przekątną). Narysujmy na scenie dowol-
ny prostokąt, wybierzmy narzędzie
Selection
Tool
i kliknijmy nowo powstały element. Zmie-
niamy jego wymiary i położenie (
Properties
)
na W=1, H=1, X=33, Y=51, po czym wybiera-
my czarny kolor wypełnienia i zamieniamy ani-
mację klatek o numerach od 1 do 15 na
Shape
(klikamy jedną z klatek 2–14 i wybieramy opcję
Properties | Tween | Shape
). Sprawdzamy, jak
Na listwie czasowej
możemy przesuwać nie
tylko pojedyncze klatki, ale również ich grupy.
Przytrzymaj klawisz [Shift], aby zaznaczyć
więcej niż jedną klatkę.
CHIP
| SIERPIEŃ 2005
PORADY
lines to fills
zamieniamy linię na wypełnienie. Zmodyfikowany
element umieszczamy nad kołem w taki sposób, aby podzielił je
na dwie równe części. Po naciśnięciu klawisza
[Delete]
zobaczy-
my, że obiekt znika, dzieląc koło. Następnie rysujemy pionową li-
nię i tak powtarzamy czynności, aby dolną część koła podzielić
raz jeszcze, tym razem w pionie. Wybieramy narzędzie
Subselec-
tion Tool
i klikamy górną krawędź części koła. Tym samym na-
rzędziem zaznaczamy trzy górne punkty (trzymając wciśnięty kla-
wisz
[Shift]
). Sterując strzałkami kierunkowymi, tak przesuwamy
te punkty, aby uzyskać kształt myszki komputerowej.
Czas na animację
Aby uzyskać płynne przejście pomiędzy literą I a myszką, wykorzy-
stamy tzw. metodę animacji poklatkowej. Efekt przejścia tworzymy,
rysując każdą klatkę z osobna. Zmieniamy w tym celu z powrotem
rodzaj animacji z
Shape
na
None.
Klikamy klatkę nr 15 i kopiujemy
ją (prawy przycisk myszy +
Copy frames
). W klatce nr 7 wstawia-
my klatkę kluczową i wklejamy skopiowaną klatkę piętnastą (pra-
wy przycisk myszy +
Paste frames
). Następnie zaznaczamy klatki
od 1 do 5 i w każdej z nich wstawiamy klatkę kluczową; podobnie
postępujemy w wypadku klatek od 7 do 15. Za pomocą narzędzia
Subselection Tool
przesuwamy anchor points, tak aby uzyskać
efekt płynnego przejścia. Radzimy zacząć od końca, czyli schodząc
od klatki nr 15 w dół. Im lepiej wykonamy tę czynność, tym płyn-
niejsza będzie nasza animacja.
Ogonek
Pora na dodanie ogonka. Tworzymy nową warstwę o nazwie
ogonek, po czym w klatce nr 16 wstawiamy klatkę kluczową.
Za pomocą narzędzia
Pen Tool
(
[P]
) rysujemy zaokrągloną krzy-
wą. W klatkach o numerach od 17 do 30 wstawiamy klatki klu-
czowe i wykorzystując narzędzie
Subselection Tool,
podobnie jak
wcześniej, klatka po klatce modyfikujemy wygląd ogonka. Jeśli
ktoś ma z tym problemy, może otworzyć plik znajdujący się na
naszej płycie CD.
Migające warstwy
Ostatni efekt wykorzystuje możliwości, jaki daje Flash dzięki zasto-
sowaniu koncepcji warstw. Zbudujemy obiekt, nad którym będzie
się przesuwał inny element graficzny. Ten ostatni stanie się wi-
doczny tylko wtedy, gdy znajdzie się nad pierwszym. W rezultacie
otrzymamy ciekawy efekt, który imituje zmienianie się powierzch-
ni danego elementu.
Literę P zamieniamy na obiekt Movie clip, który nazywamy p_
mc. Przechodzimy do trybu edycji. Zmieniamy nazwę warstwy na
p, zaznaczamy na niej klatkę nr 50 i wstawiamy zwykłą klatkę.
Tworzymy drugą warstwę, nadajemy jej nazwę bitmapa i prze-
suwamy ją pod warstwę p. Wybieramy pierwszą klatkę w war-
stwie bitmapa i rysujemy w niej prostokąt o wymiarach 50 na 280
pikseli. Przechodzimy do panelu
Color Mixer,
wydając polecenie
Window | Design Panels | Color Mixer
(
[Shift]+[F9]
). Wybiera-
my w nim właściwość określającą sposób wypełnienia narysowa-
nego wcześniej prostokąta. Nas interesuje pozycja
Bitmap.
Po jej
zaznaczeniu tło prostokąta zostanie wypełnione obrazkiem. Za po-
mocą narzędzia
Selection
zaznaczamy nasz prostokąt, kopiujemy
go i wklejamy na scenę. Następnie przesuwamy go w ten sposób,
aby znajdował się on na prawo od pierwszego prostokąta i aby
oba stykały się krawędziami. Zaznaczamy każdy z nich i grupujemy
za pomocą polecenia
Modify | Group
(
[Ctrl]+[G]
). Na listwie cza-
sowej klikamy klatkę nr 50 i wstawiamy klatkę kluczową.
Przesuwamy nasz prostokąt w takie miejsce, aby przemiesz-
czając się z położenia określonego w klatce pierwszej do położe-
nia określonego w klatce pięćdziesiątej, przechodził przez
140
»
140
PORADY
Kurs Macromedia Flasha MX 2004 (część I)
literę P. Wskazujemy dowolną klatkę pomiędzy
numerami 1 i 50, a następnie wybieramy opcję
Properties | Tween | Motion.
Teraz chcemy uzyskać efekt polegający na
tym, że przemieszczający się obraz jest widocz-
ny jedynie wewnątrz konturu litery P. W tym ce-
lu klikamy prawym przyciskiem warstwę o na-
zwie p i wybieramy opcję
Mask.
Utwórzmy no-
wą warstwę, nazwijmy ją p_bis i przesuńmy na
spód stosu warstw. Następnie odblokowujemy
wszystkie warstwy (klikając znak kłódki obok
nazw warstw) i zaznaczamy pierwszą klatkę
warstwy p. Kopiujemy ją do klatki kluczowej na
warstwie p_bis (o numerze 20). Wystarczy do-
dać warstwę o nazwie actions, a na niej w klat-
ce nr 50 wstawić akcję stop().
folder zakładek (
Layer Folder
),
który posłuży do grupowania
warstw. W rozbudowanych apli-
kacjach Flasha bez grupowania
warstw można się łatwo pogubić.
Wybierzmy opcję
Insert | Time-
line | Layer Folder.
Nazwijmy no-
wo utworzony folder letters, a na-
stępnie przeciągnijmy warstwy c, h, i oraz p do
tego katalogu. Warstwy powinny przesunąć się
do środka, tak jak miało to miejsce w wypad-
ku procesu tworzenia maski. Obok nazwy fol-
deru warstw pojawia się trójkąt, po kliknięciu
którego możemy wyświetlić lub ukryć warstwy
danego folderu.
Podczas odtwarzania animacji kolejne litery
powinny pojawiać się jedna po drugiej. W tym
celu wykonujemy następujące operacje: w klat-
ce nr 45 warstwy p wstawiamy klatkę kluczo-
wą, a w pozostałych warstwach klatki o nume-
rach 45 definiujemy jako zwykłe. Następnie do-
dajemy klatkę kluczową w klatce nr 30 warstwy
i. Zaznaczamy pierwszą klatkę tej warstwy i wci-
skamy
[Delete],
co spowoduje usunięcie symbolu
i_mc z klatek o numerach od 1 do 29. Dodajemy
klatkę kluczową w klatce nr 15 warstwy h, po
czym usuwamy obiekt h_mc z klatki nr 1. Wy-
starczy jeszcze dodać warstwę actions i w klatce
nr 45 wstawić akcję
stop()
.
Na koniec dopiszemy fragment trochę bar-
dziej skomplikowanego kodu ActionScriptu. Za-
cznijmy od sprawdzenia, czy wszystkie instancje
klipów filmowych w warstwach mają swoje na-
zwy. W tym celu wystarczy klikać kolejne klatki
kluczowe warstw z folderu letters i zaznaczać
znajdujące się na nich symbole. W panelu
Pro-
perties,
pod napisem Movie Clip, powinny znaj-
dować się nazwy klipów filmowych – odpowied-
nio c_mc, h_mc, i_mc oraz p_mc.
Z listy efektów
dostępnych dla symboli graficznych wybie-
ramy Alpha, za pomocą którego możemy nadać obiektowi
efekt przezroczystości.
wewnątrz budowanych odrębnie symboli. Na-
zwy wszystkich naszych klipów mają przyrostki
_mc. Dzięki temu w trakcie edycji po naciśnię-
ciu kropki wyświetlały się dostępne opcje. Od-
powiednie nazywanie elementów we Flashu nie
tylko przyspiesza pisanie samego kodu, ale re-
dukuje również liczbę popełnianych błędów. Idź-
my więc dalej i dopiszmy kolejne linie:
Kosmetyka animacji
Animacja jest już prawie gotowa, teraz doda-
my do niej tylko parę drobnych usprawnień.
Przejdźmy na główną scenę i wstawmy do niej
h_mc.onMouseDown = function() {
this.gotoAndPlay(1); }
i_mc.onRelease = function() {
gotoAndPlay(1); }
Publikowanie animacji
Umieścimy ten kod w klatce nr 45. Akcja przy-
pisana do klipu h_mc spowoduje odtworze-
nie go od początku, jeśli zostanie kliknięty. Ak-
cja przypisana do klipu i_mc jest natomiast ak-
tywowana dopiero w momencie, gdy zostanie
puszczony przycisk myszy. Zdarzenie
onRelease
jest więc równoważne wystąpieniu jedno po dru-
gim wydarzeń
onMouseDown
(naciśnięcie przy-
cisku myszy) i
onMouseUp
(zwolnienie przycisku
myszy). Źródła obu wywołań różnią się słowem
kluczowym
this,
które całkowicie zmienia efekt
działania akcji
gotoAndPlay().
Gdy akcja zosta-
nie poprzedzona nazwą klipu (tak jak to miało
miejsce w wypadku klipu c_mc), to dotyczy ona
oczywiście instancji klipu o tej nazwie. Gdy jest
poprzedzona słowem
this,
to dotyczy ona instan-
cji, dla której wywoływana jest funkcja. W na-
szym wypadku wywoływana jest ona dla klipu
h_
mc,
a więc to on będzie odtwarzany od początku.
Równie dobrze można było napisać
h_mc.goto-
AndPlay(1).
Wywołanie funkcji
gotoAndPlay(),
które nie jest niczym poprzedzone, odnosi się do
głównej listwy czasowej. Jeśli film ma być odgry-
wany od początku, powinniśmy przesunąć klip c_
mc do drugiej klatki, przy czym należy pamiętać,
żeby przenieść również odpowiadający mu kod
ActionScriptu.
Po wybraniu polecenia
File | Publish Settings
(
[Ctrl]+[Shift]+[F12]
) mamy możliwość zde-
finiowania formatów i parametrów związa-
nych z publikowaniem naszego filmu.
Zakładka Formats:
– Standardowo zaznaczone Flash (SWF)
i HTML;
– Eksport do któregokolwiek formatu graficz-
nego przyniesie spodziewany efekt jedy-
nie w wypadku bardzo prostych filmów;
– Windows Projector (EXE) – format, dzięki
któremu nie będzie potrzebne uruchamianie
przeglądarki internetowej ani nawet posia-
danie wtyczki Flasha. Taka forma publikacji
ma też słabe strony. Po pierwsze, objętość
takich plików jest o wiele większa niż plików
SWF (w naszym wypadku 985 KB w wersji
EXE i niecałe 4 KB dla SWF). Poza tym będą
one możliwe do odtworzenia jedynie w syste-
mie Windows. Format idealnie nadaje się na
prezentacje umieszczane np. na płytach CD;
– Macintosh Projector – analogicznie do Win-
dows Projectora;
– Eksport w formacie QuickTime wymaga odpo-
wiednich bibliotek.
Pierwsze kroki w ActionScripcie
Teraz możemy przystąpić do napisania pierw-
szego skryptu w zintegrowanym z Flashem języ-
ku ActionScript. W warstwie actions, w pierw-
szej klatce dodajmy następujący kod:
c_mc.onRollOver = function() {
h_mc.gotoAndPlay(1);
i_mc.gotoAndPlay(1);
p_mc.gotoAndPlay(1); }
Zakładka HTML:
– Detect Flash Version – wymusza sprawdza-
nie, czy browser osoby przeglądającej stro-
nę WWW ma wymaganą wersję wtyczki
Flash. W ustawieniach m.in. określamy, na
jaką stronę trafi osoba, która nie ma odpo-
wiedniego plug-ina (Alternate File).
k
Więcej informacji
Tworzenie animacji w formacie Flash
http://www.flashroom.com/
http://www.kirupa.com/
http://www.flashkit.com/
http://www.macromedia.com/devnet/
http://www.flashmx2004.com/
http://www.flashgoddess.com/
http://www.w3schools.com/
http://www.hotscripts.com/
Jego interpretacja spowoduje, że po najecha-
niu wskaźnikiem myszy nad animację o nazwie
c_mc zostaną wykonane następujące czynno-
ści: każdy klip h_mc, i_mc oraz p_mc będzie od-
twarzany od początku swojej linii czasowej. Je-
śli przetestujemy nasz film, zauważymy, że po
najechaniu nad literę C cała animacja nie jest
uruchamiana od początku. W ten sposób odgry-
wane są jedynie wskazane przez nas klipy fil-
mowe (odpowiadające poszczególnym literom).
Taki efekt nie byłby możliwy, gdybyśmy wszyst-
kie efekty wykonali na scenie głównej, a nie
Playback:
– Loop – określa, czy film ma być odtwarza-
ny „w kółko”;
– Paused at start – jeśli zaznaczone, to film nie
jest od razu odtwarzany;
– Display menu – określa stopień szczegółowo-
ści menu rozwijanego po kliknięciu filmu pra-
wym przyciskiem myszy;
– Quality – określa jakość wyświetlania.
Macromedia Flash MX 2004
(wersja 30-dniowa), Pliki
projektu opisanego w artykule
Porady | Flash
CHIP
| SIERPIEŃ 2005
[ Pobierz całość w formacie PDF ]