IDZ DO

PRZYKADOWY ROZDZIA
SPIS TRECI

KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG

Tworzenie stron WWW

we Flashu 8. Projekty
Autor: David Morris
Tumaczenie: Aleksander Lama
ISBN: 83-246-0367-0
Tytu oryginau: Creating a Web Site
with Flash 8: 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

Macromedia Flash to obecnie jedna z najpopularniejszych aplikacji do tworzenia

interaktywnych witryn WWW i prezentacji multimedialnych. Jej moliwoci pozwalaj
na oywienie serwisw WWW przy uyciu wektorowych animacji i efektownych
mechanizmw nawigacyjnych. Jednak Flash to nie tylko narzdzie animacyjne.
Umoliwia on take obrbk cyfrowego wideo oraz dwiku, a wbudowany jzyk
programowania ActionScript pozwala na niemal dowolne manipulacje obiektami
skadajcymi si na prezentacj.
Ksika Tworzenie stron WWW we Flashu 8. Projekty to ilustrowany przewodnik
opisujcy podstawowe moliwoci programu Macromedia Flash 8. Zawiera sekwencj
czynnoci prowadzcych do utworzenia interaktywnej witryny WWW za pomoc
Flasha. Nie znajdziesz tu jednak rozbudowanych opisw narzdzi i ich parametrw.
Sposb realizacji kadego zadania przedstawiony jest w postaci zrzutw ekranu
i zwizych opisw. Taka prezentacja materiau pozwoli Ci szybko zrealizowa swj
pierwszy projekt we Flashu.
Interfejs uytkownika
Zdefiniowanie parametrw projektu
Tworzenie ukadu graficznego za pomoc narzdzi rysunkowych
Definiowanie i stosowanie symboli
Umieszczanie w prezentacji elementw tekstowych
Korzystanie z listwy czasowej
Tworzenie animacji i mechanizmw nawigacyjnych
adowanie danych z zewntrznych plikw
Publikacja witryny na serwerze

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

Przeczytawszy t ksik, przekonasz si,

jak ogromne moliwoci oferuje Ci Macromedia Flash

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

25
26
28

22
23
24

zapisywanie pliku
zapisywanie zestawu kolorw
informacje dodatkowe

2. projektowanie ukadu graficznego

ustawianie linii pomocniczych
rysowanie ta
tworzenie gradientu liniowego
edytowanie gradientu liniowego
tworzenie gradientw radialnych
grafika wielokrotnego uytku
edytowanie symbolu
importowanie rysunkw wektorowych

30
31
33
35
36
39
41
42

29
porzdkowanie symboli
przeksztacanie obiektw
porzdkowanie projektu
przy uyciu warstw
przemieszczanie pomidzy warstwami
importowanie bitmap
dodawanie warstwy maskujcej
informacje dodatkowe

3. dodawanie i stylizowanie tekstu

wstawianie pojedynczego
wiersza tekstu
tekst o ustalonej szerokoci

45
46
47
48
49

51
52
54

zmiana atrybutw pola tekstowego

wstawianie cza typu e-mail
tworzenie tekstu ozdobnego

4. wykorzystanie listwy czasowej do organizacji witryny

tworzenie strony gwnej
dodawanie klatek
wstawianie klatek kluczowych

43
44

60
62
64

dodawanie etykiet do klatek

sterowanie listw czasow
informacje dodatkowe

55
56
57

59
66
67
69


TWWF8_00.indd 5

2006-12-22 10:00:02

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

71
72
74
75
78
79
87

wstrzymywanie odtwarzania animacji

wywietlanie podgldu filmu
sterowanie odtwarzaniem
klipw filmowych
dodawanie efektu przejcia
informacje dodatkowe

6. tworzenie mechanizmw nawigacji

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

100
106
107
110
111

88
90
91
93
97

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

113
114
116
118
120

7. wypenianie dziaw witryny zawartoci

121

tworzenie osobnych filmw

