IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

Tworzenie stron WWW

we Flashu. Projekty
Autor: David Morris
Tumaczenie: Marcin Samodulski
ISBN: 83-246-0154-6
Tytu oryginau: Creating a Web Site
with Flash: Visual QuickProject Guide
Format: B5, stron: 160

TWJ KOSZYK
DODAJ DO KOSZYKA

CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK

CZYTELNIA
FRAGMENTY KSIEK ONLINE

Programu Macromedia Flash nie trzeba ju chyba nikomu przedstawia. To doskonae

narzdzie do tworzenia interaktywnych witryn WWW i prezentacji multimedialnych
cieszy si od lat niesabnc popularnoci wrd projektantw i grafikw
komputerowych. Ostatnie wersje tego programu wzbogacono o obiektowy jzyk
programowania ActionScript, co dodatkowo zwikszyo jego moliwoci. Obecna wersja
Flasha to prawdziwy kombajn, za pomoc ktrego mona stworzy niemal kad
aplikacj multimedialn i efektown witryn WWW.
Ksika Tworzenie stron WWW we Flashu. Projekty to ilustrowany przewodnik
przedstawiajcy program Macromedia Flash MX 2004. Opisuje kolejne kroki
prowadzce do zbudowania multimedialnej i interaktywnej witryny WWW
z wykorzystaniem narzdzi, w ktre wyposaony jest Flash. Nie znajdziesz jednak
w niej dugich opisw i dziesitek parametrw. Kade zagadnienie przedstawione jest
za pomoc zrzutw ekranu i krtkich instrukcji. Dziki temu w cigu kilku godzin
zrealizujesz swj pierwszy projekt we Flashu.
Interfejs uytkownika
Przygotowanie struktury plikw i zdefiniowanie parametrw projektu
Tworzenie ukadu graficznego za pomoc narzdzi rysunkowych
Stosowanie symboli
Dodawanie tekstu do strony
Korzystanie z listwy czasowej
Tworzenie animacji i mechanizmw nawigacyjnych
adowanie danych z zewntrznych plikw
Publikacja witryny

Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl

Dziki lekturze tej ksiki przekonasz si,

jak ogromne moliwoci oferuje Ci Macromedia Flash

spis treci
wprowadzenie
witryna, ktr stworzymy
organizacja ksiki
towarzyszca witryna internetowa

8
10
12

7
poznaj flasha
nastpny krok
informacje dodatkowe

1. przygotowanie plikw tworzcych witryn

definiowanie struktury katalogw
22
tworzenie plikw skadowych witryny 23
ustawianie wasnoci sceny
24

21
zapisywanie pliku
zapisywanie zestawu kolorw
informacje dodatkowe

2. projekt ukadu graficznego

ustawienia linii pomocniczych
rysowanie ta
tworzenie gradientu liniowego
edycja gradientu liniowego
tworzenie gradientu radialnego
tworzenie gradientu koowego
grafika wielokrotnego uytku
edycja symbolu
projektowanie przy uyciu warstw
przemieszczanie pomidzy warstwami

30
31
33
35
36
38
39
41
42
43

importowanie rysunkw
wektorowych
porzdkowanie symboli
przeksztacanie obiektw
importowanie obrazu
bitmapowego
dodawanie warstwy
maskujcej
informacje dodatkowe

60
62
64

44
45
46
47
48
49

51
zmiana atrybutw pola tekstowego
wstawianie cza typu e-mail
tworzenie tekstu ozdobnego

4. uycie listwy czasowej do organizacji witryny

tworzenie strony gwnej
dodawanie klatek
tworzenie klatek kluczowych

25
26
28

29

3. dodawanie i stylizowanie tekstu

wstawianie pojedynczego
wiersza tekstu
52
tekst o ustalonej szerokoci
54

13
19
20

dodawanie etykiet do klatek

sterowanie przebiegiem animacji
informacje dodatkowe

55
56
57

