Databases
StackOverflow2013
Postsdbo
POHow was this HTML5 screencast animation created?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow was this HTML5 screencast animation created?
    primarykey
    data
    text
    <p>I visited <a href="http://www.sublimetext.com" rel="nofollow noreferrer">http://www.sublimetext.com</a> 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.</p> <p>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.</p> <p>My question is what tool can generate such deltas? How can one record one's desktop screen and create such base PNG + animation deltas?</p> <p>I like this approach because it seems most efficient format for screencasts, where changes in consecutive frames are minimal.</p> <p><strong>Update 1</strong> I know there are techniques to achieve this using GIF (Check <a href="https://askubuntu.com/q/107726">https://askubuntu.com/q/107726</a>), but what cool tool can generate this javascript code that can convert PNG deltas to animation. Googling hasn't helped me find it out.</p> <p><strong>Update 2</strong> 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 <a href="http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252" rel="nofollow noreferrer">http://www.sublimetext.com/forum/viewtopic.php?p=34252#p34252</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USJayesh
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow was this HTML5 screencast animation created?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow was this HTML5 screencast animation created?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow was this HTML5 screencast animation created?
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COHave you considered `GIF`s? They're also much more supported than canvas.
      singulars
      1. POHow was this HTML5 screencast animation created?
      1. USMadara Uchiha
    2. CO@Truth yeah GIFs can be great, but I would still love to know about this canvas based technique
      singulars
      1. POHow was this HTML5 screencast animation created?
      1. USJayesh
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload