Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: [email protected]PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ IDZ DO IDZ DO ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG KATALOG KSI¥¯EK KATALOG KSI¥¯EK TWÓJ KOSZYK TWÓJ KOSZYK CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE O NOWOŒCIACH ZAMÓW INFORMACJE O NOWOŒCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE SPIS TREŒCI SPIS TREŒCI DODAJ DO KOSZYKA DODAJ DO KOSZYKA KATALOG ONLINE KATALOG ONLINE Tworzenie stron WWW we Flashu. Projekty Programu Macromedia Flash nie trzeba ju¿ chyba nikomu przedstawiaæ. To doskona³e narzêdzie do tworzenia interaktywnych witryn WWW i prezentacji multimedialnych cieszy siê od lat nies³abn¹c¹ popularnoœci¹ wœród projektantów i grafików komputerowych. Ostatnie wersje tego programu wzbogacono o obiektowy jêzyk programowania ActionScript, co dodatkowo zwiêkszy³o jego mo¿liwoœci. Obecna wersja Flasha to prawdziwy kombajn, za pomoc¹ którego mo¿na stworzyæ niemal ka¿d¹ aplikacjê multimedialn¹ i efektown¹ witrynê WWW. Ksi¹¿ka „Tworzenie stron WWW we Flashu. Projekty” to ilustrowany przewodnik przedstawiaj¹cy program Macromedia Flash MX 2004. Opisuje kolejne kroki prowadz¹ce do zbudowania multimedialnej i interaktywnej witryny WWW z wykorzystaniem narzêdzi, w które wyposa¿ony jest Flash. Nie znajdziesz jednak w niej d³ugich opisów i dziesi¹tek parametrów. Ka¿de zagadnienie przedstawione jest za pomoc¹ zrzutów ekranu i krótkich instrukcji. Dziêki temu w ci¹gu kilku godzin zrealizujesz swój pierwszy projekt we Flashu. • Interfejs u¿ytkownika • Przygotowanie struktury plików i zdefiniowanie parametrów projektu • Tworzenie uk³adu graficznego za pomoc¹ narzêdzi rysunkowych • Stosowanie symboli • Dodawanie tekstu do strony • Korzystanie z listwy czasowej • Tworzenie animacji i mechanizmów nawigacyjnych • £adowanie danych z zewnêtrznych plików • Publikacja witryny Dziêki lekturze tej ksi¹¿ki przekonasz siê, jak ogromne mo¿liwoœci oferuje Ci Macromedia Flash Autor: David Morris T³umaczenie: Marcin Samodulski ISBN: 83-246-0154-6 Tytu³ orygina³u: Creating a Web Site with Flash: Visual QuickProject Guide Format: B5, stron: 160
Programu Macromedia Flash nie trzeba już chyba nikomu przedstawiać. To doskonałe narzędzie do tworzenia interaktywnych witryn WWW i prezentacji multimedialnych cieszy się od lat niesłabnącą popularnością wśród projektantów i grafików komputerowych. Ostatnie wersje tego programu wzbogacono o obiektowy język programowania ActionScript, co dodatkowo zwiększyło jego możliwości. Obecna wersja Flasha to prawdziwy kombajn, za pomocą którego można stworzyć niemal każdą aplikację multimedialną i efektowną witrynę WWW. Książka "Tworzenie stron WWW we Flashu. Projekty" to ilustrowany przewodnik przedstawiający program Macromedia Flash MX 2004. Opisuje kolejne kroki prowadzące do zbudowania multimedialnej i interaktywnej witryny WWW z wykorzystaniem narzędzi, w które wyposażony jest Flash. Nie znajdziesz jednak w niej długich opisów i dziesiątek parametrów. Każde zagadnienie przedstawione jest za pomocą zrzutów ekranu i krótkich instrukcji. Dzięki temu w ciągu kilku godzin zrealizujesz swój pierwszy projekt we Flashu. * Interfejs użytkownika* Przygotowanie struktury plików i zdefiniowanie parametrów projektu* Tworzenie układu graficznego za pomocą narzędzi rysunkowych* Stosowanie symboli* Dodawanie tekstu do strony* Korzystanie z listwy czasowej* Tworzenie animacji i mechanizmów nawigacyjnych* Ładowanie danych z zewnętrznych plików* Publikacja witryny Dzięki lekturze tej książki przekonasz się, jak ogromne możliwości oferuje Ci Macromedia Flash.
Citation preview
1. IDZ DO PRZYKADOWY ROZDZIA SPIS TRECI Tworzenie stron WWW we
Flashu. Projekty KATALOG KSIEK Autor: David Morris Tumaczenie:
Marcin Samodulski KATALOG ONLINE ISBN: 83-246-0154-6 Tytu oryginau:
Creating a Web Site ZAMW DRUKOWANY KATALOG with Flash: Visual
QuickProject Guide Format: B5, stron: 160 TWJ KOSZYK DODAJ DO
KOSZYKA 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 CENNIK I INFORMACJE
komputerowych. Ostatnie wersje tego programu wzbogacono o obiektowy
jzyk programowania ActionScript, co dodatkowo zwikszyo jego
moliwoci. Obecna wersja ZAMW INFORMACJE Flasha to prawdziwy
kombajn, za pomoc ktrego mona stworzy niemal kad O NOWOCIACH
aplikacj multimedialn i efektown witryn WWW. Ksika Tworzenie stron
WWW we Flashu. Projekty to ilustrowany przewodnik ZAMW CENNIK
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 CZYTELNIA w niej dugich opisw i dziesitek
parametrw. Kade zagadnienie przedstawione jest za pomoc zrzutw
ekranu i krtkich instrukcji. Dziki temu w cigu kilku godzin
FRAGMENTY KSIEK ONLINE 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 Dziki lekturze tej ksiki przekonasz si, Wydawnictwo Helion
jak ogromne moliwoci oferuje Ci Macromedia Flash ul. Chopina 6
44-100 Gliwice tel. (32)230-98-63 e-mail: [email protected]
2. spis treci wprowadzenie 7 witryna, ktr stworzymy 8 poznaj
flasha 13 organizacja ksiki 10 nastpny krok 19 towarzyszca witryna
internetowa 12 informacje dodatkowe 20 1. przygotowanie plikw
tworzcych witryn 21 definiowanie struktury katalogw 22 zapisywanie
pliku 25 tworzenie plikw skadowych witryny 23 zapisywanie zestawu
kolorw 26 ustawianie wasnoci sceny 24 informacje dodatkowe 28 2.
projekt ukadu graficznego 29 ustawienia linii pomocniczych 30
importowanie rysunkw rysowanie ta 31 wektorowych 44 tworzenie
gradientu liniowego 33 porzdkowanie symboli 45 edycja gradientu
liniowego 35 przeksztacanie obiektw 46 tworzenie gradientu
radialnego 36 importowanie obrazu tworzenie gradientu koowego 38
bitmapowego 47 grafika wielokrotnego uytku 39 dodawanie warstwy
edycja symbolu 41 maskujcej 48 projektowanie przy uyciu warstw 42
informacje dodatkowe 49 przemieszczanie pomidzy warstwami 43 3.
dodawanie i stylizowanie tekstu 51 wstawianie pojedynczego zmiana
atrybutw pola tekstowego 55 wiersza tekstu 52 wstawianie cza typu
e-mail 56 tekst o ustalonej szerokoci 54 tworzenie tekstu ozdobnego
57 4. uycie listwy czasowej do organizacji witryny 59 tworzenie
strony gwnej 60 dodawanie etykiet do klatek 66 dodawanie klatek 62
sterowanie przebiegiem animacji 67 tworzenie klatek kluczowych 64
informacje dodatkowe 69
3. spis treci 5. tworzenie animacji 71 tworzenie animacji ruchu
72 wstrzymywanie odtwarzania animacji 88 odtwarzanie animacji we
flashu 74 wywietlanie podgldu filmu 90 zoone animacje 75 sterowanie
odtwarzaniem klipw 91 kopiowanie i wklejanie klatek 78 efekt
pynnego przejcia 93 stosowanie efektw listwy czasowej 79 informacje
dodatkowe 97 przesuwanie animacji 87 6. tworzenie mechanizmu
nawigacji 99 tworzenie przyciskw 100 ukadanie przyciskw 111 podgld
dziaania przycisku 106 tworzenie dziaw witryny 114 animowanie stanu
przycisku 107 doczanie skryptw 116 doczanie dwikw do przycisku 110
zmiana dziaania przycisku 118 powielanie przyciskw 111 informacje
dodatkowe 120 7. wypenianie dziaw witryn zawartoci 121 tworzenie
filmw dziaw 122 cza do zewntrznych stron www 133 tworzenie
przewijanego tekstu 123 sterowanie pokazem slajdw 135 adowanie
zewntrznych plikw 127 tworzenie paska postpu adowania 137
wczytywanie plikw tekstowych 130 informacje dodatkowe 140 8.
publikowanie witryny 141 ustawienia pliku swf 142 ustawienia html
150 optymalizacja rozmiaru plikw 144 przygotowanie plikw do
przesania 153 pasek postpu wczytywania 147 skorowidz 155 spis
treci
4. projekt 2 ukadu graficznego Naszym pierwszym zadaniem w
procesie tworzenia witryny bdzie wykonanie pro- jektu ukadu
graficznego, w ktrym bdziemy prezentowa jej zawarto. O uka- dzie
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
prze- Zapisywanie obiektw wielokrotnego uytku, ktre ksztacanie
obrazw nosz nazw symboli, w celu uatwienia modyfikacji wektorowych;
sceny oraz uzyskania pliku projektu o mniejszej objtoci; Uycie do
tworzenia prostoktw i linii narzdzi sucych do ryso- wania;
Tworzenie i modyfikowanie wy- penie specjalnych, na przykad
liniowych i radialnych gradientw; Tworzenie warstw w celu uporzd-
kowania zawartoci projektu; Importowanie bitmap i ich masko- wanie.
29
5. ustawianie linii pomocniczych Dziki liniom pomocniczym moemy
zdefiniowa pewne obszary na scenie, a take uatwi sobie ukadanie
obiektw. Dodajmy kilka linii pomocniczych, zanim zacznie- my rysowa
to. 1 Wybieramy polecenie WindowDesign PanelsInfo (oknopanele
projektowania info) , aby wywietli panel Info (info). 2 Wybieramy
polecenie ViewRulers (widoklinijki), aby wczy wywietlanie linijek
wzdu lewej i grnej krawdzi sceny. 3 Klikamy i przecigamy lini
pomoc- nicz z poziomej (grnej) linijki. Obser- wujemy panel Info
gdy wsprzdna y kursora bdzie wynosi 60, puszczamy przycisk myszy.
Przecigamy na scen jeszcze dwie linie pomocnicze i ustawia- my je
na pozycjach 80 i 250. 4 Upewniamy si, e opcja Snap to Guides
(przyciganie do linijek) jest w- czona. Wybieramy polecenie
ViewSnap- ping (widokprzyciganie). W podmenu sprawdzamy, czy opcja
Snap to Guides jest zaznaczona. Jeli nie, klikamy Snap to Guides,
aby j wczy. 30 projekt ukadu graficznego
6. 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 ryso- wania 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 wype- nienia i wybieramy zdefiniowany przez nas kolor
zielony o redniej intensywnoci. projekt ukadu graficznego 31
7. rysowanie ta Ustawiamy kursor na lewej kra- wdzi sceny, nad
lini pomocni- cz 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 poo- enie nie do koca nam odpowiada. Z palety narzdzi wybieramy
Selection (zaznaczenie) i klikamy prostokt, aby go zaznaczy. 2 Na
panelu Property Inspector (wa- ciwoci) moemy zmienia wartoci w
polach tekstowych width (szeroko), height (wysoko), x oraz y. Nasz
pro- stokt powinien mie wymiary 78020 pikseli i by pooony w pozycji
x = 0 oraz y = 60. Upewniajc si, e prosto- kt jest nadal
zaznaczony, wybieramy polecenie Modi- fyGroup (modyfikujgrupuj)
(patrz Informacje dodatko- we na stronie 49). 32 projekt ukadu
graficznego
8. 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
prosto- kt z lewego grnego rogu sceny (0,0) do grnej kra- wdzi
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 ste- rujcy
pasek definicji gradientu wraz ze znajdujcymi si poniej wskanikami,
ktre okrelaj kady kolor wystpujcy w gra- diencie. 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 33
9. tworzenie gradientu liniowego 3 Klikamy przycisk wyboru
kolo- ru, aby otworzy palet prbek. Wybieramy zdefiniowany wcze-
niej kolor jasnozielony. 4 Wskanik po lewej stronie paska
definiujcego gradient powinien by ju ustawiony na kolor biay. Jeli
tak nie jest, zmie- niamy go. 5 Wybieramy narzdzie Paint Bucket
(wiaderko z farb) i klikamy jednolicie wypeniony prostokt, ktry
narysowalimy wczeniej. 6 Prostokt zostanie wypeniony bia-
o-zielonym gradientem. Gradient nie rozchodzi si w zamierzonym
kierunku, zatem zmienimy to w nastpnym kroku. 34 projekt ukadu
graficznego
10. edycja gradientu liniowego Wybieramy narzdzie Fill
Transform (przeksztacanie wypenienia) i klika- my prostokt, aby go
zaznaczy. Na ekranie pojawi si trzy uchwyty edycyjne: okrgy uchwyt
sucy do zmiany poo- enia rodka gradientu; okrgy uchwyt do obracania
wypenienia; kwadratowy uchwyt do zmiany szerokoci wype- nienia.
Klikamy i przecigamy kwadratowy uchwyt szerokoci wypenienia do
rodka pro- stokta, do pooenia oddalonego od rodka o okoo 30
pikseli. Klikamy i przecigamy okrgy uchwyt obro- tu w d i do rodka,
aby obrci wypenie- nie o 90 stopni. Naciskamy Shift, aby ograni-
czy 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 polece- nie ModifyGroup
(modyfikujgrupuj). projekt ukadu graficznego 35
11. tworzenie gradientu radialnego Narysujmy teraz ostatni
prostokt stanowicy to sceny. Wybieramy narzdzie Rectangle
(prostokt). Kolor obrysu ustawiamy na None (aden). Na palecie Color
Mixer rozwi- jamy menu Fill Style i wybie- ramy pozycj Radial
(gradient radialny). Klikamy wskanik koloru na prawym kocu paska
definicji gradientu. Wy- korzystujc przycisk wyboru koloru,
wskazujemy zdefiniowany wczeniej kolor jasnoamarantowy. 36 projekt
ukadu graficznego
12. 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
ViewMagnification25% (widokpowikszenie25%). 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 wy- penienia;
okrgy uchwyt do zmiany promienia gradientu; okrgy uchwyt do
obracania wypenienia. projekt ukadu graficznego 37
13. tworzenie gradientu koowego Klikamy i przecigamy okrgy
uchwyt punktu rod- kowego do prawego dolnego rogu sceny. Klikamy i
przecigamy okrgy rod- kowy uchwyt, rozszerzajc koo poza grny lewy
rg sceny. Powracamy do powikszenia widoku, z jakim pracowalimy
wczeniej. Zaznaczamy prostokt i tworzymy grup (ModifyGroup). 38
projekt ukadu graficznego
14. grafika wielokrotnego uytku Poniewa utworzone przez nas to
jest uywane we wszystkich dziaach witryny, moemy go uy wielokrot-
nie. Aby to uczyni, musimy przeksztaci trzy naryso- wane 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
EditSelect All (edycjazaznacz wszystko) lub naciskamy kombinacj
przyciskw Ctrl+A (Windows) lub Cmd+A (Mac OS). Wybieramy polecenie
ModifyConvert to Symbol (modyfi- kujprzekszta w symbol) lub
naciskamy F8. W oknie dialogowym Convert to Symbol (przekszta na
sym- bol) dla tworzonego symbolu wprowa- dzamy nazw back- ground .
Jako typ obiektu (Behavior) wybieramy Graphic (grafika) i klikamy
przycisk OK . projekt ukadu graficznego 39
15. grafika wielokrotnego uytku Otwieramy bibliotek projektu
(panel Library). Naley zwrci uwag na to, e zosta do niej dodany
nowoutwo- rzony symbol o nazwie background. Zauwamy take, e na
panelu Property Inspector pojawiy si nowe elementy sterujce,
dotyczce instancji symbolu. 40 projekt ukadu graficznego
16. 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 wypenio- nym amarantowym gradientem.
Poprawimy to w nastpnej sekcji. projekt ukadu graficznego 41
17. projektowanie przy uyciu warstw Warstwy, jak wspominalimy
wczeniej, su do porzdkowania projektu. Specyfiku- j one kolejno
uoenia obiektw na paskiej scenie. Utworzymy teraz now war- stw
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 widocz- na, wybieramy
polecenie Window Timeline (oknolistwa czasowa). W kolumnie Layers
(warstwy) klika- my dwukrotnie napis Layer 1, aby go zaznaczy.
Wprowadzamy na- zw 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 na- zw tej warstwy i zmieniamy j na line &
logo. 42 projekt ukadu graficznego
18. 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 (ViewGuidesShow Guides), jeli chcemy zobaczy, gdzie
znajduje si linia. Chocia nadal nie wida linii, wiemy, e zostaa
zaznaczona, poniewa zmienia si zawarto panelu Pro- perty Inspector.
Wybieramy polecenie EditCut (edycja wytnij), aby przenie lini z
warstwy bkgd rects do schowka. Na listwie czasowej klikamy warstw
line & logo, aby j aktywowa. Wybieramy polecenie EditPaste in
Place (edycjawklej 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 43
19. 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 FileImportImport to Library
(plikimportujimportuj do biblioteki), aby wstawi logo do filmu jako
symbol. W oknie dialogowym Import to Library (importuj do
biblioteki) szukamy pli- kw t_blooms oraz logo_small.png, ktre
cignlimy z witryny towarzysz- cej 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 mo- vie 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, Klikamy przycisk OK,
aby aby unikn problemw z czcionkami. zamkn okno dialogowe Nie
zaznaczamy opcji Import as a single PNG Import Settings. Logo
flattened bitmap (importuj jako spaszczon znajduje si teraz w
biblio- bitmap). tece. 44 projekt ukadu graficznego
20. porzdkowanie symboli Jeli panel Library (biblioteka)
projektu Czytelnika nie jest widoczny, naley wybra polecenie
WindowLibrary. 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 uporzdkowa- nie 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
za- znaczy. Wprowadzamy nazw logo i naciskamy Enter. Przytrzymujemy
przycisk Shift i klikamy dwa symbole bitmapo- we 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. Przeciga- my do niego pozostae obiekty z listy.
projekt ukadu graficznego 45
21. przeksztaacanie obiektw Na obiektach na scenie, rwnie na
symbolach, mona stosowa rne przekszta- cenia. 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 znajduje- my 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. Klika- my go
i przecigamy na scen w okolice lewego grnego rogu. Logo jest troch
wiksze, ni dyktuj to nasze po- trzeby, dlatego przeskalujemy je.
Upewniajc si, e instancja obiektu jest zaznaczony, wybieramy narz-
dzie 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 projekt ukadu graficznego
22. 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 FileImport Import to Stage
(plikimportujim- portuj na scen). W oknie dialogo- wym Import
(import) przechodzi- my 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 pozo- stawaa niewiele ponad jedna czwarta bukietu.
projekt ukadu graficznego 47
23. 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, rozci- gamy prostokt tak, aby
przykry ca scen. Klikamy prawym przyciskiem myszy (Windows) lub
lewym z przytrzyma- niem 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 doda- nie tekstu. Zapisujemy plik. 48 projekt ukadu
graficznego
24. informacje dodatkowe rysowanie ta str. 32 grafika
wielokrotnego uytku str. 39 We Flashu, gdy na jednej warstwie jeden
obiekt nachodzi na drugi, Uywanie symboli we Flashu ma przykryta cz
tego, ktry znajdu- dwie zalety zmniejszenie rozmia- je si pod
spodem, jest usuwana. ru pliku wynikowego oraz atwo Sprawia to, e
dokonywanie mo- edycji projektu. Gdy utworzymy dyfikacji obiektw,
na przykad ich symbol i umiecimy jego instancje podsuwanie, staje
si koszmarem. na scenie, rozmiar pliku wyniko- Aby unikn zwizanych
z tym wego nie zwiksza si, poniewa problemw, moemy tworzy nowe
niezalenie od liczby instancji kod warstwy dla kadego generowane-
opisujcy dany symbol wystpuje go obiektu lub grupowa obiekty w
pliku wynikowym tylko raz. zaraz po ich narysowaniu. Ja osobi- Kada
instancja stanowi jedynie od- cie wol grupowanie. woanie 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 roz- oylimy 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 je- dynie zmodyfikowa ten
symbol wszystkie instancje zostayby zaktualizowane automatycznie.
projekt ukadu graficznego 49
25. informacje dodatkowe edycja symbolu str. 41 przeksztacanie
obiektw str. 46 Gdy na scenie znajduje si obiekt, ktry jest
kontenerem zawieraj- Gdy skalujemy elementy wekto- cym inne obiekty
(grupy, symbole rowe (zarwno te narysowane we i pola tekstowe),
moemy go klikn Flashu, jak i zaimportowane na dwukrotnie, aby
modyfikowa jego przykad plik z logo), moemy je po- zawarto. wiksza
i zmniejsza bez adnych Aby opuci tryb edycji kontenera, negatywnych
konsekwencji. Jeli musimy dwukrotnie klikn poza jednak
przeksztacamy obraz bit- jego obszarem. mapowy, powinnimy unika
jego Czasami, gdy we Flashu narysuje- powikszania. Powikszona
bitma- my lini, zostaje ona umieszczona pa musi by ponownie
prbkowana pod innymi obiektami, a nie na ich i moe sta si
znieksztacona lub wierzchu, jak mona by si tego rozmyta. Najlepiej
jest otworzy spodziewa. Negujc obowizujc dany obraz w programie do
obrbki w programie konwencj, e nowy obrazw typu Adobe Photoshop
obiekt umieszczany jest nad ju lub Macromedia Fireworks i prze-
istniejcymi na tej samej warstwie, skalowa go w nim zalenie od
Flash ukada linie w oparciu o ta- potrzeb. jemniczy algorytm, ktry
mogli wy- myli jedynie programici bierze on pod uwag kolor linii.
Aby linia pojawia si tam, gdzie chcemy, moemy wykona dwie czynnoci
zgrupowa j, co spo- woduje jej przeniesienie na wierzch stosu, lub
przesun j na wysz warstw. 50 projekt ukadu graficznego