Animated Gif Away3D 4.x Material

If I’m perfectly honest I really can’t stand animated gifs (as a format), simply because the compression is really poor and the resulting filesize is usually huge. Never the less it’s pretty university accepted on the old interwebs, so I thought it might be handy to have a fast and easy way of applying them to Away3d materials.

Dependencies:
My fork of “Flash-Animated-GIF-Library”
https://github.com/peteshand/Flash-Animated-GIF-Library
My fork of “away3d-core-fp11”
https://github.com/peteshand/away3d-core-fp11

First step is to load or embed your gif.
In my case I’m simply going to embed it.

?View Code ACTIONSCRIPT
[Embed(source="image.gif", mimeType = "application/octet-stream")]
public static const data:Class;

Next create a new GIFPlayer instance and add a GIFPlayerEvent.COMPLETE event listener

?View Code ACTIONSCRIPT
gifPlayer = new GIFPlayer(true);
gifPlayer.addEventListener(GIFPlayerEvent.COMPLETE, OnDecodeComplete);
gifPlayer.loadBytes(new data());

Then all you need to do is create a GifTexture and a GifMaterial and your home free.

?View Code ACTIONSCRIPT
var texture:GifTexture = new GifTexture(gifPlayer);
var gifMaterial:GifMaterial = new GifMaterial(texture);

Animated Gif applied to a plane

?View Code ACTIONSCRIPT
var geo:PlaneGeometry = new PlaneGeometry(gifPlayer.width, gifPlayer.height, 1, 1, false);
var mesh:Mesh = new Mesh(geo, gifMaterial);
addChild(mesh);

Get Adobe Flash player

Animated Gif applied to a cube

?View Code ACTIONSCRIPT
var geo:CubeGeometry = new PlaneGeometry(200,200,200,1,1,1,false);
var mesh:Mesh = new Mesh(geo, gifMaterial);
addChild(mesh);

Get Adobe Flash player

Transparent Gif

Get Adobe Flash player

15 Comments

  1. ahah great idea !
    does this material handle gif transparency ?

  2. I’m not sure, send me a transparent gif and I’ll give it a test

  3. @Yop as expected transparent gifs work just fine. I’ve updated the post with an example using one of the gifs that you sent.

  4. Hi Pete.
    Thanks for this.
    Nice Work.

  5. Just a question…
    I´m trying to load GIF from an URL with Loader instead of embed the gif without success..

    I had a question ! : )

    Solved with URLStream (code for who´s interested) :

    var stream:URLStream = new URLStream();
    var gifPlayer:GIFPlayer;

    gifLinkToByteArray(‘https://24.media.tumblr.com/6784670dd8534386c9ab9fcc50659d50/tumblr_myz3dwX6vl1s917bwo1_250.gif’);

    function gifLinkToByteArray(url:String){
    stream.addEventListener( Event.COMPLETE, completeHandler );
    stream.load(new URLRequest(url));
    }
    function completeHandler( e:Event ):void {
    var bytes:ByteArray = new ByteArray();
    stream.readBytes( bytes );
    gifPlayer = new GIFPlayer(true);
    gifPlayer.addEventListener(GIFPlayerEvent.COMPLETE, OnDecodeComplete);
    gifPlayer.loadBytes(bytes);
    }

  6. Where do you get the GifTexture and GifMaterial classes from?

  7. sir, for away3d 4.1.6, GifTexture & GifMaterial didn’t exist, so force to use away3d 4.0 ?

    for flex user,

    var container:UICompent = new UICompent();
    var gif:GIFPlayer = new GIFPlayer();

    //do the wrap
    container.addChild(gif);

    //load the image…

    //Add the player into your control or the application
    the_flex_control_or_application.addChild(container);
    }}}

    can these apply in actionscript by simply import fl.core.UIComponent;
    can sir demonstrate it in complete code ?

  8. var _player:GIFPlayer = new GIFPlayer(true);
    var currentMaterial:TextureMaterial = mesh.material as TextureMaterial;
    currentMaterial = new TextureMaterial(currentTexture, false, false, false);
    var currentTexture:NativeVideoTexture = currentMaterial.texture as NativeVideoTexture;
    currentTexture = new NativeVideoTexture(new mynum(), true, true, _player);
    sir, i can’t get it

  9. var stream:URLStream = new URLStream();
    gifLinkToByteArray(“diego.gif”);

    function gifLinkToByteArray(url:String){
    stream.addEventListener( Event.COMPLETE, completeHandler );
    stream.load(new URLRequest(url));
    }
    function completeHandler( e:Event ):void {
    var bytes:ByteArray = new ByteArray();
    stream.readBytes( bytes );
    gPlayer = new GIFPlayer(true);
    gPlayer.addEventListener(GIFPlayerEvent.COMPLETE, OnDecodeComplete);
    gPlayer.loadBytes(bytes);
    }

    var tex:GifTexture = new GifTexture(gPlayer);
    var gifMaterial:GifMaterial = new GifMaterial(tex);

    var geo:PlaneGeometry = new PlaneGeometry(100, 100, 1, 1, false);
    var mesh:Mesh = new Mesh(geo, gifMaterial);
    _view.scene.addChild(mesh);

    private function OnDecodeComplete(ev:GIFPlayerEvent):void
    {

    gPlayer.resize(0.25, 0.25);
    }

    sir, not work, TypeError: Error #1009: Cannot access a property or method of a null object reference.

    by this way,

    gPlayer = new GIFPlayer(true);
    gPlayer.addEventListener(GIFPlayerEvent.COMPLETE, OnDecodeComplete);
    gPlayer.loadBytes(new mygif());

    got this [Fault] exception, information=ArgumentError: Error #2015: Invalid BitmapData.

    can anyone demonstrate it for me ? i need it urgently

  10. sir, thanks a lot, you solve my problem.
    i have some question about gotoAndPlay, if i use gifPlayer.gotoAndPlay(2); error message “The requested frame is out of bounds.” but if i:

    var totfr:uint = gifPlayer.totalFrames;
    var curfr:uint = gifPlayer.currentFrame;

    if (curfr === 1) {
    gifPlayer.gotoAndPlay(2);
    }

    no error message, why ?

    another question, can we control frame rate for gifplayer ? by timer ?

  11. sir,can gifplayer work together with away3d lite ? how

Submit a Comment

Your email address will not be published. Required fields are marked *