tworzenie przewijanego tekstu
adowanie zewntrznych filmw
adowanie zewntrznego tekstu

133
135
137
140

122
123
127
130

cza do zewntrznych stron www

sterowanie pokazem slajdw
tworzenie paska postpu adowania
informacje dodatkowe

8. publikowanie witryny
ustawienia pliku swf
optymalizowanie rozmiaru plikw
tworzenie filmu adujcego

skorowidz


TWWF8_00.indd 6

141
142
144
147

ustawienia html
przygotowanie plikw
do przesania na serwer

150
153

155

spis treci
2006-12-22 10:00:02

projektowanie
ukadu graficznego

Naszym pierwszym zadaniem w procesie tworzenia witryny bdzie wykonanie pro

jektu ukadu graficznego, w ktrym bdziemy prezentowa jej zawarto. O ukadzie
graficznym mona myle jak o aranacji scenografii w filmie musimy zatem usta
wi to, zdefiniowa rne obszary i uatrakcyjni wygld. Przy okazji nauczymy si
uywa wielu podstawowych funkcji Flasha. Poniej wyszczeglniono kilka czynno
ci, ktre omwimy.
Importowanie i prze
ksztacanie obrazw
wektorowych;

Zapisywanie obiektw wielokrotnego uytku, nazywa

nych symbolami, w celu uatwienia modyfikacji sceny
oraz uzyskania pliku filmu o mniejszym rozmiarze.
Uywanie narzdzi rysujcych
do tworzenia prostoktw i linii.
Tworzenie i modyfikowanie spe
cjalnych wypenie, takich jak
liniowe i radialne gradienty.
Tworzenie warstw w celu uporzd
kowania zawartoci projektu.
Importowanie bitmap i ich masko
wanie.

29
TWWF8_02.indd 29

2006-12-20 12:17:19

ustawianie linii pomocniczych

Dziki liniom pomocniczym moemy w prosty sposb definiowa obszary na scenie,
a take uatwi sobie ukadanie obiektw. Zanim zaczniemy rysowa to, dodamy
kilka linii pomocniczych.
1 Aby wywietli panel Info (informacje), z menu Window (okno) wybierz
pozycj Info.
2 Aby wczy wywietlanie linijek
wzdu lewej i grnej krawdzi sceny,
z menu View (widok) wybierz pozycj
Rulers (linijki).
3 Wcinij przycisk myszy i przecignij
lini pomocnicz z poziomej (grnej)
linijki. Obserwuj panel Info gdy
wsprzdna Y wskanika myszy b
dzie wynosia 60, pu przycisk myszy.
Przecignij na scen jeszcze dwie linie
pomocnicze i ustaw je na pozycjach 80
i 520.
4 Upewnij si, e opcja Snap to Guides
(przyciganie do linii pomocniczych)
jest wczona. Z menu View (widok) wy
bierz pozycj Snapping (przyciganie).
W podmenu sprawd, czy opcja Snap to
Guides jest zaznaczona. Jeli nie, kliknij
Snap to Guides, aby j wczy.

30
TWWF8_02.indd 30

projektowanie ukadu graficznego

2006-12-20 12:17:20

rysowanie ta
Gdy scena zostaa podzielona na obszary, moemy rozpocz
rysowanie obiektw, ktre bd suy za to naszej witryny.
1 Z przybornika wybierz narzdzie
Rectangle (prostokt).
2 Kliknij przycisk Stroke color
(kolor obrysu).
3 W okienku palety kolorw kliknij przy
cisk No color (brak koloru) znajdujcy si
blisko prawego grnego rogu okienka.

4 Kliknij przycisk Fill color (kolor wype

nienia) i wybierz zdefiniowany wczeniej
zielony kolor o redniej intensywnoci.

projektowanie ukadu graficznego

TWWF8_02.indd 31

31
2006-12-20 12:17:20

rysowanie ta cd.

Wcz opcj Object Drawing

(rysowanie obiektw).

Ustaw kursor na lewej krawdzi

