Flash, Fireworks I FreeHand F/X

IDZ DO
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Flash, Fireworks i Freehand f/x

Autor: Joyce J. Evans
Tumaczenie: Patrycja Domagaa, Micha Arent,
Piotr Ducher
ISBN: 83-7197-662-3
Tytu oryginau: Integrating Flash, Fireworks & Freehand
f/x & Design
Format: B5, stron: 468
Zawiera CD-ROM
Flash oznacza najlepszy wybr, jeli chodzi o narzdzia dla powanych projektantw oraz
producentw filmw internetowych i animowanych grafik. Dodanie do Flasha 5
ActionScriptu zdecydowanie zwikszyo jego moliwoci. To niesamowite, jak wiele mona
dokona we Flashu i za jego pomoc. Poznasz ActionScript i bdziesz go uywa, czytajc
cz ksiki powicon Flashowi.
Zgodnie z zamysem producenta Fireworks mia by przeznaczony do zaawansowanej
edycji obrazw przygotowywanych do wykorzystania w prezentacjach internetowych.
Obecnie Fireworks znajduje si wrd najlepszych programw do edycji obrazw,
uywanych przez powanych projektantw internetowych, ktrzy potrzebuj narzdzia
zaprojektowanego specjalnie na ich potrzeby koncentrujce si wok Internetu. Moliwo
tworzenia systemw nawigacyjnych zawierajcych m.in. kod HTML i JavaScript to jeden
z przejaww potgi Fireworks.
FreeHand jest liderem w dziedzinie programw ilustracyjnych; zosta wzbogacony o takie
moliwoci, jak narzdzie contour gradient oraz moliwo wykorzystania wielu stron
wzorcowych. W aplikacji tej mona nawet otwiera wielostronicowe dokumenty w formacie
PDF. Bdziesz zaskoczony zgodnoci formatw plikw FreeHanda i Flasha.
W tej mieszance nie zosta rwnie pominity Dreamweaver. Dodatek A jest powicony
edycji obrazw Fireworks w rodowisku Dreamweavera oraz tworzeniu w nim caych,
skomplikowanych projektw ukadu strony przy uyciu takich elementw jak warstwy,
kaskadowe arkusze stylw i behawiory.
Wrd osb, ktrym najbardziej przyda si ta ksika, znajduj si projektanci zatrudnieni
w firmach oraz niezaleni projektanci i wykonawcy stron, nauczyciele i kierownicy
projektw. Ksika ta zostaa napisana dla uytkownikw na poziomie rednio
zaawansowanym, istotna wic jest w tym przypadku praktyczna znajomo Flasha,
Fireworks i FreeHanda. Z ksiki nie nauczysz si, jak uywa kadego programu. Dowiesz
si jednak, jak posugiwa si funkcjami wykorzystanymi w danym wiczeniu, a take
poznasz najwaniejsze moliwoci kadej z aplikacji. Poniewa okrelenie, co dokadnie
kryje si za terminem rednio zaawansowany jest bardzo trudne, du wag przywizano
do przedstawienia dokadnych wskazwek w wiczeniach.
Ta ksika z serii f/x pomoe w lepszym zrozumieniu tego, jak mona najlepiej
wykorzysta moliwoci wiodcych aplikacji firmy Macromedia. Dowiesz si, jakie zadania
potrafi najlepiej wykona kady program, co w efekcie zwikszy wydajno Twoj i (lub)
Twojego zespou w projektach internetowych.
O Autorach ............................................................................. 15
Wstp .................................................................................... 17
Cz 1. FreeHand ...................................................... 21
Rozdzia 1. Zastosowanie narzdzi rysunkowych
we FreeHandzie ..................................................... 23
Wprowadzenie do czci 1. ksiki, powiconej programowi FreeHand.......................... 23
Podstawowe wiadomoci o narzdziach rysunkowych ....................................................... 24
Uchwyty kierunkowe ...................................................................................................... 24
Ikony i kursory ................................................................................................................ 25
Narzdzie Pen (piro) ........................................................................................................... 25
Wzy narone................................................................................................................. 25
Wzy gadkie.................................................................................................................. 26
Wzy czce.................................................................................................................. 26
Narzdzie Bezigon ................................................................................................................ 26
Zastosowanie narzdzi Pen i Bezigon .................................................................................. 26
Rysowanie parasola narzdziem Pen .............................................................................. 26
Rysowanie parasola narzdziem Bezigon....................................................................... 27
Dodawanie i usuwanie wzw............................................................................................. 28
Przesuwanie segmentw ....................................................................................................... 29
czenie wzw................................................................................................................... 30
Edycja ksztatw ................................................................................................................... 31
Projekt 1.1. Rysowanie elementw ukadanki ..........................................................................32
Rozwizanie alternatywne: zastosowanie narzdzia Pen .....................................36
Projekt 1.2. Trasowanie samochodu dla strony internetowej Point of Purchase ...................37
Rysowanie widoku z gry......................................................................................39
Narzdzie Pencil (owek).................................................................................................... 40

Projekt 1.3. Trasowanie rysunku liniowego mapy ...................................................................41
Dodatkowe elementy .............................................................................................42
Rozdzia 2. Zastosowanie specjalnych

narzdzi rysunkowych .........................................45
Zastosowanie polecenia Paste Inside.................................................................................... 45
Zastosowanie soczewek ........................................................................................................ 47
Soczewka przezroczystoci (Transparency) ................................................................... 47
Projekt 2.1. Dodawanie przezroczystoci.................................................................................48
Soczewka powikszajca (Magnify)............................................................................... 49
Spis treci
Projekt 2.2. Powikszanie czci mapy Atlantis .......................................................................50
Zastosowanie obwiedni (Envelope)...................................................................................... 54

Predefiniowane obwiednie .............................................................................................. 54
Definiowanie wasnych obwiedni ................................................................................... 55
Projekt 2.3. Umieszczanie wiersza w obwiedni ........................................................................55
Zastosowanie funkcji trasowania. Narzdzie Trace ............................................................. 56

Narzdzie Trace............................................................................................................... 57
Projekt 2.4. Trasowanie szafy grajcej i zdjcia......................................................................59
Trasowanie szafy grajcej ....................................................................................59
Zdjcie...................................................................................................................61
Wyniki ...................................................................................................................62
Rozdzia 3. Manipulowanie obiektami ......................................65

Rozmieszczanie obiektw..................................................................................................... 65
Kolejno obiektw w stosie........................................................................................... 65
Wyrwnanie .................................................................................................................... 66
Grupowanie ..................................................................................................................... 67
Blokowanie...................................................................................................................... 67
Transformacje ....................................................................................................................... 67
Obracanie ........................................................................................................................ 69
Skalowanie ...................................................................................................................... 70
Projekt 3.1. Tworzenie felg k samochodowych......................................................................71
Odbicie lustrzane............................................................................................................. 73
Ukosowanie..................................................................................................................... 74
Zastosowanie funkcji metamorfozy (Blend) ........................................................................ 75
Projekt 3.2. Przeksztacenie caego jabka w nadgryzione.......................................................76
Metamorfoza na ciece .................................................................................................. 77

Projekt 3.3. Dopasowanie logo do cieki................................................................................78
Symbole ................................................................................................................................ 79
Projekt 3.4. Przeksztacanie nagwka ksigarni Horse Adventures w symbol .......................80
Rozdzia 4. Praca z kolorami ................................................... 81

Kolor w pracach.................................................................................................................... 81
Tryby kolorw ...................................................................................................................... 81
Panele Color Mixer i Tints.................................................................................................... 82
Panel Swatches...................................................................................................................... 83
Opcje panelu Swatches ................................................................................................... 83
Importowanie i eksportowanie tabel kolorw................................................................. 85
Przypisywanie koloru ........................................................................................................... 85
Zmiana kolorw konturu i wypenienia .......................................................................... 86
Wykorzystanie gradientw.............................................................................................. 86
Projekt 4.1. Tworzenie kieliszka do wina .................................................................................88
Dodanie efektu neonu do nki kieliszka ..............................................................91
Dodawanie powiaty.............................................................................................92
Okrelanie kta powierzchni wina........................................................................93
Projekt 4.2. Nadanie koloru modelowi samochodu elektrycznego...........................................95
Rozdzia 5. Siatka perspektywy .............................................97

Siatki perspektywy................................................................................................................ 97
Spis treci
Wywietlanie i ukrywanie siatek perspektywy............................................................... 97

Dopasowywanie siatki do wasnych potrzeb .................................................................. 98
Projekt 5.1. Tekst dla sceny Wojen barowych....................................................................100
Projekt 5.2. Rysowanie siatek specjalnych .............................................................................102
Siatka narona ....................................................................................................102
Siatka kulista.......................................................................................................104
Rozdzia 6. Importowanie i eksportowanie ........................... 107

Importowanie ...................................................................................................................... 107
Eksportowanie..................................................................................................................... 108
Eksportowanie plikw do zastosowania w programie Fireworks................................ 109
Eksportowanie pliku do formatu PDF .......................................................................... 109
Eksportowanie pliku do formatu HTML ...................................................................... 110
Projekt 6.1. Ukad strony internetowej Point of Purchase.....................................................110
Porwnywanie warstw i tabel w programie Dreamweaver................................113
Eksportowanie pliku do Flasha........................................................................................... 114

Przypisywanie akcji Flasha ........................................................................................... 114
Wskazwki dotyczce eksportowania do formatu Flasha ............................................ 115
Eksportowanie pliku do formatu SWF.......................................................................... 117
Projekt 6.2. Eksportowanie pliku do Flasha ..........................................................................118
Wskazwki dotyczce konwersji plikw..............................................................118
Cz 2. Fireworks.................................................... 131
Rozdzia 7. Podstawy Fireworks ............................................133
Wstp do Fireworks ............................................................................................................ 133
Przeksztacanie tekstu ......................................................................................................... 133
Przypisywanie tekstu do cieki ................................................................................... 134
Edycja tekstu na ciece................................................................................................ 137
Projekt 7.1. Umieszczanie tekstu na grze i na dole elipsy ....................................................137
Edycja tekstu z wykorzystaniem narzdzi do transformacji......................................... 141

Efekty .................................................................................................................................. 144
Dodawanie efektw....................................................................................................... 144
Edycja efektw.............................................................................................................. 144
Kontury ............................................................................................................................... 145
Modyfikacja konturu..................................................................................................... 145
Gradienty............................................................................................................................. 146
Wypenienia gradientowe.............................................................................................. 146
Zmiana wygldu gradientu............................................................................................ 147
Edycja kolorw gradientu ............................................................................................. 147
Projekt 7.2. Tworzenie maych kul z podwietleniem .............................................................148
Rozwizanie alternatywne ..................................................................................150
Wypenianie wzorkami i teksturami ................................................................................... 150

Wypenianie wzorkami ................................................................................................. 151
Nakadanie tekstur......................................................................................................... 151
Projekt 7.3. Tworzenie tytuu strony WWW............................................................................151
Projekt 7.4. Projektowanie nagwka dla strony internetowej Fireworks 4 f/x & Design.....154
Podstawy animacji .............................................................................................................. 155

Praca z symbolami i instancjami ........................................................................................ 156
Symbole......................................................................................................................... 156
Spis treci
Praca z klatkami.................................................................................................................. 158

Dodawanie i usuwanie klatek........................................................................................ 159
Zmiana kolejnoci i powielanie klatek.......................................................................... 159
Rozkadanie na klatki.................................................................................................... 160
Wspuytkowanie warstw przez klatki ....................................................................... 160
Technika skry cebuli................................................................................................ 160
Zaptlanie ...................................................................................................................... 161
Opnienie klatki .......................................................................................................... 161
Sekwencjonowanie ............................................................................................................. 161
Sekwencjonowanie efektw.......................................................................................... 162
Rozdzia 8. Praca z narzdziami wektorowymi.......................163
Zrozumie cieki... ............................................................................................................ 163
Narzdzia wektorowe.......................................................................................................... 164
Stosowanie narzdzi do tworzenia ksztatw wektorowych .............................................. 165
Narzdzie Ellipse (elipsa) ............................................................................................. 165
Narzdzie Rectangle (prostokt) ................................................................................... 165
Narzdzie Polygon (wielokt)....................................................................................... 166
Narzdzia do rysowania cieek wektorowych o dowolnym ksztacie.............................. 167
Narzdzie Pencil (owek) ............................................................................................ 167
Narzdzie Brush (pdzel) .............................................................................................. 168
Narzdzie Pen (piro) ................................................................................................... 168
Wykorzystywanie uchwytw kontrolnych krzywej Bziera ........................................ 169
Edycja z wykorzystaniem narzdzia Pen............................................................................ 171
Zamykanie cieki......................................................................................................... 171
Kontynuacja cieki ...................................................................................................... 171
czenie cieek............................................................................................................ 172
Dodawanie i usuwanie wzw..................................................................................... 172
Polecenie Join (pocz) ................................................................................................. 173
Polecenie Punch (wycinanie) ........................................................................................ 174
Narzdzie Knife (n) ................................................................................................... 175
Projekt 8.1. Wykonanie ornamentu dekoracyjnego................................................................175
Przygotowanie wszystkich wykonanych wczeniej kul........................................175
Wykonanie podstawowego ksztatu.....................................................................177
Symulowanie efektu gbi ksztatu podstawowego..............................................178
czenie ornamentu w cao .............................................................................179
Projekt 8.2. Interfejs Eyeland Studio......................................................................................180
Czynnoci wykonywane w trakcie caego wiczenia ..........................................180
Tworzenie grnego obszaru tytuu......................................................................181
rodkowy obszar tekstowy ..................................................................................186
Elementy umieszczone z prawej strony ...............................................................186
Logo ....................................................................................................................188
Trzy mae okrgi .................................................................................................189
Przyciski..............................................................................................................190
Przygotowanie do eksportu.................................................................................190
Eksportowanie ....................................................................................................191
Rozdzia 9. Rysowanie i edycja obiektw bitmapowych ......... 195

Tryb bitmapowy.................................................................................................................. 195
Spis treci
Praca z narzdziami selekcji ............................................................................................... 196

Narzdzia z grupy Marquee .......................................................................................... 196
Narzdzie Magic Wand (rdka) ................................................................................ 197
Narzdzie Polygon Lasso (lasso wieloktne)................................................................ 198
Rozmywanie krawdzi selekcji..................................................................................... 198
Naprawa i modyfikacja obrazw ........................................................................................ 199
Stosowanie narzdzia Rubber Stamp (stempel)............................................................ 199
Korekta barwy i nasycenia ............................................................................................ 202
Maskowanie obrazw ......................................................................................................... 203
Wykorzystywanie masek bitmapowych........................................................................ 203
Modyfikacja przezroczystoci maski ............................................................................ 204
Edycja grupy maskowanej ............................................................................................ 206
Projekt 9.1. Wycinanie obrazu konia z ta..............................................................................207
Projekt 9.2. Obraz zoony .....................................................................................................208
Rozdzia 10. Magia nawigacji ..................................................213

Rozwizania nawigacyjne................................................................................................... 213
Uywanie edytora przyciskw............................................................................................ 213
Tworzenie symbolu przycisku ...................................................................................... 214
Edycja symbolu przycisku ............................................................................................ 218
Wykorzystanie panelu Library............................................................................................ 218
Eksportowanie bibliotek................................................................................................ 219
Importowanie bibliotek ................................................................................................. 220
Paski nawigacyjne............................................................................................................... 220
Uywanie edytowalnych symboli przyciskw do nawigacji ........................................ 220
Projekt 10.1. Projektowanie systemu nawigacji dla witryny Horse Adventures ...................225
Rollowery............................................................................................................................ 227
Tworzenie rozcznych rollowerw.............................................................................. 228
Menu rozwijane .................................................................................................................. 229
Tworzenie byskawicznego rozwijanego menu ............................................................ 229
Eksportowanie menu rozwijanego ................................................................................ 232
Uywanie wasnych stylw w menu rozwijanych ........................................................ 233
Edycja menu rozwijanego ............................................................................................. 233
Zaawansowana edycja menu rozwijanych .................................................................... 234
Ograniczenia menu rozwijanych................................................................................... 234
Projekt 10.2. Tworzenie menu rozwijanego z wykorzystaniem grafiki..................................234
Rozdzia 11. Plastrowanie i optymalizacja ............................. 239

Plastrowanie (slicing) ......................................................................................................... 239
Plastrowa, czy nie plastrowa?.................................................................................... 239
Wykorzystanie prowadnic............................................................................................. 241
Narzdzia do plastrowania ............................................................................................ 241
Definiowanie plastrw .................................................................................................. 242
Nadawanie nazw plastrom ............................................................................................ 243
Dodawanie adresw URL i znacznikw Alt do plastrw ............................................. 245
Tworzenie plastrw z obiektw .................................................................................... 246
Plaster tekstowy............................................................................................................. 246
Projekt 11.1. Plastrowanie dokumentu Atlantis .....................................................................247
Dodawanie obszarw aktywnych (hotspots) ...................................................................... 250
10
Spis treci
Optymalizacja ..................................................................................................................... 251

Zakadki 2-Up i 4-Up .................................................................................................... 252
Optymalizacja plikw GIF............................................................................................ 252
Kompresja JPEG ........................................................................................................... 256
Projekt 11.2. Optymalizacja dokumentu Atlantis ...................................................................257
Optymalizacja przy uyciu kompresji GIF........................................................257
Optymalizacja z wykorzystaniem formatu GIF i JPEG ....................................259
Porwnanie .......................................................................................................260
Selektywna kompresja JPEG .............................................................................................. 262

Format pliku PNG............................................................................................................... 265
Rozdzia 12. Importowanie i eksportowanie ........................... 267
Importowanie i eksportowanie stylw................................................................................ 267
Importowanie i eksportowanie bibliotek ............................................................................ 268
Eksportowanie bibliotek................................................................................................ 268
Importowanie bibliotek ................................................................................................. 269
Importowanie skanowanych obrazw ................................................................................ 269
Wykorzystywanie funkcji Twain .................................................................................. 269
Otwieranie zeskanowanego obrazu............................................................................... 269
Importowanie zeskanowanego obrazu .......................................................................... 269
Importowanie z innych aplikacji......................................................................................... 270
Importowanie plikw FreeHanda.................................................................................. 271
Importowanie plikw GIF............................................................................................. 276
Projekt 12.1. Importowanie sekwencjonowanego obiektu z FreeHanda
oraz tworzenie z niego animacji w Fireworks ..................................................277
Importowanie plikw PSD Photoshopa ........................................................................ 278

Importowanie plikw Illustratora i CorelDRAW ......................................................... 279
Eksportowanie..................................................................................................................... 279
Podgld eksportu ........................................................................................................... 280
Kreator eksportu............................................................................................................ 281
Ustawienia HTML......................................................................................................... 281
Opcje eksportu............................................................................................................... 284
Projekt 12.2. Eksportowanie samych obrazw dla strony internetowej Horse Adventures ..285
Projekt 12.3. Eksportowanie caego dokumentu Atlantis .......................................................289
Eksportowanie warstw i klatek w postaci oddzielnych obrazw.................................. 295

Eksportowanie obszaru lub skalowanie obrazu ............................................................ 295
Cz 3. Flash ........................................................ 299

Rozdzia 13. Wprowadzenie do Flasha .................................... 301
Flash .................................................................................................................................... 301
List otwarty Hillmana Curtisa do projektantw graficznych ............................................. 302
Mniej znaczy wicej...................................................................................................... 303
Sigaj do skarbca wasnej mdroci.............................................................................. 304
Rozdzia 14. Podstawy programu Flash .................................. 307
Waciwoci filmu .............................................................................................................. 307
Listwa czasowa ................................................................................................................... 308
Spis treci
11
Podstawowe wiadomoci na temat pracy z warstwami...................................................... 309

Wstawianie warstw ....................................................................................................... 310
Usuwanie warstw .......................................................................................................... 310
Zmiana pooenia warstw ............................................................................................. 310
Ukrywanie i wywietlanie warstw ................................................................................ 310
Blokowanie warstw ....................................................................................................... 311
Nadawanie nazw warstwom.......................................................................................... 311
Zaznaczanie warstw ...................................................................................................... 311
Organizowanie warstw.................................................................................................. 311
Ujcia kluczowe i klatki ..................................................................................................... 312
Wstawianie i usuwanie uj kluczowych...................................................................... 315
Odwracanie kolejnoci uj kluczowych...................................................................... 316
Projekt 14.1. Eyeland Studio monta elementw statycznych ...........................................316
Rysowanie we Flashu ......................................................................................................... 317

Rne narzdzia do rysowania we Flashu .................................................................... 318
Modyfikowanie ksztatw............................................................................................. 320
Projekt 14.2. Finishing the Wine Glasses...............................................................................323
Panele .................................................................................................................................. 324

Panel Info ...................................................................................................................... 324
Panel Align.................................................................................................................... 324
Projekt 14.3. Animowane przyciski dla strony Eyeland Studio ..............................................325
Wektoryzacja map bitowych .............................................................................................. 327

W jaki sposb poprawnie wykonywa wektoryzacj bitmap? ..................................... 329
Projekt 14.4. Wektoryzacja obrazka przedstawiajcego szaf grajc (Jukebox)................329
Praca z tekstem ................................................................................................................... 331

Czcionki systemowe...................................................................................................... 331
Tekst standardowy ........................................................................................................ 331
Pole tekstowe................................................................................................................. 331
Pole tekstowe suce do wprowadzania danych.......................................................... 331
Pola dla tekstu wywietlanego dynamicznie................................................................. 332
Rozdzia 15. Symbole i animacje ............................................ 333
Biblioteki i symbole............................................................................................................ 333
Biblioteki............................................................................................................................. 333
Biblioteki kategorii Common........................................................................................ 334
Wspuytkowanie bibliotek......................................................................................... 334
Wykorzystywanie bibliotek .......................................................................................... 335
Symbole .............................................................................................................................. 335
Symbole klipw filmowych (Movie Clip) .................................................................... 336
Symbole przyciskw (Button)....................................................................................... 337
Symbole graficzne (Graphic) ........................................................................................ 338
Podstawy tworzenia animacji ............................................................................................. 339
Automatyczna animacja ruchu (motion tweening) ....................................................... 339
Automatyczna animacja ksztatu (shape tweening) ...................................................... 341
Animacja uzyskiwana metod klatka po klatce......................................................... 342
Projekt 15.1. Dokoczenie projektu Bar Wars Scene.............................................................343
Wstawianie tytuu..............................................................................................347
Rozdzia 16. Podstawy ActionScriptu .....................................349

Dodawanie kodu ActionScriptu wprowadzenie ............................................................ 349
12
Spis treci
Przypisywanie akcji do przyciskw i klatek ................................................................. 350

Filmy i klipy filmowe.................................................................................................... 352
ActionScript ........................................................................................................................ 353
Waciwoci ........................................................................................................................ 354
Zmienne .............................................................................................................................. 355
Rodzaje danych................................................................................................................... 356
Akcje i obsuga zdarze ...................................................................................................... 357
Predefiniowane akcje Flasha......................................................................................... 358
Podstawowe akcje ......................................................................................................... 358
Akcje ............................................................................................................................. 360
Obiekty .......................................................................................................................... 362
Skadnia z operatorem kropki (dot syntax) ..................................................................... 363
Projekt 16.1. Dokoczenie tworzenia interfejsu strony Eyeland Studio................................364
Rozdzia 17. Projekty z ActionScriptem.................................. 369

Przypisywanie kodu ActionScriptu .................................................................................... 369
Projekt 17.1. Koczymy opracowywanie szafy grajcej Jukebox ..........................................370
Klip filmowy Title..............................................................................................370
Projekt 17.2. Jukebox cig dalszy......................................................................................372
Wstawianie dynamicznych pl tekstowych........................................................374
Definiowanie zmiennych dla dynamicznych pl tekstowych.............................375
Przygotowujemy muzyk ...................................................................................376
Odtwarzanie muzyki..........................................................................................379
Projekt 17.3. Tworzymy ukadank puzzle.........................................................................380
Wstawiamy ruchome elementy ukadanki .........................................................385
Zmiana wymiarw.............................................................................................386
Rozwizanie alternatywne 1. ............................................................................387
Projekt 17.4. Trjwymiarowe wywietlanie produktu ............................................................392
Przyciski ukryte umoliwiajce zmian kta widzenia przynty.......................394
Projekt 17.5. Interfejs projektu Point of Purchase .................................................................396
Rozdzia 18. Projekty specjalne ............................................. 399

Rich Media.......................................................................................................................... 399
Obiekt Color........................................................................................................................ 400
Projekt 18.1. Baner reklamowy ..............................................................................................400
Rozwizanie alternatywne ................................................................................404
Projekt 18.2. Baner reklamowy z moliwoci drukowania...................................................406
Rozdzia 19. Publikowanie filmw Flasha................................. 411

Publikowanie....................................................................................................................... 411
Optymalizacja ..................................................................................................................... 411
Mapy bitowe.................................................................................................................. 412
Wektoryzacja map bitowych......................................................................................... 413
Animacje ....................................................................................................................... 413
Symbole......................................................................................................................... 413
cieki ........................................................................................................................... 413
Czcionki ........................................................................................................................ 413
Gradienty....................................................................................................................... 414
Spis treci
13
Alpha kontra Tint .......................................................................................................... 414

Warstwy ........................................................................................................................ 414
Dwik .......................................................................................................................... 414
Usuwanie bdw ze skryptw ........................................................................................... 415
Panel Debugger ............................................................................................................. 415
Okno Output.................................................................................................................. 416
Narzdzie Bandwidth Profiler ............................................................................................ 418
Okno Publish Settings......................................................................................................... 419
Zakadka Formats.......................................................................................................... 419
Zakadka Flash .............................................................................................................. 419
Zakadka HTML............................................................................................................ 421
Zakadka GIF................................................................................................................. 423
Zakadka JPEG.............................................................................................................. 424
Zakadka PNG ............................................................................................................... 424
Zakadka QuickTime..................................................................................................... 425
Zakadka RealPlayer ..................................................................................................... 426
Eksport ................................................................................................................................ 426
Dodatki .................................................................. 429

Dodatek A Wstawianie kodu HTML i obrazkw
z Fireworks do Dreamweavera .............................. 431
Skorowidz ............................................................................463
Rozdzia ten przedstawia pomysy rozwiza nawigacji na stronie internetowej.

W trakcie lektury nauczysz si tworzy menu rozwijane, paski nawigacyjne oraz rozczne rollowery, ktre mona uczyni interaktywnymi nawet bez znajomoci jzyka
JavaScript.
Rozwizania nawigacyjne
System nawigacji po witrynie stanowi o jej powodzeniu wrd internautw bd klsce jeli
nie zosta dobrze zaprojektowany. Fireworks 4 nie zaplanuje za Ciebie dobrze dziaajcej nawigacji, jednak moe stworzy przyciski i elementy, ktre s niezbdne dla jej funkcjonowania.
Uywanie edytora przyciskw

Edytor przyciskw (Button Editor) naley do najatwiejszych w uyciu edytorw. Mimo
swojej prostoty, edytor ten wydatnie zwiksza wydajno Twojej pracy, pozwalajc nada
temu samemu przyciskowi maksymalnie do czterech rnych stanw zdarze.
Wikszo przyciskw nawigacyjnych stosowanych na stronach internetowych (np. rollowery) staje si interaktywna dziki jzykowi JavaScript. Za pomoc edytora przyciskw
moesz stworzy interaktywne przyciski, nie posiadajc adnej wiedzy na temat tego jzyka; odpowiedni kod JavaScript wygeneruje za Ciebie program Fireworks. Dla jednego
przycisku moesz stworzy maksymalnie cztery stany, zmieniajc jedynie wygld kadego
z nich. Kady z przyciskw utworzonych za pomoc edytora przycisku jest automatycznie
przetwarzany na symbol. Gdy bdziesz potrzebowa wicej ni jednego przycisku, wystarczy przecign kolejn instancj do dokumentu z panelu Library.
214
Rozdzia 10.
Poniej opisano cztery rne stany przycisku.

n Up. Domylny wygld przycisku.
n Over. Wygld przycisku w chwili, gdy uytkownik przesunie nad niego kursor myszy.
Stan Over informuje uytkownika, e przycisk jest aktywny, co oznacza, e kliknicie

go prowadzi do innej strony witryny lub odnonika na dowolnej stronie internetowej.
n Down. Wygld przycisku po jego klikniciu. Najczciej przycisk wyglda tak, jakby
zosta rzeczywicie wcinity.

n Over While Down. Wygld przycisku w stanie Down, gdy uytkownik ustawi nad nim
kursor myszy.
Inn wan cech edytora przycisku jest to, e gdy zmienisz tekst na przycisku w stanie Up,
tekst zostanie automatycznie uaktualniony w pozostaych stanach przycisku.
Tworzenie symbolu przycisku

Przycisk mona utworzy bezporednio w oknie Button Editor lub przekonwertowa istniejcy ju przycisk na symbol przycisku i podda go edycji w edytorze przyciskw. Symbol
przycisku obejmuje maksymalnie cztery rne stany przycisku i jest traktowany w dokumencie jako cao. Zamiast spdza wiele czasu na powielaniu podobnych przyciskw,
wystarczy umieci symbol w dokumencie i zmodyfikowa jego tekst i przypisane do niego
cze. Aby uy edytora przyciskw do stworzenia przycisku przeznaczonego do umieszczenia na stronie internetowej Horse Adventures, wykonaj nastpujce czynnoci:
1. Aby stworzy nowy przycisk od podstaw, otwrz nowy dokument (File/New); rozmiar
dokumentu 20050 pikseli bdzie tutaj odpowiedni. Zaznacz opcj Custom i wybierz
czarny kolor ta dokumentu. Nastpnie wybierz z menu polecenie Insert/New Button,
aby otworzy okno edytora przyciskw.
Jeli chcesz przekonwertowa grafik przycisku na symbol przycisku, wybierz polecenie
Insert/Convert To Symbol, a nastpnie opcj Button (przycisk) jako typ symbolu w oknie
dialogowym Symbol Properties i kliknij OK. Gdy dwukrotnie klikniesz przycisk, zostanie
otwarte okno edytora przycisku.
2. Edytor przyciskw skada si z kilku zakadek. Gdy klikniesz dowoln z nich, Fireworks
wywietla w oknie edytora wygld przycisku w stanie odpowiadajcym zakadce.
Po otwarciu edytora aktywn zakadk powinna by zakadka stanu Up. Wybierz
dowolne narzdzie do rysowania i narysuj przycisk w dowolnym miejscu w oknie
edytora przyciskw. W przykadzie skorzystaj z narzdzia Ellipse i narysuj koo
w oknie edytora przyciskw. W panelu Info zmie rozmiar przycisku na 99 pikseli,
a w panelu Fill wybierz kolor czerwony jako wypenienie.
Dokadne rozmiary przyciskw
Podczas pracy z edytorem przycisku moesz skorzysta z panelu Info (Windows/Info lub Alt+Shift+
F12/Option+Shift+F12) domylnie zgrupowanego z panelami Stroke i Fill. Aby stworzy przycisk
o cile okrelonych wymiarach, wpisz wartoci w pola H (height wysoko) i W (width szeroko) w panelu Info, a nastpnie wcinij klawisz Enter/Return, aby uaktywni zmiany. Zmiany nie
zostan uwzgldnione, jeli klikniesz w obszarze dokumentu lub poza nim, nie wciskajc wczeniej klawisza Enter/Return.
Magia nawigacji
215
3. Wybierz narzdzie Pen. Kliknij w miejscu, gdzie znajd si wzy pocztkowy

i kocowy, aby narysowa prost poziom lini. W panelu Stroke z listy Stroke category
wybierz opcj Pencil, z listy Stroke name opcj 1-Pixel Hard, warto parametru
Tip size ustaw na 1 i wybierz kolor biay. W panelu Info ustaw dugo linii (W)
na 138 pikseli i nacinij Enter/Return. Za pomoc narzdzia Pointer umie lini
obok czerwonego koa tak, aby dotykaa prawej strony koa.
4. Aby skopiowa grafik dla stanu Up do okna edycji stanu Over, kliknij zakadk Over,
a nastpnie przycisk Copy Up Graphic (rysunek 10.1). Moesz teraz zmieni kolor
wypenienia dla stanu Over i doda kontur lub efekt do przycisku bd te wykona
obydwie te czynnoci. Upewnij si, e przycisk jest zaznaczony, co pozwoli doda
efekty. W omawianym przykadzie narysujesz ma t flar, aby wykorzysta j
do efektu rollowera.
Rysunek 10.1. Przycisk Copy Up Graphic w oknie edytora przyciskw

Jeli tworzysz jeden lub dwa przyciski, wybierz narzdzie Text i wpisz tekst, ktry chcesz umieci
na przycisku. Pamitaj, e tekst ten jest w peni edytowalny i e moe by pniej z atwoci
zmieniony. Aby ustawi tekst na rodku, wybierz Center Alignment (wyrodkuj) w oknie edytora
tekstu (Text Editor). Jeli bdziesz tworzy wiele przyciskw, technika, ktr przedstawiam
dla paska nawigacyjnego, jest bardziej przydatna ni ta dla pojedynczych przyciskw.
Przyciski o rnych ksztatach w rnych stanach
Zamiast uywa polecenia Copy Up Graphic lub Copy Down Graphic, dla kadego ze stanw przycisku moesz zaimportowa dowolny przycisk, narysowa nowy oryginalny przycisk lub przecign
przycisk z innego dokumentu.
5. Maa ta flara, ktr zastosujesz dla stanu Over, zostaa wykonana po powikszeniu
widoku. W tym przypadku skorzystalimy z narzdzia Brush wykorzystujcego kontur
Air Brush typu Basic, z wartoci parametru Tip size rwn 2 i kolorze tym.
Najwyraniejszy kolor znajduje si w rodku flary. Aby uzyska janiejsze krawdzie,
kliknij dwukrotnie w polu Tip w panelu Stroke. Po wybraniu zakadki Options obni
216
Rozdzia 10.
warto parametru Ink Amount do 50%, a nastpnie narysuj krtkie linie na kocwkach
ciemniejszych linii. Za pomoc narzdzia Brush zostaa utworzona maa kropka,
uzupeniajc ten may ty obiekt po prawej stronie. Wkrtce dowiesz si, w jakim
celu zostaa ona stworzona. Rysunek 10.2 przedstawia ukoczon flar. Plik pod nazw
flare.png, ktry moesz otworzy i powikszy, znajduje si w folderze Przyklady/
Rozdzial10/Materialy.
6. Narzdziem Pointer utwrz ramk selekcji wok caej flary i zgrupuj j (Modify/Group
lub Ctrl+G/Cmd+G). Ustaw flar i czerwone kko tak, aby maa ta kropka
po prawej stronie flary znalaza si w rodku koa (rysunek 10.3).
Rysunek. 10.2. Flara w powikszeniu
Rysunek 10.3. Flara wyrwnana odpowiednio w stosunku

