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
Jon Skinner, the creator of Sublime Text wrote about the process on his website
He also published the encoder he wrote on GitHub
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...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With