Motion Graphics for Beginners: 4 Essential Tools

Motion design is most commonly associated with video and film, but incorporating motion graphics into your web projects is easier than ever before. Here’s a breakdown of the four main tech tools used to create motion graphics on the web today, plus their strengths and weaknesses.

Animated GIFs

how to make an animated gif

In the early days of the web, animated GIFs were the main way to get motion on websites. (Think animated mailboxes…) Animated GIFs are a series of images layered into one file to create the illusion of motion. The saying “what’s old is new again” applies to animated GIFs—despite their pre-Web-1.0 origins, designers still use them to add small bits of motion instead of Flash because they work on all devices. (And people are turning the GIF into a real art form.) You can make animated GIFs easily with image editing programs such as Adobe Photoshop. Learn how to make an animated GIF here.

Strengths

Easy to create and work on desktop computers and mobile devices.

Weaknesses

Can only create non-interactive animations. Some restrictions on size, because file weight rapidly increases with the image dimensions and number of layers.

Adobe Flash

In the recent past, the Flash plug-in was the main player in creating interactive motion on websites, but the incompatibility of Apple’s iOS operating systems with Flash have led to a major decline.

Before we go any further, we need to separate Flash the program from Flash that’s compressed as an SWF file to play with the Flash plugin in a web browser. Flash the program is owned by Adobe and is part of the Adobe Creative Suite 6 Design & Web Premium. It can publish to file types including SWF, MOV, PNG and animated GIFs. In CS6, it can even export files as HTML5 framework with the CreateJS Toolkit extension.

Strengths

Flash features a frame-by-frame and keyframe GUI (Graphical User Interface). It can export SWF files for easy implementation. Great for developing games and applications through Adobe AIR.

Weaknesses

Native Flash SWF files don’t work on Apple’s iOS digital device platforms. Advanced action-scripting functions may be difficult to use for non-programmers.

jQuery

In the past few years the combination of jQuery, HTML5 and CSS3 have broadened the spectrum of motion possibilities on web and digital devices. jQuery is an open-source library of JavaScript to help create dynamic functions on websites. jQuery module functions are seen in smooth scrolling, drop-down menus, image galleries and many other interactions on modern websites.

Immerse yourself in JavaScript and jQuery in this four-week course from HOW Design University.

Strengths

Works on all platforms with modern browsers, no plug-ins needed.

Weaknesses

For designers, implementing jQuery code may be a bit more difficult than integrating a Flash SWF.

HTML5 and CSS3

With increased browser support, the possibilities of motion design created with HTML5 and CSS3 is expanding rapidly. Motion can be created through the integration of HTML5’s canvas property and CSS3 keyframe rules. Many modern websites use a combination of HTML5, CSS3, jQuery and, in some cases, animated GIFs to create a dynamic experience.

Total newbie when it comes to web code? Learn the principles of HTML, CSS and JavaScript with web expert Patrick McNeil.

Strengths

Works on modern desktop and mobile device browsers. Check out HTML5 Readiness and
HTML5 Rocks! for more info.

Weaknesses

Because of the heavy coding involved, it’s a bit more difficult for designers to produce. But programs such as Sencha Animator, Adobe Edge and Adobe Flash CS6 are starting to make HTML5 and CSS3 motion design more accessible to designers with basic coding skills.

Fun fact

Adobe created a Flash competitor called Adobe LiveMotion in 2000.  Live Motion exported SWF files to play in Macromedia’s Flash plug-in. Adobe stopped producing LiveMotion in 2003 after version 2.0, but its timeline feature was reflected in Adobe After Effects’ award-winning interface. Adobe acquired Macomedia in April 2005, which included the programs Dreamweaver, Fireworks and Flash.

More on motion design

COMMENT