Style sheet is not working as supposed to

Question

I`m new to Flixel , so please forgive me if my question is too simple.

My question is: i made four very simple images(stand, move, side stand, side move) using Photoshop then passed it to Texture Packer(A style sheet maker) it produced me an image(it`s extremely simple) plus a JSON file, here it is:
https://i.stack.imgur.com/UTi4G.png
So i wanted to use them with Flixel as a character that is standing(first one) and when i call the animation move it will use the last image but it did not work as expected. basically it shows all of the four images at once.
here's the code:
Character.as:

package
{
    import org.flixel.FlxSprite;

    public class Character extends FlxSprite
    {
        [Embed (source="character.png")]
        private var CharacterGraphic:Class;
        public function Character(X:Number=0, Y:Number=0)
        {
            super(X, Y);
            loadGraphic(CharacterGraphic, true, false, 53, 54);
            velocity.y = 100;
            addAnimation('move_forward', [0, 3], 30, false);

        }

    }
}

PlayState class(Where I create an instance of this class)

    override public function create():void{
        character = new Character(100, 200);
        add(character);

    }
    override public function update():void{
        //for debugging
        if(character.y == 600){
            character.play('move_forward');
        }
        super.update();
    }

So i expected:
the first image to be popped(and keep going down)when the velocity.y is 600(Just for testing) the move_forward animation starts(looping through first and last image)

And the output is:
All of the four images popped up, and when the velocity.y == 60 nothing happens.

I really think I'm missing something, since I`m very new to Actionscript 3 and Flixel(Also game development!).

Almost the same steps worked for online tutorial only difference is that he created a couple of animations(enemies) instead of one, check it here http://gotoandlearn.com/play.php?id=139
For the JSON file, I never found a use for it(I tried asking in IRC channels but nobody mention it), also in forums/tutorials.

Answer 1

The first problem I see is that you have your images on multiple rows. Flixel likes its frames in squares all in one horizontal row. Even if you specify a rectangular size for each frame, they still need to be all the same size and in one horizontal row. If you do it right, you should have frames 0 through 3.

The reason nothing happens when your image/frame should change is because there is no frame at the index you want it to change to. This should be fixed by the same change.

I don't trust most sprite packers with flixel projects for this reason. Sprite packers are trying to minimize the file size, so they'll cram as many sprites into as little space as possible, so each sprite is a different size from the others. Flixel, as I said, likes its sprites in equal sizes and all in one row.

I found one that does do what I want it to...I'll have to take a look once I get home to see what program it is (or if I don't even have it any more). In the mean time, just use photoshop to make a document the height of your tallest sprite and the width the width of your widest sprite x the number sprites in the sheet. Then place each sprite/frame in the appropriate space.

Edit: I don't think you need the JSON file at all. Just use a transparent PNG.