Video: Project overview and plan

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.

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

Behold, the lowly GIF animation. Key to the secretsof 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 reappearingas preloaders merrily spinning away as the site's content loads into the browser.In this project, we're going to be creating a preloader, but itwon'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 bend, a process called dithering, as the gradient colorsare shifted to their nearest equivalents in the limited GIF color palette.This also explains why photographs are rarely, rarely as clearin the GIF format as they are in the JPEG.An animated GIF is closer to a flip book than a video.

This means each imagein the sequence needs to be loaded and rendered by the browser.This is why the typical duration of ananimated 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, tospeed up the download and on screen rendering.Also, reduce the colors used to reduce the file size.

So what's the plan?We're 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're going to output the project fromAfter Effects and use two imaging applications,Fireworks and Photoshop, to do the samething which is basically create the animatedGIF using the output from Adobe After Effects.Again, any application that creates and animated GIF can be used here.

The animated GIF is then going to beplaced in Edge Animate as a preloader, thoughit could just as easily be used inany webpage as a stand alone motion graphics piece.Why Edge Animate?Preloaders usually require JavaScript or Ajax, a synchronous JavaScript,in the HTML to work, and they are well outof the scope of this series.This explains why we're goingto let the animate do the heavy lifting for us.Let's start making some explosions.

There are currently no FAQs about Web Motion for Beginners: Create a Preloader.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.