59
66
67
69


Flash_00.indd 5

23-09-2005 11:34:59

spis treci
5. tworzenie animacji
tworzenie animacji ruchu
odtwarzanie animacji we flashu
zoone animacje
kopiowanie i wklejanie klatek
stosowanie efektw listwy czasowej
przesuwanie animacji

72
74
75
78
79
87

71
wstrzymywanie odtwarzania animacji
wywietlanie podgldu filmu
sterowanie odtwarzaniem klipw
efekt pynnego przejcia
informacje dodatkowe

6. tworzenie mechanizmu nawigacji

tworzenie przyciskw
podgld dziaania przycisku
animowanie stanu przycisku
doczanie dwikw do przycisku
powielanie przyciskw

100
106
107
110
111

99
ukadanie przyciskw
tworzenie dziaw witryny
doczanie skryptw
zmiana dziaania przycisku
informacje dodatkowe

111
114
116
118
120

7. wypenianie dziaw witryn zawartoci

tworzenie filmw dziaw
tworzenie przewijanego tekstu
adowanie zewntrznych plikw
wczytywanie plikw tekstowych

122
123
127
130

8. publikowanie witryny
ustawienia pliku swf
optymalizacja rozmiaru plikw
pasek postpu wczytywania

88
90
91
93
97

121
cza do zewntrznych stron www
sterowanie pokazem slajdw
tworzenie paska postpu adowania
informacje dodatkowe

133
135
137
140

141

142
144
147

ustawienia html
150
przygotowanie plikw do przesania 153

skorowidz

155


Flash_00.indd 6

spis treci
23-09-2005 11:34:59

projekt
ukadu graficznego

Naszym pierwszym zadaniem w procesie tworzenia witryny bdzie wykonanie projektu ukadu graficznego, w ktrym bdziemy prezentowa jej zawarto. O ukadzie graficznym mona myle jak o aranacji scenografii w filmie: ustawienie ta,
zdefiniowanie rnych obszarw i jej oglne uatrakcyjnienie. Przy okazji nauczymy
si uywa wielu z podstawowych funkcji Flasha. Oto niektre czynnoci, ktre
omwimy:
Importowanie i przeksztacanie obrazw
wektorowych;

Zapisywanie obiektw wielokrotnego uytku, ktre

nosz nazw symboli, w celu uatwienia modyfikacji
sceny oraz uzyskania pliku projektu o mniejszej
objtoci;
Uycie do tworzenia prostoktw
i linii narzdzi sucych do rysowania;
Tworzenie i modyfikowanie wypenie specjalnych, na przykad
liniowych i radialnych gradientw;
Tworzenie warstw w celu uporzdkowania zawartoci projektu;
Importowanie bitmap i ich maskowanie.

29
Flash_02.indd 29

23-09-2005 11:36:32

ustawianie linii pomocniczych

Dziki liniom pomocniczym moemy zdefiniowa pewne obszary na scenie, a take
uatwi sobie ukadanie obiektw. Dodajmy kilka linii pomocniczych, zanim zaczniemy rysowa to.
1 Wybieramy polecenie Window\Design Panels\Info (okno\panele projektowania\
info) , aby wywietli panel Info (info).
2 Wybieramy polecenie View\Rulers
(widok\linijki), aby wczy wywietlanie
linijek wzdu lewej i grnej krawdzi
sceny.
3 Klikamy i przecigamy lini pomocnicz z poziomej (grnej) linijki. Obserwujemy panel Info gdy wsprzdna
y kursora bdzie wynosi 60, puszczamy
przycisk myszy. Przecigamy na scen
jeszcze dwie linie pomocnicze i ustawiamy je na pozycjach 80 i 250.

4 Upewniamy si, e opcja Snap to

Guides (przyciganie do linijek) jest wczona. Wybieramy polecenie View\Snapping (widok\przyciganie). W podmenu
sprawdzamy, czy opcja Snap to Guides
jest zaznaczona. Jeli nie, klikamy Snap
to Guides, aby j wczy.

