You are on page 1of 20

Flash CS3 PL.

wiczenia praktyczne
Autor: Joanna Pasek, Krzysztof Pasek
ISBN: 83-246-1179-7
Format: A5, stron: 160
Przykady na ftp: 2237 kB

Poznaj Flasha i podaj za swoj wyobrani


Jak tworzy zoone prezentacje i interaktywne filmy?
Jak budowa struktur pliku?
Jak publikowa gotowe projekty w internecie?

Flash CS3 jest wspaniaym narzdziem do tworzenia zaawansowanych interaktywnych


animacji na stronach WWW. Pozwala on na czenie w jednym projekcie elementw
audio, wideo, grafiki bitmapowej i grafiki wektorowej. Ten wyjtkowy program
umoliwia take tworzenie wasnych filmw oraz zoonych prezentacji. Jednak
najwiksz zalet plikw tego typu jest ich niewielki rozmiar, dziki czemu dziaaj one
niezalenie od jakoci czy internetowych.
Flash CS3 PL. wiczenia praktyczne to podrcznik dla kadego, kto chce nauczy si
tworzy interaktywne i zoone aplikacje internetowe. Dla uatwienia nauki wiczenia
zostay tu uoone wedug stopnia trudnoci. Z kolejnych rozdziaw dowiesz si, na
czym polega generowanie klatek porednich, praca z klatkami kluczowymi i zwykymi
oraz animacja koloru i przezroczystoci. A kiedy skoczysz ju prac z ksik,
bdziesz umia wykorzystywa obiekty graficzne i dwikowe, aby samodzielnie
stworzy interaktywny film poniewa ta publikacja w jasny i zwizy sposb przekae
Ci niezbdn wiedz!

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Porzdkowanie filmu za pomoc scen, warstw i obiektw


Generowanie klatek porednich (animacja ruchu i ksztatu)
Efekt przyspieszania
Maski i cieki ruchu
Wykorzystanie klipw filmowych i obiektw graficznych
Animowane przyciski
Sterowanie odtwarzaniem filmu
Obsuga zdarze w ActionScript
Kontrolowanie obiektw za pomoc myszy i klawiatury
Tworzenie prezentacji

Potrzebujesz tylko wyobrani i Flasha,


aby tworzy wyjtkowe aplikacje

Spis treci
Wstp
Rozdzia 1. Przygotowanie do pracy
Operacje na plikach
Interfejs Flasha

Rozdzia 2. Rysowanie

5
7
7
14

19

Wektorowe ksztaty
Waciwoci wypenie
Waciwoci linii
Transformacje
Tekst

20
28
36
42
52

Rozdzia 3. Sceny, warstwy i obiekty

55

Warstwy
Obiekty
Sceny

55
67
78

Rozdzia 4. Animacja

83

Listwa czasowa
Automatyczna animacja
Akcje sterujce listw czasow
Obiekty filmowe a graficzne
Uwagi oglne

83
93
107
115
117

Rozdzia 5. Interaktywne elementy filmu

119

Rozdzia 6. Publikowanie plikw Flasha

147

3
Sceny, warstwy i obiekty
Film utworzony we Flashu zawsze skada si z pewnych czci.
Za pomoc scen, obiektw i warstw mona stworzy dobrze
zorganizowan struktur. Znaczenie wymienionych terminw
bdziemy wyjania pniej, a na razie zapamitaj tylko, e z tych
trzech elementw scena jest najwiksza. Obiekty s umieszczane
w scenach, a warstwy wewntrz obiektw i scen.

Warstwy
Warstwy pozwalaj rozoy rysunek na kilku poziomach w taki sposb, e obrazy na warstwie wyszej zasaniaj wszystkie rysunki na
warstwach pooonych pod spodem. W wektorowym, dwuwymiarowym rysunku nie istnieje adna wysoko w rzeczywistoci warstwy
pozwalaj sterowa kolejnoci rysowania elementw sceny. Nie jest to
jednak jedyne zastosowanie warstw; stosuje si je take dla takich grafik,
ktre nigdy nie przesaniaj si wzajemnie. Warstwy s narzdziem
organizacji rysunku i s niezbdne przy automatycznej animacji, ktr
omwimy w nastpnym rozdziale.
Wyobra sobie rysunek domu za potem z siatki. Nic trudnego; najpierw tworzymy to rysunku i domek, potem wstawiamy ukonie odcinki, a na koniec rysujemy odcinki pochylone w drug stron. A teraz
wyobra sobie, e musisz przesun domek bez zmiany pooenia
potu... Jest to niemoliwe, a w najlepszym razie tylko idiotycznie
skomplikowane. Rozwamy wic nastpujce rozwizanie: domek

