Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00399 005962 13642149 na godz. na dobę w sumie
Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty - książka
Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty - książka
Autor: Liczba stron: 176
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-2455-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Poznaj najważniejsze narzędzia Flasha i twórz efektowne serwisy internetowe

Adobe Flash CS4 zapewnia sprawną integrację animacji z witryną oraz umożliwia obsługę obiektów 3D. To wszystko sprawia, że jest on doskonałym narzędziem do tworzenia rozbudowanych i efektownych serwisów WWW. I chociaż bogactwo elementów sterujących tej aplikacji może na pierwszy rzut oka wydawać się przytłaczające, z podręcznikiem 'Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty' obsługa najważniejszych mechanizmów i funkcji Flasha staje się naprawdę prosta.

Niniejsza książka została skonstruowana w oparciu o unikatową metodę nauki nowych technologii, tak abyś mógł szybko stworzyć interesującą wizualnie witrynę bez potrzeby przedzierania się przez gąszcz technicznych szczegółów. Korzystając z przewodnika, dowiesz się, w jaki sposób zaprojektować układ graficzny witryny, na czym polega stylizowanie tekstu, jak wykorzystać oś czasu i tworzyć mechanizmy nawigacji. Dzięki temu podręcznikowi z łatwością wykonasz konkretny projekt w ciągu kilku godzin i nauczysz się korzystać z podstawowych narzędzi Flasha.