30
Flash_02.indd 30

projekt ukadu graficznego

23-09-2005 11:36:33

rysowanie ta
Gdy scena zostaa podzielona na obszary, moemy rozpocz
rysowanie obiektw, ktre bd suy za to naszej witryny.
1 Z palety narzdzi wybieramy narzdzie do rysowania prostoktw Rectangle (prostokt).
2 Klikamy przycisk wyboru koloru obrysu.

3 Na palecie prbek kolorw klikamy przycisk

None (aden) znajdujcy si blisko prawej grnej
krawdzi palety.

4 Klikamy przycisk wyboru koloru wypenienia i wybieramy zdefiniowany przez nas

kolor zielony o redniej intensywnoci.

projekt ukadu graficznego

Flash_02.indd 31

31
23-09-2005 11:36:33

rysowanie ta
Ustawiamy kursor na lewej krawdzi sceny, nad lini pomocnicz umieszczon na pozycji 60.
Klikamy i przecigamy prostokt
do prawej krawdzi sceny oraz do
linii pomocniczej na pozycji 80.
1 Utworzony prostokt mona modyfikowa, jeli jego rozmiar lub pooenie nie do koca nam odpowiada. Z palety narzdzi wybieramy Selection
(zaznaczenie) i klikamy prostokt, aby go zaznaczy.

2 Na panelu Property Inspector (waciwoci) moemy zmienia wartoci

w polach tekstowych width (szeroko),
height (wysoko), x oraz y. Nasz prostokt powinien mie wymiary 78020
pikseli i by pooony w pozycji x = 0
oraz y = 60.

Upewniajc si, e prostokt jest nadal zaznaczony,

wybieramy polecenie Modify\Group (modyfikuj\grupuj)
(patrz Informacje dodatkowe na stronie 49).

32
Flash_02.indd 32

projekt ukadu graficznego

23-09-2005 11:36:33

tworzenie gradientu liniowego

W dalszej kolejnoci narysujemy kilka prostoktw tworzcych to i wypenimy je
gradientami. Dziki temu nasza scena zyska atrakcyjny wygld.
Z palety narzdzi wybieramy Rectangle (prostokt). Kolor obrysu ustawiamy na None
(aden), a wypenienia dowolnie zmienimy to za chwil.
Klikamy i rozcigamy prostokt z lewego grnego rogu
sceny (0,0) do grnej krawdzi prostokta w kolorze
rednio intensywnej zieleni
oraz prawej krawdzi sceny.

Na palecie Color Mixer (mikser kolorw)

rozwijamy menu wypenie Fill Style
(styl wypenienia) i wybieramy opcj
Linear (gradient liniowy).

1 Na panelu pojawi si nowy element sterujcy pasek definicji gradientu wraz ze

znajdujcymi si poniej wskanikami, ktre
okrelaj kady kolor wystpujcy w gradiencie. Klikamy wskanik na prawym kocu
paska.
2 Kolor przypisany do tego wskanika
pojawi si w okienku wyboru koloru po
lewej stronie menu Fill Style.

projekt ukadu graficznego

Flash_02.indd 33

33
23-09-2005 11:36:34

tworzenie gradientu liniowego

3 Klikamy przycisk wyboru koloru, aby otworzy palet prbek.
Wybieramy zdefiniowany wczeniej kolor jasnozielony.
4 Wskanik po lewej stronie
paska definiujcego gradient
powinien by ju ustawiony na
kolor biay. Jeli tak nie jest, zmieniamy go.
5 Wybieramy narzdzie Paint
Bucket (wiaderko z farb) i klikamy
jednolicie wypeniony prostokt,
ktry narysowalimy wczeniej.
6 Prostokt zostanie wypeniony biao-zielonym gradientem. Gradient nie
rozchodzi si w zamierzonym kierunku,
zatem zmienimy to w nastpnym kroku.

