How was frontpage screencast created?

[jayeshsalvi]

I liked the screencast animation on sublimetext's frontpage. Out of curiosity I tried to figure out how it works, and I found the code quite interesting. I looked into the javascript code and found that it's created with 6 base PNG images and arrays that apply blit deltas at specific time intervals. I am curious, what was the technique or tool that was used to generate those arrays? I imagine there was a tool that was fed with successive PNG screenshots of the demo and it spit out that javascript code. If the creators of the frontpage don't mind sharing, can they enlighten me on this subject

If you would like to earn some SO points you can answer at this link too: http://stackoverflow.com/q/11463749/174527

Thanks.

[jbrooksuk]

Not everything needs to be auto-generated.

I think Jon created the screencasts using the usual software - Camtasia, ScreenFlow etc and then just saved them as .gif adding them to an array within the JavaScript.

[bluebird75]

What would be nice is to see which keys are pressed for which action, for beginners like me. I could not reproduce the second example ...

[quodlibet]

@bluebird75 Assuming you know that you can wrap quotes and brackets around a selection (try selecting some text and pressing " or [ ), the two less obvious features are: split selection into lines (menu: Selection > Split Into Lines) and join lines (menu: Edit > Line > Join Lines). I don't think anything else is particularly mystifying.

P.S. I describe the actions via the menus because the key bindings are sometimes different across the various OSs.

Hope this helps,
Alex

[jps]

The screencasts were created with a custom Python program that processes a series of regular .png files into a (considerably smaller) packed one. The end result is essentially animated gifs recreated with javascript+canvas+png, yielding higher quality animations.

I've been meaning to write a blog post about it.

[Daftatt]

any chance of you sharing that python program

[jbrooksuk]

The screencasts were created with a custom Python program that processes a series of regular .png files into a (considerably smaller) packed one. The end result is essentially animated gifs recreated with javascript+canvas+png, yielding higher quality animations.

Do you write your own solutions to EVERYTHING?

[jps]

any chance of you sharing that python program :)

Planning to with the blog post

Do you write your own solutions to EVERYTHING?

Why yes, yes I do :)

I tried to make them animated gifs initially, but the encoders I tested were spitting out unusably huge files. It would have been challenging to get the text + image synced up in this scenario, too.

[iamntz]

Jon dreaming:
01011010100100100011100100101001011011101010001101001

Jon's nightmare:
010010100100010010010012

[jayeshsalvi]

Thanks Jon. Looking forward to the blog post.