TARNOWSKIEJ AGENCJI ROZWOJU REGIONALNEGO S.A.
Kierunek: Technik Informatyk
OŻYWIENIE STRONY INTERNETOWEJ PRZY POMOCY PROGRAMU MACROMEDIA FLASH
Promotor
mgr Jan Ryba
Tarnów 2003
Spis treści
Wstęp 4
Era Flasha 5
O Flashu 6
SIEĆ WWW DZIŚ 8
Podstawowe zasady projektowania stron internetowych 11
Zalety Internetu jako środka przekazu informacji 14
Wady Internetu jako środka przekazu informacji 15
Typy połączeń i prędkość 17
Pokonywanie ograniczeń 20
Planowanie 21
TWORZENIE DYNAMICZNYCH WITRYN 23
PLANOWANIE 26
PROJEKTOWANIE 28
PRODUKCJA 29
IMPLEMENTACJA 30
TWORZENIE PRZYCISKU 31
Budowa przycisków 31
Opis tworzenia przycisku 32
Importowanie dźwięku 33
TWORZENIE PRELOADERA 39
TWORZENIE PASKA (suwak) 43
Zakończenie 46
BIBLIOGRAFIA 47
Kiedyś, gdy sieć Web wychodziła dopiero z akademickiego kokonu i powoli zyskiwała miejsce w powszechnej świadomości, Internet był szary. Jakikolwiek przebłysk koloru, jakikolwiek element grafiki był przyjmowany jak odświeżająca oaza w rozległej pustyni tekstu na jednolicie szarym tle. W miarę jak sieć Web się rozrastała, zmieniało się grono jej nadawców i odbiorców. Strony sieciowe stawały się środkami przekazu osobistej ekspresji, nośnikami ogólnie dostępnej wiedzy, czy też reklamy. Projektanci sieciowi marzyli o rozszerzeniu graficznych możliwości ich stron. Wielu z nich zaspokajało te pragnienia, wypełniając strony bitmapami. Niestety takie rozwiązanie zmuszało użytkowników tych stron do bardzo długiego oczekiwania.
Wprawdzie formaty map bitowych przeznaczone dla grafiki sieciowej - JPG, GIF oraz PNG – zapewniają znaczną kompresję obrazów, co pozwala uzyskać stosunkowo niewielkie i szybko przesyłane siecią pliki. Jednakże transmisja stron zawierających dużą liczbę obrazów może być bardzo powolna, co zniechęca użytkowników do jej kontynuowania. Projektanci sieciowi potrzebowali więc lepszej, bardziej wydajnej, metody przesyłania grafiki w Internecie. Tę wydajność zapewnia Flash.
Sieć WWW podlega ogromnym zmianom i wydaje się, że jej ewolucja nie ma końca. Niektórzy narzekają na tempo tych zmian. Jednak wiele osób sądzi, że właśnie dzięki tym nowym technologiom sieć WWW zapewni szybszy i lepszy sposób komunikacji. Odchodzimy od stron zapełnionych wyłącznie tekstem i pozbawionych estetycznego uroku. Dzięki takim narzędziom jak Flash autorzy witryn wzbogacają je skomplikowanymi animacjami i grafiką wektorową, która nie tylko cieszy oko, ale pozwala też na przekazanie dodatkowych treści i skuteczniejszą komunikację.
Wobec takiego bogactwa technologii internetowych można się zastanawiać nad pozycją i rolą programu Macromedia Flash. Przecież w tej dziedzinie nowinki i oryginalne akronimy pojawiają się niemal codziennie. Podobnie jak wielu innych webmasterów, którzy starają się podbić swoimi dziełami świat WWW (lub tylko dotrzymać kroku nowoczesnym technologiom), i Ty możesz się poczuć zmęczony informacjami o „najnowszych i najlepszych” narzędziach. Przy takiej liczbie nowych programów i technologii (a także ich uaktualnień) coraz trudniej ekscytować się „kolejnym narzędziem. Jednak wystarczy rzut oka na jedną z witryn zawierających pełnoekranowe animacje, wzbogaconych dźwiękiem i funkcjami interaktywnymi, żeby zrozumieć entuzjazm dla Macromedia Flash oraz jego wagę.
Projektanci stron WWW byli świadkami narodzin i upadku wielu technologii i z pewnością zobaczą jeszcze nie jedno podobne zdarzenie. Jednak od czasu do czasu pojawia się coś, co rzeczywiście zmienia sposób ich pracy i oblicze sieci WWW. Macromedia Flash to doskonały przykład przełomowej technologii. Z pewnością w kręgu zainteresowania przez dłuższy czas dzięki niewątpliwym zaletom, nie wspominając o szerokim zastosowaniu w istniejących już witrynach. Zaletą dodatkową jest łatwość zastosowania – wystarczy poznać podstawy programu Flash, aby za jego pomocą zrobić niemal wszystko.
Flash rozpoczął swoje istnienie pod nazwą Future Splash Animator. Był to sprytny, niewielki program do tworzenia i animowania obrazów wektorowych. W roku 1997 firma Macromedia przejęła program FutureSplash, zmieniając jego nazwę na Flash i promując go jako narzędzie tworzenia grafiki sieciowej. Flash zawiera wszystkie potrzebne do tego elementy: narzędzia do tworzenia grafiki, narzędzia do animowania, narzędzia do tworzenia elementów interfejsu, w tym elementów interaktywnych, oraz narzędzia do tworzenia kodu HTML - owego, który pozwala połączyć grafikę, animację oraz elementy interfejsu w jedną całość – stronę sieciową, wyświetlaną za pośrednictwem przeglądarki.
Standardowe programy ilustracyjne, takie jak Macromedia FreeHand czy Adobe Illustrator, tworzą kształty wektorowe w oparciu o krzywe Béziera. Flash udostępnia podobne narzędzia; oprócz nich są do dyspozycji narzędzia bardziej „naturalne”. Pozwalają one operować wektorami w bardziej bezpośredni sposób, bez konieczności manipulowania uchwytami stycznych pomocniczych (specjalnymi punktami kontrolnymi, wyświetlanymi przy wierzchołkach krzywych). Dzięki tym narzędziom praca we Flashu jest bardzo „spontaniczna”, co odpowiada większości artystów. Z pewnością podobają się też nie-artystom – czyli tym z nas, którzy nie potrafiliby narysować prostej linii, nawet gdyby od tego miało zależeć ich życie.
Początkującym Flash zapewnia odpowiednie narzędzia do tworzenia prostych grafik i animacji. Natomiast ci użytkownicy, którzy mają już pewne doświadczenie w dziedzinie animacji, mogą posłużyć się narzędziami Flasha przy tworzeniu całkiem zaawansowanych prac. Język skryptowy Flasha jest na tyle łatwy w użyciu, że nawet początkujący użytkownik może stworzyć proste elementy interaktywne; zarazem jednak jego możliwości są na tyle potężne, że zaawansowani twórcy mogą zaprojektować za jego pomocą naprawdę wyrafinowaną, interakcyjną stronę sieciową.
W każdej kolejnej wersji firma Macromedia dodaje nowe elementy i funkcje programu. Dzięki temu przy zachowaniu prostoty obsługi rozszerzane są możliwości programu w dziedzinie interaktywnej animacji.
W jaki sposób przebiega animacja we Flashu?
Aby stworzyć iluzję ruchu, Flash korzysta ze standardowych technik animacyjnych. Użytkownik tworzy serię nieruchomych obrazów, każdy kolejny nieco inny od poprzedniego. Gdy obrazy te są wyświetlane jeden po drugim w szybkim tempie, symulowany jest płynny ruch. Narzędzia animacyjne Flasha pozwalają tworzyć, edytować oraz synchronizować animację wielu obiektów graficznych oraz dźwięku.
Formaty filmowe Flasha
Program Flash pełni podwójną rolę – przede wszystkim jest programem autorskim, umożliwia tworzenie animacji; oprócz tego pozwala odtwarzać stworzony materiał na komputerze lokalnym bądź w przeglądarce sieciowej. Pliki Flasha są określane mianem filmy, bez względu na to, czy są to filmy znajdujące się jeszcze w środowisku autorskim, czy w postaci finalnej, gotowe do odtwarzania. Animacje oraz elementy interaktywne są tworzone w postaci plików w formacie Flasha. W środowisku Windows pliki te mają rozszerzenie .fla. Tworząc filmy w formie gotowej do oglądania, konwertowane są pliki autorskie na format czytelny dla procedury odtwarzającej (Flash Player); pliki te posiadają rozszerzenie swf. Inną nazwą, stosowaną dla formatu przeznaczonego do oglądania, jest SWF.
W jaki sposób Flash rozpowszechnia pliki?
Flash został wyposażony w funkcję odpowiadającą za tworzenie kodu HTML-owego, koniecznego do wyświetlania animacji w przeglądarce sieciowej.
Funkcja ta automatyzuje również tworzenie alternatywnych wersji filmów Flasha, przeznaczonych dla tych użytkowników, których przeglądarki nie są wyposażone w plug-in umożliwiający odtworzenie plików Shockwave. Jako alternatywę można stosować np. animowane obrazy GIF, filmy QuickTime lub pliki RealPlayer.
Sieć WWW jest przede wszystkim narzędziem komunikacyjnym. Wiele technologii w historii wpłynęło na rozwój sposobów komunikacji. Liczne wynalazki - od maszyny drukarskiej do komputerów osobistych – zrewolucjonizowały sposób przekazywania wiadomości oraz wpłynęły na związane z tym koszty. Internet jest jednym z najtańszych sposobów prezentacji informacji przekazywanych w czasie rzeczywistym i dostępnych dla każdego „na żądanie”. Sieć WWW nieustannie zmienia sposób dostarczania, odbierania i wykorzystania informacji.
Oczywiście sieć WWW nie jest pierwszym rewolucyjnym środkiem komunikacji, ale tylko ona zdołała ewoluować tak szybko i tak się upowszechnić. Druk, telegraf, gramofon, telefon czy telewizja ogromnie wpłynęły na komunikacje, ale zajęło im to znacznie więcej czasu. Sieć WWW rozwija się dopiero od 1994 roku, a już wszyscy: przedsiębiorstwa, instytucje edukacyjne, rządowe i zwykli ludzie traktują ją jako podstawowy sposób komunikacji. Większość badań wskazuje, że podwoi zasoby w ciągu najbliższych 5-10 lat, co powinno stanowić zachętę dla wszystkich, którzy zajmują się lub chcą się zająć jej rozwojem.
Dlaczego rok 1994 był przełomowy? Do tego czasu Internet stanowił niemal wyłączną domenę środowisk akademickich i polegał głównie na przekazie tekstowym. Nie było w nim reklamy, marketingu, czy prywatnych witryn, a samą myśl o nich określano jako nieetyczną czy nawet nielegalną. Jednak ten obraz zmienił się bardzo szybko po udostępnieniu Internetu przedsiębiorstwom i użytkownikom prywatnym. Obecnie większość technologii w nim stosowanych jest rezultatem swobodnego dostępu. Internet powstawał jako uniwersalny środek przekazu. Podstawowym celem jego twórców było opracowanie takiego sposobu dostarczania znacznych ilości informacji, żeby odbiorca nie potrzebował używać konkretnego programu czy nawet platformy. Przeglądarka internetowa spełnia funkcję tłumacza – musiała odczytać plik i udostępnić jego zawartość użytkownikowi. Cały proces powinien się odbywać „w lobie” i być niezauważalnym dla użytkownika. Służyć temu miał język zwany Hypertext Markup Language (HTML), prymitywna, według dzisiejszych standardów odmiana bardziej skomplikowanego Standard Generalized Markup Language (SGML).
HTML pozwala na oznaczanie stron specjalnymi znacznikami (tagami), któte mogą być tłumaczone „w locie”. Umożliwiło to oddanie do tekstu grafiki w postaci plików Graphic Interchange Format (GIF), które i tak były już rozpowszechnione w Internecie dzięki CompuServe i innym usługom sieciowym, a także plików Joint Photographic Experts Group (JPEG). Ten system w założeniach miał być prosty i umożliwiać komunikacje wszystkim chętnym.
Chociaż plan był doskonały, to jednak powstał w kręgu naukowców i pracowników akademickich. Priorytetem była dostępność i powszechność nowego formatu, natomiast mniej uwagi zwracano na formę przekazywanej treści. Sprawy grafiki i estetyki były drugoplanowe, nic więc dziwnego, że pierwsza wersja HTML oferowała ograniczone możliwości projektowania stron.
HTML miał też być swobodnie zdefiniowany. Większość znaczników opisuje tylko ogólny sposób wyświetlenia elementu strony – tekstu, tabeli, formularza lub obrazu. Język nie definiuje dokładnego rozmieszczenia elementów ani nie określa rodzaju prezentowanych informacji.
Właśnie te ograniczenia zadecydowały o powstaniu wielu rozszerzeń podstawowego zestawu znaczników oraz wielu technologii używanych łącznie z HTML, na przykład Dynamic HTML (DHTML) czy Cascading Style Sheets (CSS). Twórcy tych rozszerzeń starali się pokonać wady HTML, dodając do niego nowe funkcje, oraz wpłynąć na estetykę stron. Najnowsze technologie, na przykład Extensible Markup Language (XML) i Extensible Stylesheet Language (XSL), mogą całkowicie wyeliminować HTML, ale to potrwa nieco dłużej.
Wraz z rozwojem HTML dodawano do niego coraz więcej znaczników i atrybutów, żeby ułatwić pracę projektantom. Około 50 procent nowych funkcji (także tzw. nowoczesnych technologii) miało za cel rozbudowę graficznej strony Sieci, przed rokiem 1995 niemal nie istniejącej. Obecnie trudno znaleźć stronę bez elementów graficznych. Choć, oczywiście, wciąż można trafić na takie, które nie odpowiadają aktualnym standardom estetyki (http://www.webpagesthatsuck.com/), ale nie jest ich już tak wiele. Zasad projektowania stron należy się uczyć, podpatrując zarówno dobre, jak i nieco gorsze przykłady.
Ponieważ coraz więcej osób zajmuje się projektowaniem stron, najlepszym sposobem nauki jest doświadczenie. Projektowanie stron stało się gatunkiem sztuki, równocześnie ewoluując i stabilizując się. Strony internetowe przestają wyglądać jak tradycyjne publikacje przerobione na formę cyfrową, a zaczynają żyć własnym życiem. Coraz bardziej odróżniają się od „papieropodobnych” przodków.
Projekty stron internetowych zmieniają się, ale niektóre zasady pozostają aktualne. Odmienność w przypadku stron WWW polega przede wszystkim na tym, że projektant dysponuje dwoma atrybutami niedostępnymi w tradycyjnych dokumentach: interaktywnością i dynamiką. Interaktywność to możliwość dokonania wyboru wyświetlanych informacji przez użytkownika. Z kolei dynamika stron internetowych związana jest z możliwością stosowania animacji i wideo, z dźwiękiem lub bez niego, a także zmiany zawartości strony w czasie rzeczywistym w zależności od potrzeb użytkownika.
Jednym z najtrudniejszych zadań początkujących projektantów jest określenie odpowiedniej pozycji elementów graficznych na stronie WWW. Większość osób zdaje sobie sprawę z wagi korzystania z grafiki, ale z trudem przychodzi im podejmowanie decyzji dotyczących rozmieszczenia, tworzenia i zastosowania poszczególnych elementów. Projektant powinien się koncentrować przede wszystkim na czytelności przekazu, biorąc pod uwagę grupowanie elementów, naturalny tor wzroku, kompozycje i układ całej strony. Zanim dokona wyboru elementu graficznego, musi określić, czy:
· Element graficzny wzbogaca lub uzupełnia zawartość, która nie może być przekazana lub wyjaśniona za pomocą samego tekstu. Elementy graficzne używane są często jako uzupełnienie lub w zastępstwie fragmentów tekstu. Jeden dobrze zaprojektowany element graficzny może zastąpić kilka akapitów tekstu, a grafika animowana jeszcze więcej. Grafika jest przede wszystkim elementem treści. Użyta w ten sposób zwiększa u odbiorcy koncentrację, motywację i zrozumienie.
· Elementy graficzne, takie jak przyciski, paski i ikony, służą nawigacji. Elementy graficzne zapewniają łatwiejszy i skuteczniejszy sposób interakcji z komputerem. Ikony, menu, okna i wskaźniki przypominające elementy stosowane w graficznych systemach operacyjnych ułatwiają użytkownikom końcowym odnalezienie potrzebnych informacji dzięki logicznej, przejrzystej i zrozumiałej strukturze, będącej postawą interakcji.
· Elementy graficzne tworzą całość sugerującą kolejność przeglądania strony – osiąga się to za pomocą wskaźników, grafiki pomocniczej i „wypełniającej”. W przeciwieństwie do tradycyjnych mediów, na przykład podręczników, większość witryn oferuje niepowtarzalną strukturę treści. Użytkownik musi wiedzieć, gdzie szukać elementów nawigacyjnych i potrzebnych mu treści. Temu służą wizualne wskaźniki. Zasady przeglądania książek (nawigacji) nabywa się wraz z umiejętnością czytania. W przypadku witryn internetowych często potrzebne są wizualne wskazówki. Dlatego elementów graficznych często używa się do zwrócenia uwagi odwiedzającego stronę, a także do utworzenia wizualnej całości, którą mógłby zinterpretować. Dzięki takim zabiegom użytkownik nie ma problemu z odnalezieniem elementów nawigacyjnych i poszukiwanych treści.
Wykorzystując elementy graficzne, należy się stosować również do zasad projektowania stron.
· Jeśli grafika ma być częścią treści, powinna wspierać komunikację. Elementy graficzne należy wykorzystywać wtedy, gdy jakiegoś zagadnienia nie można w pełni przedstawić tylko za pomocą samego tekstu, lub jako dodatek, który pomaga w pełniejszym zrozumieniu treści. Statyczne i dynamiczne obrazy używane są często do przedstawiania związków przestrzennych, pokonania barier językowych, dodania stronie wiarygodności, przykucia uwagi użytkowników lub jako pomoc w interpretacji informacji. Grafika może również wyeliminować przydługie akapity tekstu.
· Grafika nigdy nie powinna przysłaniać treści i nie może odwracać uwagi odbiorców od zasadniczego komunikatu strony. Wszystkie elementy graficzne muszą mieć swój cel. Wstawienie ich wyłącznie w celu podniesienia atrakcyjności strony zazwyczaj odwraca u...
MAXXDATA