Download - Tworzenie stron WWW we Flashu. Projekty

1. IDZ DO PRZYKADOWY ROZDZIA SPIS TRECI Tworzenie stron WWW we Flashu. Projekty KATALOG KSIEK Autor: David Morris Tumaczenie: Marcin Samodulski KATALOG ONLINE ISBN: 83-246-0154-6 Tytu oryginau: Creating a Web Site ZAMW DRUKOWANY KATALOG with Flash: Visual QuickProject Guide Format: B5, stron: 160 TWJ KOSZYK DODAJ DO KOSZYKA Programu Macromedia Flash nie trzeba ju chyba nikomu przedstawia. To doskonae narzdzie do tworzenia interaktywnych witryn WWW i prezentacji multimedialnych cieszy si od lat niesabnc popularnoci wrd projektantw i grafikw CENNIK I INFORMACJE komputerowych. Ostatnie wersje tego programu wzbogacono o obiektowy jzyk programowania ActionScript, co dodatkowo zwikszyo jego moliwoci. Obecna wersja ZAMW INFORMACJE Flasha to prawdziwy kombajn, za pomoc ktrego mona stworzy niemal kad O NOWOCIACH aplikacj multimedialn i efektown witryn WWW. Ksika Tworzenie stron WWW we Flashu. Projekty to ilustrowany przewodnik ZAMW CENNIK przedstawiajcy program Macromedia Flash MX 2004. Opisuje kolejne kroki prowadzce do zbudowania multimedialnej i interaktywnej witryny WWW z wykorzystaniem narzdzi, w ktre wyposaony jest Flash. Nie znajdziesz jednak CZYTELNIA w niej dugich opisw i dziesitek parametrw. Kade zagadnienie przedstawione jest za pomoc zrzutw ekranu i krtkich instrukcji. Dziki temu w cigu kilku godzin FRAGMENTY KSIEK ONLINE zrealizujesz swj pierwszy projekt we Flashu. Interfejs uytkownika Przygotowanie struktury plikw i zdefiniowanie parametrw projektu Tworzenie ukadu graficznego za pomoc narzdzi rysunkowych Stosowanie symboli Dodawanie tekstu do strony Korzystanie z listwy czasowej Tworzenie animacji i mechanizmw nawigacyjnych adowanie danych z zewntrznych plikw Publikacja witryny Dziki lekturze tej ksiki przekonasz si, Wydawnictwo Helion jak ogromne moliwoci oferuje Ci Macromedia Flash ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: [email protected]

2. spis treci wprowadzenie 7 witryna, ktr stworzymy 8 poznaj flasha 13 organizacja ksiki 10 nastpny krok 19 towarzyszca witryna internetowa 12 informacje dodatkowe 20 1. przygotowanie plikw tworzcych witryn 21 definiowanie struktury katalogw 22 zapisywanie pliku 25 tworzenie plikw skadowych witryny 23 zapisywanie zestawu kolorw 26 ustawianie wasnoci sceny 24 informacje dodatkowe 28 2. projekt ukadu graficznego 29 ustawienia linii pomocniczych 30 importowanie rysunkw rysowanie ta 31 wektorowych 44 tworzenie gradientu liniowego 33 porzdkowanie symboli 45 edycja gradientu liniowego 35 przeksztacanie obiektw 46 tworzenie gradientu radialnego 36 importowanie obrazu tworzenie gradientu koowego 38 bitmapowego 47 grafika wielokrotnego uytku 39 dodawanie warstwy edycja symbolu 41 maskujcej 48 projektowanie przy uyciu warstw 42 informacje dodatkowe 49 przemieszczanie pomidzy warstwami 43 3. dodawanie i stylizowanie tekstu 51 wstawianie pojedynczego zmiana atrybutw pola tekstowego 55 wiersza tekstu 52 wstawianie cza typu e-mail 56 tekst o ustalonej szerokoci 54 tworzenie tekstu ozdobnego 57 4. uycie listwy czasowej do organizacji witryny 59 tworzenie strony gwnej 60 dodawanie etykiet do klatek 66 dodawanie klatek 62 sterowanie przebiegiem animacji 67 tworzenie klatek kluczowych 64 informacje dodatkowe 69

