Name: Outputting Animations from GIF Loop Coder
Uploaded: 2016-06-10T18:10:31-05:00
Description: Let's discuss all the different formats that GIF Loop Coder can output animations as. We'll also look at different ways to optimize output file size.

GIF Loop Coder - Introduction

GIF Loop Coder - Animating with Arrays

GIF Loop Coder - Interpolation

GIF Loop Coder - Animation Functions

Colors in GIF Loop Coder

Shape Objects in GIF Loop Coder

Parenting in GIF Loop Coder

GIF Loop Coder Single Mode

The Phase Property in GIF Loop Coder

Outputting Animations from GIF Loop Coder

Custom Drawing in GIF Loop Coder

GIF Loop Coder for Creating Animation

Let's discuss all the different formats that GIF Loop Coder can output animations as. We'll also look at different ways to optimize output file size.

https://app.egghead.io/api/v1/lessons/javascript-outputting-animations-from-gif-loop-coder/subtitles

[00:00] We've covered a lot of ways to create animations in Gif Loop Coder. Now let's look at how to output those animations into different formats. As the name implies, the original purpose of Gif Loop Coder was to create animated GIFs. That's pretty easy.

[00:14] I'm using an animation we created in an earlier video. You'll see in the top toolbar there's a button named make GIF, but it's grayed out. That's because the animation is currently playing. If we pause it, then we can hit the make GIF button.

[00:28] When we do that, you see that the progress bar moves to zero and the animation plays through a single time. Behind the scenes, it's rendering each frame and adding it to the GIF. When it's done, it's displayed on top of the UI.

[00:41] You might notice that the animation actually runs smoother and faster as a GIF. This is because in the GLC program all those animations are being calculated with JavaScript and each frame is rendered to the canvas. Very complex animations with lots of objects may run a little bit slower than the target frame rate.

[00:57] When it's in a GIF, it's just swapping out stored pixels, no calculations necessary, and the animation generally runs at the target frame rate with no issues.

[01:06] At the top left, you see some information about the GIF such as image size, if it had to be scaled to fit the screen, and the estimated size of the saved file. This last one can be useful if you're planning on uploading the GIF to a platform that has a size limit on uploaded files. Click save and you get a standard file dialogue. Give it a name. Then go to your file system. There it is.

[01:29] Although GIF Loop Coder is a great animation tool, it can also be used to create some nice generative static images. If you come up with an image you like, scrub to the point where it looks best, then click on the capture still button. This captures the image in its current state and previews it in the same overlay. Single images are saved as full color PNGs with an alpha channel and a default transparent background.

[01:58] There are two other ways of outputting animations. First is a spreadsheet. This will run through the animation just like the GIF export but each frame will be saved to a single large bitmap in a large grid. In fact, because this grid can get very large, you'll probably get a warning like this.

[02:17] Here's the full spreadsheet. Note that it's been scaled to 21 percent so you can see the whole thing. When saved, each frame will be full-sized.

[02:28] Finally, because having a giant image like that can be unwieldy, there's an option to save each frame as a single image. Choose this and you'll be prompted immediately for a file name and location. Again, GLC will run through the animation and save each frame as a separate image. The filename of each image will be the name you specified plus a four digit numeric index.

[02:52] You can pull this sequence into other animation tools to create animations in many other formats.

[02:57] One of the advantages of these spreadsheet and image sequence is that they output each frame in full 32 bit color. As you may be aware, animated GIFs have a palette that is limited to 256 colors. Sometimes that can be a problem.

[03:12] For example, here's an animation with a bunch of animated rectangles with random colors. It looks fine within the program, but when we generate a GIF, you get this ugly flickering going on. That's because there are too many colors in the image, and the GIF encoder has to distill them down to just 256. It does its best, but it's not always good enough.

[03:36] Exporting spreadsheets and image sequences gives you the ability to use more powerful tools to create the final animations.

[03:42] Let's talk a bit about optimization. Remember when we generated this animation. It showed us that the file size was 2,171 kilobytes. Some services have a limit of two megabytes per upload. This would probably be over that. Our goal is to reduce the size and still have the animation look good.

[04:02] We have a few options. One is just to make the animation shorter. Less frames means a smaller size. If I change the duration to 1.5 seconds, we wind up with a file size of 1,634 kilobytes. That works but maybe you actually want it two seconds long.

[04:23] Another option is to change the frame rate. If I move the duration back up to two seconds and the frame rate down to 25, then we wind up with 1,816 kilobytes. That works and still looks good. In general, you can go down to around 23, 24 frames per second without really noticing any degradation in quality. When you get down to 20 frames or below, then you'll start noticing some definite choppiness.

[04:51] A final option is to change the number of colors. This really depends on the image though. I've found that on this animation I can bring the colors down as low as 64 and still wind up with a decent looking animation that comes in at 1,842 kilobytes. Going much below that causes it to flicker though as described earlier.

Outputting Animations from GIF Loop Coder

Share this video with your friends

Course

GIF Loop Coder for Creating Animation