34
Flash_02.indd 34

projekt ukadu graficznego

23-09-2005 11:36:34

edycja gradientu liniowego

Wybieramy narzdzie Fill Transform
(przeksztacanie wypenienia) i klikamy prostokt, aby go zaznaczy.
Na ekranie pojawi si trzy uchwyty
edycyjne:
okrgy uchwyt sucy do zmiany pooenia rodka gradientu;
okrgy uchwyt do obracania wypenienia;
kwadratowy uchwyt do zmiany szerokoci wypenienia.
Klikamy i przecigamy kwadratowy uchwyt szerokoci wypenienia do rodka prostokta, do pooenia oddalonego od rodka o okoo 30 pikseli.
Klikamy i przecigamy okrgy uchwyt obrotu w d i do rodka, aby obrci wypenienie o 90 stopni. Naciskamy Shift, aby ograniczy obrt do wielokrotnoci 45 stopni.
Ustawiamy ponownie uchwyt szerokoci
gradientu, tak aby wypenia on cay
prostokt.
Klikamy i przecigamy uchwyt punktu
rodkowego nieznacznie w d, aby obniy
punkt przejcia i sprawi, eby wicej biaej
powierzchni znajdowao si w grnej czci
prostokta.
Zaznaczamy prostokt za pomoc narzdzia
Selection (zaznaczenie) i wybieramy polecenie Modify\Group (modyfikuj\grupuj).

projekt ukadu graficznego

Flash_02.indd 35

35
23-09-2005 11:36:34

tworzenie gradientu radialnego

Narysujmy teraz ostatni prostokt stanowicy to sceny.

Wybieramy narzdzie Rectangle

(prostokt).
Kolor obrysu ustawiamy na None
(aden).
Na palecie Color Mixer rozwijamy menu Fill Style i wybieramy pozycj Radial (gradient
radialny).
Klikamy wskanik koloru na prawym
kocu paska definicji gradientu. Wykorzystujc przycisk wyboru koloru,
wskazujemy zdefiniowany wczeniej
kolor jasnoamarantowy.

36
Flash_02.indd 36

projekt ukadu graficznego

23-09-2005 11:36:34

Teraz przesuwamy kursor do lewej

krawdzi sceny i do dolnej zielonego
prostokta (0;80). Klikamy i przecigamy
prostokt do dolnego prawego rogu
sceny.

Ponownie gradient, ktry stworzylimy, nie do koca spenia nasze oczekiwania.

Zmodyfikujmy go.
Aby wywietli wiksz cz powierzchni roboczej otaczajcej scen, wybieramy
polecenie View\Magnification\25% (widok\powikszenie\25%).
Wybieramy narzdzie Fill Transform i klikamy prostokt, aby go zaznaczy. Na ekranie
pojawi si cztery uchwyty edycyjne:

okrgy uchwyt sucy do zmiany pooenia

rodka gradientu;
kwadratowy uchwyt do zmiany szerokoci wypenienia;
okrgy uchwyt do zmiany promienia gradientu;
okrgy uchwyt do obracania wypenienia.

projekt ukadu graficznego

Flash_02.indd 37

37
23-09-2005 11:36:35

tworzenie gradientu koowego

Klikamy i przecigamy okrgy uchwyt punktu rodkowego do prawego dolnego rogu sceny.

Klikamy i przecigamy okrgy rodkowy uchwyt, rozszerzajc koo poza

grny lewy rg sceny.

Powracamy do powikszenia widoku, z jakim pracowalimy wczeniej.

Zaznaczamy prostokt i tworzymy grup (Modify\Group).

38
Flash_02.indd 38

projekt ukadu graficznego

23-09-2005 11:36:35

grafika wielokrotnego uytku

