Creating animated gifs from short videos

MattHanes · ‎07-08-2015

Animated Gifs

We've all seen animated gifs on the internet. They are nice because it's a short animation without the need of hosting a video file somewhere like YouTube. I've been using them in some of my Technology Training courses when a felt like a screenshot just isn't enough to show a step in a process. They can also be used for humorous purposes.

Source(www.reddit.com)

Video to Animated Gif

First, you will need a video file of what you are demonstrating. Preferably something short, around 6 seconds or so. I use Camtasia Studio to do screencasts if it's something I'm showing on a computer. As long as the recording is in MP4 or AVI, you can use it.
Once you have your video file (under 50MB), you can use a site like www.ezgif.com to convert your video file into an animated gif. Browse to your file and click the upload button.
After the upload completes, you can set a start and stop time for the gif if you want to cut some of the beginning or end of the video.
After the conversion, you will be given many options to edit the gif.
2. Crop - Cut out parts of the gif on the sides or top/bottom.
3. Resize - Make the gif smaller and take up less of the screen.
4. Optimize - These settings will allow you to decrease the file size of the gif by removing frames or reducing the number of colors.
5. Effects - This will allow you to do things like:
  1. Set a color in the gif as transparent so a background image can show through.
  2. Transform or rotate the gif.
  3. Play the gif in reverse.
  4. Add filters.
6. Speed - Add a delay between each frame so the gif is slower.
7. Split - Split the gif into frames so you can edit each frame separately in an image editor.
8. Write - Add a text overlay on top of the gif file.
Finally, you can click the save button to save the file after all changes are made.
The gif file can be added to a Canvas Page just like any other image file. You can see an example of one I used towards the bottom of a page in my Image Editing course.

Renee_Carney · ‎07-09-2015

So much fun @MattHanes . We at Instructure LOVE our gifs as well!

Here is a gif maker that I have used - specifically to automate a series of still photos http://gifmaker.me/

mfgu · ‎07-09-2015

You can also produce a GIF directly from Camtasia. Here is how

Produce an Animated File (GIF)

To Produce an Animated GIF File

Make all edits to your video.

Click Produce and Share.

The Production Wizard appears. Select Custom production settings from the dropdown. Click Next.

Select the GIF-animation file option. Click Next.

Select the Animated GIF Encoding Options (see descriptions below). Click Next.

Select the dimensions and options to reduce file size on the Video Size screen. Click Next.

Select the Video Options. Click Next.

If you have markers on the timeline, customize the table of contents or choose to create multiple videos based on the markers. Click Next.

On the Produce Video screen, enter a video name and choose the post production and upload options.

Click Finish. The video begins rendering.

Once production is completed, the Production Results screen appears. Click Finish to exit the Production Wizard.

Click the Preview button at any time in the Production Wizard to produce a 30 second sample of your video using the current settings.

Animated GIF Encoding Options

Option	Description
Colors	Select Automatic to preserve the highest color setting for clips on the Timeline. To decrease the file size, select a lower color depth.
Frame rate	Select Automatic to preserve the highest frame rate for clips on the Timeline. To decrease the file size, select a lower frame rate.
Loop indefinitely	Continuously play the video.
Play	Enable to enter the number of times to loop the video.
Optimized palette	Uses all colors in all frames in the GIF file. Produces a better quality GIF file than a fixed palette.
Include windows colors	Include the standard Windows 20 colors in the GIF file palette.
Dithered color reduction	Dithering attempts to smooth the effects of color reduction. Select this option for real-world video content rather than for screen recordings.
Details	Displays the audio and video options selected.

DaleDrees · ‎07-09-2015

Way cool! I have not played with gifs at all but will now! Thanks @MattHanes

siglinde · ‎09-21-2015

hello,

here are my favorite useful links for those who work with animated gifs:

screentogif.codeplex.com: to create a gif from a screen capture (on Mac)
Cockos Incorporated | LICEcap: similar but for PC
giphy.com: to search gifs on the web
Make A Gif: allows to record gifs right from the webcam
imgflip.com: makes gif from pictures or videos (via upload or URL)
Gifmaker.me: allows also to reduce the size of your existing animated gifs
ezgif.com: a lot of editing options (see first post)

siglinde · ‎11-11-2015

Idea for an App tool to add for Canvas: optional animated gif recorder in the rich text editor

Actually it would save users who are in signing/sign language courses a lot of time if we could have a tool (like the Public Resources App for example), who would allow to add an icon to the rich text editor to record animated gifs directly into a message.

The advantage of animated gifs over video is that you don't need to click on everyone to start playing and if the loop function is activated, they will replay the sign all the time.*

This allows for quick reading through signed content. For longer paragraphs one would of course prefer to use videos, but to just provide headers in sign language or to display vocabulary and keysigns of the lessons topic, animated gif loops are perfect...

Since non sign language users are probably not interested in such a feature, I don't post it as a feature proposition on Canvas - but who knows, maybe someone reading this has programming skills and interest to create an external tool app to be added in Canvas...!

*besides the loop function, I would welcome either an option to delay the recording by 3 sec or the possibility to crop the first and the last frames (where you usually bend forward to click on record/stop recording...)

Chris_Hofer · ‎11-11-2015

This sounds like something you should submit a Feature Idea for: Canvas Feature Ideas.

rislis · ‎08-08-2017

I think a solid GIPHY could increase student interest in a course, don't you?

awilliams · ‎08-08-2017

I don't see it here so I'll add, my favorite screen capture solution also supports exporting directly as a GIF. You may have seen me share a few of those GIFs here in the community in fact.

As a long time chromebook user, I was looking for a chrome extension that would suit my screen capture needs. I found Screencastify - A Lightweight Screen Recorder for Chrome. By being a chrome extension, you know you always have it, regardless of which computer you're using. It also gives you the option to save directly to Google Drive. There is a free plan and a paid plan. Along with longer recording times, the paid plan also comes with the option to download/save/export your recordings as GIFs.

If you're looking for something that is simple, lightweight, and travels with you, give it a shot!