sceny, nad lini pomocnicz umiesz
czon w pozycji 60. Wcinij przycisk
myszy i przecignij prostokt do
prawej krawdzi sceny oraz do linii
pomocniczej na pozycji 80.
1 Utworzony prostokt moesz modyfikowa, jeli jego rozmiar lub pooenie nie
do koca Ci odpowiadaj. Jeeli prostokt nie jest zaznaczony, wybierz z przybornika
narzdzie Selection (zaznaczanie) i kliknij prostokt, aby go zaznaczy.

2 W panelu Properties (waciwoci)

moesz zmienia wartoci w polach
tekstowych W (szeroko), H (wysoko),
X (wsprzdna X) oraz Y (wsprzd
na Y). Nasz prostokt powinien mie
wymiary 780 20 pikseli i by umiesz
czony w pozycji X = 0 oraz Y = 60.

32
TWWF8_02.indd 32

projektowanie ukadu graficznego

2006-12-20 12:17:20

tworzenie gradientu liniowego

Nastpnie narysujemy kilka prostoktw tworzcych to i wypenimy je gradientami.
Dziki temu scena zyska atrakcyjny wygld.
Z przybornika wybierz narzdzie Rectangle. Ustaw brak koloru (No color) obrysu
i dowolny kolor wypenienia zmienimy to za chwil.
Wcinij przycisk myszy
i rozcignij prostokt
z lewego grnego rogu
sceny (0, 0) do grnej
krawdzi prostokta
w kolorze rednio inten
sywnej zieleni oraz do
prawej krawdzi sceny.
Jeeli prostokt nie jest zaznaczony, z przybornika wybierz narzdzie Selection
i kliknij prostokt, aby go zaznaczy.

W panelu Color Mixer (mikser kolorw)

rozwi menu Type (typ wypenienia)
i wybierz opcj Linear (gradient liniowy).
Wypenienie prostokta zmieni si w wy
penienie gradientowe.

projektowanie ukadu graficznego

TWWF8_02.indd 33

33
2006-12-20 12:17:20

tworzenie gradientu liniowego cd.

1 Na panelu pojawi si nowy ele

ment sterujcy pasek definicji
gradientu wraz ze znajdujcymi si
poniej wskanikami, ktre okrelaj
kady kolor wystpujcy w gradien
cie. Po podwjnym klikniciu wska
nika na prawym kocu paska definiu
jcego gradient otworzy si okienko
palety kolorw. Wybierz wczeniej
zdefiniowany jasnozielony kolor.

2 Kliknij dwukrotnie wskanik z lewej strony paska definiuj

cego gradient i wybierz kolor biay.
3 Prostokt jest teraz wypeniony gradientem przechodzcym
od koloru biaego do zielonego. Gradient nie jest jednak usta
wiony w odpowiednim kierunku, wic teraz to zmienimy.

34
TWWF8_02.indd 34

projektowanie ukadu graficznego

2006-12-20 12:17:20

edytowanie gradientu liniowego

Wybierz narzdzie Gradient Transform

(przeksztacanie gradientu) i kliknij
prostokt, aby go zaznaczy.
Na ekranie pojawi si trzy uchwyty
edycyjne:
okrgy uchwyt sucy do zmiany
pooenia rodka gradientu
okrgy uchwyt z grotem strzaki
do obracania wypenienia
kwadratowy uchwyt ze strzak
do zmiany szerokoci wypenienia
Wcinij lewy przycisk myszy i przecignij kwadratowy
uchwyt szerokoci wypenienia do rodka prostokta,
do pooenia oddalonego od rodka o okoo 30 pikseli.
Wcinij lewy przycisk myszy i przecig
nij okrgy uchwyt obrotu w d i do
rodka, aby obrci wypenienie o 90.
Wcinij klawisz Shift, aby ograniczy kt
obrotu do wielokrotnoci 45.
Dopasuj ustawienie uchwytu szerokoci
gradientu, tak aby wypenienie pasowa
o do wysokoci prostokta.
Kliknij i przecignij uchwyt punktu
rodkowego nieznacznie w d, aby
obniy punkt przejcia i sprawi, eby
wicej biaej powierzchni znajdowao
si w grnej czci prostokta.

projektowanie ukadu graficznego

TWWF8_02.indd 35

35
2006-12-20 12:17:20

tworzenie gradientw radialnych

Narysujmy teraz ostatni prostokt stanowicy to sceny.

1 Wybierz narzdzie Rectangle

(prostokt).

2 Kolor obrysu ustaw na No color

(brak koloru).
3 Na palecie Color Mixer
rozwi menu Type i wybierz
pozycj Radial (gradient
radialny).
4 Upewnij si, e opcja Object Drawing
(rysowanie obiektw) jest zaznaczona.

Dwukrotnie kliknij wskanik koloru na

prawym kocu paska definicji gradientu
i wybierz wczeniej zdefiniowany kolor
jasnoamarantowy.

36
TWWF8_02.indd 36

projektowanie ukadu graficznego

2006-12-20 12:17:21

Teraz przesu kursor do lewej krawdzi

sceny i do dolnej zielonego prostokta
(0, 80). Wcinij przycisk myszy i przecig
nij 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, wybierz pozy
cj 25% z menu View/Magnification (widok/powikszenie).
Wybierz narzdzie Gradient Transform i kliknij prostokt, aby go zaznaczy. Na ekra
nie pojawi si cztery uchwyty edycyjne:
okrgy uchtrjktny uchwyt sucy
do zmiany pooenia centralnego punktu
gradientu;
okrgy uchwyt do zmiany pooenia rodka
gradientu;
kwadratowy uchwyt ze strzak do zmiany
szerokoci wypenienia;
okrgy uchwyt ze strzak do zmiany pro
mienia gradientu;
okrgy uchwyt z grotem strzaki do obraca
nia wypenienia.

projektowanie ukadu graficznego

TWWF8_02.indd 37

37
2006-12-20 12:17:21

tworzenie gradientw radialnych cd.

Wcinij przycisk myszy i przecignij okrgy

uchwyt punktu rodkowego do prawego dolnego
rogu sceny.

Wcinij przycisk myszy i prze

cignij okrgy uchwyt ze strza
k, rozszerzajc koo poza grny
lewy rg sceny.

Powracamy do powikszenia widoku, z jakim pracowalimy wczeniej.

38
TWWF8_02.indd 38

projektowanie ukadu graficznego

2006-12-20 12:17:21

grafika wielokrotnego uytku

Poniewa utworzone przez nas to jest uywane we
wszystkich dziaach witryny, moemy je zastosowa
wielokrotnie. Aby to zrobi, musimy przeksztaci trzy
narysowane prostokty w jeden symbol wielokrotnego
uytku. Kiedy dany symbol jest wykorzystywany na sce
nie, nosi nazw instancji (patrz: Informacje dodatkowe
na stronie 49).
Aby zaznaczy trzy prostokty, z menu Edit (edycja) wy
bierz polecenie Select All (zaznacz wszystko) lub wcinij
kombinacj klawiszy Ctrl+A (Cmd+A w Mac OS).
Z menu Modify (modyfikuj) wybierz polecenie Convert to
Symbol (przekszta w symbol) lub wcinij klawisz F8.

W oknie dialogowym
Convert to Symbol
(przekszta w sym
bol) dla tworzonego
symbolu wprowad
nazw background.

Jako typ obiektu (Type) wybierz Graphic

(grafika) i kliknij przycisk OK.

projektowanie ukadu graficznego

TWWF8_02.indd 39

39
2006-12-20 12:17:21

grafika wielokrotnego uytku cd.

Otwrz bibliotek (pozycja Library

z menu Window), a zobaczysz, e zosta
do niej dodany nowo utworzony sym
bol o nazwie background.

Zauwa te, e w panelu Properties pojawiy si nowe elementy

sterujce, dotyczce instancji symbolu.

