Głównym składnikiem stron internetowych, oczywiście oprócz tekstu (treści) są statyczne i ruchome elementy graficzne. Każdy z nas spotkał się z animacjami, ruchomymi banerami inaczej mówiąc reklamami. Spora część z nich tworzona jest w oparciu o technologię Flash (format zapisu SWF lub FLA), gdzie banery są efektowne, lecz nie koniecznie efektywne. Dlaczego? Użytkownicy będąc świadkami wszechobecnej komercji, nawału reklam, spotów i innych elementów promocyjnych w pewnym momencie mówią STOP i zaczynają stosować różnego typu dodatki zmniejszające uciążliwość surfowania po internecie. Zazwyczaj prowadzi to do wycinania bądź blokowania niepożądanych reklam (głównie Flash) przez co traci na tym reklamodawca, który nie dotrze do użytkownika (potencjalnego klienta) ze swoją ofertą. Jak temu zaradzić? Czy jest na to jakiś rozsądny sposób?
Tworząc baner reklamowy, należy poważnie zastanowić się nad jego formatem i wybrać pomiędzy klasyczną formą (animacją w formacie APNG lub GIF), lub pozostać przy modelu trendowym, czyli animacji Flash. Nie ukrywam, że ta technologia niesie ze sobą wiele dobrego, mamy znacznie większe pole manewru, możemy przygotować dowolny przekaz, zachowując przy tym niewielki rozmiar pliku. W klasycznej formie, aby osiągnąć ten sam efekt potrzeba znacznie większego wysiłku. Jest to wykonalne i może okazać się w ostatecznym rozrachunku lepszym rozwiązaniem, jednakże decyzja w tej sprawie należy do Was. Co wybierzecie? Tego nie wiem, lecz w tym artykule opiszę, w jaki sposób stworzyć animację GIF, w programie GiftedMotion.
Zabieramy się do pracy, wpierw zaopatrzymy się w darmową aplikację GiftedMotion, która posłuży do stworzenia animacji GIF. Nie wymaga ona instalacji, rozprowadzana jest w formie pliku JAR, dlatego też, aby odpalić program, będziemy musieli zainstalować biblioteki uruchomieniowe Sun Java Runtime Environment.
Przygotowujemy zestaw animacji w dowolnym programie do obróbki grafiki GIMP, Paint.NET, PhotoFiltre etc. W przykładzie wykorzystam zestaw sześciu grafik stworzonych w GIMPie i zapisanych w formacie GIF. Nie jest to baner ani reklama, zwykła sekwencja obrazków, która w rezultacie stworzenia efektu ruchu, będzie przedstawiać migoczące okręgi.
W dogodnej lokalizacji tworzymy folder frames, do którego kopiujemy zestaw plików.
Uruchamiamy GiftedMotion i przystępujemy do stworzenia animowanego GIFa.
Z menu wybieramy File => Load (1) i wskazujemy lokalizację folderu frames. Jeżeli chcemy za jednym razem otworzyć wszystkie klatki animacji, w aktywnym oknie wciskamy skrót CTRL+A i klikamy Open.
Zobaczymy dwa okna, edytor sekwencji (Sequence editor) oraz okno podglądu animacji (7). W sekcji Frame order (6) znajdziemy poszczególne klatki, które zostały ułożone zgodnie z nazewnictwem (01.gif, 02.gif itd.).
Przystępujemy do odtworzenia animacji, klikamy ikonę Play Animation (3). Zatrzymujemy animację, Pause Animation (4). Wiemy już jaki jest efekt domyślnych ustawień, modyfikujemy je wedle potrzeb. W sekcji frame settings możemy ustawić:
- Time (ms) - czas opóźnienia w milisekundach.
- Dispose - sposób zastępowania danej ramki, zazwyczaj ustawia się na poprzednią (previous).
- Offset X - przesunięcie w osi X (poziomie) o zadaną liczbę pikseli. Modyfikacji można również dokonać chwytając klatkę animacji i przesuwając ją w dowolny punkt w obszarze krycia.
- Offset Y - przesunięcie w osi Y (pionie) o zadaną liczbę pikseli.
Zaznaczamy wybraną klatkę i dokonujemy zmian. Zaznaczenie opcji Apply changes to all frames spowoduje zastosowanie jednego ustawienia do wszystkich klatek animacji.
Przyciski Swap with previous frame (8) i Swap with next frame (9) służą do zmiany położenia klatki w sekwencji, pozostałe dwa przyciski Add a copy of the frame (10) oraz Remove frame from sequence (11) pozwalają na zduplikowanie lub usunięcie wybranej klatki.
Dostęp do zaawansowanych opcji uzyskamy klikając ikonę Configure export settings (2). Ustawimy tam miedzy innymi przeźroczystości, stopień wygładzania, liczbę powtórzeń animacji (dla -1 jedno powtórzenie, dla wartości 0 nieskończenie wiele powtórzeń).
Po dopasowaniu wszystkich ustawień, pora na odtworzenie animacji. Wybieramy Play (3), jeżeli efekt jest zadowalający zapisujemy animację, klikamy Record animation (5).
W moim przypadku efekt końcowy wygląda mniej więcej tak...
Dzięki GiftedMotion możemy także wyodrębnić klatki z animowanego GIFa. Po załadowaniu pliku wybieramy File => Save single frames, wskazujemy docelowy folder i zapisujemy zestaw (Save). We wskazanym folderze powstaną pliki odpowiadające poszczególnym klatkom animacji.
Copyright © rokko
Wszystkie prawa zastrzeżone. Kopiowanie całości lub fragmentów niniejszego artykułu jest zabronione.