3. spis treci 5. tworzenie animacji 71 tworzenie animacji ruchu 72 wstrzymywanie odtwarzania animacji 88 odtwarzanie animacji we flashu 74 wywietlanie podgldu filmu 90 zoone animacje 75 sterowanie odtwarzaniem klipw 91 kopiowanie i wklejanie klatek 78 efekt pynnego przejcia 93 stosowanie efektw listwy czasowej 79 informacje dodatkowe 97 przesuwanie animacji 87 6. tworzenie mechanizmu nawigacji 99 tworzenie przyciskw 100 ukadanie przyciskw 111 podgld dziaania przycisku 106 tworzenie dziaw witryny 114 animowanie stanu przycisku 107 doczanie skryptw 116 doczanie dwikw do przycisku 110 zmiana dziaania przycisku 118 powielanie przyciskw 111 informacje dodatkowe 120 7. wypenianie dziaw witryn zawartoci 121 tworzenie filmw dziaw 122 cza do zewntrznych stron www 133 tworzenie przewijanego tekstu 123 sterowanie pokazem slajdw 135 adowanie zewntrznych plikw 127 tworzenie paska postpu adowania 137 wczytywanie plikw tekstowych 130 informacje dodatkowe 140 8. publikowanie witryny 141 ustawienia pliku swf 142 ustawienia html 150 optymalizacja rozmiaru plikw 144 przygotowanie plikw do przesania 153 pasek postpu wczytywania 147 skorowidz 155 spis treci

4. projekt 2 ukadu graficznego Naszym pierwszym zadaniem w procesie tworzenia witryny bdzie wykonanie projektu ukadu graficznego, w ktrym bdziemy prezentowa jej zawarto. O uka- dzie graficznym mona myle jak o aranacji scenografii w filmie: ustawienie ta, zdefiniowanie rnych obszarw i jej oglne uatrakcyjnienie. Przy okazji nauczymy si uywa wielu z podstawowych funkcji Flasha. Oto niektre czynnoci, ktre omwimy: Importowanie i prze- Zapisywanie obiektw wielokrotnego uytku, ktre ksztacanie obrazw nosz nazw symboli, w celu uatwienia modyfikacji wektorowych; sceny oraz uzyskania pliku projektu o mniejszej objtoci; Uycie do tworzenia prostoktw i linii narzdzi sucych do ryso- wania; Tworzenie i modyfikowanie wypenie specjalnych, na przykad liniowych i radialnych gradientw; Tworzenie warstw w celu uporzd- kowania zawartoci projektu; Importowanie bitmap i ich masko- wanie. 29

5. ustawianie linii pomocniczych Dziki liniom pomocniczym moemy zdefiniowa pewne obszary na scenie, a take uatwi sobie ukadanie obiektw. Dodajmy kilka linii pomocniczych, zanim zacznie- my rysowa to. 1 Wybieramy polecenie WindowDesign PanelsInfo (oknopanele projektowania info) , aby wywietli panel Info (info). 2 Wybieramy polecenie ViewRulers (widoklinijki), aby wczy wywietlanie linijek wzdu lewej i grnej krawdzi sceny. 3 Klikamy i przecigamy lini pomoc- nicz z poziomej (grnej) linijki. Obser- wujemy panel Info gdy wsprzdna y kursora bdzie wynosi 60, puszczamy przycisk myszy. Przecigamy na scen jeszcze dwie linie pomocnicze i ustawiamy je na pozycjach 80 i 250. 4 Upewniamy si, e opcja Snap to Guides (przyciganie do linijek) jest w- czona. Wybieramy polecenie ViewSnap- ping (widokprzyciganie). W podmenu sprawdzamy, czy opcja Snap to Guides jest zaznaczona. Jeli nie, klikamy Snap to Guides, aby j wczy. 30 projekt ukadu graficznego

