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.

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.

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 …

@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

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.

any chance of you sharing that python program

Do you write your own solutions to EVERYTHING?

Planning to with the blog post

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.

Jon dreaming:
01011010100100100011100100101001011011101010001101001

Jon’s nightmare:
010010100100010010010012

Thanks Jon. Looking forward to the blog post.

[quote=“iamntz”]Jon dreaming:
01011010100100100011100100101001011011101010001101001

Jon’s nightmare:
010010100100010010010012

[/quote]

That was kind of me when I wrote my bachelor’s thesis in VHDL where debugging consisted of analyzing the generated waveforms…

Thanks for sharing your PNG utils Jon. I wonder if you could share how you captured the timestamped PNG files? Someone asked on the blogpost but there was no answer, and I’ve done a fair whack of searching but can’t find a convenient way to screencam to PNG.

TIA

S

I used a modified version of Sublime Text that recorded them whenever it did a repaint.

Thanks Jon… Was hoping for something a little more generic than that, but hey

Looks like a feature worth to be looked into further to me, like for creating gifs or something for a preview of your newest plugin on github or just on the web. Not anywhere near “must-have” but not a bad idea either.

Thanks for sharing your PNG utils Jon. I wonder if you could share how you captured the timestamped PNG files?

Did I miss this? Can you point me to where the png-utils are shared?

Thanks

sublimetext.com/~jps/animate … d_way.html