do pozostaej czci przycisku
7. Stany Down i Over While Down nie s wykorzystane w tym wiczeniu. Kliknij zakadk
Active Area (aktywny obszar); zobaczysz, e do Twojego dokumentu zosta automatycznie
dodany plaster. Domylnie zaczona jest opcja Set Active Area Automatically, ktra
powoduje automatyczne utworzenie obszaru aktywnego przycisku, generujc na obrazku
plaster tak duy, aby pokry wszystkie stany przycisku. Dla wszystkich czterech stanw
przycisku istnieje jeden plaster; aby zmieni jego rozmiar, naley przecign jego wzy.
8. Aby przypisa cze do przycisku, kliknij zakadk Active Area, a nastpnie przycisk Link
Wizard (kreator czy). Wicej szczegw na ten temat znajdziesz w poniszej ramce.
9. Zamknij okno edytora przycisku klikajc ikon zamknicia okna. Instancja przycisku
jest automatycznie umieszczana w Twoim dokumencie (instancje oznaczane s ma
strzak w rogu). Rysunek 10.4 przedstawia instancj symbolu w dokumencie.
Rysunek 10.4. Instancja przycisku utworzona w edytorze przyciskw i umieszczona w dokumencie
Magia nawigacji
217
Kreator czy (Link Wizard)

Poniszy obrazek przedstawia zakadk Export Settings (ustawienia eksportu) w oknie Link Wizard
(kreator czy). Moesz wykorzysta jedno z predefiniowanych ustawie parametrw eksportu lub
klikn przycisk Edit i zdefiniowa wasne ustawienia eksportu.
Na zakadce Link moesz doda adres URL, do ktrego chcesz odesa odwiedzajcego, tekst
zastpczy (umieszczany w znaczniku alt kodu rdowego strony) oraz dowolny tekst, ktry ma zosta
wywietlony na pasku stanu przegldarki.
Dwie pozostae zakadki kreatora czy to: Target (cel) w niej ustawiasz okno lub ramk docelow,
w ktrej otworzy si docelowa strona, oraz Filename (nazwa pliku), w ktrej moesz samodzielnie
okreli nazw pliku przycisku lub skorzysta z funkcji automatycznego nadawania nazw (Auto-Name).
Zakadka Export Settings okna Link Wizard
Zakadka Link okna Link Wizard
10. Symbol ten jest automatycznie dodawany do panelu Library (Window/Library).

Jeli bdziesz chcia doda wicej przyciskw do dokumentu, skorzystaj z panelu Library,
klikajc i przecigajc na dokument symbol przycisku lub nazw symbolu (w tym
przykadzie nie potrzebujemy wicej symboli). Rysunek 10.5 przedstawia symbol
w panelu Library.
Rysunek 10.5. Symbol przycisku widoczny w panelu Library
11. Jeli chcesz zapisa ten symbol, aby mc go pniej wykorzysta podczas tworzenia
paska nawigacyjnego, musisz go wyeksportowa. W panelu Library kliknij ikon
ze strzak skierowan w prawo i wybierz z menu panelu polecenie Export Symbols.
W oknie dialogowym Export Symbols zaznacz symbol, ktry chcesz wyeksportowa,
218
Rozdzia 10.
a nastpnie kliknij przycisk Export. Zostanie otwarte okno, w ktrym moesz okreli
nazw i zapisa symbol. Omawiany tu symbol zosta zapisany w pliku HAbuttonsymbol.
png w folderze z wiczeniami do rozdziau 10.
12. Moesz wywietli podgld nowego przycisku, klikajc w oknie dokumentu zakadk
Preview, a nastpnie przesuwajc kursor myszy nad przycisk i klikajc go, aby obejrze
rne stany przycisku.
Edycja symbolu przycisku

Edycja utworzonych przyciskw jest prostym zadaniem. Poniej zamieszczona jest lista
rnych elementw skadowych Twoich przyciskw oraz instrukcje odnonie ich modyfikowania.
n Tekst wywietlany na przycisku. Zaznacz tekst, ktry chcesz edytowa, otwrz panel
Object (Window/Object lub Alt+F2/Option+F2) i wpisz nowy tekst. Technika ta dziaa

tylko wtedy, jeli na symbolu przycisku znajduje si tekst.
n Cechy przycisku. Kliknij dwukrotnie przycisk, aby otworzy okno Button Editor, kliknij
zakadk stanu, ktry chciaby zmieni i dokonaj danych zmian. Gdy skoczysz,
zamknij okno edytora przyciskw.
n Symbole zaimportowane. Podczas edycji instancji przycisku zostaje zerwane poczenie
z oryginalnym obiektem, co pozwala na dokonywanie zmian w nowym dokumencie

bez wpywu na dokumenty zawierajce symbol oryginalny. Aby zaktualizowa
zaimportowany przycisk, kliknij ikon ze strzak skierowan w prawo w panelu
Library, po czym wybierz z menu rozwijanego polecenie Update.
n Aktywny obszar. Zmian obszaru aktywnego plastra przycisku naley dokonywa
z poziomu okna edytora przyciskw.

Podczas edycji oryginalnego symbolu, jeli wykorzystano go rwnie w innych dokumentach,
moesz dokona aktualizacji wszystkich instancji jednoczenie, wybierajc polecenie Update
z opcji rozwijanego menu panelu Library (F11). Podczas prby edycji zaimportowanego symbolu
pojawi si ostrzeenie informujce o tym, e edycja zerwie poczenie z oryginalnym symbolem.
Modyfikacja przycisku
Kada zmiana przycisku powoduje powstanie nowego symbolu. Na przykad, jeli zmienisz tekst,
nowy symbol zostanie umieszczony w bibliotece wraz z nowym tekstem; jeli dokonasz zmiany koloru choby na jednym tylko przycisku, nowy symbol zostanie umieszczony w bibliotece. Przeczytaj
punkt Paski nawigacyjne w dalszej czci tego rozdziau, aby dowiedzie si, w jaki sposb zachowa wszystkie przyciski strony internetowej jako jeden symbol.
Wykorzystanie panelu Library

Biblioteki pozwalaj zaoszczdzi czas, bo mona dziki nim wielokrotnie wykorzystywa
symbole. Poniewa symbole s stosowane bardzo czsto, zarzdzanie nimi za porednictwem panelu Library jest nie tylko wygodne, ale rwnie znaczco wspomaga Twoj prac.
Wystarczy przecign symbol z biblioteki na dokument, mona rwnie wspuytkowa
bibliotek z wsppracownikiem.
Magia nawigacji
219
Istniej dwa rodzaje bibliotek: biblioteka domylna, zawarta w dokumencie oraz taka, ktr
moesz sam wygenerowa i zapisa. Biblioteka domylna jest generowana w chwili, gdy
konwertujesz obiekt na symbol i obejmuje symbole, ktre tworzy si za pomoc edytora
przyciskw. Biblioteka ta jest zapisywana razem z dokumentem; bdzie ona dostpna po
ponownym otwarciu dokumentu. Na przykad, jeli chciaby, aby zestaw przyciskw by
dostpny dla innych projektw, moesz zapisa bibliotek, by wykorzysta j w dowolnym
dokumencie. W nastpnym podrozdziale dowiesz si, w jaki sposb mona to wykona.
Eksportowanie bibliotek
Jeli posiadasz zestaw symboli tworzcych system nawigacji, moesz zapisa ten zestaw
w postaci biblioteki. Jeli chcesz zapisa bibliotek symboli w biecym dokumencie, aby
mc uywa jej ponownie bd te wspuytkowa j z innymi osobami, wykonaj nastpujce czynnoci:
1. Otwrz plik HAbuttonsymbol.png z folderu Przyklady/Rozdzial/Materialy. Otwrz palet
Library, wybierajc polecenie Window/Library.
2. Kliknij strzak wskazujc w prawo, a nastpnie z listy rozwijanej wybierz polecenie
Export Symbols, aby otworzy okno dialogowe Export Symbols (rysunek 10.6).
Rysunek 10.6. Okno dialogowe Export Symbols
3. Zaznacz symbole, ktre chcesz wyeksportowa (dostpne bd tylko te, ktre s uywane
w biecym dokumencie). Jeli chciaby wyeksportowa je wszystkie, wybierz polecenie
Select All; jeli chcesz wybra kilka symboli lecych na licie obok siebie, wcinij
klawisz Shift i zaznacz wybran grup; jeli chciaby wybra tylko niektre z nich,
wcinij Ctrl/Option i kliknij wybrane przez siebie symbole. Po zakoczeniu czynnoci
kliknij przycisk Export.
Biblioteki cz%sto uywane
Jeli uwaasz, e bdziesz czsto korzysta z danej biblioteki, zapisz j lub przenie do folderu:
Macromedia/Fireworks 4/Configurations/Libraries. Umieszczajc tam swoje pliki, po wybraniu
polecenia Insert/Libraries bdziesz mia do nich atwy dostp.
220
Rozdzia 10.
4. Nadaj bibliotece nazw, wybierz lokalizacj, w ktrej chciaby j zapisa i kliknij

przycisk Save. Biblioteka moe zosta zapisana w dowolnym miejscu jednak podczas
jej importowania musisz pamita o tym, gdzie j zapisae.
Importowanie bibliotek
Aby skorzysta z biblioteki, ktr zapisae w biecym dokumencie lub ktra zostaa zapisana w innym dokumencie, naley j zaimportowa. Aby importowa zapisan bibliotek,
wykonaj nastpujce czynnoci:
1. Otwrz panel Library (jeli nie jest jeszcze otwarty), wybierajc polecenie Window/
Library.
2. Z menu panelu wybierz polecenie Import Symbols.
3. Odszukaj zapisan bibliotek; zaznacz j i kliknij Open.
4. Zostanie otwarte okno dialogowe Import Symbols przedstawiajce list symboli
w bibliotece, ktr zapisae. Wybierz symbol (symbole), ktry chcesz importowa
i kliknij przycisk Import.
Paski nawigacyjne
Pasek nawigacyjny (navigation bar), nazywany take nav bar, skada si z zestawu przyciskw, ktre zwykle wystpuj na kadej stronie witryny internetowej. W tym podrozdziale
dowiesz si, w jaki sposb przeksztaci cay system nawigacyjny w edytowalny symbol.
Uywanie edytowalnych symboli przyciskw

do nawigacji
W poniszym wiczeniu wykonasz przyciski dla stanw Up, Over i Down i poczysz zestaw przyciskw z rnymi tekstami, aby wykorzysta je jako pasek nawigacyjny. Zwykle,
gdy zmieniasz tekst na symbolu, Fireworks tworzy nowy symbol; jeli chcesz zmieni wycznie sam przycisk, musisz edytowa kady poszczeglny symbol. W tym wiczeniu nauczysz si tworzy symbole z rnymi tekstami; dowiesz si rwnie, co naley zrobi, aby
w trakcie jednokrotnej edycji waciwoci przycisku aktualizowa wszystkie pozostae
symbole w pasku nawigacyjnym.
Tworzenie przycisku
Aby stworzy system nawigacyjny z edytowalnymi przyciskami, naley rozpocz od utworzenia przycisku. W tym celu wykonaj nastpujce instrukcje:
1. Otwrz nowy dokument, wystarczajco duy, aby zmieci przycisk. Wybierz rozmiar
20075 pikseli oraz biay kolor ta.
Magia nawigacji
221
2. Wybierz polecenie Insert/New Button i utwrz przycisk o trzech lub czterech stanach.
Skorzystaj z narzdzia Rectangle i narysuj prostokt w oknie edytora przyciskw.
Korzystajc z panelu Info, okrel rozmiary przycisku: 100 pikseli szerokoci (W)
i 30 pikseli wysokoci (H) i korzystajc z krzyyka wyrodkuj przycisk najlepiej,
jak umiesz. W panelu Fill wybierz ciemnoniebieski kolor wypenienia, a w panelu Effect
wybierz efekt Shadow and Glow/Drop Shadow i zaakceptuj ustawienia domylne.
3. Kliknij zakadk stanu Over, a nastpnie przycisk Copy Up Graphic. Pojawi si ta sama
grafika, ktra wystpuje dla stanu Up. Aby zmieni kolor dla stanu Over, rozwi palet
kolorw w panelu Fill i wybierz kolor jaskrawozielony.
4. Kliknij zakadk stanu Down, a nastpnie przycisk Copy Over Graphic. Wprowad
zmiany, ktre chciaby uzyska, gdy kto kliknie przycisk. W omawianym przykadzie
przejd do panelu Effect, zaznacz efekt Drop Shadow i kliknij ikon kosza na mieci,
aby usun efekt cienia. Wybierz polecenie Bevel and Emboss/Inset Emboss.
Zamknij okno edytora przyciskw. Rysunek 10.7 przedstawia pusty symbol przycisku
w dokumencie.
Rysunek 10.7. Symbol przycisku w dokumencie
5. Symbol nowego przycisku znajduje si teraz w panelu Library, ktr naley otworzy
(Window/Library lub F11).
Dodawanie tekstu
Dodawanie tekstu w przedstawiony poniej sposb umoliwia uzyskanie zmian w caym
pasku nawigacyjnym w wyniku jednokrotnej edycji przycisku.
1. Aby otworzy okno Button Editor, kliknij dwukrotnie instancj pustego przycisku.
Przed dodaniem tekstu nie trzeba zamyka okna edytora przycisku poleciam Ci to zrobi
tylko po to, aby pokaza symbol w dokumencie. Aby doda tekst, bdziesz ponownie
modyfikowa przycisk.
2. Pierwszym i zarazem najwaniejszym zadaniem jest dodanie nowej warstwy.

W tym celu kliknij t ikon folderu w panelu Layers.
3. Wybierz narzdzie Text. W oknie edytora tekstu wpisz *QOG. Czcionka uyta w tym
przykadzie to Ruzicka Freehand RomanSC, wielkoci 24 pkt., w kolorze zotym.
Kliknij przycisk Center Alignment a nastpnie OK. Nastpnie wyrodkuj tekst
na przycisku.
222
Rozdzia 10.
Upewnij si, e tekst rzeczywicie znajduje si na warstwie 2. (Layer 2). Czasami zdarza si,
e nawet po wybraniu jakiej warstwy w niewytumaczalny sposb wracasz na warstw
pierwsz. Tekst musi znajdowa si na warstwie, ktra nie jest wspuytkowana.
4. Aby przenie tekst do innych stanw przycisku w tej samej pozycji, co w stanie Up,
zaznacz tekst i skopiuj (Ctrl+C/Cmd+C), kliknij zakadk Over i wklej (Ctrl+V/Cmd+V).
Podczas wklejania tekstu jest on cay czas zaznaczony, zmie wic kolor wypenienia
na ciemnoniebieski. Powtrz operacj kopiowania, wklejania i zmiany koloru wypenienia
dla zakadki Down. Chocia wymaga to wikszego nakadu pracy na pocztku, bdziesz
zadowolony, e zrobie to w ten sposb, gdy kiedy bdziesz chcia zmieni wygld
przycisku. Zamknij okno edytora przycisku. W nastpnej czci dowiesz si, w jaki sposb
uywa tego przycisku i zmieni tekst.
5. Zapisz ten przycisk jako samplebutton.png. Plik ten znajdziesz rwnie w folderze
z wiczeniami do rozdziau 10.
Tworzenie paska nawigacyjnego
W poniszym wiczeniu stworzysz w peni edytowalny pasek nawigacyjny z przyciskami
i oddzielnym tekstem wszystko zawarte w jednym symbolu. Aby utworzy pasek nawigacyjny, wykonaj nastpujce czynnoci:
1. Otwrz nowy dokument, aby rozpocz tworzenie paska nawigacyjnego. Wybierz
polecenie File/New, wprowad rozmiar 60080 pikseli i wybierz biay kolor ta.
2. Otwrz plik bar.png z folderu z wiczeniami do rozdziau 10. Otwrz plik
samplebutton.png, ktry wykonae w poprzedniej czci wiczenia. Plik ten jest
rwnie dostpny w folderze Przyklady/Rozdzial10/Materialy.
Plik bar.png jest po prostu duym przyciskiem. Jeli chciaby utworzy go sam, wybierz
narzdzie Rectangle i narysuj prostokt. Zmie jego rozmiar w panelu Info na 49460 pikseli.
W panelu Fill wybierz kolor jaskrawozielony. W panelu Effect wybierz polecenie Bevel and
Emboss/Outer Bevel. W oknie dialogowym efektu z listy ksztatw krawdzi fazy (Bevel edge
shape) wybierz pozycj Frame 1, ustaw parametr Width (rozmiar) na 6, Softness (rozmycie)
na 3 i wybierz kolor ciemnoniebieski. Pozostae ustawienia pozostaw na ich wartociach
domylnych. Pamitaj, e moesz sprawdza zastosowane ustawienia w dowolnym pliku PNG
utworzonym w Fireworks, zaznaczajc dany obiekt i sprawdzajc zawarto poszczeglnych
panelu.
3. Zaznacz nowy dokument, aby go uaktywni, a nastpnie wybierz polecenie Insert/New

Symbol oraz opcj Graphic. Przecignij pasek z pliku bar.png do okna edytora symboli.
4. Wybierz dokument samplebutton, aby go uaktywni, po czym otwrz panel Library
i przecignij cztery instancje symbolu przycisku z palety na pasek w oknie edytora
symboli. Ulokuj pierwszy i ostatni przycisk w dowolnym miejscu; nie zwracaj uwagi
na rodkowe przyciski. Aby rozmieci wszystkie przyciski, wcinij klawisz Shift
i zaznacz je; wybierz polecenie Modify/Align/Distribute Widths (jeli przyciski s
poziome), a nastpnie polecenie Modify/Align/Center Horizontal. Rysunek 10.8
przedstawia wyrwnane przyciski. W niewielkiej odlegoci od grnej krawdzi
umiecilimy lini prowadnicy po to, aby mc ustawi przyciski w jednej linii.
Magia nawigacji
223
Rysunek 10.8. Zestaw przyciskw rozmieszczony w poziomie
5. Otwrz panel Layers (Window/Layer lub F2). Zaznacz biec warstw, prawdopodobnie
o nazwie Layer 1. Kliknij ikon strzaki wskazujcej w prawo i wybierz polecenie Share
This Layer z rozwijanego menu. Po zastosowaniu tego polecenia dua grafika ta zostanie
dodana do pozostaych stanw przyciskw, dziki czemu unikniemy wywietlania biaych
ramek wok przyciskw wtedy, gdy kursor myszy znajdzie si nad nimi. Jeli chciaby
zmieni tekst na przyciskach, nie zamykaj okna edytora symboli, ale przejd od razu
do poniszego punktu Edycja tekstu. Jeli zamkne okno edytora, wystarczy klikn
dwukrotnie symbol, aby je ponownie otworzy.
Edycja tekstu
Z pewnoci nie chcesz, aby wszystkie przyciski zawieray tekst Home. Aby zmieni pozostae przyciski, wykonaj nastpujce czynnoci:
1. Przy otwartym oknie edytora symboli zaznacz drugi symbol przycisku (jeli okno
nie jest otwarte, kliknij dwukrotnie symbol w dokumencie, by otworzy okno edytora
symbolu). Otwrz panel Object (Window/Object lub Alt+F2/Option+F2). Uaktywnij
pole Button Text, w ktrym obecnie znajduje si tekst Home i wpisz sowo Products.
Nacinij klawisz Enter/Return. Pojawi si wtedy okno z pytaniem, czy chcesz edytowa
wszystkie instancje przycisku, czy tylko biec; wybierz opcj Current (bieca).
2. Powtrz czynnoci dla przycisku trzeciego, zmieniajc tekst na Company oraz
dla czwartego, wpisujc sowo E-mail.
3. Kiedy skoczysz, zamknij okno edytora symboli. Przetestuj swj pasek nawigacyjny,
wybierajc przycisk Preview i poruszajc kursorem myszy nad przyciskami. Rysunek 10.9
przedstawia ukoczony pasek nawigacyjny jako symbol w dokumencie.
Rysunek 10.9. Ukoczony pasek nawigacyjny jako pojedynczy symbol w dokumencie
Edycja przyciskw paska nawigacyjnego

Edycja wygldu przyciskw na tym przykadowym pasku nawigacyjnym jest teraz bardzo
prosta. Aby rozpocz edycj, wykonaj nastpujce czynnoci:
1. Otwrz plik SampleNavigationBar.png z folderu z wiczeniami do rozdziau 10.
(jeli wczeniej go zamkne).
224
Rozdzia 10.
2. Otwrz panel Library (F11). Zauwaysz symbol pustego przycisku i paska nawigacyjnego.
3. Kliknij dwukrotnie symbol pustego przycisku, aby go edytowa. Pojawi si wtedy okno
ostrzeenia przedstawione na rysunku 10.10; informuje ono, e poczenie z oryginalnym
przyciskiem, od ktrego zacze prac, zostanie zerwane. Kliknij OK.
Rysunek 10.10. Okno dialogowe ostrzeenia wywietlane podczas edycji pustego symbolu przycisku
4. Zaznacz przycisk i zmie jego kolor lub styl. W omawianym wiczeniu zastosowaam
styl glass (szko), ktry sama stworzyam. Moesz znale dwa style w pliku glass.stl
umieszczonym w folderze z wiczeniami do rozdziau 10.
Aby skorzysta ze stylw glass, skopiuj plik glass.stl i wklej go do folderu Fireworks4/
Configuration/Styles lub zaimportuj go do panelu Styles bezporednio z folderu z CD-ROM-u
doczonego do ksiki. Otwrz panel Styles (Window/Styles lub Shift+F11), kliknij ikon
ze strzak wskazujc w prawo i wybierz polecenie Import Styles. Wybierz plik glass.stl
i kliknij Otwrz (Open).
5. W stanie Up zaznacz styl blueglass (kliknij go w panelu Styles); w panelu Fill zmie
kolor na bardziej jaskrawoniebieski. W panelu Effect wybierz efekt Shadow and Glow/
Drop Shadow i zaakceptuj ustawienia domylne.
6. Dla stanu Over zaznacz przycisk i zastosuj styl Glassbutton (kliknij go w panelu Styles).
W panelu Effect dodaj cie zewntrzny.
7. Dla stanu Down zaznacz przycisk i zastosuj styl Glassbutton. W panelu Effect wybierz
efekt Bevel and Emboss/Inset Emboss i zaakceptuj wartoci domylne.
8. Zamknij okno edytora przyciskw. Rysunek 10.11 przedstawia zmieniony pasek
nawigacyjny w stanie Up, a rysunek 10.12 prezentuje stan Over. Aby lepiej przyjrze
si efektowi szka, obejrzyj t prbk w kolorowej wkadce doczonej do ksiki.
Rysunek 10.11. Zmodyfikowany pasek nawigacyjny w stanie Up
Rysunek 10.12. Zmodyfikowany pasek nawigacyjny w stanie Over
10.1.
225
Projektowanie systemu nawigacji