6. rysowanie ta Gdy scena zostaa podzielona na obszary, moemy rozpocz rysowanie obiektw, ktre bd suy za to naszej witryny. 1 Z palety narzdzi wybieramy narzdzie do ryso- wania prostoktw Rectangle (prostokt). 2 Klikamy przycisk wyboru koloru obrysu. 3 Na palecie prbek kolorw klikamy przycisk None (aden) znajdujcy si blisko prawej grnej krawdzi palety. 4 Klikamy przycisk wyboru koloru wypenienia i wybieramy zdefiniowany przez nas kolor zielony o redniej intensywnoci. projekt ukadu graficznego 31

7. rysowanie ta Ustawiamy kursor na lewej krawdzi sceny, nad lini pomocni- cz umieszczon na pozycji 60. Klikamy i przecigamy prostokt do prawej krawdzi sceny oraz do linii pomocniczej na pozycji 80. 1 Utworzony prostokt mona modyfikowa, jeli jego rozmiar lub poo- enie nie do koca nam odpowiada. Z palety narzdzi wybieramy Selection (zaznaczenie) i klikamy prostokt, aby go zaznaczy. 2 Na panelu Property Inspector (wa- ciwoci) moemy zmienia wartoci w polach tekstowych width (szeroko), height (wysoko), x oraz y. Nasz prostokt powinien mie wymiary 78020 pikseli i by pooony w pozycji x = 0 oraz y = 60. Upewniajc si, e prostokt jest nadal zaznaczony, wybieramy polecenie Modi- fyGroup (modyfikujgrupuj) (patrz Informacje dodatkowe na stronie 49). 32 projekt ukadu graficznego

8. tworzenie gradientu liniowego W dalszej kolejnoci narysujemy kilka prostoktw tworzcych to i wypenimy je gradientami. Dziki temu nasza scena zyska atrakcyjny wygld. Z palety narzdzi wybieramy Rectangle (prostokt). Kolor obrysu ustawiamy na None (aden), a wypenienia dowolnie zmienimy to za chwil. Klikamy i rozcigamy prostokt z lewego grnego rogu sceny (0,0) do grnej krawdzi prostokta w kolorze rednio intensywnej zieleni oraz prawej krawdzi sceny. Na palecie Color Mixer (mikser kolorw) rozwijamy menu wypenie Fill Style (styl wypenienia) i wybieramy opcj Linear (gradient liniowy). 1 Na panelu pojawi si nowy element ste- rujcy pasek definicji gradientu wraz ze znajdujcymi si poniej wskanikami, ktre okrelaj kady kolor wystpujcy w gra- diencie. Klikamy wskanik na prawym kocu paska. 2 Kolor przypisany do tego wskanika pojawi si w okienku wyboru koloru po lewej stronie menu Fill Style. projekt ukadu graficznego 33

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

10. edycja gradientu liniowego Wybieramy narzdzie Fill Transform (przeksztacanie wypenienia) i klikamy prostokt, aby go zaznaczy. Na ekranie pojawi si trzy uchwyty edycyjne: okrgy uchwyt sucy do zmiany pooenia rodka gradientu; okrgy uchwyt do obracania wypenienia; kwadratowy uchwyt do zmiany szerokoci wypenienia. Klikamy i przecigamy kwadratowy uchwyt szerokoci wypenienia do rodka prostokta, do pooenia oddalonego od rodka o okoo 30 pikseli. Klikamy i przecigamy okrgy uchwyt obro- tu w d i do rodka, aby obrci wypenie- nie o 90 stopni. Naciskamy Shift, aby ograni- czy obrt do wielokrotnoci 45 stopni. Ustawiamy ponownie uchwyt szerokoci gradientu, tak aby wypenia on cay prostokt. Klikamy i przecigamy uchwyt punktu rodkowego nieznacznie w d, aby obniy punkt przejcia i sprawi, eby wicej biaej powierzchni znajdowao si w grnej czci prostokta. Zaznaczamy prostokt za pomoc narzdzia Selection (zaznaczenie) i wybieramy polecenie ModifyGroup (modyfikujgrupuj). projekt ukadu graficznego 35