Z tym podręcznikiem z łatwością poskromisz Flasha
i szybko stworzysz efektowną witrynę

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty Autor: David Morris T³umaczenie: Aleksander Lam¿a ISBN: 978-83-246-2455-3 Tytu³ orygina³u: Creating a Web Site with Flash CS4: Visual QuickProject Guide Format: B5, stron: 176 Poznaj najwa¿niejsze narzêdzia Flasha i twórz efektowne serwisy internetowe • Jak szybko zbudowaæ efektown¹ witrynê we Flashu? • Jak sprawnie dodawaæ i modyfikowaæ elementy witryny? • Jak przygotowaæ pliki do przes³ania na serwer? Adobe Flash CS4 zapewnia sprawn¹ integracjê animacji z witryn¹ oraz umo¿liwia obs³ugê obiektów 3D. To wszystko sprawia, ¿e jest on doskona³ym narzêdziem do tworzenia rozbudowanych i efektownych serwisów WWW. I chocia¿ bogactwo elementów steruj¹cych tej aplikacji mo¿e na pierwszy rzut oka wydawaæ siê przyt³aczaj¹ce, z podrêcznikiem „Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty” obs³uga najwa¿niejszych mechanizmów i funkcji Flasha staje siê naprawdê prosta. Niniejsza ksi¹¿ka zosta³a skonstruowana w oparciu o unikatow¹ metodê nauki nowych technologii, tak abyœ móg³ szybko stworzyæ interesuj¹c¹ wizualnie witrynê bez potrzeby przedzierania siê przez g¹szcz technicznych szczegó³ów. Korzystaj¹c z przewodnika, dowiesz siê, w jaki sposób zaprojektowaæ uk³ad graficzny witryny, na czym polega stylizowanie tekstu, jak wykorzystaæ oœ czasu i tworzyæ mechanizmy nawigacji. Dziêki temu podrêcznikowi z ³atwoœci¹ wykonasz konkretny projekt w ci¹gu kilku godzin i nauczysz siê korzystaæ z podstawowych narzêdzi Flasha. • Tworzenie g³ównego pliku witryny • Projektowanie uk³adu graficznego • Rysowanie i edytowanie kszta³tów wbudowanych • Dodawanie i edytowanie wype³nieñ gradientowych • Praca z zaimportowanymi obiektami • Wykorzystanie osi czasu do organizacji witryny • Dodawanie i modyfikacja animacji • Tworzenie mechanizmów nawigacji • Stosowanie komponentów interfejsu u¿ytkownika • Wideo we Flashu • Publikacja witryny Z tym podrêcznikiem z ³atwoœci¹ poskromisz Flasha i szybko stworzysz efektown¹ witrynê spis treści wprowadzenie witryna, którą stworzymy układ książki witryna internetowa towarzysząca książce poznaj flasha następny krok informacje dodatkowe 8 10 12 1. przygotowanie plików tworzących witrynę definiowanie struktury katalogów tworzenie głównego pliku witryny ustawianie właściwości dokumentu zapisywanie pliku 22 23 24 25 przygotowanie przestrzeni roboczej zapisywanie zestawu kolorów informacje dodatkowe 2. projektowanie układu graficznego witryny ustawianie linii pomocniczych rysowanie tła rysowanie kształtów wbudowanych 3. dodawanie i stylizowanie tekstu wstawianie pojedynczego wiersza tekstu tekst o ustalonej szerokości 30 31 33 40 42 4. praca z zaimportowanymi obiektami edytowanie kształtów wbudowanych dodawanie wypełnień gradientowych edytowanie wypełnień gradientowych zmiana atrybutów pola tekstowego wstawianie łącza typu e-mail grafika wielokrotnego użytku importowanie obrazów wektorowych organizowanie pracy z symbolami tryb edytowania symbolu przekształcanie obiektów ustawianie 9-plastrowego skalowania hierarchia obiektów 46 48 49 50 51 52 55 organizowanie za pomocą warstw przenoszenie obiektów między warstwami importowanie map bitowych dodawanie warstwy maski edytowanie maskowanych obiektów informacje dodatkowe 7 13 19 20 21 26 27 28 29 34 35 36 39 43 44 45 57 58 59 60 61 62 4 spis treści spis treści 5. wykorzystanie osi czasu do organizacji witryny importowanie z programu adobe illustrator obrysy i podświetlenia klatki i klatki kluczowe dodawanie etykiet do klatek sterowanie osią czasu informacje dodatkowe 64 66 67 6. umieszczanie animacji w witrynie predefiniowane ustawienia ruchu właściwości animacji tworzenie animacji kształtu korzystanie z narzędzia obrót 3d modyfikowanie animacji ruchu zapisywanie ustawień ruchu 76 78 79 81 82 83 edytor ruchu zmiana rozmieszczenia klatek wstrzymywanie odtwarzania animacji wyświetlanie podglądu filmu sterowanie klipami filmowymi informacje dodatkowe 7. tworzenie mechanizmu nawigacji tworzenie działów witryny tworzenie przycisków podgląd działania przycisku animowanie stanu przycisku dołączanie dźwięku do przycisku 98 100 104 105 109 powielanie przycisków układanie przycisków dołączanie skryptów informacje dodatkowe 8. wypełnianie działów witryny zawartością importowanie symboli aktualizowanie symboli tworzenie pola wprowadzania tekstu dynamiczne ustawianie tekstu tworzenie przewijanego tekstu ładowanie plików html i przypisywanie im stylów ładowanie plików xml stosowanie komponentów interfejsu użytkownika 118 119 121 124 127 129 132 135 wiązanie danych do interfejsu użytkownika ustawianie interakcji w interfejsie użytkownika ładowanie zewnętrznych filmów komponenty formularzy informacje dodatkowe spis treści 63 69 70 73 75 84 87 90 91 92 94 97 110 114 115 116 117 137 141 144 145 148 5 spis treści 9. wideo we flashu obszar odtwarzania wideo importowanie wideo 150 152 wyzwalacze punktów kontrolnych 10. publikowanie witryny ustawienia pliku swf ustawienia html skorowidz 160 162 przygotowanie plików do przesłania na serwer 149 155 159 164 165 6 spis treści 2 projektowanie układu graficznego witryny Naszym pierwszym zadaniem w procesie tworzenia witryny będzie wykonanie projektu układu graficznego, w którym będziemy prezentować jej zawartość. O ukła- dzie graficznym można myśleć jak o aranżacji scenografii w filmie — musimy zatem ustawić tło, zdefiniować różne obszary i uatrakcyjnić wygląd. Przy okazji nauczymy się używać wielu podstawowych funkcji Flasha. Poniżej wyszczególniono kilka czyn- ności, które zostaną tu omówione. Tworzenie i modyfi- kowanie wypełnień ra­ dialnym gradientem. Rysowanie i mody- fikowanie kształtów wbudowanych. Używanie narzędzi rysujących do tworzenia elementów ukła- du graficznego. Umieszczanie linii pomocniczych wska- zujących obszary układu graficznego i pomagających rozmieszczać jego poszczególne elementy. Tworzenie i modyfi- kowanie wypełnień liniowym gradientem. 29 ustawianie linii pomocniczych Dzięki liniom pomocniczym możemy w prosty sposób definiować obszary na stole montażowym, a także ułatwić sobie układanie obiektów. Zanim zaczniemy rysować tło, dodamy kilka linii pomocniczych. Aby upewnić się, że umieszczamy je w odpo- wiednich miejscach, użyjemy rozwiniętego panelu Info (Informacje), dostępnego dla wielu czynności. 1 Kliknij ikonkę podwójnej strzałki na górze obszaru dokowania, aby rozwinąć panele. 2 Aby otworzyć panel Info (Informacje), w grupie paneli Align/Info/Transform (Wyrównaj/ Informacje/Przekształć) kliknij zakładkę Info (Informacje). 3 Aby włączyć wyświetlanie linijek wzdłuż lewej i górnej krawędzi stołu montażowego, z menu View (Widok) wybierz pozycję Rulers (Linijki). 4 Wciśnij przycisk myszy i przeciągnij linię pomoc- niczą z poziomej (górnej) linijki. Obserwuj panel Info (Informacje) — gdy współrzędna Y wskaźnika myszy będzie wynosiła 75, puść przycisk. Przeciągnij na stół montażowy jeszcze dwie linie pomocnicze i ustaw je na pozycjach 95 i 475. W zależności od rozdzielczo- ści ekranu, ustawień myszy i stopnia powiększenia mo- żesz mieć problemy z ustawieniem linii pomocniczych w miejscach o podanych wyżej współrzędnych. Posta- raj się umieścić je tak dokładnie, jak to tylko możliwe. 5 Upewnij się, że opcja Snap to Guides (Przycią­ gaj do linii pomocniczych) jest włączona. Z menu View (Widok) wybierz po- zycję Snapping (Przyciąga­ nie). W podmenu sprawdź, czy opcja Snap to Guides (Przyciągaj do linii pomoc­ niczych) jest zaznaczo- na. Jeśli nie, kliknij Snap to Guides (Przyciągaj do li­ nii pomocniczych), aby ją włączyć. 6 Ustaw takie powiększe- nie, aby był widoczny cały stół montażowy. 30 projektowanie układu graficznego witryny rysowanie tła Stół montażowy został podzielony na obszary, możemy więc rozpocząć rysowanie obiektów, które będą służyć jako tło naszej witryny. 1 Z panelu Tools (Narzędzia) wybierz narzędzie Rectangle (Prostokąt). 2 Kliknij przycisk Stroke color (Kolor obrysu). 3 W okienku palety kolorów przesuń kursor w kształcie pipety nad średnio intensywny fioletowy i kliknij, aby go wybrać. 4 Kliknij przycisk Fill color (Kolor wypeł­ nienia) i z próbek kolorów wybierz biały (#FFFFFF). 5 Kliknij przycisk Object Drawing (Ryso­ wanie obiektów), aby włączyć tę opcję. 6 Ustaw kursor w lewym górnym rogu stołu monta- żowego. Wciśnij lewy przycisk myszy i przeciągnij pro- stokąt do prawego dolnego rogu stołu montażowego. Jeżeli nie udało Ci się dokładnie narysować prostokąta, możesz wprowadzić poprawki dotyczące jego położenia i rozmiaru. W panelu właściwości możesz zmienić wartości w polach W: (Sz:), H: (W:), X: i Y:. Wciśnij przycisk myszy na wartościach i przeciągnij, aby je zwiększyć lub zmniejszyć; możesz również kliknąć odpowiednie pola i ręcznie wpisać prawidłowe wartości. Prostokąt powinien mieć wymiary 780×600 pikseli. Jego prawidłowe położenie to X = 0 i Y = 0. 7 Aby usunąć zaznaczenie prostokąta, z menu Edit (Edytuj) wybierz polecenie Deselect All (Odznacz wszystko). projektowanie układu graficznego witryny 31 rysowanie tła cd. Przystępując do prac nad kolejnym elementem tła, upewnij się, że wcześniej utwo- rzony prostokąt nie jest zaznaczony, wybrane jest narzędzie Rectangle (Prostokąt) i włączona opcja Object Drawing (Rysowanie obiektów). 1 Kliknij przycisk zmiany koloru obrysu. 2 W oknie palety kolorów kliknij przycisk None (brak koloru) umieszczony blisko prawego górnego rogu. 3 Kliknij przycisk zmiany koloru wypełnienia i wybierz dowolny kolor, ponieważ i tak za chwilę go zmienimy. 4 Ustaw kursor na lewej krawędzi stołu montażowe- go, nad linią pomocniczą umieszczoną w pozycji 75. Wciśnij lewy przycisk my- szy i przeciągnij prostokąt do prawej krawędzi stołu montażowego oraz do linii pomocniczej znajdującej się na pozycji 95. Jeżeli trzeba, w panelu wła- ściwości ustaw wymiary (780×20) i położenie (0, 75). 5 Narysuj kolejny prosto- kąt o wymiarach 780×125 i położeniu (0, 475). 6 Aby usunąć zaznacze- nie prostokąta, z menu Edit (Edytuj) wybierz polece- nie Deselect All (Odznacz wszystko). 32 projektowanie układu graficznego witryny rysowanie kształtów wbudowanych Ostatni element tła będzie specjalnym obiektem, nazywanym kształtem wbudo­ wanym. Są to obiekty, których ustawienia można zmieniać w panelu właściwości. Pozwala to na precyzyjne sterowanie rozmiarem, zaokrągleniem wierzchołków i in- nymi właściwościami kształtu w dowolnym momencie po utworzeniu obiektu, bez konieczności ponownego rysowania. Zastosujemy zaokrąglanie wierzchołków prostokąta, aby utworzyć element przypo- minający zakładkę. 1 W przyborniku wciśnij i przytrzymaj przycisk narzędzia Rectangle (Prostokąt). Z rozwijanego menu wybierz narzędzie Rectangle Primitive (Prostokąt; ikonka z do- datkowymi punktami na wierzchołkach). 2 Kliknij przycisk zmiany koloru obrysu i wybierz zdefiniowany wcześniej średnio intensywny fioletowy. 3 Ustaw kursor w odległości około 20 pikseli od le­ wej krawędzi sto- łu montażowego, na linii pomocni- czej, którą umieści- łeś w pozycji 75. 4 Wciśnij lewy przycisk myszy i przeciągnij kursor do góry i na prawo. Wysokość i szerokość prostokąta nie są w tej chwili istotne, ich usta- wieniem zajmiesz się w następnym rozdziale. projektowanie układu graficznego witryny 33 edytowanie kształtów wbudowanych Wierzchołki prostokąta zmienia się, przeciągając uchwyty ich zaokrąglenia lub wpisując wartości w polach Corner Radius (Promień narożnika prostokąta) w panelu właściwości. Skorzystamy z obu możliwości. 1 Z przybornika wybierz narzędzie Selection (Zaznaczenie). 2 Wciśnij lewy przycisk myszy na jednym z uchwy tów zaokrąglenia wierzchołków i przeciągnij w dowolnym kierunku wzdłuż krawędzi prostoką- ta. Pojawią się linie pomocnicze obrazujące stopień zaokrąglenia wierzchołków. 3 Gdy wierzchołki są już ładnie zaokrąglone, zwolnij lewy przycisk myszy. Zwróć uwagę na to, że wszystkie cztery wierzchołki prostokąta zostały zaokrąglo- ne w tym samym stopniu. Aby uzyskać element przypominający zakładkę, musimy zaokrąglić tylko lewy i prawy górny wierzchołek. W panelu właściwości możesz zobaczyć, że zmie niła się wartość tylko w jednym polu zaokrąglania wierzchołków, a pozostałe trzy pola pozostają nieaktywne (wyszarzone). 4 Kliknij ikonkę Lock (Powiąż elementy sterujące promieniem narożnika) oznaczoną ogniwem łańcucha, aby odblokować powiązania między czterema wierzchołkami. Dzięki temu będziemy mieli możliwość zmiany zaokrąglenia każdego z wierz- chołków oddzielnie. 5 Zmień wartości zaokrąglenia dwóch dolnych wierzchołków na 0, tak aby znów stały się zwykłymi, „ostrymi” rogami. 34 projektowanie układu graficznego witryny dodawanie wypełnień gradientowych Teraz dodamy wypełnienia gradientowe, w których kolory stopniowo przechodzą z jednego w inny. Dzięki temu scena zyska atrakcyjny wygląd. Z przybornika wybierz narzędzie Selection (Zaznaczenie) i kliknij prostokąt umiesz- czony między liniami pomocniczymi z pozycji 75 i 95, aby go zaznaczyć. Wciśnij kla- wisz Shift i kliknij prostokąt, który narysowałeś pod linią pomocniczą w pozycji 475, a także prostokąt o wyglądzie zakładki, aby dodać je do zaznaczenia. Po zaznaczeniu trzech prostokątów przejdź do panelu Color (Kolor) i naciśnij przycisk wyboru koloru wypełnienia. Kliknij listę rozwijaną Type (Typ) i wybierz pozycję Linear (Liniowe). Wypełnienie prostokątów zmieni się na gradientowe. W 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. Po podwójnym kliknięciu wskaźni- ka na lewym końcu paska definiują- cego gradient otworzy się okienko palety kolorów. Wybierz wcześniej zdefiniowany średnio intensywny fioletowy. Prostokąty są teraz wypełnione gradientem przechodzącym od koloru fioletowego do białego. Gradient nie jest jednak ustawiony w odpowiednim kierunku. Zaraz to zmienimy. projektowanie układu graficznego witryny 35 edytowanie wypełnień gradientowych Narzędziem Selection (Zaznaczenie) kliknij poza stołem montażowym, aby wyłączyć zaznaczenie trzech prostokątów. Z menu View (Widok) wybierz pozycję Guides/Show Guides (Linie pomocnicze/Pokaż linie pomocnicze), aby wyłączyć wyświetlanie linii pomocniczych. Dzięki temu łatwiej nam będzie zauważyć krawędzie obiektów. Kliknij prostokąt na dole stołu montażowego, aby go zaznaczyć. W przyborniku wciśnij i przytrzymaj przycisk narzędzia Free Transform Tool (Przekształcanie swobodne). Z rozwijanego menu wybierz narzędzie Gradient Transform Tool (Przekształcanie gradientu). Na ekranie pojawią się trzy uchwyty edycyjne: — okrągły uchwyt z grotem strzałki do obracania wypełnienia; — kwadratowy uchwyt ze strzałką do zmiany szerokości wypełnienia; — okrągły uchwyt służący do zmiany położenia środka gradientu. Wciśnij lewy przycisk myszy i przeciągnij okrągły uchwyt obrotu w dół i do środka, aby obrócić wypełnienie o 90°. Wciśnij klawisz Shift, aby ograniczyć kąt obrotu do wie- lokrotności 45°. Jeśli to konieczne, dopasuj podgląd stołu montażowe- go, tak aby zobaczyć kwadratowy uchwyt szerokości wy­ pełnienia. Wciśnij lewy przycisk myszy i przeciągnij go do dolnej krawędzi prostokąta. Wciśnij lewy przycisk myszy i przeciągnij uchwyt punk­ tu środkowego nieznacznie w górę. W ten sposób pod- wyższysz punkt przejścia i sprawisz, że więcej białej powierzchni będzie znaj- dować się w dolnej części prostokąta. 36 projektowanie układu graficznego witryny Narzędziem Gradient Transform (Przekształ­ canie gradientu) kliknij mniejszy prosto- kąt umieszczony w pobliżu góry stołu montażowego. Pojawią się trzy uchwyty edycyjne. Przeciągnij kwadratowy uchwyt szerokości wypełnienia w kierunku punktu środkowego i zatrzymaj się w odległo- ści około 100 pikseli od niego. Obróć wypełnienie o 90°. Powiększenie podglądu prostokąta i uchwytów przekształceń gradientu pozwoli nam na dokonywanie dokładniejszych zmian w gradiencie w kolejnych krokach. Wciśnij i przytrzymaj klawisze Ctrl i spacja (Cmd i spacja w Mac OS), by tymczasowo zmienić kursor w narzędzie Magnify (Powiększenie). Wciśnij lewy przycisk myszy i przeciągnij prostokąt powiększenia tak, aby obejmował środek gradientu i prostokątne wypełnienie wraz z uchwytami. Zwolnij przycisk myszy, aby powiększyć zaznaczony fragment. W panelu Color (Kolor) rozwiń listę Overflow (Przepełnienie) i wybierz drugą pozycję, która odpo wiada za wypełnienie gradientowe typu czarny-biały-czarny. Ten rodzaj wypełnienia na- daje się do tworzenia efektów trójwymiarowych. Rozlewanie definiuje wygląd na zewnątrz granic szerokości wypełnienia. Wybrana przez nas opcja odpowiada za wypełnienie w poprzek szerokości. Wciśnij lewy przycisk myszy i przeciągnij kwadratowy uchwyt zmiany szerokości w kierunku środka wypeł- nienia, tak aby dwie linie pomocnicze znalazły się w połowie wysokości między środkiem wypełnienia a krawędzią prostokąta. Wciśnij lewy przycisk myszy i przeciągnij uchwyt punktu środkowego nieznacznie w górę, aby podwyższyć punkt przejścia. Dzięki temu uzyskamy efekt trójwymiarowy. projektowanie układu graficznego witryny 37 edytowanie wypełnień gradientowych cd. Ostatnim krokiem w pracy z wypełnieniami gradientowymi stosowanymi do obiek- tów tła będzie zastosowanie do prostokąta o wyglądzie zakładki radialnego wypeł- nienia gradientowego oraz jego zmodyfikowanie. Aby znów zobaczyć cały prostokąt, wybierz pozycję View/Magnification/100 (Widok/Powiększenie/100 ), w panelu Tools (Narzędzia) włącz narzędzie Selection (Zaznaczenie) i zaznacz prostokąt, klikając go. W panelu Color (Kolor) z listy rozwijanej Type (Typ) wybierz pozycję Radial (Radialne). Wypełnienie zmieni się w gradient radialny. Gradient, który widzimy — fioletowy w środku i biały na krawędziach — jest przeciwieństwem tego, co chcieliśmy uzyskać. Możemy go zmo- dyfikować w panelu Color (Kolor). W pasku definicji gradientu wciśnij lewy przy- cisk myszy i przeciągnij w prawo wskaźnik wy- pełniony fioletowym kolorem, zatrzymując się blisko białego wskaźnika. Teraz biały wskaźnik przeciągnij jak najdalej w lewą stronę. Na koniec przeciągnij fioletowy wskaźnik maksymalnie w prawo. Po zaznaczeniu fioletowego wskaźnika zmień war- tość w polu Alpha (Alfa) na 60 , dzięki czemu kolor stanie się półprzezroczysty i na białym tle będzie wyglądał na jaśniejszy. W ten sposób ukończyliśmy pracę nad prostokątami. 38 projektowanie układu graficznego witryny
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW we Flashu CS4/CS4 PL. Projekty
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: