Flex 4: Cannot use gif animation in Flex

Question

I am very new to Flex, and now learning how to use gif animation for a work project. The example below is a very simple flash player (for testing purposes). All I need to do is to show the spinner.gif running, when the player is playing. Without the spinner, player is working fine, but nothing appears on the screen when I add "show_spinner" function and line

<local:AnimatedGIFImage id="spinner" source="spinner.gif" visible="false" verticalCenter="0" horizontalCenter="0"/>.

The brouser window is simply blank. I searched on the web, but did not find the answer yet. I think that I don't understand fully the way flash player displays components.. Would be very gratefull for any advice.

Spinner.mxml file:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:local="*"
                xmlns:s="spark.components.*" layout="vertical" verticalAlign="top"
                backgroundColor="white"
                viewSourceURL="srcview/index.html"
                creationComplete="initApp()">
    <mx:Script>
        <![CDATA[
        import mx.events.VideoEvent;

        private function videoDisplay_ready():void {
            videoDisplay.visible = true;
            controlBar.visible = true;
        }

        private function show_spinner(evt:mx.events.VideoEvent):void {
            if (evt.state == "playing") {
                spinner.setVisible(true);
            } else {
                spinner.setVisible(false);
            }
        }

        private function initApp(){
            videoDisplay.addChild(spinner);
        }
        ]]>
    </mx:Script>
    <s:Group>
        <mx:VideoDisplay id="videoDisplay" visible="false" width="{200}" height="{200}"
                         ready="videoDisplay_ready()"
                         source="http://www.derekentringer.com/flv/purple_plasma.flv"
                         stateChange="show_spinner(event)">
        </mx:VideoDisplay>

        <mx:ControlBar id="controlBar" visible="false">
            <mx:Button id="play" name="play" label="Play" click="videoDisplay.play()"></mx:Button>
            <mx:Button id="pause" name="pause" label="Pause" click="videoDisplay.pause()"></mx:Button>
        </mx:ControlBar>

        <local:AnimatedGIFImage id="spinner" source="spinner.gif" visible="false" verticalCenter="0" horizontalCenter="0"/>

    </s:Group>
</mx:Application>

AnimatedGIFImage.as file (from http://iamjosh.wordpress.com/2009/02/03/animated-gifs-in-flex/):

package
{
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 _gifImage  : UIComponent;

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

    override public function set source(value : Object) : void
    {
        if (!value is String)
        {
            throw new ArgumentError("Source must be of type String");
        }

        super.source = value;
    }

    override protected function createChildren() : void
    {
        super.createChildren();
        var player : GIFPlayer = new GIFPlayer();
        player.load(new URLRequest(this.source as String));
        this._gifImage.addChild(player);
    }

    override protected function updateDisplayList(unscaledWidth : Number, unscaledHeight : Number) : void
    {
        this.addChild(this._gifImage);
        super.updateDisplayList(unscaledWidth, unscaledHeight);
    }
}
}

Answer 1

One thing you might try:

• Right click your project and click "Properties"
• Click "Flex Compiler"
• Make sure "Copy non-embedded files to output folder" is checked

This will make it so that the image will be in copied in to your output folder (usually bin-debug in your project). After you compile, you can actually open that folder and see if the file made it in. If it's not in there, try manually copying the file in there and see if it works. Or you could try a normal image just to see if it's working at all in that location.

Good luck.