11. tworzenie gradientu radialnego Narysujmy teraz ostatni prostokt stanowicy to sceny. Wybieramy narzdzie Rectangle (prostokt). Kolor obrysu ustawiamy na None (aden). Na palecie Color Mixer rozwijamy menu Fill Style i wybieramy pozycj Radial (gradient radialny). Klikamy wskanik koloru na prawym kocu paska definicji gradientu. Wy- korzystujc przycisk wyboru koloru, wskazujemy zdefiniowany wczeniej kolor jasnoamarantowy. 36 projekt ukadu graficznego

12. Teraz przesuwamy kursor do lewej krawdzi sceny i do dolnej zielonego prostokta (0;80). Klikamy i przecigamy prostokt do dolnego prawego rogu sceny. Ponownie gradient, ktry stworzylimy, nie do koca spenia nasze oczekiwania. Zmodyfikujmy go. Aby wywietli wiksz cz powierzchni roboczej otaczajcej scen, wybieramy polecenie ViewMagnification25% (widokpowikszenie25%). Wybieramy narzdzie Fill Transform i klikamy prostokt, aby go zaznaczy. Na ekranie pojawi si cztery uchwyty edycyjne: okrgy uchwyt sucy do zmiany pooenia rodka gradientu; kwadratowy uchwyt do zmiany szerokoci wypenienia; okrgy uchwyt do zmiany promienia gradientu; okrgy uchwyt do obracania wypenienia. projekt ukadu graficznego 37

13. tworzenie gradientu koowego Klikamy i przecigamy okrgy uchwyt punktu rodkowego do prawego dolnego rogu sceny. Klikamy i przecigamy okrgy rod- kowy uchwyt, rozszerzajc koo poza grny lewy rg sceny. Powracamy do powikszenia widoku, z jakim pracowalimy wczeniej. Zaznaczamy prostokt i tworzymy grup (ModifyGroup). 38 projekt ukadu graficznego

14. grafika wielokrotnego uytku Poniewa utworzone przez nas to jest uywane we wszystkich dziaach witryny, moemy go uy wielokrot- nie. Aby to uczyni, musimy przeksztaci trzy narysowane prostokty w jeden symbol wielokrotnego uytku. Jeli danego symbolu uyjemy na scenie, nosi on nazw instancji (patrz Informacje dodatkowe na stronie 49). Aby zaznaczy trzy prostokty, wybieramy polecenie EditSelect All (edycjazaznacz wszystko) lub naciskamy kombinacj przyciskw Ctrl+A (Windows) lub Cmd+A (Mac OS). Wybieramy polecenie ModifyConvert to Symbol (modyfi- kujprzekszta w symbol) lub naciskamy F8. W oknie dialogowym Convert to Symbol (przekszta na symbol) dla tworzonego symbolu wprowadzamy nazw background . Jako typ obiektu (Behavior) wybieramy Graphic (grafika) i klikamy przycisk OK . projekt ukadu graficznego 39

15. grafika wielokrotnego uytku Otwieramy bibliotek projektu (panel Library). Naley zwrci uwag na to, e zosta do niej dodany nowoutwo- rzony symbol o nazwie background. Zauwamy take, e na panelu Property Inspector pojawiy si nowe elementy sterujce, dotyczce instancji symbolu. 40 projekt ukadu graficznego