Poniewa utworzone przez nas to jest uywane we
wszystkich dziaach witryny, moemy go uy wielokrotnie. Aby to uczyni, musimy przeksztaci trzy narysowane prostokty w jeden symbol wielokrotnego uytku.
Jeli danego symbolu uyjemy na scenie, nosi on nazw
instancji (patrz Informacje dodatkowe na stronie 49).
Aby zaznaczy trzy prostokty, wybieramy polecenie
Edit\Select All (edycja\zaznacz wszystko) lub naciskamy
kombinacj przyciskw Ctrl+A (Windows) lub Cmd+A
(Mac OS).
Wybieramy polecenie Modify\Convert to Symbol (modyfikuj\przekszta w symbol) lub naciskamy F8.

W oknie dialogowym
Convert to Symbol
(przekszta na symbol) dla tworzonego
symbolu wprowadzamy nazw background .

Jako typ obiektu (Behavior) wybieramy

Graphic (grafika) i klikamy przycisk OK .

projekt ukadu graficznego

Flash_02.indd 39

39
23-09-2005 11:36:35

grafika wielokrotnego uytku

Otwieramy bibliotek projektu (panel

Library). Naley zwrci uwag na to,
e zosta do niej dodany nowoutworzony symbol o nazwie background.

Zauwamy take, e na panelu Property Inspector pojawiy si nowe

elementy sterujce, dotyczce instancji symbolu.

40
Flash_02.indd 40

projekt ukadu graficznego

23-09-2005 11:36:36

edycja symbolu
Dokonajmy edycji symbolu, aby doda
lini (patrz Informacje dodatkowe
na stronie 50).
Klikamy dwukrotnie symbol, aby przej do
trybu jego edycji. Nad scen, na pasku Info
pojawi si informacja, jaki element aktualnie
edytujemy.
1 Z palety narzdzi wybieramy Line (linia).
2 Na panelu Property Inspector klikamy
przycisk wyboru koloru linii i wybieramy
ciemny amarant.

3 W polu Stroke Height (grubo obrysu)

wprowadzamy warto 3.
4 Jako typ linii Stroke Style (styl obrysu) wybieramy Solid (linia jednolita).
5 Klikamy i rozcigamy lini od lewej do prawej krawdzi sceny wzdu linii
pomocniczej, ktr umiecilimy w pooeniu 520.
Naciskamy kombinacj przyciskw Ctrl+;
(Windows) lub Cmd +; (Mac OS), aby ukry linie
pomocnicze.
Wydawa by si mogo, e linii nie ma, ale ona
tylko ukrya si pod prostoktem wypenionym amarantowym gradientem. Poprawimy to
w nastpnej sekcji.

projekt ukadu graficznego

Flash_02.indd 41

41
23-09-2005 11:36:36

projektowanie przy uyciu warstw

Warstwy, jak wspominalimy wczeniej, su do porzdkowania projektu. Specyfikuj one kolejno uoenia obiektw na paskiej scenie. Utworzymy teraz now warstw umieszczon nad warstw biec i przeniesiemy na ni zasonit lini.
Najpierw zmiemy nazw biecej warstwy, tak aby odzwierciedli jej zawarto.
Jeli listwa czasowa nie jest widoczna, wybieramy polecenie Window\
Timeline (okno\listwa czasowa).
W kolumnie Layers (warstwy) klikamy dwukrotnie napis Layer 1,
aby go zaznaczy. Wprowadzamy nazw bkgd rects i naciskamy Enter.

1 Klikamy przycisk Insert Layer (wstaw

warstw) znajdujcy si na dole kolumny
Layers (warstwy). Na licie warstw pojawi
si nowa o nazwie Layer 2.

2 Klikamy dwukrotnie nazw tej warstwy i zmieniamy

j na line & logo.

42
Flash_02.indd 42

projekt ukadu graficznego

23-09-2005 11:36:36

przemieszczanie pomidzy warstwami

