Tworzenie stron WWW we

Flashu CS4/CS4 PL. Projekty

Autor: David Morris
Tumaczenie: Aleksander Lama
ISBN: 978-83-246-2455-3
Tytu oryginau: Creating a Web Site with
Flash CS4: Visual QuickProject Guide
Format: B5, stron: 176

Poznaj najwaniejsze narzdzia Flasha i twrz efektowne serwisy internetowe

Jak szybko zbudowa efektown witryn we Flashu?
Jak sprawnie dodawa i modyfikowa elementy witryny?
Jak przygotowa pliki do przesania na serwer?
Adobe Flash CS4 zapewnia sprawn integracj animacji z witryn oraz umoliwia
obsug obiektw 3D. To wszystko sprawia, e jest on doskonaym narzdziem do
tworzenia rozbudowanych i efektownych serwisw WWW. I chocia bogactwo elementw
sterujcych tej aplikacji moe na pierwszy rzut oka wydawa si przytaczajce,
z podrcznikiem Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty obsuga
najwaniejszych mechanizmw i funkcji Flasha staje si naprawd prosta.
Niniejsza ksika zostaa skonstruowana w oparciu o unikatow metod nauki nowych
technologii, tak aby mg szybko stworzy interesujc wizualnie witryn bez potrzeby
przedzierania si przez gszcz technicznych szczegw. Korzystajc z przewodnika,
dowiesz si, w jaki sposb zaprojektowa ukad graficzny witryny, na czym polega
stylizowanie tekstu, jak wykorzysta o czasu i tworzy mechanizmy nawigacji. Dziki
temu podrcznikowi z atwoci wykonasz konkretny projekt w cigu kilku godzin
i nauczysz si korzysta z podstawowych narzdzi Flasha.
Tworzenie gwnego pliku witryny
Projektowanie ukadu graficznego
Rysowanie i edytowanie ksztatw wbudowanych
Dodawanie i edytowanie wypenie gradientowych
Praca z zaimportowanymi obiektami
Wykorzystanie osi czasu do organizacji witryny
Dodawanie i modyfikacja animacji
Tworzenie mechanizmw nawigacji
Stosowanie komponentw interfejsu uytkownika
Wideo we Flashu
Publikacja witryny
Z tym podrcznikiem z atwoci poskromisz Flasha
i szybko stworzysz efektown witryn

spis treci
wprowadzenie
witryna, ktr stworzymy
ukad ksiki
witryna internetowa
towarzyszca ksice

7
8
10
12

poznaj flasha
nastpny krok
informacje dodatkowe

13
19
20

1. przygotowanie plikw tworzcych witryn

21

definiowanie struktury katalogw

tworzenie gwnego pliku witryny
ustawianie waciwoci dokumentu
zapisywanie pliku

26
27
28

22
23
24
25

przygotowanie przestrzeni roboczej

zapisywanie zestawu kolorw
informacje dodatkowe

2. projektowanie ukadu graficznego witryny

ustawianie linii pomocniczych
rysowanie ta
rysowanie ksztatw wbudowanych

30
31
33

29

edytowanie ksztatw wbudowanych

dodawanie wypenie gradientowych
edytowanie wypenie gradientowych

3. dodawanie i stylizowanie tekstu

wstawianie pojedynczego
wiersza tekstu
tekst o ustalonej szerokoci

39
40
42

zmiana atrybutw pola tekstowego

wstawianie cza typu e-mail

4. praca zzaimportowanymi obiektami

grafika wielokrotnego uytku
importowanie obrazw wektorowych
organizowanie pracy zsymbolami
tryb edytowania symbolu
przeksztacanie obiektw
ustawianie 9-plastrowego skalowania
hierarchia obiektw

34
35
36

46
48
49
50
51
52
55

43
44

45
organizowanie zapomoc warstw
przenoszenie obiektw
midzy warstwami
importowanie map bitowych
dodawanie warstwy maski
edytowanie maskowanych obiektw
informacje dodatkowe

57
58
59
60
61
62

spis treci

spis treci
5. wykorzystanie osi czasu doorganizacji witryny
importowanie zprogramu
adobe illustrator
obrysy ipodwietlenia
klatki iklatki kluczowe

64
66
67

dodawanie etykiet doklatek

sterowanie osi czasu
informacje dodatkowe

6. umieszczanie animacji wwitrynie

predefiniowane ustawienia ruchu
waciwoci animacji
tworzenie animacji ksztatu
korzystanie znarzdzia obrt 3d
modyfikowanie animacji ruchu
zapisywanie ustawie ruchu