16. edycja symbolu Dokonajmy edycji symbolu, aby doda lini (patrz Informacje dodatkowe na stronie 50). Klikamy dwukrotnie symbol, aby przej do trybu jego edycji. Nad scen, na pasku Info pojawi si informacja, jaki element aktualnie edytujemy. 1 Z palety narzdzi wybieramy Line (linia). 2 Na panelu Property Inspector klikamy przycisk wyboru koloru linii i wybieramy ciemny amarant. 3 W polu Stroke Height (grubo obrysu) wprowadzamy warto 3. 4 Jako typ linii Stroke Style (styl obrysu) wybieramy Solid (linia jednolita). 5 Klikamy i rozcigamy lini od lewej do prawej krawdzi sceny wzdu linii pomocniczej, ktr umiecilimy w pooeniu 520. Naciskamy kombinacj przyciskw Ctrl+; (Windows) lub Cmd +; (Mac OS), aby ukry linie pomocnicze. Wydawa by si mogo, e linii nie ma, ale ona tylko ukrya si pod prostoktem wypenio- nym amarantowym gradientem. Poprawimy to w nastpnej sekcji. projekt ukadu graficznego 41

17. projektowanie przy uyciu warstw Warstwy, jak wspominalimy wczeniej, su do porzdkowania projektu. Specyfiku- j one kolejno uoenia obiektw na paskiej scenie. Utworzymy teraz now warstw umieszczon nad warstw biec i przeniesiemy na ni zasonit lini. Najpierw zmiemy nazw biecej warstwy, tak aby odzwierciedli jej zawarto. Jeli listwa czasowa nie jest widocz- na, wybieramy polecenie Window Timeline (oknolistwa czasowa). W kolumnie Layers (warstwy) klikamy dwukrotnie napis Layer 1, aby go zaznaczy. Wprowadzamy nazw bkgd rects i naciskamy Enter. 1 Klikamy przycisk Insert Layer (wstaw warstw) znajdujcy si na dole kolumny Layers (warstwy). Na licie warstw pojawi si nowa o nazwie Layer 2. 2 Klikamy dwukrotnie nazw tej warstwy i zmieniamy j na line & logo. 42 projekt ukadu graficznego

18. przemieszczanie pomidzy warstwami Przemieszczanie obiektw z warstwy na warstw dziaa we Flashu inaczej ni w wikszoci programw rysunkowych. Przedstawimy teraz sposb wykonywania tej czynnoci. Za pomoc narzdzia Selection klikamy powierzchni robocz po lewej stronie sceny i rozcigamy obszar zaznaczenia nad powierzchni, na ktrej znajduje si zasonita linia. Wczamy wywietlanie linii pomocniczych (ViewGuidesShow Guides), jeli chcemy zobaczy, gdzie znajduje si linia. Chocia nadal nie wida linii, wiemy, e zostaa zaznaczona, poniewa zmienia si zawarto panelu Pro- perty Inspector. Wybieramy polecenie EditCut (edycja wytnij), aby przenie lini z warstwy bkgd rects do schowka. Na listwie czasowej klikamy warstw line & logo, aby j aktywowa. Wybieramy polecenie EditPaste in Place (edycjawklej w tym samym miejscu), aby wklei lini dokadnie w tym samym miejscu, ale na innej warstwie. W kocu widzimy nasz lini. Kosztowao nas to sporo pracy, ale czy nie jest ona pikna? projekt ukadu graficznego 43

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