Przemieszczanie obiektw z warstwy na warstw dziaa we Flashu inaczej ni
w wikszoci programw rysunkowych. Przedstawimy teraz sposb wykonywania
tej czynnoci.
Za pomoc narzdzia Selection klikamy powierzchni robocz po lewej stronie sceny
i rozcigamy obszar zaznaczenia nad powierzchni, na ktrej znajduje si zasonita
linia. Wczamy wywietlanie linii pomocniczych (View\Guides\Show Guides), jeli
chcemy zobaczy, gdzie znajduje si linia.

Chocia nadal nie wida linii, wiemy,

e zostaa zaznaczona, poniewa
zmienia si zawarto panelu Property Inspector.
Wybieramy polecenie Edit\Cut (edycja\
wytnij), aby przenie lini z warstwy
bkgd rects do schowka.
Na listwie czasowej klikamy warstw
line & logo, aby j aktywowa.

Wybieramy polecenie Edit\Paste in Place

(edycja\wklej w tym samym miejscu),
aby wklei lini dokadnie w tym samym
miejscu, ale na innej warstwie.
W kocu widzimy nasz lini. Kosztowao nas to sporo pracy,
ale czy nie jest ona pikna?

projekt ukadu graficznego

Flash_02.indd 43

43
23-09-2005 11:36:37

importowanie rysunkw wektorowych

Czasami do filmu musimy doda element graficzny, ktry zosta stworzony w innej
aplikacji lub zapisany w innym formacie. W tej sekcji do projektu zaimportujemy logo
zapisane w formacie Macromedia Fireworks PNG, zawierajce elementy wektorowe
(edytowalne cieki) oraz bitmapowe (zdjcia).
Wybieramy polecenie File\Import\Import
to Library (plik\importuj\importuj do
biblioteki), aby wstawi logo do filmu jako
symbol.
W oknie dialogowym Import to Library (importuj do biblioteki) szukamy plikw t_blooms oraz logo_small.png, ktre cignlimy z witryny towarzyszcej tej ksiki i skopiowalimy do folderu development_files. Wybieramy plik
i klikamy przycisk Open (otwrz) (Windows) lub Import to Library (Mac OS).
W oknie dialogowym Fireworks PNG Import
Settings (opcje importu formatu Fireworks
PNG), ktre pojawi si na ekranie, ustawiamy
nastpujce opcje:
File Structure (struktura pliku): Import as movie clip and retain layers (importuj jako film
i zachowaj warstwy);
Objects (obiekty): Keep all paths editable
(zachowaj edycyjno cieek);
Text (tekst): Obie opcje s akceptowalne
w tym przypadku, poniewa tekst w logo
zosta przeksztacony w cieki wektorowe,
aby unikn problemw z czcionkami.
Nie zaznaczamy opcji Import as a single
flattened bitmap (importuj jako spaszczon
bitmap).

44
Flash_02.indd 44

Klikamy przycisk OK, aby

zamkn okno dialogowe
PNG Import Settings. Logo
znajduje si teraz w bibliotece.

projekt ukadu graficznego

23-09-2005 11:36:37

porzdkowanie symboli
Jeli panel Library (biblioteka) projektu Czytelnika nie jest widoczny, naley wybra
polecenie Window\Library. Na panelu Library uka si trzy nowe pozycje dwie
bitmapy (ktre znajdoway si w pliku z logo) oraz folder od nazwie Fireworks Objects
(obiekty Fireworks) zawierajcy symbol z logo. Powimy chwil na uporzdkowanie naszych symboli, co pozwoli nam zaoszczdzi czas i unikn pniej problemu.

Klikamy dwukrotnie nazw folderu i zaznaczamy tekst Fireworks

Objects . Wprowadzamy nazw t_blooms logo i naciskamy
Enter.
Klikamy dwukrotnie najpierw ikon
folderu, aby wywietli jego zawarto,
a potem nazw symbolu, aby go zaznaczy. Wprowadzamy nazw logo
i naciskamy Enter.