40
TWWF8_02.indd 40

projektowanie ukadu graficznego

2006-12-20 12:17:21

edytowanie symbolu
Dokonajmy edycji symbolu, aby doda
lini (patrz: Informacje dodatkowe na
stronie 49).
Dwukrotnie kliknij symbol, aby przej
do trybu jego edycji. Nad scen, na pasku
Info, pojawi si informacja, jaki element
aktualnie jest edytowany.
1 Z przybornika wybierz narzdzie Line
(linia). Upewnij si, e opcja Object Drawing (rysowanie obiektw) jest wczona.
2 W panelu Properties kliknij przycisk
wyboru koloru linii i wybierz ciemny
amarant.

3 W polu Stroke height (grubo obrysu) wprowad warto 3.

4 Jako typ linii Stroke style (styl obrysu) wybierz Solid (linia ciga).
5 Wcinij przycisk myszy i przecignij lini od lewej do prawej krawdzi sceny
wzdu linii pomocniczej, ktr umiecie w pooeniu 520.

projektowanie ukadu graficznego

TWWF8_02.indd 41

41
2006-12-20 12:17:21

importowanie rysunkw wektorowych

Czasami do filmu musimy doda element graficzny, ktry zosta stworzony w innej
aplikacji lub zapisany w innym formacie. W tej czci do projektu zaimportujemy
logo zapisane w formacie Macromedia Fireworks PNG, zawierajce elementy wekto
rowe (edytowalne cieki) oraz bitmapowe (zdjcia).
Z menu File/Import (plik/importuj)
wybierz polecenie Import to Library
(importuj do biblioteki), aby wstawi
logo do filmu jako symbol.
W oknie dialogowym Import to Library (importuj do biblioteki) znajd plik t_blooms
logo_small.png, ktry pobrae z witryny towarzyszcej tej ksiki i skopiowae do
folderu development_files. Wybierz plik i kliknij przycisk Open (otwrz) (Import to
Library w Mac OS).
W oknie dialogowym Fireworks PNG
Import Settings (opcje importu forma
tu Fireworks PNG), ktre pojawi si na
ekranie, ustaw 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 moliwo edycji cieek).
Text (tekst): obie opcje bd w tym przy
padku dobrze dziaay, poniewa tekst
w logo zosta przeksztacony w cieki
wektorowe, aby unikn problemw
z czcionkami.
Nie zaznaczaj opcji Import as a single
flattened bitmap (importuj jako spasz
czon bitmap).

42
TWWF8_02.indd 42

Kliknij przycisk OK, aby zamkn

okno dialogowe PNG Import
Settings. Logo zostao dodane
do biblioteki.

projektowanie ukadu graficznego

2006-12-20 12:17:21

porzdkowanie symboli
W panelu Library uka si trzy nowe pozycje dwie bitmapy (ktre znajdoway si
w pliku z logo) oraz folder o nazwie Fireworks Objects (obiekty Fireworks) zawieraj
cy symbol z logo. Powimy chwil na uporzdkowanie symboli, co pozwoli nam
zaoszczdzi czas i unikn pniej problemw.

Dwukrotnie kliknij nazw folderu i zaznacz tekst

Fireworks Objects. Wprowad nazw t_blooms logo
i wcinij klawisz Enter.
Dwukrotnie kliknij naj
pierw ikon folderu, aby
wywietli jego zawarto,
a potem nazw symbolu,
aby go zaznaczy. Wpro
wad nazw logo i wcinij
klawisz Enter.

Przytrzymaj klawisz Shift i kliknij dwa symbole bitmapo

we w panelu Library, aby je zaznaczy. Wcinij przycisk
myszy i przecignij je do folderu t_blooms logo. Dwukrot
nie kliknij ikon folderu t_blooms logo, aby ukry jego
zawarto.
Kliknij przycisk New Folder
(nowy folder) znajdujcy
si na dole panelu Library,
aby doda do listy nowy
folder, ktremu nadasz na
zw bkgd objects. Prze
cignij do niego symbol ta
o nazwie background.