76
78
79
81
82
83

98
100
104
105
109

edytor ruchu
zmiana rozmieszczenia klatek
wstrzymywanie odtwarzania animacji
wywietlanie podgldu filmu
sterowanie klipami filmowymi
informacje dodatkowe

spis treci

118
119
121
124
127
129
132

84
87
90
91
92
94

97
powielanie przyciskw
ukadanie przyciskw
doczanie skryptw
informacje dodatkowe

8. wypenianie dziaw witryny zawartoci

importowanie symboli
aktualizowanie symboli
tworzenie pola wprowadzania tekstu
dynamiczne ustawianie tekstu
tworzenie przewijanego tekstu
adowanie plikw html
iprzypisywanie im stylw
adowanie plikw xml
stosowanie komponentw
interfejsu uytkownika

69
70
73

75

7. tworzenie mechanizmu nawigacji

tworzenie dziaw witryny
tworzenie przyciskw
podgld dziaania przycisku
animowanie stanu przycisku
doczanie dwiku doprzycisku

63

wizanie danych
dointerfejsu uytkownika
ustawianie interakcji
winterfejsie uytkownika
adowanie zewntrznych filmw
komponenty formularzy
informacje dodatkowe

110
114
115
116

117
137
141
144
145
148

135

spis treci
9. wideo weflashu
obszar odtwarzania wideo
importowanie wideo

149
150
152

wyzwalacze punktw kontrolnych

10. publikowanie witryny

ustawienia pliku swf
ustawienia html

skorowidz

155

159
160
162

przygotowanie plikw
doprzesania naserwer

164

165

spis treci

projektowanie ukadu
graficznego witryny

Naszym pierwszym zadaniem wprocesie tworzenia witryny bdzie wykonanie

projektu ukadu graficznego, wktrym bdziemy prezentowa jej zawarto. Oukadzie graficznym mona myle jak oaranacji scenografii wfilmie musimy zatem
ustawi to, zdefiniowa rne obszary iuatrakcyjni wygld. Przy okazji nauczymy
si uywa wielu podstawowych funkcji Flasha. Poniej wyszczeglniono kilka czynnoci, ktre zostan tuomwione.
Tworzenie imodyfikowanie wypenie ra
dialnym gradientem.

Rysowanie imodyfikowanie ksztatw

wbudowanych.

Uywanie narzdzi rysujcych

dotworzenia elementw ukadu graficznego.
Umieszczanie linii
pomocniczych wskazujcych obszary
ukadu graficznego
ipomagajcych
rozmieszcza jego
poszczeglne
elementy.
Tworzenie imodyfikowanie wypenie
liniowym gradientem.

29

ustawianie linii pomocniczych

Dziki liniom pomocniczym moemy wprosty sposb definiowa obszary nastole
montaowym, atake uatwi sobie ukadanie obiektw. Zanim zaczniemy rysowa
to, dodamy kilka linii pomocniczych. Aby upewni si, eumieszczamy jewodpowiednich miejscach, uyjemy rozwinitego panelu Info (Informacje), dostpnego dla
wielu czynnoci.
1 Kliknij ikonk podwjnej strzaki nagrze
obszaru dokowania, aby rozwin panele.
2 Aby otworzy panel Info (Informacje),
wgrupie paneli Align/Info/Transform (Wyrwnaj/
Informacje/Przekszta) kliknij zakadk Info
(Informacje).
3 Aby wczy wywietlanie linijek wzdu
lewej igrnej krawdzi stou montaowego,
zmenu View (Widok) wybierz pozycj Rulers
(Linijki).
4 Wcinij przycisk myszy iprzecignij lini pomocnicz zpoziomej (grnej) linijki. Obserwuj panel Info
(Informacje) gdy wsprzdna Y wskanika myszy
bdzie wynosia 75, pu przycisk. Przecignij nast
montaowy jeszcze dwie linie pomocnicze iustaw
jenapozycjach 95 i475. Wzalenoci odrozdzielczoci ekranu, ustawie myszy istopnia powikszenia moesz mie problemy zustawieniem linii pomocniczych
wmiejscach opodanych wyej wsprzdnych. Postaraj si umieci jetak dokadnie, jak totylko moliwe.

5 Upewnij si, eopcja

Snap toGuides (Przyci
gaj dolinii pomocniczych)
jest wczona. Zmenu
View (Widok) wybierz pozycj Snapping (Przyciga
nie). Wpodmenu sprawd,
czy opcja Snap toGuides
(Przycigaj dolinii pomoc
niczych) jest zaznaczona. Jeli nie, kliknij Snap
toGuides (Przycigaj doli
nii pomocniczych), aby
jwczy.
6 Ustaw takie powikszenie, aby by widoczny cay
st montaowy.

