Project overview and plan

- [Voiceover] Behold, the lowly GIF animation. Key to the secrets of the universe. Home of the elusive LOL cat. Bringer of the knowledge around how ice cream sandwiches are made. Though the lowly GIF has had a few rough years, it is making a remarkable comeback in the web universe. Used extensively for example by NASA as you saw to show us the marvels of the universe. The animated GIF is now being used to entertain and explain and with the rise of motion graphics on the web, they are reappearing as pre loaders. Merrily spinning away as the site's content loads into the browser. In this project, we're going to be creating a pre loader. But it won't be your usual spinning ball countdown timer or other common animation. We're going to use exploding fireworks. Before we start, it is important to know the limitations of the format. It will help you as you produce the assets. First off, the GIF format uses a limited color palette. This means you only get to use 256 colors or less. Now the upside of this of course is small file size. Solid colors, not gradients are best suited to the GIF format. Gradients tend to band a process called tethering. As the gradient colors are shifted to their nearest equivalents in the limited GIF color palette. This also explains why photographs are rarely rarely as clear in the GIF format as the are in the JPEG. An animated GIF is closer to a flip book than a video. This means each image in the sequence needs to be loaded and rendered by the browser. This is why the typical duration of an animated GIF is usually around two to three seconds. Also, size matters. Keep in mind each image loads in sequence so you have to keep the dimensions small. About 100 by 100 pixels or smaller to speed up the download and on screen rendering. Also reduce the colors used to reduce the file size. So what's the plan? We are going to create the fireworks explosions in After Effects, though any application that creates particle effects can be used. We'll work with three colors. Red, green, and blue for the explosions and keep the physical dimensions of the GIF to 100 by 100 pixels. We are going to output the project from After Effects and use two imaging applications, Fireworks and Photoshop to do the same thing. Which is basically create the animated GIF using the output from Adobe After Effects. Again, any application that creates an animated GIF can be used here. The animated GIF is then going to be placed in Edge Animate as a pre loader. Though it can just as easily be used in any webpage that's a standalone motion graphics piece. Why Edge Animate? Pre loaders usually require Javascript or Ajax, a synchronous Javascript in the html to work and they are well out of the scope of the series. This explains why we're going to let Animate do the heavy lifting for us. Let's start making some explosions.