Animowanie ruchu obiektów po wyznaczonej ścieżce może być wykorzystywane na różnorodne sposoby. W tym artykule interesuje mnie względnie prosty przypadek ruchu po drodze widocznej na mapie. Kształt drogi będzie więc podstawą do stworzenia ścieżki ruchu dla niewielkiego symbolu (prostokąta), który może reprezentować np. jakiś środek transportu albo kolumnę wojsk w przypadku jakiejś wizualizacji działań wojennych.

Na potrzeby niniejszej demonstracji zdecydowałem się wykorzystać fragment mapy Krymu dostępnej pod adresem:

http://polona.pl/item/23679343/0/

(The Crimea, William Hughes, London: G. Virtue & Co., [ca 1868]. Domena publiczna. Miejsce udostępnienia: http://polona.pl/item/23679343/0/)

Ścieżkę dla animacji stworzyłem w programie Adobe Ilustrator, ręcznie odrysowując ją wzdłuż drogi widocznej na mapie, za pomocą narzędzia o nazwie Ołówek. Wykonałem ją w Adobe Ilustrator, a nie w Adobe Flash, ze względu na większe możliwości tego pierwszego programu w zakresie tworzenia precyzyjnych wektorowych ścieżek.

Kolejne działania realizowane były już w Adobe Flash Professional CS6 .

Pierwszym krokiem było utworzenie dokumentu równego rozmiarowi mapy 800x800, następnie zaimportowanie zarówno mapy, która odgrywaja rolę tła oraz uprzednio utworzonej ścieżki. Mapa została zamieszczona na osobnej warstwie i następnie, na linii(osi) czasu, za pomocą ustawienia klatki kluczowej dla warstwy z mapą, został ustalony wstępny czas jej widoczności, który można zmieniać przesuwając wspomnianą klatkę. Warstwę z mapą warto jest zablokować, aby nie powodować zmian na niej podczas dalszych czynności (ikona kłódki obok nazwy warstwy). Import ścieżki, podobnie jak w przypadku mapy został przeprowadzony za pomocą opcji Importuj na stół montażowy (skrót: CTRL+R), z tą jednak różnicą, że importowany plik .ai (plik programu Adobe Ilustrator), wymagał dookreślenia, co konkretnie ma zostać z niego zaimportowane (zawierał ścieżkę i mapę, z której została odrysowana). W tym wypadku należy zaznaczyć jedynie warstwę ze ścieżką (ang. path) i potwierdzić ten wybór.

Następnie należy utworzyć osobną, trzecią warstwę i narysować prostokąt – wybór na ten kształt padł z tego względu, że umożliwia on w przeciwieństwie np. do koła, sprawdzenie czy obiekt w toku poruszania się po ścieżce zmienia swoją orientację względem niej. Sam rysunek prostokąta nie może zostać poddany animacji o jaką tu chodzi, zanim nie zostanie zamieniony na symbol, w tym celu należy prostokąt zaznaczyć i następnie z menu wybrać opcję Modyfikuj – Konwertuj na symbol (skrót F8). Aby animacja przebiegała poprawnie należy utworzony symbol ustawić w pozycji początkowej tzn. przenieść go na początek drogi i zorientować względem niej – prawdopodobnie będzie potrzebny obrót obiektem na większym zbliżeniu w celu uzyskania większej precyzji. Teraz możemy stworzyć, podobnie jak w przypadku mapy, klatkę kluczową odpowiedzialną za czas jego wyświetlania. Potrzebne jest w tym momencie zdefiniowanie pozycji końcowej, w jakiej znajdzie się obiekt. Dokonuje się tego podobnie jak w przypadku ustalania położenia początkowego, z tą różnicą, że operacja jest wykonywana w ostatniej klatce. Następnie należy kliknąć prawym przyciskiem myszy na powstały ciemno szary obszar na osi czasu, rozciągający się od klatki początkowej do końcowej (na warstwie z prostokątem) i z menu wybrać: Utwórz animację ruchu – szary obszar powinien stać się jasnoniebieski. Teraz należy przejść do warstwy ze ścieżką, wybrać narzędzie: Zaznaczanie cząstkowe (białą strzałką) i kliknąć na ścieżce, zostanie ona zaznaczona, co będzie wiadome poprzez zmianę koloru i wyświetlenie jej kluczowych punktów. Tak zaznaczoną ścieżkę należy skopiować , przejść do warstwy z symbolem-prostokątem, wybrać pierwszą klatkę i wykonać wklejenie ścieżki za pomocą CTRL-V – na warstwie powinna pokazać się ścieżka, ale jest to już ścieżka ruchu. Następnie z panelu Właściwości należy wybrać opcję: Orientuj do ścieżki (jest ona widoczna gdy mamy zaznaczoną jakaś z klatek animacji).


zrzut krym
(Źródło: Zrzut z ekranu z programu Adobe Flash Professional CS6 - Adobe Systems Incorporated )

Warstwę, na której znajdowała się pierwotnie ścieżka można teraz usunąć lub pozostawić jako oznaczenie drogi ruchu.

Właściwie na tym etapie animacja powinna działać, ale może cechować się zbyt dużą szybkością, można temu przeciwdziałać przesuwając pozycje klatek i tym samym wydłużać czas jej trwania. Istnieje także możliwość kierowania dynamiką animacji i stosowania np. efektów zmiany koloru poprzez specjalny edytor ruchu. Jedną z ciekawszych opcji jest dzielenie animacji na części i osobne nimi sterowanie. Taki podział ruchu na części składowe umożliwia także ich rozsuwanie i stworzenie miejsca na osi czasu, które można wykorzystać na potrzeby czasowego wstrzymania ruchu obiektu w konkretnym punkcie ścieżki. Jeżeli ścieżka jest miejscami zbyt ostra lub przesadnie skomplikowana, animowany element może zachowywać się dziwnie (zmieniać szybko orientację, gwałtowanie przeskakiwać do kolejnych punktów), aby temu przeciwdziałać można wyedytować ścieżkę w taki sposób, aby ją uprościć lub nadać jej łagodniejszy kształt.

Utworzoną w ten sposób animację można zwyczajnie wyeksportować do postaci pliku .swf i zamieścić na stronie. Istnieje jednak jeszcze jedna możliwość - eksport w postaci JavaScript (JS). W tym celu trzeba zainstalować dodatek do Adobe Flash Professional CS6 o nazwie: Flash Professional Toolkit for CreateJS (gskinner.com, inc.), można go pobrać: ze strony:

http://www.adobe.com/devnet/createjs.html

Dodatkowe informacje można uzyskać pod adresem.

http://www.adobe.com/devnet/createjs/articles/getting-started.html

Zainstalowany dodatek dostępny z menu: Okno – Toolkit for CreateJS. Po jego wybraniu powinno pojawić się okno z opcjami w języku angielskim. Jeżeli nie chcemy aby animacja byłą zapętlona, możemy odznaczyć Loop. Klikając opcję edit settings usykujemy dostęp do szeregu opcji. Warto ustawić własną ścieżkę zapisu pliku oraz odznaczyć „Hosted libs”, sprawi to, że pliki skryptowe zostaną załączone do eksportu , w przeciwnym razie program czerpie je z zewnętrznego zasobu. W wyniku kliknięcia Publish powinien zostać utworzony zbiór plików oraz powinna się pojawić animacja w oknie przeglądarki. Tego rodzaju eksport ma swoje ograniczenia, może być tak, że niektóre efekty dostępne w programie Flash nie są obsługiwane i wówczas nie będą widoczne. Generalnie ta metoda działa chociaż nie zapewnia 100% zgodności. Niemniej jednak jest cenna z tego względu, że można wygenerować animację w takiej formie, która działa nie wymagając przy tym od odbiorcy zainstalowanego dodatku obsługującego animacje Flash.

Finalna animacja zawierająca efekt zatrzymania obiektu i zmiany koloru:

Wersja SWF

Wersja JS