IDZ DO PRZYK£ADOWY ROZDZIA£ SPIS TREŒCI
KATALOG KSI¥¯EK KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG
Tworzenie stron WWW we Flashu. Projekty Autor: David Morris T³umaczenie: Marcin Samodulski ISBN: 83-246-0154-6 Tytu³ orygina³u: Creating a Web Site with Flash: Visual QuickProject Guide Format: B5, stron: 160
TWÓJ KOSZYK DODAJ DO KOSZYKA
CENNIK I INFORMACJE ZAMÓW INFORMACJE O NOWOŒCIACH ZAMÓW CENNIK
CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE
Programu Macromedia Flash nie trzeba ju¿ chyba nikomu przedstawiaæ. To doskona³e narzêdzie do tworzenia interaktywnych witryn WWW i prezentacji multimedialnych cieszy siê od lat nies³abn¹c¹ popularnoœci¹ wœród projektantów i grafików komputerowych. Ostatnie wersje tego programu wzbogacono o obiektowy jêzyk programowania ActionScript, co dodatkowo zwiêkszy³o jego mo¿liwoœci. Obecna wersja Flasha to prawdziwy kombajn, za pomoc¹ którego mo¿na stworzyæ niemal ka¿d¹ aplikacjê multimedialn¹ i efektown¹ witrynê WWW. Ksi¹¿ka „Tworzenie stron WWW we Flashu. Projekty” to ilustrowany przewodnik przedstawiaj¹cy program Macromedia Flash MX 2004. Opisuje kolejne kroki prowadz¹ce do zbudowania multimedialnej i interaktywnej witryny WWW z wykorzystaniem narzêdzi, w które wyposa¿ony jest Flash. Nie znajdziesz jednak w niej d³ugich opisów i dziesi¹tek parametrów. Ka¿de zagadnienie przedstawione jest za pomoc¹ zrzutów ekranu i krótkich instrukcji. Dziêki temu w ci¹gu kilku godzin zrealizujesz swój pierwszy projekt we Flashu. • Interfejs u¿ytkownika • Przygotowanie struktury plików i zdefiniowanie parametrów projektu • Tworzenie uk³adu graficznego za pomoc¹ narzêdzi rysunkowych • Stosowanie symboli • Dodawanie tekstu do strony • Korzystanie z listwy czasowej • Tworzenie animacji i mechanizmów nawigacyjnych • £adowanie danych z zewnêtrznych plików • Publikacja witryny
Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail:
[email protected]
Dziêki lekturze tej ksi¹¿ki przekonasz siê, jak ogromne mo¿liwoœci oferuje Ci Macromedia Flash
spis treści wprowadzenie witryna, którą stworzymy organizacja książki towarzysząca witryna internetowa
8 10 12
7 poznaj flasha następny krok informacje dodatkowe
1. przygotowanie plików tworzących witrynę definiowanie struktury katalogów 22 tworzenie plików składowych witryny 23 ustawianie własności sceny 24
21 zapisywanie pliku zapisywanie zestawu kolorów informacje dodatkowe
2. projekt układu graficznego ustawienia linii pomocniczych rysowanie tła tworzenie gradientu liniowego edycja gradientu liniowego tworzenie gradientu radialnego tworzenie gradientu kołowego grafika wielokrotnego użytku edycja symbolu projektowanie przy użyciu warstw przemieszczanie pomiędzy warstwami
30 31 33 35 36 38 39 41 42 43
importowanie rysunków wektorowych porządkowanie symboli przekształcanie obiektów importowanie obrazu bitmapowego dodawanie warstwy maskującej informacje dodatkowe
60 62 64
44 45 46 47 48 49
51 zmiana atrybutów pola tekstowego wstawianie łącza typu e-mail tworzenie tekstu ozdobnego
4. użycie listwy czasowej do organizacji witryny tworzenie strony głównej dodawanie klatek tworzenie klatek kluczowych
25 26 28
29
3. dodawanie i stylizowanie tekstu wstawianie pojedynczego wiersza tekstu 52 tekst o ustalonej szerokości 54
13 19 20
dodawanie etykiet do klatek sterowanie przebiegiem animacji informacje dodatkowe
55 56 57
59 66 67 69
Flash_00.indd 5
23-09-2005 11:34:59
spis treści 5. tworzenie animacji tworzenie animacji ruchu odtwarzanie animacji we flashu złożone animacje kopiowanie i wklejanie klatek stosowanie efektów listwy czasowej przesuwanie animacji
72 74 75 78 79 87
71 wstrzymywanie odtwarzania animacji wyświetlanie podglądu filmu sterowanie odtwarzaniem klipów efekt płynnego przejścia informacje dodatkowe
6. tworzenie mechanizmu nawigacji tworzenie przycisków podgląd działania przycisku animowanie stanu przycisku dołączanie dźwięków do przycisku powielanie przycisków
100 106 107 110 111
99 układanie przycisków tworzenie działów witryny dołączanie skryptów zmiana działania przycisku informacje dodatkowe
111 114 116 118 120
7. wypełnianie działów witryn zawartością tworzenie filmów działów tworzenie przewijanego tekstu ładowanie zewnętrznych plików wczytywanie plików tekstowych
122 123 127 130
8. publikowanie witryny ustawienia pliku swf optymalizacja rozmiaru plików pasek postępu wczytywania
88 90 91 93 97
121 łącza do zewnętrznych stron www sterowanie pokazem slajdów tworzenie paska postępu ładowania informacje dodatkowe
133 135 137 140
141
142 144 147
ustawienia html 150 przygotowanie plików do przesłania 153
skorowidz
155
Flash_00.indd 6
spis treści 23-09-2005 11:34:59
2
projekt układu graficznego
Naszym pierwszym zadaniem w procesie tworzenia witryny będzie wykonanie projektu układu graficznego, w którym będziemy prezentować jej zawartość. O układzie graficznym można myśleć jak o aranżacji scenografii w filmie: ustawienie tła, zdefiniowanie różnych obszarów i jej ogólne uatrakcyjnienie. Przy okazji nauczymy się używać wielu z podstawowych funkcji Flasha. Oto niektóre czynności, które omówimy: Importowanie i przekształcanie obrazów wektorowych;
Zapisywanie obiektów wielokrotnego użytku, które noszą nazwę symboli, w celu ułatwienia modyfikacji sceny oraz uzyskania pliku projektu o mniejszej objętości; Użycie do tworzenia prostokątów i linii narzędzi służących do rysowania; Tworzenie i modyfikowanie wypełnień specjalnych, na przykład liniowych i radialnych gradientów; Tworzenie warstw w celu uporządkowania zawartości projektu; Importowanie bitmap i ich maskowanie.
29 Flash_02.indd 29
23-09-2005 11:36:32
ustawianie linii pomocniczych Dzięki liniom pomocniczym możemy zdefiniować pewne obszary na scenie, a także ułatwić sobie układanie obiektów. Dodajmy kilka linii pomocniczych, zanim zaczniemy rysować tło. 1 Wybieramy polecenie Window\Design Panels\Info (okno\panele projektowania\ info) , aby wyświetlić panel Info (info). 2 Wybieramy polecenie View\Rulers (widok\linijki), aby włączyć wyświetlanie linijek wzdłuż lewej i górnej krawędzi sceny. 3 Klikamy i przeciągamy linię pomocniczą z poziomej (górnej) linijki. Obserwujemy panel Info — gdy współrzędna y kursora będzie wynosić 60, puszczamy przycisk myszy. Przeciągamy na scenę jeszcze dwie linie pomocnicze i ustawiamy je na pozycjach 80 i 250.
4 Upewniamy się, że opcja Snap to Guides (przyciąganie do linijek) jest włączona. Wybieramy polecenie View\Snapping (widok\przyciąganie). W podmenu sprawdzamy, czy opcja Snap to Guides jest zaznaczona. Jeśli nie, klikamy Snap to Guides, aby ją włączyć.
30 Flash_02.indd 30
projekt układu graficznego 23-09-2005 11:36:33
rysowanie tła Gdy scena została podzielona na obszary, możemy rozpocząć rysowanie obiektów, które będą służyć za tło naszej witryny. 1 Z palety narzędzi wybieramy narzędzie do rysowania prostokątów Rectangle (prostokąt). 2 Klikamy przycisk wyboru koloru obrysu.
3 Na palecie próbek kolorów klikamy przycisk None (żaden) znajdujący się blisko prawej górnej krawędzi palety.
4 Klikamy przycisk wyboru koloru wypełnienia i wybieramy zdefiniowany przez nas kolor zielony o średniej intensywności.
projekt układu graficznego Flash_02.indd 31
31 23-09-2005 11:36:33
rysowanie tła Ustawiamy kursor na lewej krawędzi sceny, nad linią pomocniczą umieszczoną na pozycji 60. Klikamy i przeciągamy prostokąt do prawej krawędzi sceny oraz do linii pomocniczej na pozycji 80. 1 Utworzony prostokąt można modyfikować, jeśli jego rozmiar lub położenie nie do końca nam odpowiada. Z palety narzędzi wybieramy Selection (zaznaczenie) i klikamy prostokąt, aby go zaznaczyć.
2 Na panelu Property Inspector (właściwości) możemy zmieniać wartości w polach tekstowych width (szerokość), height (wysokość), x oraz y. Nasz prostokąt powinien mieć wymiary 780×20 pikseli i być położony w pozycji x = 0 oraz y = 60.
Upewniając się, że prostokąt jest nadal zaznaczony, wybieramy polecenie Modify\Group (modyfikuj\grupuj) (patrz „Informacje dodatkowe” na stronie 49).
32 Flash_02.indd 32
projekt układu graficznego 23-09-2005 11:36:33
tworzenie gradientu liniowego W dalszej kolejności narysujemy kilka prostokątów tworzących tło i wypełnimy je gradientami. Dzięki temu nasza scena zyska atrakcyjny wygląd. Z palety narzędzi wybieramy Rectangle (prostokąt). Kolor obrysu ustawiamy na None (żaden), a wypełnienia dowolnie — zmienimy to za chwilę. Klikamy i rozciągamy prostokąt z lewego górnego rogu sceny (0,0) do górnej krawędzi prostokąta w kolorze średnio intensywnej zieleni oraz prawej krawędzi sceny.
Na palecie Color Mixer (mikser kolorów) rozwijamy menu wypełnień Fill Style (styl wypełnienia) i wybieramy opcję Linear (gradient liniowy).
1 Na panelu pojawi się nowy element sterujący — pasek definicji gradientu wraz ze znajdującymi się poniżej wskaźnikami, które określają każdy kolor występujący w gradiencie. Klikamy wskaźnik na prawym końcu paska. 2 Kolor przypisany do tego wskaźnika pojawi się w okienku wyboru koloru po lewej stronie menu Fill Style.
projekt układu graficznego Flash_02.indd 33
33 23-09-2005 11:36:34
tworzenie gradientu liniowego 3 Klikamy przycisk wyboru koloru, aby otworzyć paletę próbek. Wybieramy zdefiniowany wcześniej kolor jasnozielony. 4 Wskaźnik po lewej stronie paska definiującego gradient powinien być już ustawiony na kolor biały. Jeśli tak nie jest, zmieniamy go. 5 Wybieramy narzędzie Paint Bucket (wiaderko z farbą) i klikamy jednolicie wypełniony prostokąt, który narysowaliśmy wcześniej. 6 Prostokąt zostanie wypełniony biało-zielonym gradientem. Gradient nie rozchodzi się w zamierzonym kierunku, zatem zmienimy to w następnym kroku.
34 Flash_02.indd 34
projekt układu graficznego 23-09-2005 11:36:34
edycja gradientu liniowego Wybieramy narzędzie Fill Transform (przekształcanie wypełnienia) i klikamy prostokąt, aby go zaznaczyć. Na ekranie pojawią się trzy uchwyty edycyjne: okrągły uchwyt służący do zmiany położenia środka gradientu; okrągły uchwyt do obracania wypełnienia; kwadratowy uchwyt do zmiany szerokości wypełnienia. Klikamy i przeciągamy kwadratowy uchwyt szerokości wypełnienia do środka prostokąta, do położenia oddalonego od środka o około 30 pikseli. Klikamy i przeciągamy okrągły uchwyt obrotu w dół i do środka, aby obrócić wypełnienie o 90 stopni. Naciskamy Shift, aby ograniczyć obrót do wielokrotności 45 stopni. Ustawiamy ponownie uchwyt szerokości gradientu, tak aby wypełniał on cały prostokąt. Klikamy i przeciągamy uchwyt punktu środkowego nieznacznie w dół, aby obniżyć punkt przejścia i sprawić, żeby więcej białej powierzchni znajdowało się w górnej części prostokąta. Zaznaczamy prostokąt za pomocą narzędzia Selection (zaznaczenie) i wybieramy polecenie Modify\Group (modyfikuj\grupuj).
projekt układu graficznego Flash_02.indd 35
35 23-09-2005 11:36:34
tworzenie gradientu radialnego Narysujmy teraz ostatni prostokąt stanowiący tło sceny.
Wybieramy narzędzie Rectangle (prostokąt). Kolor obrysu ustawiamy na None (żaden). Na palecie Color Mixer rozwijamy menu Fill Style i wybieramy pozycję Radial (gradient radialny). Klikamy wskaźnik koloru na prawym końcu paska definicji gradientu. Wykorzystując przycisk wyboru koloru, wskazujemy zdefiniowany wcześniej kolor jasnoamarantowy.
36 Flash_02.indd 36
projekt układu graficznego 23-09-2005 11:36:34
Teraz przesuwamy kursor do lewej krawędzi sceny i do dolnej zielonego prostokąta (0;80). Klikamy i przeciągamy prostokąt do dolnego prawego rogu sceny.
Ponownie gradient, który stworzyliśmy, nie do końca spełnia nasze oczekiwania. Zmodyfikujmy go. Aby wyświetlić większą część powierzchni roboczej otaczającej scenę, wybieramy polecenie View\Magnification\25% (widok\powiększenie\25%). Wybieramy narzędzie Fill Transform i klikamy prostokąt, aby go zaznaczyć. Na ekranie pojawią się cztery uchwyty edycyjne:
okrągły uchwyt służący do zmiany położenia środka gradientu; kwadratowy uchwyt do zmiany szerokości wypełnienia; okrągły uchwyt do zmiany promienia gradientu; okrągły uchwyt do obracania wypełnienia.
projekt układu graficznego Flash_02.indd 37
37 23-09-2005 11:36:35
tworzenie gradientu kołowego
Klikamy i przeciągamy okrągły uchwyt punktu środkowego do prawego dolnego rogu sceny.
Klikamy i przeciągamy okrągły środkowy uchwyt, rozszerzając koło poza górny lewy róg sceny.
Powracamy do powiększenia widoku, z jakim pracowaliśmy wcześniej. Zaznaczamy prostokąt i tworzymy grupę (Modify\Group).
38 Flash_02.indd 38
projekt układu graficznego 23-09-2005 11:36:35
grafika wielokrotnego użytku Ponieważ utworzone przez nas tło jest używane we wszystkich działach witryny, możemy go użyć wielokrotnie. Aby to uczynić, musimy przekształcić trzy narysowane prostokąty w jeden symbol wielokrotnego użytku. Jeśli danego symbolu użyjemy na scenie, nosi on nazwę instancji (patrz „Informacje dodatkowe” na stronie 49). Aby zaznaczyć trzy prostokąty, wybieramy polecenie Edit\Select All (edycja\zaznacz wszystko) lub naciskamy kombinację przycisków Ctrl+A (Windows) lub Cmd+A (Mac OS). Wybieramy polecenie Modify\Convert to Symbol (modyfikuj\przekształć w symbol) lub naciskamy F8.
W oknie dialogowym Convert to Symbol (przekształć na symbol) dla tworzonego symbolu wprowadzamy nazwę background .
Jako typ obiektu (Behavior) wybieramy Graphic (grafika) i klikamy przycisk OK .
projekt układu graficznego Flash_02.indd 39
39 23-09-2005 11:36:35
grafika wielokrotnego użytku
Otwieramy bibliotekę projektu (panel Library). Należy zwrócić uwagę na to, że został do niej dodany nowoutworzony symbol o nazwie background.
Zauważmy także, że na panelu Property Inspector pojawiły się nowe elementy sterujące, dotyczące instancji symbolu.
40 Flash_02.indd 40
projekt układu graficznego 23-09-2005 11:36:36
edycja symbolu Dokonajmy edycji symbolu, aby dodać linię (patrz „Informacje dodatkowe” na stronie 50). Klikamy dwukrotnie symbol, aby przejść do trybu jego edycji. Nad sceną, na pasku Info pojawi się informacja, jaki element aktualnie edytujemy. 1 Z palety narzędzi 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 rozciągamy linię od lewej do prawej krawędzi sceny wzdłuż linii pomocniczej, którą umieściliśmy w położeniu 520. Naciskamy kombinację przycisków Ctrl+; (Windows) lub Cmd +; (Mac OS), aby ukryć linie pomocnicze. Wydawać by się mogło, że linii nie ma, ale ona tylko ukryła się pod prostokątem wypełnionym amarantowym gradientem. Poprawimy to w następnej sekcji.
projekt układu graficznego Flash_02.indd 41
41 23-09-2005 11:36:36
projektowanie przy użyciu warstw Warstwy, jak wspominaliśmy wcześniej, służą do porządkowania projektu. Specyfikują one kolejność ułożenia obiektów na płaskiej scenie. Utworzymy teraz nową warstwę umieszczoną nad warstwą bieżącą i przeniesiemy na nią zasłoniętą linię. Najpierw zmieńmy nazwę bieżącej warstwy, tak aby odzwierciedlić jej zawartość. Jeśli listwa czasowa nie jest widoczna, wybieramy polecenie Window\ Timeline (okno\listwa czasowa). W kolumnie Layers (warstwy) klikamy dwukrotnie napis Layer 1, aby go zaznaczyć. Wprowadzamy nazwę bkgd rects i naciskamy Enter.
1 Klikamy przycisk Insert Layer (wstaw warstwę) znajdujący się na dole kolumny Layers (warstwy). Na liście warstw pojawi się nowa o nazwie Layer 2.
2 Klikamy dwukrotnie nazwę tej warstwy i zmieniamy ją na line & logo.
42 Flash_02.indd 42
projekt układu graficznego 23-09-2005 11:36:36
przemieszczanie pomiędzy warstwami Przemieszczanie obiektów z warstwy na warstwę działa we Flashu inaczej niż w większości programów rysunkowych. Przedstawimy teraz sposób wykonywania tej czynności. Za pomocą narzędzia Selection klikamy powierzchnię roboczą po lewej stronie sceny i rozciągamy obszar zaznaczenia nad powierzchnią, na której znajduje się zasłonięta linia. Włączamy wyświetlanie linii pomocniczych (View\Guides\Show Guides), jeśli chcemy zobaczyć, gdzie znajduje się linia.
Chociaż nadal nie widać linii, wiemy, że została zaznaczona, ponieważ zmieniła się zawartość panelu Property Inspector. Wybieramy polecenie Edit\Cut (edycja\ wytnij), aby przenieść linię z warstwy bkgd rects do schowka. Na listwie czasowej klikamy warstwę line & logo, aby ją aktywować.
Wybieramy polecenie Edit\Paste in Place (edycja\wklej w tym samym miejscu), aby wkleić linię dokładnie w tym samym miejscu, ale na innej warstwie. W końcu widzimy naszą linię. Kosztowało nas to sporo pracy, ale czyż nie jest ona piękna?
projekt układu graficznego Flash_02.indd 43
43 23-09-2005 11:36:37
importowanie rysunków wektorowych Czasami do filmu musimy dodać element graficzny, który został stworzony w innej aplikacji lub zapisany w innym formacie. W tej sekcji do projektu zaimportujemy logo zapisane w formacie Macromedia Fireworks PNG, zawierające elementy wektorowe (edytowalne ścieżki) oraz bitmapowe (zdjęcia). Wybieramy polecenie File\Import\Import to Library (plik\importuj\importuj do biblioteki), aby wstawić logo do filmu jako symbol. W oknie dialogowym Import to Library (importuj do biblioteki) szukamy plików t_blooms oraz logo_small.png, które ściągnęliśmy z witryny towarzyszącej tej książki i skopiowaliśmy do folderu development_files. Wybieramy plik i klikamy przycisk Open (otwórz) (Windows) lub Import to Library (Mac OS). W oknie dialogowym Fireworks PNG Import Settings (opcje importu formatu Fireworks PNG), które pojawi się na ekranie, ustawiamy następujące opcje: File Structure (struktura pliku): Import as movie clip and retain layers (importuj jako film i zachowaj warstwy); Objects (obiekty): Keep all paths editable (zachowaj edycyjność ścieżek); Text (tekst): Obie opcje są akceptowalne w tym przypadku, ponieważ tekst w logo został przekształcony w ścieżki wektorowe, aby uniknąć problemów z czcionkami. Nie zaznaczamy opcji Import as a single flattened bitmap (importuj jako spłaszczoną bitmapę).
44 Flash_02.indd 44
Klikamy przycisk OK, aby zamknąć okno dialogowe PNG Import Settings. Logo znajduje się teraz w bibliotece.
projekt układu graficznego 23-09-2005 11:36:37
porządkowanie symboli Jeśli panel Library (biblioteka) projektu Czytelnika nie jest widoczny, należy wybrać polecenie Window\Library. Na panelu Library ukażą się trzy nowe pozycje — dwie bitmapy (które znajdowały się w pliku z logo) oraz folder od nazwie Fireworks Objects (obiekty Fireworks) zawierający symbol z logo. Poświęćmy chwilę na uporządkowanie naszych symboli, co pozwoli nam zaoszczędzić czas i uniknąć później problemu.
Klikamy dwukrotnie nazwę folderu i zaznaczamy tekst Fireworks Objects . Wprowadzamy nazwę t_blooms logo i naciskamy Enter. Klikamy dwukrotnie najpierw ikonę folderu, aby wyświetlić 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 przeciągamy je do folderu t_blooms logo. Klikamy dwukrotnie ikonę folderu t_blooms logo, aby zwinąć jego zawartość. Klikamy przycisk New Folder (nowy folder) znajdujący się na dole panelu Library, aby dodać do listy nowy folder, który nazwiemy bkgd objects. Przeciągamy do niego pozostałe obiekty z listy.
projekt układu graficznego Flash_02.indd 45
45 23-09-2005 11:36:37
przekształacanie obiektów Na obiektach na scenie, również na symbolach, można stosować różne przekształcenia. Przekształceń takich jak skalowanie, obracanie i pochylanie dokonujemy za pomocą narzędzia Free Transform (swobodne przekształcenię) (patrz „Informacje dodatkowe” na stronie 50). Należy się upewnić, że nadal znajdujemy się wewnątrz symbolu background. Jeśli 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, który nazwaliśmy logo. Klikamy go i przeciągamy na scenę w okolice lewego górnego rogu. Logo jest trochę większe, niż dyktują to nasze potrzeby, dlatego przeskalujemy je. Upewniając się, że instancja obiektu jest zaznaczony, wybieramy narzędzie Free Transform. Wokół obiektu pojawi się osiem uchwytów przekształcenia. Naciskamy i przytrzymujemy kombinację przycisków Alt+Shift (Windows) lub Option+Shift (Mac OS), a następnie przeciągamy prawy dolny uchwyt w kierunku środka obiektu. Puszczamy przycisk myszy, gdy napis Floral Preservation znajdzie się nad górną krawędzią jednorodnego zielonego paska. Wybieramy narzędzie Selection, aby zatwierdzić przekształcenie.
46 Flash_02.indd 46
projekt układu graficznego 23-09-2005 11:36:38
importowanie obrazu bitmapowego Gdy już umieścimy i przeskalujemy logo, przejdziemy do zbalansowania kompozycji poprzez umieszczenie obrazu w prawym dolnym rogu sceny. Na listwie czasowej dodajemy nową warstwę w symbolu background.
Nowej warstwie nadajemy nazwę bouquet.
Wybieramy polecenie File\Import\ Import to Stage (plik\importuj\importuj na scenę). W oknie dialogowym Import (import) przechodzimy do folderu development_files. Wskazujemy plik bouquet.png i klikamy przycisk Open.
Zdjęcie bukietu zostanie umieszczone na scenie. Przeciągamy je do dolnego prawego rogu, tak aby na scenie pozostawała niewiele ponad jedna czwarta bukietu.
projekt układu graficznego Flash_02.indd 47
47 23-09-2005 11:36:38
dodawanie warstwy maskującej Wystające ze sceny zdjęcie bukietu nie wpłynie na wygląd wyeksportowanego filmu, ale przeszkadza nam podczas tworzenia witryny. W celu ukrycia niepotrzebnych fragmentów obrazu użyjemy warstwy maskującej. Dodajemy nową warstwę i nazywamy ją bouquet_mask. Wybieramy narzędzie Rectangle. Zaczynając przy prawej krawędzi nad obrazem, rozciągamy prostokąt tak, aby przykrył całą scenę.
Klikamy prawym przyciskiem myszy (Windows) lub lewym z przytrzymaniem klawisza Ctrl (Mac OS) warstwę bouquet_mask i z menu kontekstowego wybieramy polecenie Mask (maska).
Wystający ze sceny fragment obrazu nie będzie już widoczny. Skończyliśmy tło, nadszedł czas na dodanie tekstu. Zapisujemy plik.
48 Flash_02.indd 48
projekt układu graficznego 23-09-2005 11:36:38
informacje dodatkowe rysowanie tła str. 32 • We Flashu, gdy na jednej warstwie jeden obiekt nachodzi na drugi, przykryta część tego, który znajduje się pod spodem, jest usuwana. Sprawia to, że dokonywanie modyfikacji obiektów, na przykład ich podsuwanie, staje się koszmarem. Aby uniknąć związanych z tym problemów, możemy tworzyć nowe warstwy dla każdego generowanego obiektu lub grupować obiekty zaraz po ich narysowaniu. Ja osobiście wolę grupowanie.
projekt układu graficznego Flash_02.indd 49
grafika wielokrotnego użytku str. 39
• Używanie symboli we Flashu ma dwie zalety — zmniejszenie rozmiaru pliku wynikowego oraz łatwość edycji projektu. Gdy utworzymy symbol i umieścimy jego instancje na scenie, rozmiar pliku wynikowego nie zwiększa się, ponieważ niezależnie od liczby instancji kod opisujący dany symbol występuje w pliku wynikowym tylko raz. Każda instancja stanowi jedynie odwołanie do symbolu oraz opis jego przekształceń, na przykład zmiany przeźroczystości lub wymiarów na płaszczyźnie. Późniejsze modyfikacje projektu zawierającego symbole są także łatwiejsze. Wyobraźmy sobie, że rozłożyliśmy na scenie 100 niebieskich kwadracików (ale nie będących instancjami żadnego symbolu), a następnie zdecydowaliśmy się zmienić ich kolor. Musimy znaleźć 100 kwadratów i zmienić kolor ich wszystkich. Ale jeśli utworzylibyśmy symbol niebieskiego kwadracika i umieścilibyśmy na scenie 100 jego instancji, musielibyśmy jedynie zmodyfikować ten symbol — wszystkie instancje zostałyby zaktualizowane automatycznie.
49 23-09-2005 11:36:39
informacje dodatkowe edycja symbolu str. 41 • Gdy na scenie znajduje się obiekt, który jest kontenerem zawierającym inne obiekty (grupy, symbole i pola tekstowe), możemy go kliknąć dwukrotnie, aby modyfikować jego zawartość. • Aby opuścić tryb edycji kontenera, musimy dwukrotnie kliknąć poza jego obszarem. • Czasami, gdy we Flashu narysujemy linię, zostaje ona umieszczona pod innymi obiektami, a nie na ich wierzchu, jak można by się tego spodziewać. Negując obowiązującą w programie konwencję, że nowy obiekt umieszczany jest nad już istniejącymi na tej samej warstwie, Flash układa linie w oparciu o tajemniczy algorytm, który mogli wymyślić jedynie programiści — bierze on pod uwagę kolor linii. Aby linia pojawiła się tam, gdzie chcemy, możemy wykonać dwie czynności — zgrupować ją, co spowoduje jej przeniesienie na wierzch stosu, lub przesunąć ją na wyższą warstwę.
50 Flash_02.indd 50
przekształcanie obiektów str. 46
• Gdy skalujemy elementy wektorowe (zarówno te narysowane we Flashu, jak i zaimportowane — na przykład plik z logo), możemy je powiększać i zmniejszać bez żadnych negatywnych konsekwencji. Jeśli jednak przekształcamy obraz bitmapowy, powinniśmy unikać jego powiększania. Powiększona bitmapa musi być ponownie próbkowana i może stać się zniekształcona lub rozmyta. Najlepiej jest otworzyć dany obraz w programie do obróbki obrazów typu Adobe Photoshop lub Macromedia Fireworks i przeskalować go w nim zależnie od potrzeb.
projekt układu graficznego 23-09-2005 11:36:39