Introducing a new tool: JavaScript-based GIF animation player

[1ucas]

One of the problems with animated GIFs is that we can't just stop them in the browser and play them frame by frame. It is very cumbersome when someone posts an animation and we have to save it and open it locally in order to analyze it.

Well, I created this little tool to help us with that. It's entirely based on JavaScript and some server-side processing of GIF files. The whole thing is cached, too, so it should be really fast once the first person processes a GIF file. The usage in a page is completely unobtrusive and simple and will work with any GIF file in any server, as long as it is below 1 MB in size.

Here's a test page.

Now, I'm not sure if the admins here would like to implement this, Indigo has shown some interest, but I think it would be very neat and useful for us. I'll also try to integrate it with the zoom feature soon, and I'm working on a few extra ideas (hotlinking to specific frames, etc.)

Either way, it should be possible to use it as a GreaseMonkey/UserJS script to whoever is interested.

Also, notice there are still some minor bugs in processing the frames (Fool's dog disappears for a few frames, I'm still trying to figure that out).

Suggestions are welcomed!

(Whoops! I posted this under "pixel art" instead of "general discussion". Someone please move it.)

[fil_razorback]

It works great and will certainly prove useful. Thanks for crafting this =)

[Dusty]

Way better than opening a GIF up in imageready. However, do you plan on adding it so we can load individual images from a url?

[Ai]

Wow, this is awesome. So useful

[1ucas]

Way better than opening a GIF up in imageready. However, do you plan on adding it so we can load individual images from a url?

Sure. Here you go.

[Mike]

I really hope this gets implemented!

[Mathias]

This is brilliant! I also am hoping for an implementation here. VERY useful feature. How will it bode with the zoom feature, though?

What shall we call it? It needs an official name. You can then slap a lil' logo on the URL loader page you just linked. Something like FreezeFrame or FrameViewer, or GIFstasis. . .

Some thoughts/suggestions:

1) Make the UI a little smaller - the bar that pops up with you click the "view frames" link.

2) Add a typical prog bar behind the "processing" and "loading" text so progress can be measured.

3) Only freeze the animation when the cursor is rolled over the GIF. Let it play even in frame viewing mode.
I dunno about everyone else, but I found myself alternating between inspecting frames and wanting to see it animate - had to hit the X button and then the "view frames" link to go back and forth.

4) I'd like to submit a re-skin of your frame viewing mode UI.


I don't want to bloat your project. These are just some thoughts I had, trying your tool out. Great job!

[1ucas]

This is brilliant! I also am hoping for an implementation here. VERY useful feature. How will it bode with the zoom feature, though

I'm already in the process of making it play along with the zoom feature.

What shall we call it? It needs an official name. You can then slap a lil' logo on the URL loader page you just linked. Something like FreezeFrame or FrameViewer, or GIFstasis. . .

*shrugs*
I call it FrameViewer. You guys can feel free to come up with a name or a logo, and I'll happily use it.

1) Make the UI a little smaller - the bar that pops up with you click the "view frames" link.

I will reduce it from 20 px to 15 px in height, and let all the parameters be configurable if anyone wants to.

2) Add a typical prog bar behind the "processing" and "loading" text so progress can be measured.

I'm using pure JavaScript with asynchronous requests to other server. There's no way to keep track of progress during processing, and even during the actual loading of the image. All I can do is add a little animation, which is meaningless.

I was planning on a Flash version which would allow a lot of extra fancy stuff, but I'm not sure if it would be as well received as a pure JavaScript version. It's up to you guys.

3) Only freeze the animation when the cursor is rolled over the GIF. Let it play even in frame viewing mode.
I dunno about everyone else, but I found myself alternating between inspecting frames and wanting to see it animate - had to hit the X button and then the "view frames" link to go back and forth.

The idea here was to let you pause two animations of the same walking cycle, for example, and compare their frames one by one. If I only paused with the mouse over the image you wouldn't be able to do that. I could add a unpause button to the FrameViewer interface that would play it without closing the tool bar, though.

But please, note that I can't make it play exactly from that paused frame, unless I did the entire timing thing on JavaScript as well. It is possible, but would be a pain in the ass and would slow down animations if the delays are too short. JavaScript timers are too unreliable.

4) I'd like to submit a re-skin of your frame viewing mode UI.

Please do! The idea is to have it very customizable. I might add a little config dialog (saved with cookies) to let users fiddle around with the settings later on.

I don't want to bloat your project. These are just some thoughts I had, trying your tool out. Great job!

Thanks man. If you come up with any more ideas, let me know.

[1ucas]

NEW UPDATE!

Good news, everyone! I've worked some more on the tool and I think it's just about ready for us to use here (if the admins are up to it, that is). Here's a changelog:

• Zoom feature integration!: The tool now plays nicely with the zoom feature, working exactly the same as with the usual images!
• Customization: You can setup the class name to use, URL for the skin image, the colors, position of the toolbar, hide delay, etc.
• Smaller UI: looks good enough now
• Auto image interpolation fix: The code automatically fixes the issue with image interpolation on Firefox and Internet Explorer.
• Browser support: Code now works on Firefox, Chrome, Opera, Safari and Internet Explorer 8. If you use anything lower than IE8, fuck you.

Also, I've created some quick aids for the viewer:

• Get all images from link referer: this link makes the viewer list all GIF files in the refering page (originating page), for convenience.
• Viewer now includes zoom: Images in the viewer have the zoom feature enabled by default.
• Get all images by URL: you can pass a page's url as a parameter, like this
• Link to an image directly: like this
• Bookmarklet!: Check the bottom of viewer for a handy bookmarklet to submit the current page to the viewer.

Well, that's it for now! Got a few more ideas to implement, but this is good enough to go!

Again, don't refrain from posting any comments, bugs and suggestions. Cheers!

[Gil]

Okay, two suggestions.

First suggestion:

A page that shows only the images that are zoomable and are not avatars (this will require the avatars to have an extra CSS class "avatar" I suppose). That way we don't have to look at the banner, buttons, etc.

Second suggestion:
Being able to do this:

[img frame=4]http://url here[/img]

It should show only the selected frame