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.