Acquiring 2D Animation for Design in HTML

The ways in which 2D animations can be obtained for use in a design are via stock 2D animations, 2D animation programs, and Web coding languages.

1. Stock 2D Animation

Like images, audio, and video, royalty-free 2D animations abound on the Web in various categories and at various prices and can be with or without audio. The animations are typically in HD 1080 and uncompressed video file formats or in formats that use intra-frame-only codecs. A common practice is to provide them in Photo JPEG wrapped in QuickTime MOV or AVI containers. They may also be provided compressed, for example, in MP4. Naturally, this format is appropriate only when no editing is intended; otherwise, an uncompressed format is better, which is then converted to a compressed format after editing. Where audio accompaniments are involved, they too are in uncompressed formats such as PCM and AIFF- C/SOWT. Character packs are also available for cartoons characters. These packs, which are typically in Flash file format, usually contain parts to use to build a character in different poses. For example, there are different hand positions; front, side, and back views; facial expressions; and backgrounds.

2. 2D Animation Programs

Most programs designed for 2D animation production are frame-based in one sense or another, in that they use the concept of frames. Consequently, what typically distinguishes them is whether or not they incorporate a timeline, along which the frames of an animation are aligned. Programs for creating animated GIF, known as GIF Animators, generally do not incorporate a timeline; rather, they involve importing or drawing of images in each of the defined frames of an animation. Image qualities can be manipulated and effects and audio added, and speed is usually specified in terms of the display time for each frame. Programs for creating other types of 2D animations are typically timeline-based, some of the most popular being Adobe Flash and After Effects. These programs also use layers, which allow several images to be overlaid on each other in a frame. Most of them also have a native scripting language that can be used to produce advanced functions.

3. Coding

It should not be surprising that coding (i.e., computer programming) is another method of creating animation, since this is what is used to create animation software in the first place. Indeed, most, if not all, of the advanced animations on the Web and elsewhere, especially fast-action computer games, involve coding. Naturally, there are different types of coding languages, each suitable for different types and levels of animation. For the purpose of explanation, they are grouped as general-purpose and Web coding languages. General-purpose coding languages are powerful and can be used to develop virtually any type of computer application. A general-purpose language, for example, C++, can be used for any type of animation. Where advanced animations with a lot of media, fast-moving actions, and high level of interactivity are involved, it would certainly be one of the main choices.

In contrast, Web coding languages used for animation, which are commonly SVG, CSS, and JavaScript, are not as powerful as general- purpose coding languages. However, they are increasingly capable of producing relatively advanced interactive animations. While SVG and CSS can be used only for relatively basic animations, JavaScript extends the capability, making advanced interactivity possible. Examples of the types of animation for which SVG and CSS are best-suited include animating the drawing of objects (including text), interactive maps, morphing of SVG vector objects, and roll-over effect. More specifically, they are used for the types of animation that seldom perform specific tasks but can enhance user experience if used appropriately.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *