[ Pobierz całość w formacie PDF ]
.Wykorzystywanie animowanych GIF-ów w projektach internetowychJedn¹ z najwa¿niejszych zalet animowanych GIF-ów jest fakt, ¿e mo¿na jeumieszczaæ na stronach WWW prawie tak ³atwo jak zwyk³e obrazki w formacie GIF.W tym podrozdziale znajdziesz opisy kilku metod wstawiania animowanych GIF-ówna strony WWW, pozwalaj¹cych na tworzenie kompletnych prezentacji.Animowanie obrazków t³aPrzegl¹darki internetowe (wersje 4 i póŸniejsze) mog¹ wyœwietlaæ animowaneGIF-y jako obrazki t³a.Za pomoc¹ ma³ego animowanego GIF-a mo¿na wype³niæ ca³¹stronê WWW, tworz¹c w ten sposób bardzo dynamiczn¹ prezentacjê o ma³ymrozmiarze fizycznym pliku.Wielokrotne wykorzystywanie animacjiPrzegl¹darka musi pobraæ animowanego GIF-a tylko jeden raz.Jeœli wykorzystaszanimacjê ponownie na tej samej lub innej stronie, bêdzie ona odtwarzana zpamiêci podrêcznej przegl¹darki.Funkcja ta jest szczególnie przydatna wprzypadku wykorzystywania animowanych logo i przycisków.Skalowanie animacjiZa pomoc¹ atrybutów height i width znacznika mo¿na wyœwietlaæ animacjeo wiêkszych rozmiarach bez zwiêkszania rozmiarów ich plików.Niewielka utratajakoœci wystêpuj¹ca po przeskalowaniu obrazka do podwójnych rozmiarów(zmniejszasz wówczas o po³owê rozdzielczoœæ obrazka) jest niewielk¹ cen¹ zaznaczne zwiêkszenie wra¿enia jakie robi du¿a animacja.Je¿eli tworzysz naprzyk³ad animacjê o wymiarach 200´200 pikseli, mo¿esz na stronie WWW podwoiæjej rozmiary za pomoc¹ nastêpuj¹cego znacznika :Do dostosowywania rozmiarów animacji mo¿esz tak¿e wykorzystaæ procentowewartoœci jej szerokoœci i wysokoœci.W jednych animacjach dzia³anie takiesprawdza siê lepiej ni¿ w innych, ale równie¿ umo¿liwia zaoszczêdzenie wielukilobajtów.Ustaw atrybuty width i height na 100%, aby animacja wype³ni³aca³e okno przegl¹darki.Znacznik wygl¹da³by wówczas mniej wiêcej tak:Wykorzystywanie t³a przegl¹darki w obrazkuJednym z ograniczeñ animowanych GIF-ów jest ma³a liczba kolorów obs³ugiwanychprzez ten format i wysoka cena, jak¹ trzeba zap³aciæ za ka¿dy dodatkowy kolor.Mo¿esz jednak daæ swojej animacji pe³nokolorowe t³o poprzez nadanie jejprzezroczystoœci i umieszczenie jej nad t³em stworzonym z obrazka w formacieJPG.Rozmiar ca³ej prezentacji pozostanie niewielki, gdy¿ ³¹czone s¹ ze sob¹zalety formatu GIF (animacja i przezroczystoœæ) oraz formatu JPEG (wielekolorów przy ma³ym rozmiarze pliku).Wstêpne ³adowanie animacjiIstniej¹ dwie metody wstêpnego ³adowania animowanych GIF-ów, zapobiegaj¹ce„skakaniu” odtwarzania animacji w trakcie ich pobierania z Internetu:* Zastosowanie atrybutu lowsrc znacznika.Do czasu za³adowania ca³egoobrazka przegl¹darka bêdzie wyœwietla³a obrazek o ma³ej jakoœci wskazywanyznacznikiem lowsrc.Poni¿szy wiersz kodu mówi przegl¹darce, aby w trakcie³adowania pliku animated.gif wyœwietla³a spacer.gif, a nastêpnie zast¹pi³aspacer.gif za³adowanym plikiem animated.gif:Plik spacer.gif.jest przezroczystym obrazkiem o wymiarach 1´1 piksel,u¿ywanym przez Fireworks do rozmieszczania grafiki w tabelach.Bêdziesz mia³kilka kopii takich obrazków, jeœli choæ raz eksportowa³eœ plastrowane obrazkiz Fireworks.Gdy nie masz ani jednego, utwórz obrazek o wymiarach 1´1 pikselz przezroczystym obszarem roboczym i wyeksportuj go.Plik taki ma bardzoma³e rozmiary, wiêc nie wp³ynie na rozmiar pliku ca³ej strony WWW.Obrazekjest tak¿e przezroczysty, wiêc do czasu rozpoczêcia animacji bêdzie widaæ przezniego kolory t³a.Internet Explorer nie obs³uguje atrybutu lowsrc znacznika img.* Zastosowanie behawiora Swap Image do zamieniania statycznego obrazkaspacer.gif za pomoc¹ animacji.Zmieñ zdarzenie uruchamiaj¹ce behawior SwapImage na onLoad.Behawior zostanie uruchomiony po za³adowaniu ca³ejzawartoœci strony i statyczny obrazek zostanie zast¹piony pobranym zInternetu animowanym GIF-em.Wiêcej informacji o behawiorach Fireworks znajdziesz w rozdziale 21.Animowane rolloveryZast¹pienie stanu Over rollovera za pomoc¹ animacji o takich samych wymiarachpozwala uzyskaæ bardzo ciekawe rezultaty.Gdy u¿ytkownik umieœci kursor nadprzyciskiem, rozpoczyna siê odtwarzanie animacji.Po usuniêciu kursora zobszaru przycisku animacja jest zatrzymywana.Niektóre przegl¹darki maj¹ k³opoty z odtwarzaniem z³o¿onych animacji GIF wrolloverach.Najlepiej sprawdzaj¹ siê ma³e, proste animacje z ustawionymci¹g³ym zapêtlaniem.Aby utworzyæ prosty animowany rollover:Utwórz rollover zawieraj¹cy przynajmniej trzy stany (Up, Over i Down), anastêpnie wyeksportuj jako GIF.(Rollover zawieraj¹cy tylko dwa stany bêdzieraczej skaka³ ni¿ siê porusza³.) Zwróæ uwagê na nazwê pliku eksportowanegoprzez Fireworks stanu Over.Bêdzie to nazwa w stylu _r2_c2_f2, gdzie f2 oznaczadrug¹ klatkê, w której utworzy³eœ stan Over.Szczegó³owe informacje o tworzeniu rolloverów znajdziesz w rozdziale 21.Po wyeksportowaniu pliku jako rollover, musisz go wyeksportowaæ ponownie jakoanimowany GIF.Poszczególne klatki, w których znajdowa³y siê wszystkie stanyrollovera, zostan¹ przekszta³cone na klatki animacji.Aby wyeksportowaæ plik jako animowany GIF, wybierz z menu polecenie FileðExportPreview.Fireworks wyœwietli okno dialogowe Export Preview.Z listy formatów znajduj¹cej siê w zak³adce Options wybierz opcjê AnimatedGIF.Kliknij przycisk Loop w zak³adce Animation, wybierz opcjê Forever i kliknijprzycisk Next.Fireworks wyœwietli okno dialogowe Export.Z rozwijanej listy Slicing wybierz opcjê No Slicing.Z rozwijanej listy HTML Style wybierz opcjê None.Zaznacz plik reprezentuj¹cy stan Over Twojego rollovera i kliknij przyciskSave, aby pod tak¹ sam¹ nazw¹ zapisaæ animowanego GIF-a.Fireworks zapyta Ciê, czy chcesz zast¹piæ plik oryginalny.Kliknij przyciskYes.Gdy otworzysz utworzony przez Fireworks plik HTML, zobaczysz, ¿e umieszczeniekursora nad przyciskiem spowoduje odtworzenie stanów Up, Over i Downrollovera.Mo¿esz równie¿ utworzyæ animowanego rollovera, którego animacja bêdziezatrzymywana po umieszczeniu nad nim kursora.Za pomoc¹ animacji zast¹p w tymcelu obrazek f1, a nie f2.Animacja zostanie uruchomiona po za³adowaniu stronyWWW i zatrzymana po umieszczeniu kursora nad przyciskiem.Plastrowanie animacjiW pracy z animacjami mo¿esz wykorzystywaæ wszystkie narzêdzia Fireworks s³u¿¹cedo plastrowania.W palecie Object wybierz dla wszystkich statycznych plastrów animacji formatGIF, JPEG, PNG lub inny ¿¹dany format.Ustaw opcje eksportowanych plastrówna Export Defaults, a nastêpnie wybierz Animated GIF jako format eksportu dlaca³ego dokumentu.Oto niektóre koncepcje przydatne przy plastrowaniu animacji:* Do³¹czanie dodatkowych kolorów: Utwórz plastry z pe³nokolorowych,statycznych obszarów, a nastêpnie wyeksportuj je jako obrazki JPEG lub PNG.Animacja bêdzie posiada³a wówczas obszary 24-bitowego koloru.* Dodawanie interakcji: Zast¹p puste plastry animowanego GIF-a za pomoc¹elementów formularzy HTML, takich jak listy opcji lub przyciski opcji.Wiêcej informacji o plastrowaniu obrazków w Fireworks znajdziesz w rozdziale20
[ Pobierz całość w formacie PDF ]