Web Motion for Beginners: Create a Preloader
Behold the lowly gif animation: it's making a comeback on the web, appearing as a preloader, or indicator that site content is loading. Join Tom Green, as he shows you how to make your own GIF-based preloader in this installment of Web Motion for Beginners. You'll learn how to export a series of fireworks-style explosions from After Effects, create an animated GIF in Photoshop or Fireworks (your choice), and make the GIF usable as a preloader in Edge Animate.
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.
Web Motion for Beginners: Create a Parallax Effect53,554 Views
Creating an Animated Steam Sprite Sheet with After Effects15,180 Views
Furniture Design with Rhino37,011 Views
Up and Running with AutoCAD 36018,244 Views
Up and Running with Power Pivot and SharePoint 201356,517 Views
Illustrator CC 2013 One-on-One: Fundamentals1,677,422 Views
Edge Animate Essential Training631,228 Views
Illustrator CC 2013 One-on-One: Mastery301,996 Views
After Effects CC Essential Training2,629,103 Views
Illustrator CC 2013 One-on-One: Advanced391,930 Views