Przytrzymujemy przycisk Shift i klikamy dwa symbole bitmapowe na panelu Library, aby je zaznaczy. Klikamy i przecigamy
je do folderu t_blooms logo. Klikamy dwukrotnie ikon folderu
t_blooms logo, aby zwin jego zawarto.
Klikamy przycisk New Folder (nowy
folder) znajdujcy si na dole panelu
Library, aby doda do listy nowy folder,
ktry nazwiemy bkgd objects. Przecigamy do niego pozostae obiekty z listy.

projekt ukadu graficznego

Flash_02.indd 45

45
23-09-2005 11:36:37

przeksztaacanie obiektw
Na obiektach na scenie, rwnie na symbolach, mona stosowa rne przeksztacenia. Przeksztace takich jak skalowanie, obracanie i pochylanie dokonujemy za
pomoc narzdzia Free Transform (swobodne przeksztaceni) (patrz Informacje
dodatkowe na stronie 50).
Naley si upewni, e nadal znajdujemy si wewntrz symbolu background.
Jeli jest inaczej, klikamy dwukrotnie ten
symbol na scenie, aby przej do trybu
jego edycji. Klikamy warstw line & logo,
aby j aktywowa na listwie czasowej.

Na panelu Library przechodzimy do

symbolu, ktry nazwalimy logo. Klikamy go i przecigamy na scen w okolice
lewego grnego rogu.
Logo jest troch wiksze, ni dyktuj to nasze potrzeby, dlatego przeskalujemy je. Upewniajc si, e
instancja obiektu jest zaznaczony, wybieramy narzdzie Free Transform. Wok obiektu pojawi si osiem
uchwytw przeksztacenia.
Naciskamy i przytrzymujemy kombinacj przyciskw Alt+Shift (Windows) lub
Option+Shift (Mac OS), a nastpnie przecigamy prawy dolny uchwyt w kierunku
rodka obiektu. Puszczamy przycisk myszy, gdy napis Floral Preservation znajdzie si
nad grn krawdzi jednorodnego zielonego paska.
Wybieramy narzdzie Selection, aby zatwierdzi przeksztacenie.

46
Flash_02.indd 46

projekt ukadu graficznego

23-09-2005 11:36:38

importowanie obrazu bitmapowego

Gdy ju umiecimy i przeskalujemy logo, przejdziemy do zbalansowania kompozycji
poprzez umieszczenie obrazu w prawym dolnym rogu sceny. Na listwie czasowej
dodajemy now warstw w symbolu background.

Nowej warstwie nadajemy nazw

bouquet.

Wybieramy polecenie File\Import\

Import to Stage (plik\importuj\importuj na scen). W oknie dialogowym Import (import) przechodzimy do folderu development_files.
Wskazujemy plik bouquet.png
i klikamy przycisk Open.

Zdjcie bukietu zostanie umieszczone

na scenie. Przecigamy je do dolnego
prawego rogu, tak aby na scenie pozostawaa niewiele ponad jedna czwarta
bukietu.

projekt ukadu graficznego

Flash_02.indd 47

47
23-09-2005 11:36:38

dodawanie warstwy maskujcej

Wystajce ze sceny zdjcie bukietu nie wpynie na wygld wyeksportowanego filmu,
ale przeszkadza nam podczas tworzenia witryny. W celu ukrycia niepotrzebnych
fragmentw obrazu uyjemy warstwy maskujcej.
Dodajemy now warstw i nazywamy j
bouquet_mask.
Wybieramy narzdzie Rectangle. Zaczynajc
przy prawej krawdzi nad obrazem, rozcigamy prostokt tak, aby przykry ca scen.

Klikamy prawym przyciskiem myszy

(Windows) lub lewym z przytrzymaniem klawisza Ctrl (Mac OS) warstw
bouquet_mask i z menu kontekstowego
wybieramy polecenie Mask (maska).

Wystajcy ze sceny fragment obrazu nie

bdzie ju widoczny.
Skoczylimy to, nadszed czas na dodanie tekstu. Zapisujemy plik.

