Czy pamiętasz książeczki z obrazkami? Takie niewielkie, które czasami można było wygrać w automatach sprzedających gumę do żucia. Szybkie przewracanie stron pozwalało na uzyskanie efektu animacji. Po bliższej analizie, bez trudu można było rozszyfrować, że animacja to w rzeczywistości zestaw obrazków, zazwyczaj rysunków, umieszczanych pojedynczo na kolejnych stronach. Każdy z obrazów różnił się nieco od swojego poprzednika. A to ramię rysunkowej postaci podniosło się nieznacznie, a to wyraz twarzy zmienił się z uśmiechu w grymas. Niezależnie od tego na czym polegała różnica, przy przewracaniu stron uzyskiwany był efekt płynnej animacji.
Książeczki te – które nadal możesz znaleźć czasami w automatach z gumą do żucia – pokazują klasyczny przykład działania animacji. Obok nich masz dziś jednak do dyspozycji mnóstwo specjalizowanych programów do tworzenia animacji, na przykład program Macromedia Flash, i wiele innych, jak na przykład Macromedia Director, Fireworks i Dreamweaver, wyposażonych w narzędzia umożliwiające przygotowanie animacji. Dzięki nim możesz dołączyć do grona tych, którzy martwe, statyczne środowisko sieciowe ożywiają ruchem.
Jeśli decydujesz się na wprowadzenie na swoich stronach WWW elementów animowanych, w procesie projektowania witryny zastanów się najpierw nad najwłaściwszym narzędziem do przygotowania takich elementów. W przypadku pasków reklamowych, tak zwanych banerów, które będą włączać się i wyłączać wyświetlając komunikaty, najlepszym rozwiązaniem jest skorzystanie z programu Macromedia Fireworks. Daje on dostęp do rozbudowanych narzędzi tekstowych i graficznych, przy zachowaniu możliwości wyeksportowania animacji jako sekwencji GIF, którą bez trudu można przesłać ewentualnym klientom.
Jednak jeżeli chcesz zbudować porywającą witrynę, w której obok obracających się kształtów i błyszczących fotografii pojawić się mają cyfrowe klipy wideo i przesuwający się tekst, a w tle sączyć się będą dźwięki, wybór powinien paść na Macromedia Flash. Narzędzia graficzne tego programu nie są może najlepsze (aczkolwiek znacznie je poprawiono w najnowszej wersji), ale masz za to możliwość tworzenia złożonych animacji, oszczędnych pod względem objętości pliku, które można skalować do dowolnych rozmiarów okna przeglądarki.
Powiedzmy, że takie rozwiązanie to dla Ciebie zbyt wiele. Być może nie chodzi Ci o powalanie ludzi na kolana, lecz o dołączenie do tekstu i statycznych obrazów interakcyjności. Może się też zdarzyć, że będziesz chciał uniknąć stosowania zastrzeżonych modułów dodatkowych lub apletów Javy. Jeśli tak, to odpowiedź jest jedna – dynamiczne warstwy programu Dreamweaver korzystające z linii czasowych.
W tym rozdziale rozwinięte zostaną następujące zagadnienia:
q Podstawowe informacje na temat linii czasowej.
q Korzystanie z okna Timelines.
q Tworzenie animacji.
q Inne zastosowania linii czasowej.
q Podpowiedzi i chyty dotyczące stosowania aplikacji.
W programie Dreamweaver – a ogólnie rzecz biorąc w języku DHTML – linie czasowe stosowane są w połączeniu z warstwami. Jeśli elementy, dla których tworzona jest animacja, nie są umieszczone na warstwie, nie jest możliwe ich kontrolowanie w oknie Timelines (jeśli obce Ci są pojęcia związane z warstwami, przeczytaj rozdział 10., Stosowanie warstw). Pamiętaj, że dokumenty, w których stosowane są linie czasowe, powstają z przeznaczeniem dla przeglądarek w wersji 4.0 i nowszych. Starsze oprogramowanie nie obsługuje znaczników, które pozwalają na poprawne działanie linii czasowych i warstw.
Musisz też wiedzieć, że linie czasowe mogą wymagać dużej przepustowości łącza i z tego względu należy z nich korzystać oszczędnie, szczególnie jeśli nie ma pewności, że użytkownicy używają szybkiego łącza (na przykład sieci lokalnej) i wydajnych procesorów.
Definiując linię czasową w programie Dreamweaver korzystasz z języka DHTML (Dynamic Hypertext Markup Language). DHTML to połączenie języków HTML i JavaScript oraz kaskadowych arkuszy stylów (CSS).
Dzieki liniom czasowym, DHTML pozwala zmieniać właściwości warstw i obrazów z szeregu klatek w przedziale czasu zdefiniowanym w oknie Timeline. Odbywa się to poprzez zastosowanie zmienych w czasie ustawień umiejscowienia warstwy CSS. Rysunek 17.1 prezentuje okno Timelines. Aby otworzyć je z poziomu programu Dreamweaver, wybierz pozycję Timelines w menu Window lub zastosuj skrót klawiszowy Shift+F9.
Niech Cię nie przeraża skomplikowany wygląd okna Timelines. Wszystkie te klatki i kanały nieco dezorientują, lecz mają swoje określone przeznaczenie. Nie musisz korzystać ze wszystkich opcji, ale dobrze byłoby, gdybyś nauczył się do czego one służą. Rysunek 17.1 i podane niżej definicje pomogą Ci zorientować się w tym środowisku.
Znacznik pozycji to czerwony, prostokątny wskaźnik przesuwający się po listwie numerów klatek. Wskazuje on klatkę linii czasowej aktualnie zaznaczoną w oknie Timelines i wyświetlaną na stronie.
Rysunek 17.1.
W oknie Timelines tworzona jest sekwencja czasowa, tu także sprawujesz kontrolę nad animacją
Lista rozwijana linii czasowych
Numer klatki
Kanały animacji
Kanał behawiorów
Lista rozwijana linii czasowych ulokowana jest w prawym górnym rogu okna, bezpośrednio poniżej zakładki Timelines. Jej elementami są ponumerowane linie czasowe zdefiniowane w Twoim dokumencie. Domyślnie wyświetlana jest aktualnie wybrana linia czasowa.
Numery poszczególnych kanałów animacji znajdują się z lewej strony okna Timelines. Jeśli w animacji zdefiniowano klatki, w których jednocześnie wyświetlanych jest na ekranie kilka warstw, każdej z warstw należy przypisać osobny kanał animacji. Aby dodać obiekt do kanału, zaznacz w dokumencie warstwę zawierającą obiekt i przeciągnij ją do odpowiedniej klatki kanału, w którym chcesz umiejscowić obiekt w linii czasowej.
Pasek animacji to zacieniowany obszar, zaczynający się i kończący się klatką kluczową (oznaczoną kółkiem), która pojawia się w kanale animacji po dodaniu obiektu. W jednym kanale można umieścić kilka pasków animacji, ale nie mogą się one pokrywać.
Klatki kluczowe noszą taką nazwę, ponieważ informują o ewentualnych zmianach w animacji, na przykład takich jak zmiana pozycji warstwy. Klatki kluczowe pojawiają się na początku i końcu paska animacji, po dodaniu obiektu do kanału animacji.
Klatki kluczowe można z łatwością rozpoznać, są bowiem oznaczone niewielkim kółkiem. Zmiana zachodząca między nimi, na przykład taka jak przemieszczenie warstwy między dwoma punktami, jest obliczana przez program Dreamweaver. Aby przyspieszyć lub zwolnić animację elementu, można wstawić dodatkowe klatki między klatki kluczowe lub zmienić wartość współczynnika FPS (ang. Frames per Second) określającego liczbę klatek wyświetlanych w jednostce czasu. Wartość ta nie może być jednak zbyt duża – powyżej 30 FPS przyrosty szybkości nie są już zauważalne. Poza tym, im wyższa wartość FPS, tym bardziej obciążone łącze i większa tendencja do pojawiania się błędów, szczególnie w przeglądarce Internet Explorer dla komputerów Macintosh.
Kanał behawiorów, ulokowany z lewej strony okna Timelines i oznaczony wielką literą B, to miejsce wstawiania behawiorów. Aby dodać behawior, kliknij w kanale behawiorów tę klatkę, w której chcesz zdefiniować akcję lub zdarzenie. Otwórz następnie panel Behaviors i kliknij znak plus (+), aby rozwinąć listę behawiorów.
Po wybraniu behawiora, w kanale behawiorów pojawia się niewielki, cieniowany znak.
Powyżej kanałów animacji pojawiają się numery klatek wyświetlane z krokiem równym 5. Klatka pierwsza z lewej ma numer 1. Następne klatki są numerowane kolejno. Pole tekstowe oznaczone FPS (ang. Frame per Second), umieszczone nad kanałem behawiorów, służy do definiowania współczynnika FPS.
Na przykład deklaracja FPS=12 stanowi dla przeglądarki informację, że ma wyświetlać 12 klatek animacji na sekundę. W programie Dreamweaver domyślna wartość współczynnika FPS wynosi 15, co jest całkowicie wystarczające dla kogoś, kto rozpoczyna naukę tworzenia animacji.
Pamiętaj, że odegranie klatki animacji jest poprzedzone jej załadowaniem do okna przeglądarki. Jeśli więc połączenie sieciowe nie jest na tyle wydolne, aby odtworzyć animację z szybkością zdefiniowaną poprzez FPS, współczynnik ten zostanie zignorowany. Pamiętaj też, przy dużych szybkościach wyświetlania animacji można przeciążyć łącze.
Z prawej strony listy rozwijanej linii czasowych znajdziesz zestaw kontrolek, które pozwalają kontrolować sposób wyświetlania animacji. Omówimy kolejno ich funkcje.
Przycisk oznaczony strzałką skierowaną w lewo i linią pionową umożliwia przesunięcie wskaźnika klatek do pierwszej klatki okna Timelines.
Przycisk oznaczony strzałką skierowaną w lewo służy do poklatkowego cofania animacji. Aby odtworzyć animację wstecz, kliknij przycisk i przytrzymaj wciśnięty klawisz myszki.
Przycisk oznaczony strzałką skierowaną w prawo służy do poklatkowego odtwarzania animacji. Aby odtworzyć animację, kliknij przycisk i przytrzymaj wciśnięty klawisz myszki.
Jeśli opcja Autoplay jest zaznaczona, animacja zostanie automatycznie odtworzona, natychmiast po załadowaniu do okna przeglądarki. Jest to możliwe dzięki dodaniu behawiora Play Timeline do zdarzenia onLoad w znaczniku <BODY>. Pamiętaj, że każda linia czasowa Twojej animacji wymaga odrębnych ustawień włączających bądź wyłączających autoodtwarzanie.
Zaznacz opcję Loop, jeśli chcesz, aby animacja została kilkakrotnie powtórzona bez zatrzymywania. Powtarzanie definiuje się w kanale behawiorów poprzez dodanie do ostatniej z klatek behawiora Go to Timeline Frame. Aby zdefiniować liczbę powtórzeń, kliknij dwukrotnie znacznik za ostatnią z klatek – umożliwi to zmianę ustawień behawiora. Pamiętaj, że każda linia czasowa animacji wymaga niezależnego definiowania ustawień powtarzania.
Początek ramki
Uwaga
W przypadku wszystkich linii czasowych dodawanych przez Ciebie w oknie Timelines, opcjom autoodtwarzania i powtarzania Dreamweaver przypisuje domyślne ustawienia. Po dodaniu linii czasowej sprawdź więc, czy zmieniłeś ustawienia obu opcji.
Koniec ramki
Sekwencje wideo programu Flash mogą być stosowane jako obiekty tworzonych w DHTML-u linii czasowych. Oto kilka podpowiedzi, które będą tu pomocne:
q Pamiętaj, że sekwencja wideo programu Flash musi zostać umieszczona na warstwie przed dodaniem jej jako obiektu w oknie Timelines.
q Opcje autoodtwarzania i powtarzania sekwencji wideo programu Flash należy zdefiniować w oknie właściwości programu Dreamweaver dla wybranego obiektu. Opcje definiowane z poziomu okna Timelines nie wpływają na sposób odtwarzania sekwencji wideo, lecz jedynie na warstwę ją zawierającą.
q W celu uzyskania najlepszych rezultatów, unikaj nakładania warstwy zawierającej sekwencję wideo programu Flash z jakąkolwiek inną warstwą. Obszar, w którym odtwarzana będzie ta sekwencja powinien być przeznaczony tylko dla niej. Jest to szczególnie istotne, jeśli w trakcie odtwarzania linii czasowej obiekt programu Flash jest powtarzany lub ukrywany.
Niewątpliwa obfitość programów do tworzenia animacji sprawia, że jest z czego wybierać. Być może zastanawiasz się, dlaczego masz korzystać akurat z programu Dreamweaver, skoro programy Flash lub Fireworks także się do tego nadają.
Zalety korzystania z linii czasowych programu Dreamweaver to wygoda wynikająca z braku konieczności przełączania się między programami w trakcie pracy oraz uwolnienie się od potrzeby importowania do dokumentu plików. Ponadto, dzięki liniom czasowym DHTML można uniknąć stosowania modułów dodatkowych i apletów.
Najważniejsze jednak, że linie czasowe pozwalają zintegrować złożone animacje oraz struktury nawigacyjne w całość. Innymi słowy, linie czasowe mogą stanowić coś w rodzaju narzędzia choreograficznego, które pozwala „dyrygować” sposobem i momentem pojawiania się poszczególnych elementów Twojej witryny oraz ich działaniem. Jest to szczególnie użyteczne w przypadku tworzenia animowanych (rozwijanych) systemów menu, co jest obecnie jednym z najczęstszych zastosowań linii czasowych DHTML.
W tym trzyczęściowym zaawansowanym pod względem stopnia trudności ćwiczeniu omówione zostaną podstawowe zasady animowania warstw i przypisywania im behawiorów z poziomu okna Timelines. Niezbędne pliki znajdziesz w katalogu Smoking na dołączonym do książki dysku CD. Korzystając z nich przygotujesz komunikat dotyczący palenia papierosów. Utworzą go przewijany baner, sekwencja wideo programu Shockwave oraz zamykający całość obraz, po którym wyświetlony zostanie akapit tekstu. Dzięki linii czasowej te cztery elementy pojawią się automatycznie natychmiast po ściągnięciu strony z serwera lub ponownym jej przeładowaniu w oknie przeglądarki.
Ćwiczenie przeznaczone jest dla zaawansowanych użytkowników programu Dreamweaver. Początkujący użytkownicy mogą je sobie na razie podarować, powracając do niego dopiero po wykonaniu reszty ćwiczeń z książki. Jeśli jednak lubisz ryzyko, możesz już teraz spróbować swoich sił. Nie mów wszelako, że nie ostrzegaliśmy!
Otwórz w oknie przeglądarki plik o nazwie showme.html (z katalogu Smoking na dołączonym do książki dysku CD), aby zobaczyć do jakiego efektu w tym ćwiczeniu zmierzasz.
Rozpocznij od wyświetlenia w oknie programu Dreamweaver pliku o nazwie dontsmoke.html z katalogu Smoking na dołączonym do książki dysku CD. Wykonaj następnie operacje wymienione w przedstawionych niżej punktach:
Rys. 17.2.
W pliku dontsmoke.html pozycje wszystkich czterech warstw są już zdefiniowane, określona jest także widoczność warstwm
Rys. 17.3.
Rozwijane menu w oknie Timelines
Rys. 17.4.
Rozbudowywanie reprezentacji warstwy banner w oknie Timelines
Rys. 17.5.
Zmiana pozycji warstwy przy wykorzystaniu okna właściwości
Posługując się liniami czasowymi musisz pamiętać o kontrolowaniu ich długości. W przypadku bardzo długich animacji, można podzielić je i umieścić poszczególne elementy składowe w odrębnych liniach czasowych. Będą one dostępne z poziomu okna Timelines, ale mogą być wyświetlane we własnych oknach.
Ponieważ mechanizmy powtarzania i autoodtwarzania mogą być różne dla różnych linii czasowych, zwiększając liczbę linii czasowych rozszerzasz funkcjonalność swoich warstw DHTML.
W tym ćwiczeniu pozostałe trzy warstwy zostaną umieszczone na własnych liniach czasowych. Tez sam efekt końcowy można jednak uzyskać także wówczas, gdy zastosowana zostanie tylko jedna linia czasowa. Wybraliśmy wariant z kilkoma liniami, abyś mógł ugruntować technikę tworzenia linii czasowych.
Na początek wróćmy do pliku o nazwie dontsmoke.html, nad którym pracowałeś w pierwszej części tego ćwiczenia. Następnie wykonaj następujące operacje:
Rys. 17.6.
Obiekt Flashmouse powinien zajmować obszar od klatki 61 do 119. Wartość FPS należy ustawić na 12
paradoks24h