dla witryny Horse Adventures
PROJEKT
Magia nawigacji
Wczeniejsze zaplanowanie witryny internetowej i jej ukadu moe zaoszczdzi wiele czasu. Witryna Horse Adventures jest przykadem potwierdzajcym prawdziwo tej tezy. Poniewa znaam wczeniej oglny ukad witryny oraz jej ostateczny rozmiar, wiedziaam te,
jak duy obszar by przeznaczony na pasek nawigacyjny. Skoro wiedziaam z gry, jakiej
wielkoci obszarem dysponuj, mogam wykona przyciski waciwych rozmiarw i zarezerwowa okrelony obszar dla paska nawigacyjnego.
Projekt 1.
Witryna Horse Adventures jest chroniona prawami autorskimi firmy Idea Design (www.
jeideadesign.com) i nie jest udostpniana dla Czytelnikw tej ksiki. Niniejszy projekt
suy jedynie do celw edukacyjnych i ma stanowi inspiracj do wasnych projektw. Aby
stworzy pasek nawigacyjny dla witryny Horse Adventures, wykonaj nastpujce czynnoci:
1. Do utworzenia paska nawigacyjnego potrzebny bdzie pusty przycisk, ktrego wygld
mona atwo edytowa. Wczeniej w tym rozdziale, w czci Tworzenie symbolu
przycisku, wykonae ju przycisk dla witryny internetowej. Moesz te otworzy plik
HAbuttonsymbol.png z folderu z wiczeniami do rozdziau 10.
2. Otwrz nowy dokument o rozmiarach 172275 pikseli i czarnym kolorze ta.
3. Zaznacz nowy dokument, ktry otworzye, aby go uaktywni. Wybierz polecenie Insert/
New Button. Bdziesz teraz pracowa w oknie Button Editor niezalenie od tego,
z ktrych paneli, warstw itp. bdziesz korzysta, nie zamykaj okna edytora a do chwili,
gdy pojawi si takie polecenie. Instrukcje bd nieskuteczne, jeli wykonasz je poza
oknem edytora przyciskw.
4. Zaznacz plik HAbuttonsymbol.png, aby go uaktywni. Po otwarciu panelu Library (F11)
przecignij symbol przycisku (grafik lub tekst) z biblioteki do okna edytora przycisku.
Rysunek 10.13 przedstawia umiejscowienie prowadnicy oraz pierwszego przycisku.
Rysunek 10.13. Symbol przycisku z pliku HAbuttonsymbol umieszczony w oknie stanu Up

edytora przyciskw
226
Rozdzia 10.
5. Zaznacz warstw, ktr wanie uywasz (prawdopodobnie Layer 1). Z rozwijanego

menu panelu Layers wybierz polecenie Share This Layer.
6. Przecignij jeszcze 10 symboli przycisku do okna edytora (lub skopiuj i wklej, bd
te powiel). Umie pierwszy przycisk u gry, ostatni na dole, a dziewi pozostaych
pomidzy nimi. Wcinij klawisz Shift i zaznacz wszystkie przyciski (lub skorzystaj
z narzdzia Pointer, aby zaznaczy je ramk selekcji), a nastpnie wybierz polecenie
Modify/Align/Distribute Heights. Rysunek 10.14 przedstawia obecny widok paska
nawigacyjnego.
Rysunek 10.14. Pasek nawigacyjny po dodaniu wszystkich przyciskw
7. Aby doda tekst do kadego z przyciskw, naley doda now warstw. Kliknij t
ikon foldera w panelu Layers, aby doda now warstw.
8. Wybierz narzdzie Text. W oknie edytora tekstu wpisz Horse Game. Czcionka
zastosowana w tym przykadzie to CopperplateGoth BD BT wielkoci 14 pkt., pogrubiona
(Bold), koloru biaego. Kliknij OK. Wyrodkuj tekst na pierwszym przycisku.
9. Jeli chciaby powiczy dodawanie tekstu, powtrz czynnoci z punktu 8., uywajc
sw: Bookstore, Equine Tack, Model Horses, Breed Info, Articles, Puzzles, Screensavers,
Site Map, Credits i Contact. Ulokuj teksty na przyciskach w dowolnych miejscach.
10. Aby skopiowa tekst dla innych stanw przycisku w to samo miejsce, co w stanie Up,
zaznacz i skopiuj go (Ctrl+C/Cmd+C), kliknij zakadk Over i wklej (Ctrl+V/Cmd+V).
Powtrz czynno dla kadego ze sw.
Skrt
Moesz wcisn klawisz Shift i zaznaczy kade ze sw w stanie Up, a nastpnie wklei cao
do innych stanw.
11. Przed zamkniciem okna Button Editor kliknij zakadk Active Area i przecignij grny
lewy wze w d, poniej przycisku Contact. Wykonanie tej czynnoci pozwoli usun
duy pojedynczy plaster wstawiany przez Fireworks. Rysunek 10.15 przedstawia
ukoczony pasek nawigacyjny jako symbol w dokumencie. Rysunek 10.16 prezentuje
pasek nawigacyjny po umieszczeniu na stronie internetowej Horse Adventures.
Magia nawigacji
227
Rysunek 10.15. Ukoczony pasek nawigacyjny jako pojedynczy symbol w dokumencie
Rysunek 10.16. Ukoczony pasek nawigacji umieszczony na stronie internetowej Horse Adventures
Rollowery
Wszystkie rollowery stworzone za pomoc jzyka JavaScript dziaaj w ten sam sposb
gdy przemieszczamy kursor myszy nad okrelon grafik, zostaje uaktywniony obszar uruchamiajcy. Do tego obszaru mona przypisa wiele behawiorw lub akcji, np. zastpowanie
biecego obrazka innym, bd te wywietlanie grafiki lub tekstu w innym miejscu na
228
Rozdzia 10.
stronie internetowej. W roli obszaru uruchamiajcego wystpuje zazwyczaj obszar aktywny

(hotspot) lub plaster (slice). Obszary aktywne mog by wykorzystane tylko do uruchomienia akcji takich jak Set Text of Status Bar, natomiast nie mog obsugiwa akcji takich jak
Swap Image. Mog jednak by wykorzystane do uruchamiania akcji w innym plastrze, co
zostanie przedstawione w czci Tworzenie rozcznych rollowerw.
Tworzenie rozcznych rollowerw

Gdy uywamy rozcznych rollowerw, wskanik myszy porusza si po obszarze uruchamiajcym lub klika go, natomiast obraz wywietlany jest w innym miejscu na stronie internetowej. Rollowery tego typu s czsto stosowane w przyciskach, w ktrych obszarem uruchamiajcym jest wanie przycisk, a w obszarze docelowym wywietlany jest opis
tekstowy. W tym wiczeniu bdziesz mia okazj skorzysta z nowej funkcji Fireworks 4
behawiorw obsugiwanych technologi drag-and-drop (przecignij i upu), co pozwala zaoszczdzi mnstwo czasu. Aby utworzy rozczny rollower dla tekstu o ogrodach rafy koralowej w interfejsie Atlantis zaprojektowanym przez Jeffreya Robertsa, wykonaj nastpujce czynnoci:
1. Otwrz plik AtlantisSliced.png z folderu z wiczeniami do rozdziau 10.
2. Na dole palety narzdziowej znajduje sekcja View. Upewnij si, ze zosta wybrany
przycisk Hide/Show Slices (2); jest to widok wywietlajcy plastry.
3. W panelu Frames (Window/Frames lub Shift+F2) wybierz Frame 2. W oknie pliku
AtlantisSliced.png zobaczysz wtedy prostokt z napisem Image Goes Here; usu go
dwukrotnie (za pierwszym razem usuniesz plaster, a za drugim razem obrazek).
Tak si skada, e plik ten posiada dwie klatki. Jeli bdziesz pracowa z plikiem, ktry nie
posiada adnych dodanych klatek, wwczas zaznacz Frame 1 (klatk 1.) i przecignij j
na ikon New/Duplicate Frame (nowy/duplikuj klatk). Obrazek, ktry zamierzasz wywietli
przy rollowerze, bdzie si znajdowa w klatce 2.
4. Otwrz plik reef.png (obrazek ten pochodzi z witryny dostpnej pod adresem www.
flowergarden.nos.noaa.gov, w ktrej napisano, e informacje tam zawarte mona
kopiowa i rozpowszechnia). Przecignij obraz rafy na biay obszar. Wybierz polecenie
Insert/Slice (Alt+Shift+U/Option+Shift+U). Kliknij Frame 1, a zobaczysz pust bia
ramk; kliknij Frame 2, aby zobaczy obrazek rafy.
5. Kliknij Frame 2, a nastpnie zaznacz obiekt, ktry bdzie obszarem uruchamiajcym.
W tym wiczeniu jest to tekst reef gardens (ogrody rafy koralowej). W rodku plastra
ujrzysz mae kko, ktre naley klikn i przecign do biaego prostokta (w ktrym
pojawi si obrazek rafy). Nastpnie pojawi si okno dialogowe behawiora Swap Image
z domylnie ustawion klatk 2. (Frame 2); w tym przykadzie kliknij OK (jeli bdziesz
wykonywa wiele rozcznych rollowerw, Twoje obrazki bd si znajdoway
w osobnych klatkach; bdziesz wic musia okreli klatk dostpu dla rollowera).
Rysunek 10.17 przedstawia lini symbolizujc behawior OnMouseOver Swap Image
przy plastrze reef gardens. Jeli chciaby zobaczy behawior, ktry dodae, otwrz
panel Behaviors (Window/Behaviors). Rysunek 10.18 przedstawia sposb, w jaki dziaa
rozczny rollower.
Magia nawigacji
Rysunek 10.17. Okno dialogowe behawiora Swap Image
Rysunek 10.18. Rozczny rollower wywietlany w trybie Preview
229
230
Rozdzia 10.
Menu rozwijane
Kreator ustawie menu rozwijanego (Set Pop-Up Menu Wizard) jest jednym z najnowszych
dodatkw do Fireworks 4. Wielu uytkownikw przyjo go z zainteresowaniem. W tej czci
przedstawione zostan podstawy stosowania kreatora w sposb zgodny z jego przeznaczeniem. Oprcz tego, przedstawimy krtko niektre sabe strony korzystania z narzdzia automatycznego.
Tworzenie byskawicznego rozwijanego menu