48
Flash_02.indd 48

projekt ukadu graficznego

23-09-2005 11:36:38

informacje dodatkowe
rysowanie ta str. 32
We Flashu, gdy na jednej warstwie
jeden obiekt nachodzi na drugi,
przykryta cz tego, ktry znajduje si pod spodem, jest usuwana.
Sprawia to, e dokonywanie modyfikacji obiektw, na przykad ich
podsuwanie, staje si koszmarem.
Aby unikn zwizanych z tym
problemw, moemy tworzy nowe
warstwy dla kadego generowanego obiektu lub grupowa obiekty
zaraz po ich narysowaniu. Ja osobicie wol grupowanie.

projekt ukadu graficznego

Flash_02.indd 49

grafika wielokrotnego uytku

str. 39

Uywanie symboli we Flashu ma

dwie zalety zmniejszenie rozmiaru pliku wynikowego oraz atwo
edycji projektu. Gdy utworzymy
symbol i umiecimy jego instancje
na scenie, rozmiar pliku wynikowego nie zwiksza si, poniewa
niezalenie od liczby instancji kod
opisujcy dany symbol wystpuje
w pliku wynikowym tylko raz.
Kada instancja stanowi jedynie odwoanie do symbolu oraz opis jego
przeksztace, na przykad zmiany
przeroczystoci lub wymiarw na
paszczynie.
Pniejsze modyfikacje projektu
zawierajcego symbole s take
atwiejsze. Wyobramy sobie, e rozoylimy na scenie 100 niebieskich
kwadracikw (ale nie bdcych
instancjami adnego symbolu),
a nastpnie zdecydowalimy si
zmieni ich kolor. Musimy znale
100 kwadratw i zmieni kolor ich
wszystkich. Ale jeli utworzylibymy
symbol niebieskiego kwadracika
i umiecilibymy na scenie 100
jego instancji, musielibymy jedynie zmodyfikowa ten symbol
wszystkie instancje zostayby
zaktualizowane automatycznie.

49
23-09-2005 11:36:39

informacje dodatkowe
edycja symbolu str. 41
Gdy na scenie znajduje si obiekt,
ktry jest kontenerem zawierajcym inne obiekty (grupy, symbole
i pola tekstowe), moemy go klikn
dwukrotnie, aby modyfikowa jego
zawarto.
Aby opuci tryb edycji kontenera,
musimy dwukrotnie klikn poza
jego obszarem.
Czasami, gdy we Flashu narysujemy lini, zostaje ona umieszczona
pod innymi obiektami, a nie na ich
wierzchu, jak mona by si tego
spodziewa. Negujc obowizujc
w programie konwencj, e nowy
obiekt umieszczany jest nad ju
istniejcymi na tej samej warstwie,
Flash ukada linie w oparciu o tajemniczy algorytm, ktry mogli wymyli jedynie programici bierze
on pod uwag kolor linii.
Aby linia pojawia si tam, gdzie
chcemy, moemy wykona dwie
czynnoci zgrupowa j, co spowoduje jej przeniesienie na wierzch
stosu, lub przesun j na wysz
warstw.

50
Flash_02.indd 50

przeksztacanie obiektw
str. 46

Gdy skalujemy elementy wektorowe (zarwno te narysowane we

Flashu, jak i zaimportowane na
przykad plik z logo), moemy je powiksza i zmniejsza bez adnych
negatywnych konsekwencji. Jeli
jednak przeksztacamy obraz bitmapowy, powinnimy unika jego
powikszania. Powikszona bitmapa musi by ponownie prbkowana
i moe sta si znieksztacona lub
rozmyta. Najlepiej jest otworzy
dany obraz w programie do obrbki
obrazw typu Adobe Photoshop
lub Macromedia Fireworks i przeskalowa go w nim zalenie od
potrzeb.

projekt ukadu graficznego

23-09-2005 11:36:39