56

Flash CS3 PL wiczenia praktyczne

z tem narysujemy na niszej warstwie, a pot na wyszej. To dobry


pomys, ale jednoczenie obraza dla moliwoci, jakie daj nam warstwy. Prawidowy plan warstw tego rysunku powinien wyglda tak:
T kilka najniszych warstw zawiera elementy ta,
T kolejne warstwy s przeznaczone na domek,
T na jednej warstwie umieszczamy odcinki (czyli druty siatki)
pochylone w jedn stron,
T na kolejnej odcinki pochylone w drug stron,
T ostatnia warstwa moe zawiera na przykad supki od potu.
Rozdzielenie rysunku daje znaczne korzyci zwr uwag choby na
dwie warstwy zawierajce siatk potu. Dziki temu, e s osobne,
oszczdzamy sporo pamici i zmniejszamy czas potrzebny na wywietlenie sceny (po naoeniu linii na siebie zostayby pocite na tysice
krtkich odcinkw). Mamy te moliwo zmiany rozmiaru oczek siatki
albo przeduenia potu.
Nie wolno oszczdza na liczbie warstw, ale te nie ma sensu tworzy
ich zbyt duo na jednej listwie czasowej. Jeeli potrzebujesz naprawd
duej liczby warstw, to zastanw si, czy mgby rozdzieli je pomidzy kilka obiektw. Moesz te zastosowa tak zwane foldery warstw.
W I C Z E N I E

3.1

Tworzenie rysunku na wielu warstwach

Przypumy, e chcemy narysowa idcego czowieka. Do czego moemy uy warstw w takim rysunku? Do wszystkiego: na osobnej warstwie
moemy umieci tuw, nogi, gow... Dla statycznej postaci utwrz tyle
warstw, by wygodnie rysowa i edytowa rysunek (na przykad umieszczenie powiewajcego szalika na oddzielnej warstwie pozwoli go atwo
przekrzywi, skrci lub wyduy). Jeli posta ma by animowana, to
kady poruszajcy si element powinien trafi na odrbn warstw.
Np. idcy czowiek z ca pewnoci bdzie porusza nogami, wic nogi
musz by na oddzielnych warstwach.
1. Utwrz nowy plik i zapisz go pod nazw spacer.fla. Jeeli w grnej
czci ekranu nie widzisz panelu listwy czasowej, wywietl go
poleceniem Okno/O czasu (do wywietlania i ukrywania panelu
listwy czasowej moesz te uywa specjalnego przycisku,
umieszczonego po lewej stronie na listwie znajdujcej si
bezporednio nad stoem montaowym).

Rozdzia 3. Sceny, warstwy i obiekty

57

2. Porodku sceny narysuj owkiem lub pirem tors postaci

opatulonej w paszcz z postawionym konierzem. Aby rysunek


wyglda na odrczny, na panelu Waciwoci wybierz z listy Styl
obrysu nierwn, chropowat kresk. Dodaj wypenienia. Nie
zapomnij o moliwoci uywania gumki w trybie Wyma linie,
jeli zechcesz pozby si zbdnych kresek, nie naruszajc
wypenie (rysunek 3.1). Gdy tors bdzie gotowy, zaznacz
wszystko (Ctrl+A) i zgrupuj (Ctrl+G).
Rysunek 3.1.
Rysunek na jednej
warstwie

3. Rysunek torsu trafi na warstw Warstwa 1, ktr widzisz

w panelu listwy czasowej po lewej stronie (prawa strona panelu


przeznaczona jest na wywietlanie klatek filmu). Chcielibymy
narysowa gow na osobnej warstwie, wic kolejn czynnoci
bdzie utworzenie nowej warstwy za pomoc przycisku Wstaw
warstw (rysunek 3.2).
Nowe warstwy we Flashu s automatycznie numerowane, a wic
nowa warstwa otrzymuje nazw Warstwa 2. Jak wida, nowo
utworzona warstwa jest wyrniona ciemnoniebieskim kolorem
(jest aktywna), co oznacza, e wszystkie operacje bd dotyczy
wanie tej warstwy.
4. Zanim zaczniemy rysowa na kolejnej warstwie, zabezpieczymy
pierwsz przed uszkodzeniem (zablokujemy j). W tym celu kliknij
drug czarn kropk na pasku Warstwa 1, t umieszczon pod
znaczkiem kdki. Kropka zmieni si w ma kdk (rysunek
3.3). Nastpnie na aktywnej warstwie (Warstwa 2) narysuj gow
w kapeluszu, a potem zgrupuj elementy rysunku (Ctrl+A, Ctrl+G).
5. Utwrz kolejn warstw i zablokuj poprzedni.
6. Na nowej, trzeciej z kolei warstwie narysuj nog postaci i zgrupuj
j. Narysuj nog tak, by zachodzia na tors. Nie wyglda to najlepiej,
ale naprawimy to pniej.

