Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How was this HTML5 screencast animation created?

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

like image 819
Jayesh Avatar asked Jul 13 '12 03:07

Jayesh


2 Answers

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

He also published the encoder he wrote on GitHub

like image 55
Ansel Santosa Avatar answered Nov 18 '22 03:11

Ansel Santosa


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...

like image 21
haynar Avatar answered Nov 18 '22 04:11

haynar