Gif2TileSet: Extract GIF frames into a Tile Set

Some weeks ago I started studying some animation techniques in Flash games and I started making some Blitting experiments. I will post something about it soon, but the point is that to make an animation you first need the graphics and, as your probably don’t know, I suck at drawing! So the first step was ripping some sprites and I remembered about some really nice animated GIFs I’ve seen some months ago.

So I got the GIFs and tried to find some tool to extract all the frames and I didn’t find anything good for it. I know I can use the Adobe Fireworks to do that, but then I will have to copy frame by frame at the perfect position to do the blitting… So I’ve decided to make my own tool to do the job!

Gif2TileSet

Using the as3gif project I wrote a very simple and experimental tool to do the job and I decided to publish as Open Source to, maybe, help somebody else that is studying those techniques. You can even get the code and see some blitting there too! ;)

On this example I used the character “Infierno Púrpura” from this really beautiful final project game called “Ay, Caramba!” (thank you Jujuqui!):

Infierno Púrpura

And I’ve got this result:

Sample Tile Set

So that’s it! Check out the Gif2TileSet demo and, if you really like it, fork the code on GitHub and make your own improvements.

How to remove Event Listeners with parameters / closure?

On my last post, shaokai asked me how to remove those event handlers added dynamically with parameters and I think it’s a really good question, so I’m posting the solution here too.

Actually, I never tried to remove the listener, but you can’t do this the same way you add the listener. So I found two different solutions to this problem. First, but maybe not the best solution, you can keep a reference to your handler, like this:

1
2
3
4
5
6
7
8
// Keep the reference
var myHandler:Function = buttonHandler(0x0000FF);

// Add the listener
myComponent.addEventListener(MouseEvent.CLICK, myHandler);

// Remove the listener
myComponent.removeEventListener(MouseEvent.CLICK, myHandler);

This solution is valid when you can keep references to your handlers, but when you have many handlers with different parameters, it’s hard to keep all the references. So I found a generic solution to remove event listeners, so you can do this, inside your handler function:

1
2
3
4
5
6
7
8
9
10
private function buttonHandler(color:uint):Function
{
    return function(event:MouseEvent):void
    {
        box.setStyle("backgroundColor", color);
       
        // Remove the handler
        event.currentTarget.removeEventListener(event.type, arguments.callee);
    }
}

Passing parameters to Event handlers

One year ago I asked Beck Novaes how to pass parameters to Event Handlers added dynamically, because when you add a Event Listener using myComp.addEventListener(...), the handler must wait only one event parameter. So Beck came up with a solution, but he stated that this is just one “alternative” solution, not the better one.

Some days ago I was working with simultaneous requests to the server and I wanted to keep the data I sent on the request but I didn’t want to return it from Java, so I came up another solution. Assuming that your Event Handler is waiting a Function that have only one Event parameter, I created another Function that returns a Function waiting the Event parameter. But the trick is that the Function Closure scope allows you to access parameters passed to the first and the second Function, so you can do this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%" width="100%"
    initialize="initApp()">

    <mx:Script>
        <![CDATA[
            private function initApp():void
            {
                buttonA.addEventListener(MouseEvent.CLICK, buttonHandler(0x0000FF));
                buttonB.addEventListener(MouseEvent.CLICK, buttonHandler(0xFF0000));
            }

            private function buttonHandler(color:uint):Function
            {
                return function(event:MouseEvent):void
                {
                    box.setStyle("backgroundColor", color);
                }
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:Button id="buttonA" label="Blue"/>
        <mx:Button id="buttonB" label="Red"/>
    </mx:HBox>

    <mx:Box id="box" height="80" width="200" backgroundColor="#FFFFFF"/>

</mx:Application>


And now, what if you want to use this Event Handler directly in MXML? Well, you can’t do this:

1
<mx:Button label="Green" click="buttonHandler(0x00FF00)"/>


This will not work because the Function that returns from the first one is waiting the Event parameter. So you can do this:

1
<mx:Button label="Green" click="buttonHandler(0x00FF00)(event)"/>


Weird, huh? Maybe another FreaktionScript pattern?