58

Flash CS3 PL wiczenia praktyczne

Rysunek 3.2. Tworzenie nowej warstwy


Rysunek 3.3.
Rysowanie
na nowej warstwie
(dla zwikszenia
czytelnoci rysunku
zawarto
poprzedniej
warstwy pokazano
w bledszych
kolorach)
7. Wybierz narzdzie Przeksztacenie swobodne i zaznacz

utworzon grup, po czym przenie punkt zaczepienia do


gry, jak na rysunku 3.4 po lewej stronie. Gdy animujemy
posta, noga bdzie si obraca wok tego punktu.
8. Wcinij kombinacj klawiszy Ctrl+C, by skopiowa grup.
9. Utwrz now (czwart) warstw i nacinij Ctrl+V, by wklei
skopiowany rysunek. Uzyskae drug nog, tak sam jak
pierwsza. Wr do narzdzia zaznaczania (V) i przemie nog
na waciwe miejsce.

Rozdzia 3. Sceny, warstwy i obiekty

59

Rysunek 3.4.
Posta na piciu
warstwach

10. Utwrz kolejn warstw dla powiewajcego szalika. Masz teraz

pi warstw i posta podobn do tej z rysunku 3.4.


11. Domylne nazwy warstw nie maj adnej wartoci informacyjnej.
Kliknij dwukrotnie nazw kadej z warstw w panelu listwy
czasowej i wpisz nazw odpowiedni do zawartoci. Nacinicie
Enter zatwierdzi nazw i przywrci zwyky wygld paska warstwy
(rysunek 3.5).
Jeli nie bdziesz sobie w stanie przypomnie, na ktrej warstwie jest noga
prawa, a na ktrej lewa, przeprowad may test. Najpierw odblokuj wszystkie
warstwy (kliknicie kdki widocznej na pasku zablokowanej warstwy
odblokowuje j). Kliknij na pasku warstwy, ktrej zawartoci nie moesz
sobie przypomnie, i spjrz na scen. Caa zawarto warstwy zostanie
zaznaczona. Teraz moesz nada warstwie nazw.
12. Kolejno wywietlania warstw jest taka jak kolejno warstw

w panelu listwy czasowej. Warstwa z torsem jest na samym dnie,


poniej wszystkich innych, a powinna by na wierzchu. Chwy
mysz pasek warstwy tors na panelu listwy czasowej i przecignij
go na sam gr stosu warstw (rysunek 3.6). Wygld postaci na
scenie odpowiednio si zmieni.

60

Flash CS3 PL wiczenia praktyczne

Rysunek 3.5.
Zmieniamy nazwy
warstw

Rysunek 3.6.
Zmieniamy
kolejno warstw

13. Zapisz na dysku plik z idc postaci bdzie nam pniej

potrzebny. Gotowy plik spacer.fla (w wersji po wprowadzeniu


wszystkich zmian proponowanych w tym rozdziale) znajdziesz
te pod adresem ftp://ftp.helion.pl/przyklady/cwfcs3.zip.

Rozdzia 3. Sceny, warstwy i obiekty

61

W I C Z E N I E

3.2

Tworzenie folderw warstw


i ustawienia waciwoci warstw