W trakcie lektury tego podrozdziau nauczysz si tworzy menu rozwijane, co jest stosunkowo
atwym zadaniem. Jedynym problemem moe okaza si dodawanie pozycji podmenu, dlatego
te zwrcilimy szczegln uwag na dokadne wyjanienie i zobrazowanie procesu dodawania
podmenu. Gdy opanujesz znacznie poj indent (poziom wyej) i outdent (poziom niej),
reszta bdzie ju atwa. Aby utworzy menu rozwijane, wykonaj nastpujce czynnoci:
1. Otwrz nowy dokument (File/New) o rozmiarach 300300 pikseli i biaym kolorze ta.
2. Narysuj prostokt (dowolnych rozmiarw w dowolnym miejscu dokumentu; s to tylko
wiczenia) i wybierz polecenie Insert/Slice. Zaznacz plaster i wybierz polecenie Insert/
Pop-up Menu. Zostanie otwarte okno kreatora ustawie menu rozwijanego (Set Pop-Up
Menu Wizard), przedstawione na rysunku 10.19.
Rysunek 10.19. Kreator ustawie menu rozwijanego (Set Pop-Up Menu Wizard)
3. W okienku Text wpisz nazw pozycji menu (w tym przykadzie uyto nazwy Books).
Jeli chcesz stworzy cze, wpisz je w polu Link (w tym przypadku uyto books.htm).
Kliknij znak plusa (+) obok Menu, aby doda pozycj do listy menu.
4. Wprowad nastpn pozycj w polu Text, sowo Beginner. Jeli chcesz utworzy cze,
wprowad adres (booksbeg.htm) i kliknij znak plusa (+) obok etykiety Menu.
Magia nawigacji
231
Dugie nazwy czy

Zalenie od tego, ktr wersj Fireworks 4 dysponujesz, moesz mie problemy z wpisaniem dugich nazw czy w polu Link. Jeli tak si stanie, na stronie firmy Macromedia (http://www.
macromedia.com/support/fireworks/) znajdziesz aktualizacj programu kliknij opcj Download
po prawej stronie. To powinno rozwiza problem. Alternatyw jest droga dookoa. Przed rozpoczciem tworzenia listy rozwijanej otwrz panel URL (Window/URL). W polu Current URL (nie musisz
mie otwartego dokumentu) wpisz adres URL i kliknij znak +, aby doda go do biblioteki adresw
URL (URL Library). Nie trzeba wykonywa ju innych dodatkowych czynnoci. Teraz, gdy klikniesz
strzak wskazujc w d obok pola Link w kreatorze ustawie menu rozwijanego (Set Pop-Up
Menu Wizard), wszystkie cza z biblioteki URL bd dostpne.
5. Pozycja, ktr dodae w punkcie 4., zostaa dodana do menu, a Ty chciae, by bya to
pozycja podmenu. Zaznacz drug pozycj i kliknij ikon Indent Menu (poziom wyej)
(rysunek 10.20).
Rysunek 10.20. Ikona Indent Menu (poziom wyej)

Pozycje menu nie wystpuj z wciciem; jeli chcesz stworzy podmenu, kliknij ikon Indent
Menu (poziom wyej), ktra oznacza pozycj podmenu. Jeli chcesz, aby element z wciciem
by pozycj menu, kliknij ikon Outdent Menu (poziom niej). Pozycje podmenu naley
umieszcza poniej pozycji menu, do ktrej s przyczone.
6. Wprowad wicej pozycji menu i podmenu. Kliknij przycisk Next, gdy skoczysz.
7. Zostanie otwarte kolejne okno kreatora ustawie menu rozwijanego (rysunek 10.21),
w ktrym zdefiniujesz wygld menu rozwijanego. Do wyboru pozostaje opcja HTML
lub Image (opcja Image wykorzystuje grafik zamiast kodu HTML; zostanie to
zaprezentowane w wiczeniu w dalszej czci tego podrozdziau). Na dole okna
dialogowego kreatora moesz zobaczy podgld (Preview) przyszego wygldu menu.
Moesz take wybra rodzaj czcionki (Font), rozmiar (Size) oraz kolor tekstu (Text)
i komrki (Cell) dla stanu Up; a dla stanu Over moesz wybra kolory tekstu i komrki.
Poeksperymentuj troch do momentu, w ktrym uzyskasz podany wygld.
Alternatywnie, moesz skorzysta z formatowania menu jako obrazkw, klikajc opcj
Image (obrazki). Pojawi si dodatkowe opcje wyboru. Zamiast wyboru jedynie koloru
232
Rozdzia 10.
tekstu i komrek, moesz skorzysta z listy stylw. Wygldaj one bardzo podobnie
do tych, ktrych uywae wczeniej, poniewa s to te same style jedynie zgromadzone
w innym miejscu. Aby dowiedzie si wicej na ten temat, przeczytaj punkt Uywanie
wasnych stylw w listach rozwijanych. Wybieraj wic style i eksperymentuj!
Rysunek 10.21. Okno dialogowe kreatora ustawie menu rozwijanego umoliwiajce definiowanie
wygldu menu
Czcionki znajdujce si w kreatorze ustawie listy rozwijanej s tymi, ktre prawdopodobnie
s zainstalowane w kadym komputerze. Jeli skorzystasz z opcji Image (obrazki), zostanie
wyeksportowana tylko grafika, a nie tekst tekst HTML zostanie wygenerowany przez
przegldark.
8. Kliknij przycisk Finish. Aby dokona podgldu menu rozwijanego w przegldarce,

wybierz polecenie File/Preview in Browser.
Eksportowanie menu rozwijanego

Po ukoczeniu listy rozwijanej moesz ju j wyeksportowa. Dla celw wiczenia wybierz polecenie File/Export/HTML and Images. Zaznacz opcj Put Images in Subfolder,
aby Twoje obrazki zostay zapisane w podkatalogu z obrazkami. Gdy skoczysz, kliknij
przycisk Save.
Fireworks samodzielnie wygeneruje cay skrypt JavaScript dla danego menu w pliku o nazwie fw_menu.js, ktry znajdzie si w tym samym folderze co plik HTML. Upewnij si, e
zaadowae plik fw_menu.js na serwer, w przeciwnym razie Twoje menu rozwijane nie bdzie dziaa. Zawsze powstaje tylko jeden plik fw_menu.js, niezalenie od tego, jak wiele
menu rozwijanych zostanie wczonych do dokumentu. Utworzenie podmenu pociga za
sob powstanie pliku graficznego Arrow.gif.
Magia nawigacji
233
Pozycja biblioteki Dreamweavera

Nie mona wyeksportowa menu rozwijanego z Fireworks jako biblioteki Dreamweavera (Dreamweaver Library). Na stronie internetowej pomocy Macromedia Fireworks Support znajduje si rozwizanie. Pocz si z Internetem, wybierz w Fireworks polecenie Help/Fireworks Support Center;
a wtedy poczysz si ze stron Fireworks Support. Poszukaj pod hasem Dreamweaver library of
a pop-up menu lub pop-up menus, a na pewno znajdziesz rozwizanie.
Uywanie wasnych stylw w menu rozwijanych

Aby skorzysta z projektu graficznego menu rozwijanego, ktry nie jest dostpny w Fireworks,
moesz utworzy wasny styl. Moesz wykona cakowicie dowolny projekt (wycznie
graficzny, nie tekstowy) graficznego menu i zapisa go jako styl.
Aby utworzy wasny styl, zaprojektuj przycisk, kliknij strzak skierowan w prawo w panelu Styles i wybierz polecenie Export Styles. Nadaj utworzonemu stylowi odpowiedni nazw i zapisz go w folderze Fireworks 4\Configuration\Nav Menu.
Twoje wasne style mog teraz zosta wykorzystane w menu rozwijanych. Style menu nie
s skadowane w tym samym miejscu, co zwyke style z panelu Styles. Jeli zapisae inne
style przeznaczone do wykorzystania w Fireworks, znajduj si one w folderze Fireworks
4\Configuration\Styles. Aby wykorzysta ktry z tych stylw do rozwijanych menu, skopiuj wybrany plik do foldera Nav Menu, ktry take znajduje si w folderze Configuration.
Kady styl z folderu Nav Menu bdzie automatycznie udostpniony w oknie kreatora ustawie menu rozwijanego.
Edycja menu rozwijanego

Korzystajc z kreatora ustawie menu rozwijanego (Set Pop-Up Menu Wizard), moesz
podda edycji dostpne opcje w kreatorze oraz fizyczne pooenie menu w Twoim dokumencie. Kliknij dwukrotnie zarys menu, aby edytowa w oknie kreatora ustawie; po otwarciu okna kreatora dokonaj podanych zmian.
Aby zmieni pooenie menu rozwijanego, zaznacz plaster, do ktrego przypisano menu
i przecignij zarys w nowe miejsce. Jeli chciaby powiczy przenoszenie menu, otwrz plik,
ktry zapisae w wiczeniach Tworzenie byskawicznego rozwijanego menu i Eksportowanie menu rozwijanego. Kliknij i przecignij d zarysu menu, aby wyrwna z doem
i lew stron przycisku Fireworks. W razie potrzeby uyj kilkakrotnie okna podgldu, aby
umieci menu w podanym miejscu. Rysunek 10.22 przedstawia zmienione pooenie menu.
Rysunek 10.22. Menu rozwijane umieszczone na stronie w odpowiednim pooeniu

Nie mona dokonywa podgldu menu rozwijanego w Fireworks; musisz do tego celu uy
przegldarki (File/Preview in Browser).
234
Rozdzia 10.
Zaawansowana edycja menu rozwijanych

Edycja menu rozwijanego obejmuje rwnie edytowanie pliku JavaScript wygenerowanego
do obsugi menu. Zagadnienie to wykracza poza zakres tematyki tej ksiki; pene omwienie tego tematu znajdziesz w ksice pt. Fireworks 4 f/x & Design. Edytujc plik
JavaScript, moesz wyeliminowa ramki lub zmieni ich kolor i rozmiar, moesz take
zmieni rozmiar przyciskw i dostosowa wiele innych fizycznych atrybutw listy.
Ograniczenia menu rozwijanych

Oto kilka problemw, ktre moesz napotka, uywajc menu rozwijanych programu Fireworks 4:
n Menu rozwijane nie wypeniaj ramek zaprojektowanych na stronie internetowej. Jeli
menu bdzie znajdowao si w grnej lub bocznej ramce, jedyn widoczn czci listy
bdzie to, co zmieci si w biecej ramce. Jeli musisz korzysta z ramek, to by moe
nie powiniene korzysta z tego rozwizania dla menu.
n Jakiekolwiek bardziej zaawansowane modyfikacje menu zwykle wymagaj znajomoci
programowania w jzyku JavaScript.

n Pozycjonowanie bezwzgldne menu rozwijanych stwarza pewne problemy podczas
wstawiania kodu do innych edytorw. Edytory, ktre nie obsuguj warstw, nie potrafi
obsuy menu rozwijanych bez koniecznoci rcznego modyfikowania kodu.
n Menu rozwijane nie mog by wykorzystane w tabeli wyrodkowanej zawartej w ukadzie
strony. Naley wykorzystywa inne rozwizania odnonie rozmieszczenia, np. warstwy

z pozycjonowaniem bezwzgldnym.
10.2.
Tworzenie menu rozwijanego

z wykorzystaniem grafiki
PROJEKT
Pominwszy powysze ograniczenia, moliwo tworzenia menu rozwijanego s doskonaym i oszczdzajcym czas dodatkiem do Fireworks 4.
W poniszym wiczeniu stworzysz menu rozwijane dla witryny internetowej Horse Adventures jako alternatyw dla paska nawigacyjnego utworzonego w tym rozdziale. Menu
rozwijane pozwalaj zaoszczdzi sporo miejsca na stronie WWW. Do wicze przewidziano plik horsecollage.png znajdujcy si w folderze z wiczeniami do rozdziau 10.
Wykonaj nastpujce czynnoci:
Projekt 2.
1. Przed rozpoczciem wiczenia musisz stworzy styl, ktry moesz wykorzysta

