Animowane gif-y w aplikacji Flex

Pisząc aplikację niewielkiego kalkulatora (na pewno się pochwalę jak skończę , potrzebowałam w niej umieścić animowanego gif-a. Sądziłam, że największym wyzwaniem będzie tutaj zrobienie takiego gif-a, bo cóż, znam się na robieniu grafiki “jak świnia na gwiazdach”. Na szczęście wujek google zawsze pomoże. Tutoriali jest masa (jak nie wiesz jak stworzyć takiego gif-a zajrzyj np. tutaj). Nawet szybko i sprawnie mi poszło, gif skacze tak jak powinien. Nieświadomie umieszczam gif’a tak jak każdy inny obrazek w aplikacji Flex:

   <mx:Image source="images/moj_obrazek.gif"/>

Kompiluje aplikację, odpalam przeglądarkę, a obrazek ani drgnie Okazuje się, że klasa Image nie obsługuje animowanych obrazków! No cóż, to co w HTML jest banalne, we Flex jest trochę bardziej skomplikowane.

Na szczęście nie jest tak źle, bo istnieją biblioteki, które pozwalają rozwiązać ten problem. Zdecydowałam się użyć darmowej biblioteki as3gif. Aby wygodnie korzystać z biblioteki, najlepiej stworzyć z niej plik swc. W skrócie: plik swc to archiwum Flex-a, które może zawierać komponenty i inne zasoby. Takie archiwum możesz dołączyć do swojego projektu i korzystać z zawartych w nim zasobów. W swc najlepiej przechowywać zasoby, które są uniwersalne dla wielu projektów. Na pewno po wielu projektach, gdy uzbiera Ci się spora ilość takich archiwów, docenisz ich użyteczność.

Jak stworzyć archiwum swc?

Jeżeli nie chcesz tracić czasu na tworzenie archiwum, możesz skorzystać z mojego as3gif.swc. Uważam jednak, że warto nauczyć się w jaki sposób tworzyć takie archiwum.

1. W Flash Builder wybieramy File -> New -> Flex Library Project.
2. W oknie, które nam się wyświetli wpisujemy nazwę projektu np. as3gif, a następnie wybieramy opcję Next.
3. W kolejnym oknie możemy do projektu dodać dodatkowe zasoby np. biblioteki itp. Nic nie zmieniamy w tym oknie i wybieramy opcję Finish.

Projekt biblioteki zostanie stworzony. Teraz stworzymy archiwum swc. W tym celu:

1. Kopiujemy do folderu src projektu wszystkie pliki i foldery, jakie znajdują się w rozpakowanym archiwum as3gif, który ściągnęliśmy wcześniej.
2. Następnie musimy wskazać, które zasoby mają zostać dołączone do pliku swc. Z menu głównego wybieramy Project -> Properties -> Flex Library Build Path. Wybieramy zakładkę classes i sprawdzamy czy jest zaznaczona opcją dołączenia wszystkich klas z folderu src (pierwsza opcja). Ponieważ biblioteka as3gif ma jeszcze inne zasoby potrzebne do prawidłowego działania, przełączamy się na zakładkę assets i zaznaczamy opcję przy GIFPlayer.fla i GIFPlayer.swf. Zatwierdzamy wszystko wybierając opcję Ok.
3. Jeżeli W Flash Builder masz zaznaczoną opcję Project -> Build Automatically, zaraz po zamknięciu okna, w katalogu bin projektu powinien się wygenerować plik archiwum. Jeżeli opcja nie była zaznaczona, wybierz z menu górnego Project -> Build All.

Dołączanie pliku swc do projektu

Skoro mamy już nasze archiwum swc, dołączmy do do naszego archiwum. Zaznaczamy główny katalog projektu, do którego chcemy dołączyć plik swc i z menu górnego wybieramy Project -> Properties -> Flex Library Build Path. Z prawego menu wybieramy Add SWC. Wskazujemy ścieżkę z lokalizacją pliku swc i zatwierdzamy nasz wybór klikając opcję Ok.

Nie jest to jedyny sposób w jaki możemy skorzystać z archiwum swc. Więcej informacji na ten temat znajdziesz w oficjalnej dokumentacji Flex.

Korzystanie z as3gif

Skoro możemy już w wygodny sposób skorzystać z biblioteki as3gif, napiszmy klasę rozszerzającą klasę Image, która pozwoli nam umieszczać w aplikacji Flex animowane obrazki.

package classes
{
	import flash.net.URLRequest;

	import mx.controls.Image;
	import mx.core.UIComponent;

	import org.bytearray.gif.player.GIFPlayer;

	public class AnimatedGIFImage extends Image
	{

		private var _gifImg:UIComponent;

		public function AnimatedGIFImage()
		{
			super();
			this._gifImg = new UIComponent();
		}

                //ustawienie ścieżki do obrazka
		override public function set source(value:Object):void
		{
			if(!(value is String)){
				throw new ArgumentError("Nieprawidłowa ścieżka");
			}

			super.source = value;
		}

		override protected function createChildren():void
		{
			super.createChildren();
                        //korzystamy z player-a, który pozwala na odtwarzanie animowanych obrazków
			var player:GIFPlayer = new GIFPlayer();
			player.load(new URLRequest(this.source as String));
			this._gifImg.addChild(player);
		}

                //aktualizujemy listę wyświetlania
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			this.addChild(this._gifImg);
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
	}
}

Korzystanie z tak napisanej klasy jest proste. W pliku mxml piszemy po prostu:

    <classes:AnimatedGIFImage source="images/arrow_down.gif"/>