30

projektowanie ukadu graficznego witryny

rysowanie ta
St montaowy zosta podzielony naobszary, moemy wic rozpocz rysowanie
obiektw, ktre bd suy jako to naszej witryny.
1 Zpanelu Tools (Narzdzia) wybierz
narzdzie Rectangle (Prostokt).
2 Kliknij przycisk Stroke color
(Kolor obrysu).
3 Wokienku palety kolorw przesu
kursor wksztacie pipety nad rednio
intensywny fioletowy ikliknij, aby go
wybra.
4 Kliknij przycisk Fill color (Kolor wype
nienia) izprbek kolorw wybierz biay
(#FFFFFF).
5 Kliknij przycisk Object Drawing (Ryso
wanie obiektw), aby wczy topcj.
6 Ustaw kursor wlewym grnym rogu stou montaowego. Wcinij lewy przycisk myszy iprzecignij prostokt doprawego dolnego rogu stou montaowego.
Jeeli nie udao Ci si dokadnie narysowa prostokta,
moesz wprowadzi poprawki dotyczce jego
pooenia irozmiaru. Wpanelu waciwoci moesz
zmieni wartoci wpolach W: (Sz:), H: (W:), X: iY:.
Wcinij przycisk myszy nawartociach iprzecignij,
aby jezwikszy lub zmniejszy; moesz rwnie
klikn odpowiednie pola ircznie wpisa
prawidowe wartoci. Prostokt powinien mie
wymiary 780600 pikseli. Jego prawidowe
pooenie toX = 0 iY = 0.
7 Aby usun zaznaczenie prostokta, zmenu
Edit (Edytuj) wybierz polecenie Deselect All
(Odznacz wszystko).

projektowanie ukadu graficznego witryny

31

rysowanie ta cd.
Przystpujc doprac nad kolejnym elementem ta, upewnij si, ewczeniej utworzony prostokt nie jest zaznaczony, wybrane jest narzdzie Rectangle (Prostokt)
iwczona opcja Object Drawing (Rysowanie obiektw).
1 Kliknij przycisk zmiany koloru obrysu.
2 Woknie palety kolorw kliknij przycisk None (brak koloru)
umieszczony blisko prawego grnego rogu.
3 Kliknij przycisk zmiany
koloru wypenienia iwybierz
dowolny kolor, poniewa itak
zachwil go zmienimy.
4 Ustaw kursor nalewej
krawdzi stou montaowego, nad lini pomocnicz
umieszczon wpozycji 75.
Wcinij lewy przycisk myszy iprzecignij prostokt
doprawej krawdzi stou
montaowego oraz dolinii
pomocniczej znajdujcej
si napozycji 95.
Jeeli trzeba, wpanelu waciwoci ustaw wymiary
(78020) ipooenie (0, 75).
5 Narysuj kolejny prostokt owymiarach 780125
ipooeniu (0, 475).
6 Aby usun zaznaczenie prostokta, zmenu Edit
(Edytuj) wybierz polecenie Deselect All (Odznacz
wszystko).

32

projektowanie ukadu graficznego witryny

rysowanie ksztatw wbudowanych

Ostatni element ta bdzie specjalnym obiektem, nazywanym ksztatem wbudo
wanym. Stoobiekty, ktrych ustawienia mona zmienia wpanelu waciwoci.
Pozwala tonaprecyzyjne sterowanie rozmiarem, zaokrgleniem wierzchokw iinnymi waciwociami ksztatu wdowolnym momencie poutworzeniu obiektu, bez
koniecznoci ponownego rysowania.
Zastosujemy zaokrglanie wierzchokw prostokta, aby utworzy element przypominajcy zakadk.
1 Wprzyborniku wcinij iprzytrzymaj przycisk narzdzia Rectangle (Prostokt).
Zrozwijanego menu wybierz narzdzie Rectangle Primitive (Prostokt; ikonka zdodatkowymi punktami nawierzchokach).

2 Kliknij przycisk zmiany koloru obrysu iwybierz zdefiniowany

wczeniej rednio intensywny fioletowy.
3 Ustaw kursor
wodlegoci okoo
20pikseli odle
wej krawdzi stou montaowego,
nalinii pomocniczej, ktr umiecie wpozycji 75.
4 Wcinij lewy przycisk myszy iprzecignij kursor dogry inaprawo.
Wysoko iszeroko prostokta nie swtej chwili istotne, ich ustawieniem zajmiesz si wnastpnym rozdziale.

projektowanie ukadu graficznego witryny

33

edytowanie ksztatw wbudowanych

Wierzchoki prostokta zmienia si,
przecigajc uchwyty ich zaokrglenia
lub wpisujc wartoci wpolach Corner
Radius (Promie naronika prostokta)
wpanelu waciwoci. Skorzystamy
zobu moliwoci.
1 Zprzybornika wybierz narzdzie
Selection (Zaznaczenie).
2 Wcinij lewy przycisk myszy najednym
zuchwytw zaokrglenia wierzchokw iprzecignij
wdowolnym kierunku wzdu krawdzi prostokta. Pojawi si linie pomocnicze obrazujce stopie
zaokrglenia wierzchokw.
3 Gdy wierzchoki sju adnie zaokrglone, zwolnij lewy przycisk myszy.
Zwr uwag nato, ewszystkie cztery
wierzchoki prostokta zostay zaokrglone wtym samym stopniu.
Aby uzyska element przypominajcy
zakadk, musimy zaokrgli tylko lewy
iprawy grny wierzchoek.
Wpanelu waciwoci moesz zobaczy, ezmienia si
warto tylko wjednym polu zaokrglania wierzchokw,
apozostae trzy pola pozostaj nieaktywne (wyszarzone).
4 Kliknij ikonk Lock (Powi elementy sterujce promieniem naronika) oznaczon
ogniwem acucha, aby odblokowa powizania midzy czterema wierzchokami.
Dziki temu bdziemy mieli moliwo
zmiany zaokrglenia kadego zwierzchokw oddzielnie.
5 Zmie wartoci zaokrglenia
dwch dolnych wierzchokw na0,
takaby znw stay si zwykymi,
ostrymi rogami.

34

projektowanie ukadu graficznego witryny

dodawanie wypenie gradientowych

Teraz dodamy wypenienia gradientowe, wktrych kolory stopniowo przechodz
zjednego winny. Dziki temu scena zyska atrakcyjny wygld.
Zprzybornika wybierz narzdzie Selection (Zaznaczenie) ikliknij prostokt umieszczony midzy liniami pomocniczymi zpozycji 75 i95, aby go zaznaczy. Wcinij klawisz Shift ikliknij prostokt, ktry narysowae pod lini pomocnicz wpozycji 475,
atake prostokt owygldzie zakadki, aby doda jedozaznaczenia.
Pozaznaczeniu trzech prostoktw
przejd dopanelu Color (Kolor)
inacinij przycisk wyboru koloru
wypenienia.
Kliknij list rozwijan Type (Typ)
iwybierz pozycj Linear (Liniowe).
Wypenienie prostoktw zmieni si
nagradientowe.

Wpanelu pojawi si nowy element

sterujcy pasek definicji gradientu
wraz zeznajdujcymi si poniej
wskanikami, ktre okrelaj kady
kolor wystpujcy wgradiencie.
Popodwjnym klikniciu wskanika nalewym kocu paska definiujcego gradient otworzy si okienko
palety kolorw. Wybierz wczeniej
zdefiniowany rednio intensywny
fioletowy.
Prostokty steraz wypenione
gradientem przechodzcym od
koloru fioletowego dobiaego.
Gradient nie jest jednak ustawiony
wodpowiednim kierunku. Zaraz
tozmienimy.

projektowanie ukadu graficznego witryny

35

edytowanie wypenie gradientowych

Narzdziem Selection (Zaznaczenie) kliknij poza stoem montaowym, aby wyczy
zaznaczenie trzech prostoktw.
Zmenu View (Widok) wybierz pozycj Guides/Show Guides (Linie pomocnicze/Poka
linie pomocnicze), aby wyczy wywietlanie linii pomocniczych. Dziki temu atwiej
nam bdzie zauway krawdzie obiektw.
Kliknij prostokt nadole stou montaowego, aby go zaznaczy.
Wprzyborniku wcinij iprzytrzymaj przycisk narzdzia Free Transform Tool
(Przeksztacanie swobodne). Zrozwijanego menu wybierz narzdzie Gradient
Transform Tool (Przeksztacanie gradientu).
Naekranie pojawi si trzy uchwyty
edycyjne:
okrgy uchwyt zgrotem strzaki
doobracania wypenienia;
kwadratowy uchwyt zestrzak
dozmiany szerokoci wypenienia;
okrgy uchwyt sucy dozmiany
pooenia rodka gradientu.
Wcinij lewy przycisk myszy iprzecignij okrgy uchwyt
obrotu wd idorodka, aby obrci wypenienie o90.
Wcinij klawisz Shift, aby ograniczy kt obrotu dowielokrotnoci 45.
Jeli tokonieczne, dopasuj podgld stou montaowego, tak aby zobaczy kwadratowy uchwyt szerokoci wy
penienia. Wcinij lewy przycisk myszy iprzecignij go
dodolnej krawdzi prostokta.
Wcinij lewy przycisk myszy iprzecignij uchwyt punk
tu rodkowego nieznacznie wgr. Wten sposb podwyszysz punkt przejcia isprawisz, ewicej biaej
powierzchni bdzie znajdowa si wdolnej czci
prostokta.

36

projektowanie ukadu graficznego witryny

Narzdziem Gradient Transform (Przekszta

canie gradientu) kliknij mniejszy prostokt umieszczony wpobliu gry stou
montaowego.
Pojawi si trzy uchwyty edycyjne.
Przecignij kwadratowy uchwyt szerokoci wypenienia
wkierunku punktu rodkowego izatrzymaj si wodlegoci okoo 100 pikseli odniego.
Obr wypenienie o90.
Powikszenie podgldu prostokta iuchwytw przeksztace
gradientu pozwoli nam nadokonywanie dokadniejszych
zmian wgradiencie wkolejnych krokach. Wcinij iprzytrzymaj
klawisze Ctrl ispacja (Cmd ispacja wMac OS), bytymczasowo
zmieni kursor wnarzdzie Magnify (Powikszenie). Wcinij lewy
przycisk myszy iprzecignij prostokt powikszenia tak, aby obejmowa rodek
gradientu iprostoktne wypenienie wraz zuchwytami. Zwolnij przycisk myszy,
abypowikszy zaznaczony fragment.
Wpanelu Color (Kolor) rozwi list Overflow
(Przepenienie) iwybierz drug pozycj, ktra
odpowiada zawypenienie gradientowe typu
czarny-biay-czarny. Ten rodzaj wypenienia nadaje si dotworzenia efektw trjwymiarowych.
Rozlewanie definiuje wygld nazewntrz granic
szerokoci wypenienia. Wybrana przez nas opcja
odpowiada zawypenienie wpoprzek szerokoci.
Wcinij lewy przycisk myszy iprzecignij kwadratowy
uchwyt zmiany szerokoci wkierunku rodka wypenienia, tak aby dwie linie pomocnicze znalazy si
wpoowie wysokoci midzy rodkiem wypenienia
akrawdzi prostokta.
Wcinij lewy przycisk myszy iprzecignij uchwyt punktu
rodkowego nieznacznie wgr, aby podwyszy punkt
przejcia. Dziki temu uzyskamy efekt trjwymiarowy.

projektowanie ukadu graficznego witryny

37

edytowanie wypenie gradientowych cd.

Ostatnim krokiem wpracy zwypenieniami gradientowymi stosowanymi doobiektw ta bdzie zastosowanie doprostokta owygldzie zakadki radialnego wypenienia gradientowego oraz jego zmodyfikowanie.
Aby znw zobaczy cay prostokt, wybierz pozycj View/Magnification/100%
(Widok/Powikszenie/100%), wpanelu Tools (Narzdzia) wcz narzdzie Selection
(Zaznaczenie) izaznacz prostokt, klikajc go.
Wpanelu Color (Kolor) zlisty rozwijanej Type
(Typ) wybierz pozycj Radial (Radialne).
Wypenienie zmieni si wgradient radialny.
Gradient, ktry widzimy fioletowy wrodku
ibiay nakrawdziach jest przeciwiestwem
tego, cochcielimy uzyska. Moemy go zmodyfikowa wpanelu Color (Kolor).
Wpasku definicji gradientu wcinij lewy przycisk myszy iprzecignij wprawo wskanik wypeniony fioletowym kolorem, zatrzymujc si
blisko biaego wskanika.

Teraz biay wskanik przecignij jak

najdalej wlew stron.
Nakoniec przecignij fioletowy wskanik maksymalnie wprawo.
Pozaznaczeniu fioletowego wskanika zmie warto wpolu Alpha (Alfa) na60%, dziki czemu kolor
stanie si pprzezroczysty inabiaym tle bdzie
wyglda najaniejszy.
Wten sposb ukoczylimy prac nad
prostoktami.

38

projektowanie ukadu graficznego witryny