20. porzdkowanie symboli Jeli panel Library (biblioteka) projektu Czytelnika nie jest widoczny, naley wybra polecenie WindowLibrary. Na panelu Library uka si trzy nowe pozycje dwie bitmapy (ktre znajdoway si w pliku z logo) oraz folder od nazwie Fireworks Objects (obiekty Fireworks) zawierajcy symbol z logo. Powimy chwil na uporzdkowa- nie naszych symboli, co pozwoli nam zaoszczdzi czas i unikn pniej problemu. Klikamy dwukrotnie nazw folderu i zaznaczamy tekst Fireworks Objects . Wprowadzamy nazw t_blooms logo i naciskamy Enter. Klikamy dwukrotnie najpierw ikon folderu, aby wywietli jego zawarto, a potem nazw symbolu, aby go zaznaczy. Wprowadzamy nazw logo i naciskamy Enter. Przytrzymujemy przycisk Shift i klikamy dwa symbole bitmapowe na panelu Library, aby je zaznaczy. Klikamy i przecigamy je do folderu t_blooms logo. Klikamy dwukrotnie ikon folderu t_blooms logo, aby zwin jego zawarto. Klikamy przycisk New Folder (nowy folder) znajdujcy si na dole panelu Library, aby doda do listy nowy folder, ktry nazwiemy bkgd objects. Przeciga- my do niego pozostae obiekty z listy. projekt ukadu graficznego 45

21. przeksztaacanie obiektw Na obiektach na scenie, rwnie na symbolach, mona stosowa rne przeksztacenia. Przeksztace takich jak skalowanie, obracanie i pochylanie dokonujemy za pomoc narzdzia Free Transform (swobodne przeksztaceni) (patrz Informacje dodatkowe na stronie 50). Naley si upewni, e nadal znajduje- my si wewntrz symbolu background. Jeli jest inaczej, klikamy dwukrotnie ten symbol na scenie, aby przej do trybu jego edycji. Klikamy warstw line & logo, aby j aktywowa na listwie czasowej. Na panelu Library przechodzimy do symbolu, ktry nazwalimy logo. Klika- my go i przecigamy na scen w okolice lewego grnego rogu. Logo jest troch wiksze, ni dyktuj to nasze po- trzeby, dlatego przeskalujemy je. Upewniajc si, e instancja obiektu jest zaznaczony, wybieramy narzdzie Free Transform. Wok obiektu pojawi si osiem uchwytw przeksztacenia. Naciskamy i przytrzymujemy kombinacj przyciskw Alt+Shift (Windows) lub Option+Shift (Mac OS), a nastpnie przecigamy prawy dolny uchwyt w kierunku rodka obiektu. Puszczamy przycisk myszy, gdy napis Floral Preservation znajdzie si nad grn krawdzi jednorodnego zielonego paska. Wybieramy narzdzie Selection, aby zatwierdzi przeksztacenie. 46 projekt ukadu graficznego

22. importowanie obrazu bitmapowego Gdy ju umiecimy i przeskalujemy logo, przejdziemy do zbalansowania kompozycji poprzez umieszczenie obrazu w prawym dolnym rogu sceny. Na listwie czasowej dodajemy now warstw w symbolu background. Nowej warstwie nadajemy nazw bouquet. Wybieramy polecenie FileImport Import to Stage (plikimportujimportuj na scen). W oknie dialogowym Import (import) przechodzimy do folderu development_files. Wskazujemy plik bouquet.png i klikamy przycisk Open. Zdjcie bukietu zostanie umieszczone na scenie. Przecigamy je do dolnego prawego rogu, tak aby na scenie pozo- stawaa niewiele ponad jedna czwarta bukietu. projekt ukadu graficznego 47

23. dodawanie warstwy maskujcej Wystajce ze sceny zdjcie bukietu nie wpynie na wygld wyeksportowanego filmu, ale przeszkadza nam podczas tworzenia witryny. W celu ukrycia niepotrzebnych fragmentw obrazu uyjemy warstwy maskujcej. Dodajemy now warstw i nazywamy j bouquet_mask. Wybieramy narzdzie Rectangle. Zaczynajc przy prawej krawdzi nad obrazem, rozcigamy prostokt tak, aby przykry ca scen. Klikamy prawym przyciskiem myszy (Windows) lub lewym z przytrzyma- niem klawisza Ctrl (Mac OS) warstw bouquet_mask i z menu kontekstowego wybieramy polecenie Mask (maska). Wystajcy ze sceny fragment obrazu nie bdzie ju widoczny. Skoczylimy to, nadszed czas na doda- nie tekstu. Zapisujemy plik. 48 projekt ukadu graficznego

