Home Download Buy Blog Forum Support

How was frontpage screencast created?

How was frontpage screencast created?

Postby jayeshsalvi on Mon Jul 16, 2012 2:27 am

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.
jayeshsalvi
 
Posts: 2
Joined: Mon Jul 16, 2012 2:10 am

Re: How was frontpage screencast created?

Postby jbrooksuk on Mon Jul 16, 2012 8:21 am

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.
jbrooksuk
 
Posts: 772
Joined: Sun Apr 11, 2010 10:37 am
Location: England

Re: How was frontpage screencast created?

Postby bluebird75 on Mon Jul 16, 2012 1:30 pm

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
 
Posts: 5
Joined: Mon Jul 16, 2012 8:58 am

Re: How was frontpage screencast created?

Postby quodlibet on Mon Jul 16, 2012 10:44 pm

@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
quodlibet
 
Posts: 524
Joined: Sat Jun 18, 2011 5:53 pm

Re: How was frontpage screencast created?

Postby jps on Tue Jul 17, 2012 2:47 pm

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.
jps
Site Admin
 
Posts: 3067
Joined: Wed Mar 19, 2008 12:33 pm

Re: How was frontpage screencast created?

Postby Daftatt on Tue Jul 17, 2012 6:08 pm

any chance of you sharing that python program :)
Daftatt
 
Posts: 25
Joined: Tue Nov 29, 2011 2:28 am

Re: How was frontpage screencast created?

Postby jbrooksuk on Tue Jul 17, 2012 9:20 pm

jps wrote: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?
jbrooksuk
 
Posts: 772
Joined: Sun Apr 11, 2010 10:37 am
Location: England

Re: How was frontpage screencast created?

Postby jps on Wed Jul 18, 2012 5:14 am

Daftatt wrote:any chance of you sharing that python program :)

Planning to with the blog post

jbrooksuk wrote: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.
jps
Site Admin
 
Posts: 3067
Joined: Wed Mar 19, 2008 12:33 pm

Re: How was frontpage screencast created?

Postby iamntz on Wed Jul 18, 2012 7:03 am

Jon dreaming:
01011010100100100011100100101001011011101010001101001

Jon's nightmare:
010010100100010010010012

:o
iamntz
 
Posts: 909
Joined: Fri Apr 29, 2011 8:52 am
Location: Romania

Re: How was frontpage screencast created?

Postby jayeshsalvi on Wed Jul 18, 2012 7:47 am

Thanks Jon. Looking forward to the blog post.
jayeshsalvi
 
Posts: 2
Joined: Mon Jul 16, 2012 2:10 am

Next

Return to General Discussion

Who is online

Users browsing this forum: Google [Bot] and 14 guests