Struktura warstw taka, jak utworzylimy, wietnie mogaby si sprawdzi w filmie z jedn postaci i prostym tem. Gdybymy jednak chcieli
animowa naraz kilka postaci, z ktrych kada oczywicie musiaaby
mie gow, tors oraz praw i lew nog, to czyteln struktur moemy
uzyska, stosujc foldery warstw lub rozdzielajc warstwy pomidzy
obiekty, np. lokujc je w klipach filmowych. T drug metod poznamy
w dalszej czci rozdziau, teraz zajmiemy si utworzeniem folderu,
ktry pomieci wszystkie warstwy z elementami postaci.
1. Otwrz plik spacer.fla, jeli go zamkne.
2. Kliknij przycisk Wstaw folder warstwy. Znajdziesz go w dolnej
czci panelu listwy czasowej, pod paskami warstw.
3. W panelu listwy czasowej pojawi si nowy pasek z nazw
Folder 1. Nazwij folder tak, jak chcesz nazwa posta. W naszym
przykadzie nazw Folder 1 zmienilimy na rainman. W tej chwili
mamy w filmie pusty folder oraz pi oddzielnych warstw.
4. Chwy jedn z warstw w panelu listwy czasowej, na przykad
warstw szalik, i przecignij j nad pasek folderu rainman. Dopiero
tam zwolnij klawisz myszy. Zalenie od tego, czy folder jest
zwinity, czy te nie, przecignita warstwa moe znikn albo
moe zosta wywietlona pod paskiem folderu, lecz jej nazwa
bdzie przesunita w prawo.
5. Metod przecignij i upu przenie wszystkie po kolei warstwy
do folderu rainman. Warstw tors przenie na samym kocu, by
znalaza si ponad innymi (moesz te zmieni kolejno warstw
ju po umieszczeniu ich w folderze, przecigajc je wyej lub niej).
6. Kliknij ma strzak umieszczon po lewej stronie nazwy folderu,
a potem kliknij j po raz drugi. Strzaka pozwala zwija i rozwija
folder warstw (rysunek 3.7). Zwinity folder jest reprezentowany
w panelu listwy czasowej przez pojedynczy pasek. Kliknicie tego
paska powoduje zaznaczenie caej postaci.
Gdy pasek folderu jest zaznaczony (podwietlony na niebiesko), kliknicie
przycisku Wstaw warstw utworzy now warstw w folderze. Aby utworzy
now warstw obok istniejcych folderw, kliknij najpierw w pustym miejscu
sceny, by usun zaznaczenie.

62

Flash CS3 PL wiczenia praktyczne

Rysunek 3.7.
Rozwinity
i zwinity folder
zawierajcy
pi warstw
z elementami
postaci

Na pewno zastanawiae si, do czego su ikonki (oka, kdki


i kwadratu), ktre towarzysz paskom warstw powicimy
chwil na omwienie tych trzech funkcji.
7. Rozwi utworzony w tym wiczeniu folder, by widzie warstwy.
Klikaj po kolei wszystkie kropki znajdujce si w kolumnie pod
ikonk oka. Kropki zmieniaj si w czerwone krzyyki, a kada
warstwa oznaczona krzyykiem znika z ekranu.
Nie obawiaj si gdy klikniesz czerwony krzyyk, odpowiednia
warstwa pojawi si z powrotem. Oznacz wszystkie warstwy jako
niewidoczne.
8. Teraz nacinij kilka razy ikon oka, ktra znajduje si ponad
list warstw (ikona ta opisana jest jako Poka/Ukryj wszystkie
warstwy). Tak jak sugeruje jej nazwa, przycisk powoduje ukrycie
albo pokazanie wszystkich warstw naraz.
W analogiczny sposb mona uywa pozostaych dwch funkcji.
a) Ikonka kdki (Zablokuj/Odblokuj wszystkie warstwy)
suy do blokowania warstw. Obiekty znajdujce
si na zablokowanej warstwie nie mog by edytowane
ani zaznaczane. Nie mona te wstawia nowych elementw
na zablokowan warstw. (Blokada nie obejmuje tylko operacji
na caych ujciach). Gdy uywasz jednego z narzdzi
do rysowania, to upewnij si, e aktywna warstwa nie jest
zablokowana ani ukryta!
b) Ksztaty na warstwie oznaczonej ikon kwadracika (Poka
wszystkie warstwy jako kontury) bd wywietlane tylko
w postaci cienkich kolorowych konturw. Dziki temu mona

Rozdzia 3. Sceny, warstwy i obiekty

63

Rysunek 3.8.
Blokowanie,
ukrywanie
i konturowe
wywietlanie
warstw

zobaczy jednoczenie kilka warstw, ktre si wzajemnie


zasaniaj. Na rysunku 3.8 dla wszystkich warstw wczono
wywietlanie konturowe. Dodatkowo warstwy z nogami
postaci s ukryte, a warstwa szalik zablokowana.
9. Kliknij prawym przyciskiem myszy dowolny pasek warstwy
i z podrcznego menu wybierz pozycj Waciwoci. Otworzy
si okno Waciwoci warstwy, w ktrym znajdziesz zestawienie
wszystkich waciwoci danej warstwy (rysunek 3.9). Moesz
tu midzy innymi zmieni barw uywan do wywietlania danej
warstwy w trybie konturowym (Kolor konturu). Opcje Poka,
Zablokuj i Ogldaj kontury warstw odpowiadaj ikonom oka,
kdki i kwadratu, ktre ju omwilimy. Mona tu te zwikszy
wysoko paska (Wysoko warstwy). Jednak najwaniejszy jest
szereg opcji porodku okna. Tu moesz zmienia typ warstwy,
a tym samym jej rol w filmie. Lista ta powinna by zatytuowana
Typ, lecz w polskiej wersji Flasha nosi ona nazw Tekst. Nie
zmieniaj domylnie wybranego typu (Zwyky). Zamknij okno
przyciskiem OK, po czym zapisz plik.
Zanim przejdziemy do maskowania warstw we Flashu, wyjanijmy znaczenie samego terminu maska. Oglnie mwic, maska jest obrazem,
ktry definiuje miejsca wywietlania innego obrazu. W wydaniu flashowym wyglda to tak:

64

Flash CS3 PL wiczenia praktyczne

Rysunek 3.9.
Okno waciwoci
warstwy. Naucz
si czyta Tekst
jako Typ,
a wszystko
nabierze sensu

T jedna warstwa (lub kilka warstw) zawiera pewien rysunek,

ktry chcemy zamaskowa,


T jedna warstwa (pooona wyej od poprzednich) zawiera mask,
T warstwy maskowane s wywietlane tylko w tych miejscach

sceny, w ktrych warstwa maski nie jest pusta.


Sama maska nie jest wywietlana, dlatego na warstwie-masce zazwyczaj
umieszcza si jednokolorowe wypenienia. Cay mechanizm ilustruje
rysunek 3.10.
Rysunek 3.10.
Zasada dziaania
maski

Maski umoliwiaj uzyskanie niecodziennych efektw, gdy poczymy


je z animacj. Animowa mona zarwno obiekt maskowany, jak i sam
mask. Niestety, aby stosowa maski o rnych stopniach przezroczy-

Rozdzia 3. Sceny, warstwy i obiekty

65

stoci (np. maski o mikkich, rozmytych brzegach, zanikajcych do


penej przezroczystoci, tak by maskowany obrazek rwnie zanika na
krawdziach), trzeba je wprowadza z poziomu jzyka ActionScript.
Maski wprowadzane w rodowisku edycyjnym Flasha zawsze maj
ostre krawdzie. Nawet jeli uyjesz w roli maski ksztatu wypenionego
pprzejrzystym gradientem, Flash nie rozpozna szczeglnych cech tego
wypenienia i bdzie je tratowa tak samo jak kady inny kolor. Natomiast maskowane obrazy mog wykorzystywa rne stopnie przejrzystoci i wszelkie efekty graficzne, jakich tylko zechcesz uy.
W I C Z E N I E

3.3

Stosowanie maski

Przed wykonaniem wiczenia przygotuj jakkolwiek map bitow.


Moe to by obraz w formacie *.png, *.bmp, *.jpg, *.gif, a nawet *.psd.
Poniewa to tylko wiczenie, moesz wybra obraz o dowolnych rozmiarach. Kiedy jednak bdziesz pracowa nad filmem przeznaczonym
do publikacji w internecie, nie zapomnij przygotowa sobie obrazw
pod wymiar, przycinajc je lub skalujc odpowiednio w programie
przeznaczonym do edycji obrazw rastrowych. Flash znakomicie
skaluje obrazy, ale to skalowanie dotyczy tylko sposobu wywietlania;
tak naprawd nie usuwa z zaimportowanych bitmap ani jednego piksela, co moe oznacza, e Twj film Flasha bdzie obciony mnstwem zbdnych danych.
1. Utwrz nowy plik Flasha. Wybierz polecenie Plik/Importuj/Importuj
na st montaowy. W wywietlonym oknie odszukaj bitmap,
ktrej chcesz uy (jeli jej nie widzisz, sprawd, czy ustawienia
na licie Pliki typu: s odpowiednie; w razie potrzeby wybierz z tej
listy opcj Wszystkie formaty albo Wszystkie formaty obrazw).
Kliknij Otwrz, by zaimportowa wybrany plik do Flasha.
2. Obraz bitowy pojawia si na scenie. W panelu Waciwoci nadaj
mu dokadnie takie rozmiary, jakie ma scena (Sz: 550, W: 400,
jeli nie zmienie domylnych rozmiarw sceny w tym
dokumencie). Wsprzdne pooenia obrazu (X, Y) ustaw na 0.
Obraz zosta zaimportowany na warstw Warstwa 1. Moesz
nazwa t warstw na przykad bitmapa (rysunek 3.11).
3. Dodaj drug warstw o nazwie maska i narysuj na niej dowolny
ksztat. W naszym wiczeniu na warstwie maska umiecilimy
symboliczne okienko z czterech kwadratw (rysunek 3.12).

66

Flash CS3 PL wiczenia praktyczne

Rysunek 3.11.
Bitmapa
umieszczona
na pierwszej
warstwie,
przykrywajca
cay st
montaowy

Rysunek 3.12.
Ksztaty
umieszczone
na drugiej,
wyej pooonej
warstwie

4. Teraz najwaniejsze kliknij na grnej warstwie prawym

przyciskiem myszy i wybierz z menu kontekstowego opcj Maska.


(Ta opcja znajduje si take w oknie Waciwoci warstwy,
ktre omwilimy ju wczeniej. Jeli jednak skorzystasz z okna
Waciwoci warstwy, to bdziesz musia otworzy je rwnie
dla warstwy bitmapa i wybra typ Zamaskowany).
Jak zapewne zauwaye, obie warstwy (maskujca i maskowana)
zostay automatycznie zablokowane (rysunek 3.13). Jeeli usuniesz
blokad, rysunek bdzie wywietlany tak jak na zwyczajnych warstwach. Kiedy edytujesz obiekty na maskowanych warstwach, to po
zakoczeniu zmian zablokuj warstwy z powrotem. Tylko w ten sposb

Rozdzia 3. Sceny, warstwy i obiekty

67

bdziesz mg obejrze kocowy efekt maski. (Gotowy plik maska.fla


znajdziesz pod adresem ftp://ftp.helion.pl/przyklady/cwfcs3.zip).
Rysunek 3.13.
Bitmapowe niebo
wyania si zza
szybek okienka
narysowanego
w warstwie maski

Jeli w trakcie wykonywania wiczenia miae otwarty panel Biblioteka,


z pewnoci zauwaye, e pojawia si w nim Twoja bitmapa. Wszystkie
zaimportowane bitmapy i dwiki trafiaj do biblioteki filmu, skd s
pobierane za kadym razem, gdy zechcesz ich uy.

Obiekty
We Flashu wystpuje wiele rnych rodzajw obiektw i znaczenie
tego sowa zaley od przyjtej konwencji. W najszerszym ujciu obiekt
jest elementem struktury filmu majcym pewn zawarto, ktra
jest niezalena od struktur pooonych wyej w hierarchii obiektw.
W szczeglnym przypadku obiekt nie ma adnej zawartoci (moemy
powiedzie, e jest pusty). Moe w tej chwili nie wydaje Ci si to zupenie jasne, kiedy jednak zaczniesz posugiwa si obiektami, przekonasz si, e nie ma w tym nic szczeglnie skomplikowanego. Warto
wiedzie, e obiekty we Flashu mona podzieli na dwie gwne grupy:
T obiekty wizualne obiekty, ktre mona wywietli na scenie;
T obiekty wirtualne s tworzone najczciej w ramach jzyka
ActionScript i nie bdziemy ich omawia w tym rozdziale.

68

Flash CS3 PL wiczenia praktyczne

Wyej przedstawiona definicja obiektu jest na tyle oglna, e obejmuje


take obiekty wirtualne, my jednak skoncentrujemy si na obiektach
wizualnych. Do tej pory zetkne si ju z kilkoma z nich: obiektami
rysunkowymi (takimi jak prostokt narysowany w trybie Rysowanie
obiektw), grupami oraz polami tekstowymi. Zwr uwag, e niektre
z tych obiektw mog zawiera kolejne obiekty, inne nie; na przykad
moesz zaznaczy dwie lub trzy grupy i zgrupowa je. Uzyskasz w ten
sposb grup, w ktrej zagniedone s inne grupy. Grupa jest wic
obiektem tworzcym hierarchi. Nie ma jednak sposobu, by wewntrz
pola tekstowego umieci inne pole tekstowe. W tym podrozdziale
poznasz nowy rodzaj obiektw, zwanych symbolami. S to jedyne
obiekty wyposaone we wasn listw czasow. Mona wyrni trzy
rodzaje tych obiektw:
T Klip filmowy moe zawiera praktycznie wszystkie elementy,
ktre mona umieci w gwnej scenie.
T Przycisk obiekt reagujcy na dziaania wykonywane mysz
(na przykad zmieniajcy wygld, gdy znajdzie si nad nim kursor).
Funkcja, jak dany przycisk peni w filmie, jest okrelana
za pomoc jzyka ActionScript.
T Grafika (obiekt ten czsto nazywany jest te symbolem graficznym)
ma podobne moliwoci do obiektu filmowego, ale jego listwa
czasowa jest porednio zalena od listwy czasowej obiektu
nadrzdnego.
Na pocztek poznamy oglne zasady edycji obiektw.
W I C Z E N I E

3.4

Tryb edycji obiektw

W tym wiczeniu wykorzystamy plik spacer.fla, w ktrym mamy do


dyspozycji kilka grup. Moe to by zreszt dowolny plik, byle tylko
bya w nim grupa (wystarczy narysowa kilka linii bd ksztatw,
zaznaczy niektre z nich i wcisn Ctrl+G).
1. Jeli korzystasz z pliku spacer.fla, rozwi folder warstw i sprawd,
czy s odblokowane.
2. Zaznacz klikniciem gow postaci na scenie albo kliknij warstw
glowa w panelu listwy czasowej. Efekt bdzie ten sam, gdy
zaznaczenie paska warstwy pociga za sob zaznaczenie zawartoci
warstwy, i na odwrt. Zaznaczona grupa (jak kady obiekt) jest
oznaczona niebiesk, prostoktn ramk (rysunek 3.14 u gry).

Rozdzia 3. Sceny, warstwy i obiekty

69

Rysunek 3.14.
Edycja na poziomie
sceny filmu (u gry)
i edycja
na poziomie
obiektu (u dou)

Zwr uwag na listw umieszczon nad stoem montaowym.


Napis Scena 1 informuje Ci, e edytujesz w tej chwili gwny
film, a dokadniej jego pierwsz scen.
3. Kliknij dwukrotnie gow deszczowego czowieka, by przej
w tryb edycji tego obiektu. Gowa jest wywietlana tak jak zwykle,
ale caa reszta sceny przyblada. W tej chwili jeste wewntrz
obiektu; masz dostp do wypenie i linii, ktre w nim umiecie,
ale do niczego wicej. Listwa nad stoem montaowym podaje
aktualny poziom edycji: Scena 1, Grupa (rysunek 3.14 u dou).
4. Jeli chcesz, moesz teraz edytowa rysunek gowy, np. zmieni
ksztat lub kolor kapelusza. Gdy skoczysz, powr na poziom
edycji gwnego filmu. Moesz to zrobi na rne sposoby:
T Kliknij niebiesk strzak, skierowan w prawo, umieszczon
na listwie nad stoem montaowym.
T Kliknij tryb edycji, ktry wybierasz, na listwie nad stoem
montaowym. W naszym przypadku musiaby klikn napis
Scena 1.
T Kliknij dwukrotnie poza aktywnym rysunkiem, na wyblakym
lub po prostu pustym obszarze stou montaowego.
Wszystkie graficzne obiekty Flasha s edytowane w taki wanie sposb.
W przypadku symboli tryb edycji mona wczy rwnie w panelu
Biblioteka lub za pomoc rozwijanej listy, dostpnej pod ikon Edytuj
Symbole (znajdziesz j na listwie umieszczonej nad stoem montaowym).

70

Flash CS3 PL wiczenia praktyczne

Przejdziemy teraz do stosowania obiektw bibliotecznych, czyli symboli.


Na pocztek zajmiemy si klipami filmowymi. Ze wzgldu na wasn,
niezalen listw czasow ten obiekt ma funkcjonalno caej sceny
filmu. Klip filmowy daje najwiksze moliwoci ze wszystkich obiektw, jakie mona utworzy we Flashu, i jest niezastpiony jako obiekt
kontrolowany z poziomu jzyka ActionScript.
Najwaniejsz waciwoci symboli jest oddzielno ich definicji,
co oznacza, e s one zapamitywane w globalnej (wsplnej dla caego
pliku) bibliotece. Kiedy umieszczamy egzemplarz symbolu na scenie,
to w rzeczywistoci umieszczamy tam tylko odwoanie do odpowiedniej pozycji w bibliotece. Oznacza to, e jeden obiekt moe by umieszczony w filmie w kilku kopiach bez marnowania pamici (ten sam
mechanizm dziaa w przypadku zaimportowanych bitmap i dwikw,
ktre rwnie s traktowane jak symbole). Zmiana zawartoci obiektu
wpynie na wszystkie egzemplarze tego obiektu w caym filmie. Jest to
szczeglnie wane podczas animacji, w ktrej te same elementy graficzne s wywietlane setki razy.
Definicje symboli, umieszczone w bibliotece, obejmuj wszystko, co
znajduje si wewntrz obiektw (warstwy, ujcia, wszystkie rysunki
i obiekty). Cho egzemplarze (klony) symbolu zawsze wiernie odwzorowuj zawarto symbolu, to jednak do kadego egzemplarza mona
przypisa sporo unikalnych informacji (cz z nich moe nie by dla
Ciebie zrozumiaa, ale nie przejmuj si wszystko wyjani si pniej):
T pooenie, obrt i skala obiektu,
T akcje przypisane do danego egzemplarza obiektu,
T pozycja na listwie czasowej wewntrz symbolu (czyli numer
klatki, ktra jest aktualnie wywietlana),
T efekty kolorystyczne (zabarwienie, przezroczysto),
T efekty zwizane z nakadaniem si obiektw (tryby mieszania),
T nazwa i typ symbolu (typ mona zmieni niezalenie od typu
symbolu w bibliotece),
T identyfikator (nazwa) obiektu.
Wszystkie te waciwoci s zapamitywane dla kadej kopii obiektu
z biblioteki. Nie zajmuj duo pamici, wic moesz bez obaw kopiowa
symbole dziesitki razy.

Rozdzia 3. Sceny, warstwy i obiekty

71

W I C Z E N I E

3.5

Przeksztacanie rysunku w symbol

To wiczenie rwnie wykonamy w pliku spacer.fla, lecz moesz uy


zamiast tego pliku dowolnego innego dokumentu.
1. Otwrz plik spacer.fla. By utrzyma porzdek, utwrz w nim now
warstw o nazwie deszcz.
2. Narysuj pojedyncz kropl deszczu i zaznacz cay wykonany
rysunek. Nie ma znaczenia, czy kropla bdzie zwykym
wypenionym ksztatem, obiektem rysunkowym, czy moe grup;
wewntrz symbolu mona umieci wszystko. Na nasze potrzeby
wystarczy zwyky ksztat (rysunek 3.15).
Rysunek 3.15.
Zaznaczona
kropla deszczu

3. Wybierz polecenie Modyfikuj/Konwertuj na symbol.

W wywietlonym oknie dialogowym zaznacz opcj Klip filmowy.


W polu Nazwa wpisz nazw symbolu (kropla). Korzystajc
z ikony po prawej stronie okna, moesz ustali pooenie rodka
symbolu wzgldem rysunku. Jeli klikniesz rodkowy kwadracik,
zmieniajc jego barw na czarn, to ten oficjalny rodek symbolu
bdzie lea w rodku kropli (rysunek 3.16).
Rysunek 3.16.
Okno dialogowe
suce
do tworzenia
symboli
4. Kliknij OK, by zamkn okno. Symbol kropla pojawi si

w bibliotece (jeli nie widzisz panelu Biblioteka, wybierz polecenie

72

Flash CS3 PL wiczenia praktyczne

polecenie Okno/Biblioteka). Na scenie znajduje si pojedynczy


egzemplarz (klon) tego symbolu.
5. Zaznacz klon symbolu (kropl, ktr narysowae) i bez obaw
nacinij klawisz Delete.
Co prawda rysunek znikn bez ladu ze sceny, ale spjrz na panel
biblioteki symbol pozosta niewzruszony na swoim miejscu.
Teraz sprbujemy z powrotem umieci go na scenie.
6. Umie kursor nad pozycj kropla w panelu Biblioteka.
Przytrzymaj lewy przycisk myszy i przecignij symbol z biblioteki
nad obszar stou montaowego. Moesz chwyci mysz za nazw
symbolu na licie lub za obrazek symbolu w oknie podgldu
(rysunek 3.17). Tam, gdzie zwolnisz przycisk myszy, umieszczona
zostanie kropla.
Rysunek 3.17.
Wyciganie
klipu filmowego
z biblioteki

7. Wycignij na scen kolejne klony symbolu kropla (rysunek 3.18).

Wszystkie krople trafiaj, naturalnie, na aktywn warstw, czyli


warstw deszcz. Zwr uwag na wygld panelu waciwoci, gdy
zaznaczona jest jedna z kropli. Pojawia si tam midzy innymi
narzdzie, dziki ktremu moesz wymieni wzorcowy symbol
dla danego egzemplarza na inny (bdziesz to mg wyprbowa,
gdy w filmie pojawi si wicej symboli). Dziki listom Kolor
oraz Mieszanie moesz zmieni wygld egzemplarza symbolu,
np. zabarwiajc go, nadajc mu czciow przejrzysto albo
stosujc tryby mieszania kolorw, podobne do tych, z jakich
korzysta si w Photoshopie i innych programach rastrowych.
8. Jeli masz ochot, moesz przeskalowa niektre krople narzdziem
Przeksztacenie swobodne. Kady egzemplarz symbolu, jak ju

You might also like