Multiframe, multi row, image files creation.

How do you create a multiframe, multi row, image file.

Is this something that GIMP can do, or is it common to any graphics program.

The kind of animation I have been looking at is demonstrated at www.spritely.net
where the birds fly along, flapping their wings.

The program uses plugins for the different effects, but that's not what I am interested in;
it does work very well, btw, (that's spritely and jquery).

It is the file on which it is based, it is ONE .png image file, incorporating 6 images
of the bird, in various stages of animation.

I want to create my own 'sprites'.

Haven't found anything non-confusing yet on Google.

The excellent Gimp and Photoshop tutorials do not address this particular point.
Perhaps it is regarded as too basic and simple.

Thanks.

multi-row?

I know how GIMP treats animations, and it does it by considering each layer a frame, and then when saved you can choose a few options for it.

So, what you kind of want to do is something like this - http://vaerli.deviantart.com/gallery/#/d1cxis4

To be honest, even seeing the birds, I don't know exactly what you still want. You want to do this in flash? In terms of .gifs?

It seems like spritely uses just certain parts of the single .png at a time. Thats what i'm guessing they do, and its a done with the HTML. To be honest, I don't really know if there's any other easy way to do it besides whatever they have.

Yes, the HTML governs the position and I can put that together.

The HTML 'calls' for different parts or frames of the one image file, as required.

To enable it to do so, you need an image with multiple rows, where each row is a 'state'
and each row contains multiple frames.

(e.g. Top row of say, three images/frames facing forwards would be state 1;
bottom row of say, 3 images/frames facing backwards would be state 2).

It's not to do with flash or gif animations, I can do those.

I just wanted to know how to construct the one image file, in .png format,
to enable the HTML to pick up on it, so that it recognises that the one image
file has 2 rows and 6 frames, or however many rows and frames I choose to create.

That's it, basically, how to 'make' the image file, how to lay down these layers or frames,
within the one image file.

Thanks for your reply, interesting animation of yours, lot of effort on your part.

Edited by petewills , 21 July 2010 - 10:03 PM.

Well, I think its just simply a evenly spaced image file then. Either that, or you have to use the "cut" tool, which I've never gotten into, since I'm not a bit animator.

Pulling the .png from the bird, it shows just this- http://www.spritely.net/images/bird-forward-back.png

When I throw that into GIMP, its just a normal 540x246 .png image. I can't find any partitions or "frames". I'm guessing the frames are purely dependent on the HTML, so all you need to do is put all your frames into a single .png file, but make it (Length)*(Number of frames), and the height the same. Thus, when you go into the HTML, you just have to make it render the .png from (1) to (length), for X milliseconds, and (length)+(1) to (2)*(Length).

Does that make sense? I guess its kind of like the blind leading the blind, since I don't really know how its really supposed to work, and I practically don't know HTML.


Are you using PS or GIMP, by the way?

Thanks Vaerli, I appreciate you taking an interest in the matter and for your own investigations.

Spritely asked for feedback, so I have emailed them and enquired if they would be kind
enough to advise on the methods they used in creating the type of image file they used,
after all, they do say in their documentation: 'To change a sprite's 'state',
you need an image with multiple rows, where each row is a 'state' (1, 2, 3, etc.)
and each row contains multiple frames, like the following image:"bird-forward-back.png".'
and I doubt if they expect us to use their sprites for ever.

I looked at that file, when I originally downloaded the program and couldn't see
anything unusual or special about it.

I'll let you know what they say, if they reply.

The HTML and source code in the script file refer to 'frames. .fps, milliseconds, return to Frame 1,' etc. etc
so what you are saying makes sense.

I'm currently in between Graphics Editors!
Have recently used 3DPlus2 and GIMP, both recommended by tg1911, but GIMP was a struggle for me.

Edited by petewills , 23 July 2010 - 10:37 AM.

I haven't tried 3DPlus2, but GIMP is a lot like photoshop, just with everything in different places. Also, GIMP's selection tools are often quite lacking.

Still, GIMP is my free photo editor of choice.

Can you post the script file? I don't know the exact syntax, but I may be able to figure it out and point out some things.

I really don't want you to spend any more time on it, on my account.

I have no problem with the HTML, nor the source code - it is purely the creation of a suitable image
on which they operate; without the appropriate image or sprites, the animation doesn't work.

By that I mean you can have an image flying around, quite happily, but no animation
if it is not properly 'constructed'.

Thanks, anyway, I'm keeping what I've got, having modified the html file to show just the
bird and various buttons to make it go, stop, etc. That'll do for me.

Its better me at least thinking about stuff like this than wasting my time on video games so much. I have more fun thinking about this kind of stuff anyways.

Yes, keeps me off the streets too.

There's too much to post here, sensibly.

I can email you the whole shooting match, with my butchered html, if you care to PM me your email address, alternatively you could download the stuff from spritely.net; pretty small download, but if you do, you also need to
download the jquery script file, the link is there on the page.

Well, from http://spritely.net/documentation/, it looks like the code automatically chops it up into however many frames the image is, just by stating how many frames are in that image.

So if you're making it just like a normal animation, you can just make all the frames separately like normal, and then throw them into a single image with them tacked all next to each other.

For example, you could make this image a simple animation -


I imagine you would call that as having two frames. The fps would probably be low, maybe in the .5's. Its not a great example, but it might make more sense.

Yes, I agree it is the image file which is the only 'problem'.

I still don't get how to construct that one image file, containing the individual frames and rows
which are recognised by the program. That's the problem for me.

Can it recognize the image I had up there?

All you probably need to do is make a file thats large enough, and then put all of the frames into that image file in a row. I don't know what else you would do...

I do understand what needs to be done and what you have done with my av, in GIMP, presumably.

The whole picture, however, just flashes on and off in Spritely, nothing moving from frame to frame.

By contrast, in my website building program, I have a file which contains 12 gradient colour squares
in connection with backgrounds. It's a JPG. An individual frame is accessed, when I select a color.

It was a vertical layout of 12 small squares; I rotated it to horizontal, cut it in half and stitched the 2 halves together,
so it gave me 2 horizontal rows of 6 colours per row; saved as a PNG. Resized it to the 'Bird' picture dimensions.

Surprise, surprise, the picture comes up in Spritely (not flashing on and off) and the colours
are changing, so it is working as an 'animation', with this program.

After all we have discussed, it comes back to my original post, the correct construction of the
one image file, containing multiple frames and rows.

Perhaps the same method can be employed by creating many frames in one row
and slicing as above, if GIMP does not enable you to create more than one row,
but the 'flashing' on and off would destroy the effect.

That's enough Spritely, I think; thanks again for your time and input.

Aw... try this one. It should be just the last bit of your animation. It has 22 frames, I believe.

Hi Vaerli

Thanks for the png. I wouldn't be so ungracious as not to try it out!
That rat's gettting a lot of exercise.

I can reverse and stitch, for multi rows, but for the moment, running the 22 frames through,
gives the animation. Reducing the display size to 83 x 83 to show one image in the 'box'
at any one time, with the frames running through it, gives the animation.

As per the bird picture with three frames on each row, only a few frames are required,
with the delay time set as appropriate.

The picture does not flash on and off, now. Only thing required, is attention to transparency.

Think I'll stick to gif animations, in future.

Interesting stuff. This probably does conclude the matter, so thanks again for all the pointers.

What's your next project?