24. informacje dodatkowe rysowanie ta str. 32 grafika wielokrotnego uytku str. 39 We Flashu, gdy na jednej warstwie jeden obiekt nachodzi na drugi, Uywanie symboli we Flashu ma przykryta cz tego, ktry znajdu- dwie zalety zmniejszenie rozmia- je si pod spodem, jest usuwana. ru pliku wynikowego oraz atwo Sprawia to, e dokonywanie mo- edycji projektu. Gdy utworzymy dyfikacji obiektw, na przykad ich symbol i umiecimy jego instancje podsuwanie, staje si koszmarem. na scenie, rozmiar pliku wyniko- Aby unikn zwizanych z tym wego nie zwiksza si, poniewa problemw, moemy tworzy nowe niezalenie od liczby instancji kod warstwy dla kadego generowane- opisujcy dany symbol wystpuje go obiektu lub grupowa obiekty w pliku wynikowym tylko raz. zaraz po ich narysowaniu. Ja osobi- Kada instancja stanowi jedynie od- cie wol grupowanie. woanie do symbolu oraz opis jego przeksztace, na przykad zmiany przeroczystoci lub wymiarw na paszczynie. Pniejsze modyfikacje projektu zawierajcego symbole s take atwiejsze. Wyobramy sobie, e roz- oylimy na scenie 100 niebieskich kwadracikw (ale nie bdcych instancjami adnego symbolu), a nastpnie zdecydowalimy si zmieni ich kolor. Musimy znale 100 kwadratw i zmieni kolor ich wszystkich. Ale jeli utworzylibymy symbol niebieskiego kwadracika i umiecilibymy na scenie 100 jego instancji, musielibymy jedynie zmodyfikowa ten symbol wszystkie instancje zostayby zaktualizowane automatycznie. projekt ukadu graficznego 49

25. informacje dodatkowe edycja symbolu str. 41 przeksztacanie obiektw str. 46 Gdy na scenie znajduje si obiekt, ktry jest kontenerem zawieraj- Gdy skalujemy elementy wekto- cym inne obiekty (grupy, symbole rowe (zarwno te narysowane we i pola tekstowe), moemy go klikn Flashu, jak i zaimportowane na dwukrotnie, aby modyfikowa jego przykad plik z logo), moemy je po- zawarto. wiksza i zmniejsza bez adnych Aby opuci tryb edycji kontenera, negatywnych konsekwencji. Jeli musimy dwukrotnie klikn poza jednak przeksztacamy obraz bit- jego obszarem. mapowy, powinnimy unika jego Czasami, gdy we Flashu narysuje- powikszania. Powikszona bitma- my lini, zostaje ona umieszczona pa musi by ponownie prbkowana pod innymi obiektami, a nie na ich i moe sta si znieksztacona lub wierzchu, jak mona by si tego rozmyta. Najlepiej jest otworzy spodziewa. Negujc obowizujc dany obraz w programie do obrbki w programie konwencj, e nowy obrazw typu Adobe Photoshop obiekt umieszczany jest nad ju lub Macromedia Fireworks i prze- istniejcymi na tej samej warstwie, skalowa go w nim zalenie od Flash ukada linie w oparciu o ta- potrzeb. jemniczy algorytm, ktry mogli wy- myli jedynie programici bierze on pod uwag kolor linii. Aby linia pojawia si tam, gdzie chcemy, moemy wykona dwie czynnoci zgrupowa j, co spo- woduje jej przeniesienie na wierzch stosu, lub przesun j na wysz warstw. 50 projekt ukadu graficznego