How was this HTML5 screencast animation created?

Question

I visited http://www.sublimetext.com today and was intrigued by the screencast animation the website has on its opening page. It looks like a mashup between video and slideshow. I've seen them at other modern websites as well, but I assumed it was some HTML5 video tag trickery. But when I looked at the source of sublimetext webpage, I was confused.

The animation on this page is created on a HTML5 2D canvas with plain javascript using base PNG images. Each slide is loaded from a PNG file. The animation is achieved by modifying only handful of pixels from the image. The animation javascript applied these changes on the original PNGs at regular intervals. You will find these deltas stored in *_timeline variables in the script.

My question is what tool can generate such deltas? How can one record one's desktop screen and create such base PNG + animation deltas?

I like this approach because it seems most efficient format for screencasts, where changes in consecutive frames are minimal.

Update 1 I know there are techniques to achieve this using GIF (Check https://askubuntu.com/q/107726), but what cool tool can generate this javascript code that can convert PNG deltas to animation. Googling hasn't helped me find it out.

Update 2 The author of the screencast (and sublimetext) replied to my question on sublimetext forum. He did it using a custom python script and plans to write a blog post about it sometime http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252

Have you considered `GIF`s? They're also much more supported than canvas. — Madara's Ghost, Jul 16 '12 at 16:14
@Truth yeah GIFs can be great, but I would still love to know about this canvas based technique — Jayesh, Jul 17 '12 at 09:21

score 14 · Accepted Answer · answered Jan 29 '13 at 16:18

14

Jon Skinner, the creator of Sublime Text wrote about the process on his website

He also published the encoder he wrote on GitHub

answered Jan 29 '13 at 16:18

Ansel Santosa

8,224
1
28
39

score 1 · Answer 2 · answered Jul 16 '12 at 16:20

1

look at one of their images and you'll understand how it works:

http://www.sublimetext.com/anim/command_palette_packed.png

they just cutting and inserting appropriate portions of image into the appropriate positions of canvas element, but if your question is how to make such image, I don't have an idea. I guess with some software, not by hand, but I don't know such soft...

answered Jul 16 '12 at 16:20

haynar

5,961
7
33
53

_My question is what tool can generate such deltas? How can one record one's desktop screen and create such base PNG + animation deltas?_ – j08691 Jul 16 '12 at 16:23
sorry, I haven't read your question well. I think even relatively simple image processing applications can have a feature that extracts delta from images, I mean relatively simple to Photoshop :) but I'm not sure if Photoshop has such feature – haynar Jul 16 '12 at 16:29
@haynar great observation. I didn't notice those images as packed. But now I am getting more curious as to which software lets you create such images and corresponding javascript code. – Jayesh Jul 17 '12 at 09:20
I don't think it generates display code, only information about the packed data and at what time/position it is overlayed. It appears that both the delta detection/packing and display code are also custom, and you would likely have to write that sort of thing yourself unless you can find a library for it. – Nimphious Jul 18 '12 at 09:54

How was this HTML5 screencast animation created?

2 Answers2