dla graficznego menu rozwijanego oraz dla grafiki cza. Otwrz plik horsecollage.png
z folderu Przyklady/Rozdzial10/Materialy.
2. Wybierz narzdzie Rectangle i narysuj prostokt w lewym dolnym rogu kolau z komi.
W panelu Info wprowad wymiary prostokta 9424 i nacinij Enter/Return. W panelu
Fill wybierz wypenienie Linear i kliknij przycisk Edit. Kliknij pierwsz kontrolk koloru
i wprowad kolor o kodzie #FFFF00. Nastpnie kliknij kontrolk koloru po prawej
stronie i wprowad kod szesnastkowy #FF9900.
Magia nawigacji
235
3. W panelu Stroke wybierz kategori obrysu Basic, z listy Stroke name wybierz opcj Hard
Line, rozmiar obrysu (Tip size) ustaw na 4 i wybierz kolor czarny. Aby zmieni kierunek
gradientu, kliknij narzdzie Pointer i przesu okrg kontrolk do gry na rodek
prostokta, a kontrolk kwadratow do dou na rodek, tak jak na rysunku 10.23.
Rysunek 10.23. Pozycja gradientu grafiki cza i umiejscowienie grafiki w kolau

Nowa pozycja gradientu nie bdzie tworzy czci stylu.
4. Wybierz now grafik cza i otwrz panel Styles (Shift+F11). Wcinij ikon ze strzak
wskazujc w prawo i wybierz z menu polecenie New Style. W oknie dialogowym
New Style wpisz nazw swojego nowego stylu w tym przykadzie jest to Hacustom.
Zaakceptuj wartoci domylne i kliknij OK, aby doda nowy styl do panelu Style.
5. Aby zapisa ten styl i mc go uywa w menu rozwijanym, kliknij ponownie strzak
wskazujc w prawo i wybierz polecenie Export Styles. W oknie dialogowym Save as
ponownie nazwij swj styl i odszukaj folder Fireworks 4. Przejd do Fireworks 4\
Configuration\Nav Menu i zapisz swj styl w tym miejscu.
6. Wybierz narzdzie Text i kliknij grafik cza. W oknie dialogowym edytora tekstu wpisz
sowo Links. Podwietl to sowo i wybierz czcionk; w tym przykadzie wykorzystano
CopperplateGoth BD BT, wielkoci 30 pkt., koloru czarnego. (Uywamy czcionki
wikszej ni zwykle, poniewa jest to strona przeznaczona dla dzieci.) Kliknij OK.
Wyrodkuj tekst. Rysunek 10.24 przedstawia umieszczon grafik cza.
Rysunek 10.24. Ukoczona grafika cza umieszczona na stronie internetowej Horse Adventures
7. Zaznacz grafik cza i wybierz polecenie Insert/Slice lub narysuj plaster narzdziem
Slice, bd te kliknij prawym przyciskiem myszy i wybierz polecenie Insert Slice.
Wybierz polecenie Insert/Pop-Up Menu. Zostanie otwarte okno Set Pop-Up Menu
Wizard, przedstawione na rysunku 10.25.
236
Rozdzia 10.
Rysunek 10.25. Okno kreatora ustawie menu rozwijanego przed wprowadzeniem danych
8. W polu Text wprowad tekst Horse Game. W polu Link wpisz Hahome.htm. Kliknij
znak plusa (+), aby doda t pozycj menu. W polu Text wpisz Horse Info i kliknij
ponownie znak plus, aby doda pozycj do menu. Poniewa Horse Info to podmenu
dla Horse Game, zaznacz jego nazw i kliknij ikon Indent Menu (poziom wyej).
W tym przykadzie dodawane jest cay czas to samo cze. Oczywicie, jeli miaoby by ono
wykorzystane na stronie internetowej, naleaoby doda odpowiednie cza w polu Link.
9. W pole Text wpisz Puzzles i kliknij znak plusa. Prawdopodobnie tekst ten posiada ju
wcicie jako podmenu; jeli tak nie jest, zaznacz wpis i kliknij ikon Indent Menu.
Powtrz procedur dla sowa Screensavers. Wpisz nastpnie sowo Bookstore w pole
Text i kliknij znak plusa. Zaznacz sowo Bookstorei kliknij ikon Outdent Menu
(poziom niej) (na lewo od ikony Indent Menu), aby sprawi, by sowo Bookstore byo
elementem menu gwnego. Powtrz procedur dla reszty wpisw menu. Pen list
nazw przedstawia rysunek 10.26.
10. Kiedy skoczysz dodawa pozycje menu, kliknij przycisk Next (dalej). Rysunek 10.27
przedstawia kolejne okno dialogowe ustawie menu rozwijanego z wybran opcj Image
zamiast HTML. W tym przykadzie wykorzystano czcionk 12-punktow Verdana, Arial,
Helvetica, sans-serif. Jedyne opcje obrazka inne ni styl, ktry chciae zastosowa,
dotycz koloru tekstu (Text) dla stanu Up i Over. W tym przypadku zastosuj czarny
kolor tekstu dla stanu Up i redni odcie zieleni dla stanu Over. W obszarze Style (styl)
wybierz wasny gradient, ktry wyeksportowae jako styl na pocztku tego wiczenia.
Kliknij przycisk Finish, gdy skoczysz.
11. Menu rozwijane posiada niebieski obrys. Aby przenie go na miejsce, kliknij niebieskie
linie i przecignij poniej grafiki cza tak, jak przedstawia rysunek 10.28.
12. Aby dokona podgldu listy rozwijanej, wybierz polecenie File/Preview in Browser
(plik/podgld w przegldarce). Rysunek 10.29 przedstawia list rozwijan ogldan
w Internet Explorerze 5.
Magia nawigacji
237
Rysunek 10.26. Okno dialogowe ustawie menu rozwijanego (Set Pop-Up Menu) po dodaniu pozycji menu
Rysunek 10.27. Drugie okno dialogowe Set Pop-Up Menu przedstawiajce opcje obrazkw (Image)
Rysunek 10.28. Menu rozwijane przeniesiona na miejsce poniej grafiki czy
238
Rozdzia 10.
Rysunek 10.29. Podgld menu rozwijanego w Internet Explorerze 5
13. Aby wyeksportowa menu rozwijane, wybierz polecenia File/Export/HTML and Images,
a nastpnie zaznacz opcj Put Images in Subfolder. Odszukaj folder, w ktrym chcesz je
zapisa. Plik fw_menu.js zosta rwnie wygenerowany. Jeli potrzebujesz pomocy
lub wyjanie odnonie eksportowania, zajrzyj do rozdziau 12.
W nastpnym rozdziale
Po przeczytaniu niniejszego rozdziau powiniene ju potrafi stosowa ca gam interfejsw
nawigacyjnych dla swoich witryn internetowych. Nauczye si tworzy popularne rozczne rollowery i automatyczne paski nawigacyjne. Oprcz tego, posiadasz umiejtnoci zwizane z tworzeniem nowych list rozwijanych, a zatem bdziesz mg sprosta kademu wyzwaniu odnonie nawigacji.
W rozdziale 11. nauczysz si dzieli obrazki na plastry i dowiesz si, kiedy naley to robi.
Dowiesz si rwnie, w jaki sposb optymalizowa obrazki, aby mogy by szybko adowane na strony internetowe.

Flash, Fireworks I FreeHand F/X

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flash, Fireworks I FreeHand F/X

Uploaded by

Copyright:

Available Formats

IDZ DO

Flash, Fireworks i Freehand f/x

Narzdzie Pencil (owek).................................................................................................... 40

Rozdzia 2. Zastosowanie specjalnych

Soczewka powikszajca (Magnify)............................................................................... 49

Zastosowanie obwiedni (Envelope)...................................................................................... 54

Zastosowanie funkcji trasowania. Narzdzie Trace ............................................................. 56

Rozdzia 3. Manipulowanie obiektami ......................................65

Metamorfoza na ciece .................................................................................................. 77

Rozdzia 4. Praca z kolorami ................................................... 81

Rozdzia 5. Siatka perspektywy .............................................97

Wywietlanie i ukrywanie siatek perspektywy............................................................... 97

Rozdzia 6. Importowanie i eksportowanie ........................... 107

Eksportowanie pliku do Flasha........................................................................................... 114

Edycja tekstu z wykorzystaniem narzdzi do transformacji......................................... 141

Wypenianie wzorkami i teksturami ................................................................................... 150

Podstawy animacji .............................................................................................................. 155

Praca z klatkami.................................................................................................................. 158

Rozdzia 9. Rysowanie i edycja obiektw bitmapowych ......... 195

Praca z narzdziami selekcji ............................................................................................... 196

Rozdzia 10. Magia nawigacji ..................................................213

Rozdzia 11. Plastrowanie i optymalizacja ............................. 239

Dodawanie obszarw aktywnych (hotspots) ...................................................................... 250

Optymalizacja ..................................................................................................................... 251

Selektywna kompresja JPEG .............................................................................................. 262

Importowanie plikw PSD Photoshopa ........................................................................ 278

Eksportowanie warstw i klatek w postaci oddzielnych obrazw.................................. 295

Cz 3. Flash ........................................................ 299

Podstawowe wiadomoci na temat pracy z warstwami...................................................... 309

Rysowanie we Flashu ......................................................................................................... 317

Panele .................................................................................................................................. 324

Wektoryzacja map bitowych .............................................................................................. 327

Praca z tekstem ................................................................................................................... 331

Rozdzia 16. Podstawy ActionScriptu .....................................349

Przypisywanie akcji do przyciskw i klatek ................................................................. 350

Rozdzia 17. Projekty z ActionScriptem.................................. 369

Rozdzia 18. Projekty specjalne ............................................. 399

Rozdzia 19. Publikowanie filmw Flasha................................. 411

Alpha kontra Tint .......................................................................................................... 414

Dodatki .................................................................. 429

Rozdzia ten przedstawia pomysy rozwiza nawigacji na stronie internetowej.

Uywanie edytora przyciskw

Poniej opisano cztery rne stany przycisku.

Stan Over informuje uytkownika, e przycisk jest aktywny, co oznacza, e kliknicie

zosta rzeczywicie wcinity.

Tworzenie symbolu przycisku

3. Wybierz narzdzie Pen. Kliknij w miejscu, gdzie znajd si wzy pocztkowy

Rysunek 10.1. Przycisk Copy Up Graphic w oknie edytora przyciskw

Rysunek. 10.2. Flara w powikszeniu

Rysunek 10.3. Flara wyrwnana odpowiednio w stosunku

Rysunek 10.4. Instancja przycisku utworzona w edytorze przyciskw i umieszczona w dokumencie

Kreator czy (Link Wizard)

Zakadka Export Settings okna Link Wizard

Zakadka Link okna Link Wizard

10. Symbol ten jest automatycznie dodawany do panelu Library (Window/Library).

Rysunek 10.5. Symbol przycisku widoczny w panelu Library

Edycja symbolu przycisku

Object (Window/Object lub Alt+F2/Option+F2) i wpisz nowy tekst. Technika ta dziaa

z oryginalnym obiektem, co pozwala na dokonywanie zmian w nowym dokumencie

z poziomu okna edytora przyciskw.

Wykorzystanie panelu Library

Rysunek 10.6. Okno dialogowe Export Symbols

4. Nadaj bibliotece nazw, wybierz lokalizacj, w ktrej chciaby j zapisa i kliknij