projektowanie ukadu graficznego

TWWF8_02.indd 43

43
2006-12-20 12:17:22

przeksztacanie obiektw
Obiekty na scenie, a nawet symbole, mona w rny sposb przeksztaca.
Przeksztace takich jak skalowanie, obracanie i pochylanie dokonujemy za pomoc
narzdzia Free Transform (swobodne przeksztacenie) (patrz: Informacje dodatkowe
na stronie 50).

W panelu Library przejd do symbolu,

ktry nazwae logo. Kliknij go i prze
cignij na scen w okolice lewego
grnego rogu.

Logo jest troch wiksze, ni dyktu

j to potrzeby, dlatego przeskaluj je.
Upewniajc si, e instancja obiektu
jest zaznaczona, wybierz narzdzie Free
Transform. Wok obiektu pojawi si
osiem uchwytw przeksztacenia.
Wcinij i przytrzymaj kombinacj klawi
szy Alt+Shift (Option+Shift w Mac OS).
Wcinij przycisk myszy i przecignij
prawy dolny uchwyt przeksztacenia
w kierunku rodka instancji symbolu
logo. Zwolnij przycisk myszy, gdy napis
Floral Preservation znajdzie si nad gr
n krawdzi jednorodnego zielonego
paska.
Wybierz narzdzie Selection, aby zatwier
dzi przeksztacenie.

44
TWWF8_02.indd 44

projektowanie ukadu graficznego

2006-12-20 12:17:22

porzdkowanie projektu przy uyciu warstw

Warstwy, jak wspominalimy wczeniej, su do porzdkowania projektu.
Kontroluj one kolejno uoenia obiektw na listwie czasowej. Utworzymy teraz
now warstw umieszczon nad biec i przeniesiemy na ni logo.
Najpierw zmiemy nazw biecej warstwy, tak aby odzwierciedli jej zawarto.
Jeli listwa czasowa nie jest widoczna,
kliknij przycisk Timeline (listwa czaso
wa) znajdujcy si na pasku edycji lub
z menu Window (okno) wybierz pozycj
Timeline. W kolumnie Layers (warstwy)
dwukrotnie kliknij napis Layer 1, aby go
zaznaczy. Wprowad nazw
background i wcinij klawisz Enter.

1 Kliknij przycisk Insert Layer (wstaw warstw)

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

2 Dwukrotnie kliknij nazw

tej warstwy i zmie j na
logo.

projektowanie ukadu graficznego

TWWF8_02.indd 45

45
2006-12-20 12:17:22

przemieszczanie pomidzy warstwami

Przemieszczanie obiektw z warstwy na warstw dziaa we Flashu inaczej
ni w wikszoci programw do rysowania. Przedstawimy teraz sposb
wykonywania tej czynnoci.
Majc wybrane narzdzie Selection, kliknij logo, aby je zaznaczy.
Z menu Edit (edycja) wybierz polecenie Cut (wytnij), aby przenie lini z warstwy
background do schowka.

Aby uaktywni warstw logo, kliknij

j w panelu listwy czasowej.

Z menu Edit (edycja) wybierz polecenie

Paste in Place (wklej w tym samym miej
scu), aby wklei lini dokadnie w tym
samym miejscu, ale na innej warstwie.

46
TWWF8_02.indd 46

projektowanie ukadu graficznego

2006-12-20 12:17:22

importowanie bitmap
Po umieszczeniu i dopasowaniu rozmiaru logo zajmiemy si wstawieniem obrazu
w prawym dolnym rogu sceny.

W panelu listwy czasowej dodaj

now warstw do symbolu ta.
Nadaj jej nazw bouquet.

Z menu File/Import (plik/importuj)

wybierz polecenie Import to Stage
(importuj na scen). W oknie dia
logowym Import przejd do folde
ru development_files. Zaznacz plik
bouquet.png i kliknij przycisk Open
(otwrz).

Obraz przedstawiajcy bukiet zostanie umiesz

czony na scenie. Przecignij go do prawego
dolnego rogu i ustaw tak, aby w obszarze sceny
widoczna bya troch wicej ni jedna czwarta
obrazu.

projektowanie ukadu graficznego

TWWF8_02.indd 47

47
2006-12-20 12:17:22

dodawanie warstwy maskujcej

Wystajce ze sceny zdjcie bukietu nie wpynie na wygld wyeksportowanego
filmu, ale przeszkadza nam podczas tworzenia witryny. Do ukrycia niepotrzebnych
fragmentw obrazu uyjemy warstwy maskujcej.
Dodaj now warstw i nadaj jej nazw bouquet_mask.
Wybierz narzdzie Rectangle (prostokt).
Ustaw kolor wypenienia na czarny.
Zaczynajc przy prawej krawdzi sceny nad
obrazem, rozcignij prostokt tak, aby przy
kry cay obszar obrazu znajdujcego si na
scenie.

Kliknij prawym przyciskiem myszy

(kliknicie z przytrzymaniem klawisza
Ctrl w Mac OS) warstw bouquet_mask
i z menu kontekstowego wybierz pole
cenie Mask (maska).

Wystajcy ze sceny fragment obrazu nie

bdzie ju widoczny!
Skoczylimy prac z tem. Teraz nadszed
czas na dodanie tekstu. Zapisz plik.

48
TWWF8_02.indd 48

projektowanie ukadu graficznego

2006-12-20 12:17:23

informacje dodatkowe
grafika wielokrotnego uytku

edycja symbolu str. 41

Uywanie symboli we Flashu ma

dwie zalety zmniejszenie rozmia
ru pliku wynikowego oraz atwo
edycji projektu.
Gdy utworzymy symbol i umiecimy
jego instancj na scenie, rozmiar
pliku wynikowego nie zwikszy si,
poniewa niezalenie od liczby
instancji kod opisujcy dany
symbol wystpuje w pliku wyniko
wym tylko raz. Kada instancja sta
nowi jedynie odwoanie do symbo
lu oraz opis jego przeksztace, na
przykad zmiany przezroczystoci
lub wymiarw.
Pniejsze modyfikacje projektu
zawierajcego symbole s take
atwiejsze. Wyobramy sobie, e roz
oylimy na scenie 100 niebieskich
kwadracikw (ktre nie s jednak
instancjami symbolu niebieskiego
kwadratu), a nastpnie zdecydowa
limy si zmieni ich kolor. Musimy
znale 100 kwadratw i zmieni
kolor ich wszystkich. Ale jeli utwo
rzylibymy symbol niebieskiego
kwadracika i umiecilibymy na sce
nie 100 jego instancji, musielibymy
jedynie zmodyfikowa ten symbol
wszystkie instancje zostayby
automatycznie zaktualizowane.

Gdy na scenie znajduje si obiekt,

ktry jest kontenerem zawierajcym
inne obiekty (grupy, symbole i pola
tekstowe), moemy go dwukrotnie
klikn , aby zmodyfikowa jego
zawarto.

str. 39

Aby opuci tryb edycji kontenera,

musimy dwukrotnie klikn poza
jego obszarem.

przeksztacanie obiektw str. 44

Gdy skalujemy elementy wekto
rowe (zarwno te narysowane we
Flashu, jak i zaimportowane na
przykad plik z logo), moemy je po
wiksza i zmniejsza bez adnych
negatywnych konsekwencji. Jeli
jednak przeksztacamy obraz bit
mapowy, powinnimy unika jego
powikszania. Powikszona bitma
pa musi by ponownie prbkowana
i moe zosta znieksztacona lub
rozmyta. Najlepiej jest otworzy
dany obraz w programie do obrbki
obrazw typu Adobe Photoshop
lub Macromedia Fireworks i prze
skalowa go w nim zalenie od
potrzeb.

projektowanie ukadu graficznego

TWWF8_02.indd 49

49
2006-12-20 12:17:23