Showing posts with label Animation. Show all posts
Showing posts with label Animation. Show all posts

Monday, March 13, 2017

Batch sample or convert videos to animated GIF files WebApp

I wrote a WebApp VidzGif for batch sampling or converting video files into animated GIF images that works with just a Web browser without uploading the videos to a server for processing.

To use this WebApp, do the following:

  1. Open up the WebApp at https://dominoc925-pages.appspot.com/webapp/vidzgif/default.html with a Web browser.


  2. Optional. Click Settings. Set the desired parameters, e.g. sample interval, duration, etc.
  3. Click the Browse button and select one or more video files. Or drag and drop one or more video files into the dashed box.



    The videos are sampled and rendered into GIFs.
  4. To save out the GIF, right click on the image and choose Save image as.

Monday, April 21, 2014

A simple Chrome Web App for creating animated GIF files

Recently, it seems animated GIFs have been making a come back and used on social networks like Google+. I thought of making a simple Chrome Web App for creating the animated GIF files (using only Javascript, HTML5 and the gif.js library) without having to upload to a server for processing, i.e. the processing takes place within the web browser only. The resultant WebApp is available here on http://dominoc925-pages.appspot.com/webapp/gifanim/default.html.


Using the WebApp is easy. The following steps show how to create an animated GIF with the default settings.

  1. Simply drag and drop the image frames into the box provided. Or click the Add Image button.

    The Open dialog box appears.

  2. Select one or more image files. Click Open.

    The thumbnails of the selected files appear in the box.

  3. Click Generate GIF.

    The animated GIF file is created.

  4. To save the animated GIF file, mouse right click on the animation. Select Save Image As.



    The Save As dialog appears.
  5. Type in a file name. Click Save.

    The animated GIF file is saved.
Delete or change the order of the image frames
  1. If you want to change the order of the images, simply click on the image thumbnail.

    The Move previous, delete, and Move next icons appear below the thumbnail.

  2. Click Move previous to move the selected image before the previous image frame.
  3. Click Move next to move the selected image after the next image frame.
  4. Click Delete to delete the selected image.
Changing the default settings
  1. If you want to change the default settings, click on Settings on the right pane.


  2. In the Quality field, choose another value.
  3. In the Animation speed field, choose another value.
  4. In the Repeat field, choose another value.
  5. In the Canvas size field, choose another value.
  6. Click Generate GIF to see the effects.