Animation - like video, this term has changed in meaning considerably with the technological advances of the past few decades. Even a few years ago, mention of the word 'animation' would have immediately made most people think of 'traditional' cel cartoons. However, this has changed considerably with a great increase in accessibility and popularity of computer generated imagery (CGI), both for professionals and amateur animators working from home. Animation is not just used for 'cartoons', or animated motion pictures anymore. This article will explain it all, including:
- Uses of Web Animation - The wide range of ways it is possible to use Web Animation;
- Animation - The history of the process and its transition from traditional, hand-drawn methods to digital animation;
- Digital Animation - Different types of digital animation, as well as a full explanation of the technical side of the medium - file types, formats etc. and animation software - the computer programs used to create digital animations, used by everyone from top studios to home computer users.
Uses of Web Animation
Animation is more widely used for a larger variety of purposes than you may think! As well as its traditional application as a form of entertainment, web animation can be used as a tool to inform or advertise - similar to the applications of digital video discussed last week.Banner Adverts
Banner Ads are a familiar sight to most all Internet users. A 'web banner' is a type of JPG, GIF or PNG image otherwise used as a graphic header for a site but mainly applied as an advert, where if a user clicks on the image, they will be taken to the website of the product/company being advertised.Essentially, a banner ad is a cross between an Internet link (where a user would normally click on a piece of text, which would take them to another page) and an advert traditionally found in printed publications - especially when a banner ad is a still image.
An example of several different types of banner ad.
Banner adverts benefit the advertisers in more ways than a traditional ad would. As well as making the branding of the product/service visible to as many people as possible, the interactive element of banner ads - that a user can click through to a website with more information - means that the results of banner advertising are often more instant than traditional means.
Advertising is often paid for on a 'cost per click' (CPC) basis, where the advertiser will pay the website a small amount for each individual click the advert receives. It is also possible to measure the success of a banner ad by 'impressions' - the number of views a webpage has received from people travelling to it from a certain link. In the case of online marketplaces like eBay, adverts can be paid for on a cost-per-sale (CPS) basis, where Internet cookies (a form of user history collected by website) determines how many people have clicked through and gone on to purchase a product. The advertiser then pays the website for the amount of purchases their click-throughs have led to.
Anyone with an intermediate level of computer knowledge can create a banner ad, however most commonly-seen adverts are created by digital advertising agencies, who make sure the adverts strike a balance between being noticeable and not annoying the user. Brightly-coloured, overlarge or otherwise distracting banners can bother viewers greatly and banner ads have a bad reputation as a result.
Banner adverts can come in a wide range of shapes and sizes, including:
• 160 x 600 Pixels (Full Banner)
• 392 x 72 Pixels (Full Banner with Vertical Navigation
Bar)
• 234 x 60 Pixels (Half Banner)
• 160 x 600 Pixels (Vertical Banner)
• 125 x 125 Pixels (Square Button)
• 120 x 90 Pixels (Button 1)
• 120 x60 Pixels (Button 2)
• 88 x 31 Pixels (Micro Button)
Animation comes into this form of advertising when an 'animated banner ad' is created. These can be .GIF images or .SWF interactive 'Flash' files - more on Flash animation later in the article.
An example of an animated banner advert, in .gif format.
Linear and Interactive Animations
There are, in the interactive age, two kinds of animation - linear and non-linear.Linear animations are the traditional, animated motion-picture form of the medium, where there is little or no interaction between the audience and the media - the animation plays through like a film and a user's interaction is limited to that of a viewer. Linear animations can take the form of animated .gif images, Flash animations or digital videos. As there is no interaction beyond playing, pausing and scrobbling (or skipping) through the video, any medium that can play video is suitable for linear digital animation. The video on the left, an episode of popular animation series 'Burnt Face Man', is an example of a web animation presented in video format on YouTube.
Non-linear, or interactive animation is, as the name suggests, digital animation that a user can interact with on a larger scale than simply controlling playback. This interaction can come in many forms, for example animated films which users can make decisions to change the outcome of the story by pressing a button - a modern twist on 'Choose Your Own Adventure' books. Another example is the browser-based gaming genre (covered in Part II of this series, 'Video in Interactive Media') - Flash or Java-based, heavily interactive animations that users can play as a computer game.
'The Scale of the Universe', a non-linear animation that allows the user to operate a slider from the smallest object in the universe to the largest.
Informative/Educational Animations
Like video, animation can be used as an educational tool in a number of ways. Interactive animations (such as learning games like MyMaths) can help learners by letting them interact with the topic instead of trying to memorise information in more conventional ways. People who learn better by performing tasks than by hearing or seeing information are called kinesthetic or tactile learners.
An animated .gif infographic showing the swing of an average golfer.
Animated infomercials are also becoming more popular, using web animation to advertise a product/service or raise awareness of something. A great example of one of these short, animated adverts is 'Dumb Ways To Die', an advert for safety around railway tracks from Metro Trains in Melbourne, Australia.
This advert became a viral hit and spawned an interactive version in the form of a playable mobile app/game.
Promotional Animations
Digital animation can be used in advertisements, just like video. Different styles of animation can make an advert stand out from video ads and catching the viewer's eye is always important. Linear animations can be used as advertisements - traditional animation has long since been used to promote products using colourful imagery and cartoon mascots, so web animation can be used the same way.Interactive animations, such as browser games, can also be used as promotional tools - usually, the game will be free to play but will feature heavy branding and/or adverts relating to the product being promoted.
A Flash game based on Adult Swim cartoon 'Rick & Morty' - this is a very successful promotional tool for cartoons like this, as it is easy to replicate the style of an animation in a game like this, which makes it a sort of interactive version of the animated series.
Entertaining Animations
The majority of web animation content is produced primarily to entertain its audience. This applies to both linear and interactive forms of the medium - linear animations moreso, because of the limitations in functionality that come with the lack of interactive elements. Linear animations are meant to be watched and so, they usually take the form of animated films. Web animations - usually short films but occasionally full features - have been massively popular since Flash-based sharing sites like Newgrounds and video sites such as YouTube became popular in the 2000s. These animations can get incredibly popular and spawn cross-media trends, for example in the case of the much-mocked 'Annoying Thing/Crazy Frog', the video and audio of which were used for a series of mobile phone downloads and ringtones. The Frog's sound effect was used to create several hit singles and a wide range of merchandise was produced.Elsewhere on the Internet, browser-based Internet gaming (mentioned in Article II as well as earlier in this article) has become so popular that thousands of browser gaming sites now exist, on which users can find a large amount of these interactive animations. While these can be used for purposes other than to entertain, the short amount of time it takes to load and play one of these games has made it an easy choice for quick entertainment on the Internet. These games can sometimes be updated versions of classic 'retro' games but sometimes, original games will become online favourites - one of the most notable examples of this is Flash game 'QWOP', created by Bennett Foddy in 2008. In this game, the user plays as a badly-trained runner and must try and complete a 100-metre hurdles event using the Q and W keys to control the runner's calves and the O and P keys to move the thighs. This game gained viral popularity due to the difficult gameplay and comical movements of the running character and has spawned a mobile app version and mentions on television shows like 'The US Office'.
A still from popular browser game 'QWOP'.
Animation
Animation is a medium that has constantly developed since its creation, as technologies improved and made new processes available. This means that there is a lot of history in the past century of the medium, as well as lots of technological advancements to explain to tell the story of how traditional animation developed into digital techniques.How Animation Works
The term ‘persistence
of vision’
refers to the theory that every image that the eye sees is burned onto the
retina for one 25th of a second, meaning that if you view a rapid
succession of images, the brain perceives them as a continuous, moving image.
However, some people state that it is a mental association created by the
brain, recognising the sequence of movement, that creates the illusion of motion. Still, persistence of vision is
the most commonly-used term to refer to the perception of a series of images as
being in motion. This is the basis of all moving image, experiments with which
began with early animation techniques before moving to what is known as ‘modern
animation’ –
animation techniques created after photography came into use in the medium.All animations are made up of a series of still images - or 'frames' - which, when played back in rapid succession, appear as a continuous moving image because of the persistence of vision phenomenon. The framerate of an image is the amount of frames shown per second (fps). Since persistence of vision leaves an image on your retina for a 25th of a second, 25 frames-per-second is preferable for a smooth motion picture. However, animations require less realism than films, it is common to find animations with a lower frame rate than 25 fps - often, animations are created at 12 fps and 'double-exposed' (where each frame appears overlayed with the next as a sort of transition). Modern digital animation can utilise anything from 5 fps upwards depending ont he requirement for smooth motion quality - the fps of a digital animation can be set and altered in the software the animation is produced with.
Cel Animation
Cel animation is one of the
oldest modern animation techniques. Cel utilises transparent layers of
cellulose to create each frame of a scene. In the process of cel animation, the
first thing drawn is the background of the scene and any inanimate objects onto
paper. This is followed by main characters – drawn onto clear pieces of cellulose
acetate –
cels. Each character and moving object is drawn onto a different sheet of
cellulose, which are then overlayed (sometimes using alignment pins/pegs or a
group of frames to keep the cels’ places constant), creating a complete
picture.
Following the
invention of the motion picture, hand-drawn animations took a leap forward from
playback on mechanical devices or in flipbooks – each frame could now be
photographed and played back. This was a huge innovation, but there were still
problems with early techniques now known as ‘traditional animation’. The
biggest was a problem found in flipbooks – every element of a frame had to be
redrawn for the following frame, which posed several problems. The detail of
the background was limited, as redrawing it took time and it isn’t of paramount
importance to the animation. Another issue was that characters and their
movements had to be drawn without any easy way of comparing it to the previous
frame – this could lead to inconsistencies often found in early animations.
Cel animation
solved both of these issues, by allowing movement over a static background and
making it possible to copy a moving character from the previous frame by
overlaying the two cels, so you can see the difference as you draw. More
recently, the latter method has become known as ‘onion skinning’ when used in
computer generated imagery (CGI).
Cel animation is the first
modern animation technique – the methods innovated using this technique are
still applied in CGI today. Indeed, it was during cel animation's popularity that methods like onion-skinning and 'key frames' developed. These methods would later form the basis of digital animation.
Digital Animation
Digital Animation, or ‘CGI (Computer
Generated Imagery) Animation’ is the use of computer programs to create images.
The type of images created can vary, from copying earlier styles of modern
animation to creating hyper-real looking animated features. There are thousands
of pieces of animation software, capable of producing different effects and
aesthetics.
Key frames, while used in
other forms of animation, are especially important in CGI. In more traditional
forms of animation, a team-leading animator may create 'key frames' - the still images of
important points of movement in a scene. Their team is then given the task of
creating the scenes that fill the gaps between these frames.
In computer animation however,
a set of key frames can be created by the animator with the computer software
filling in the spaces to complete the sequence of frames. These
computer-generated frames are called 'tweens', because they're the frames
in-between the key frames. The system used by Peter Foldes is one of the first
known examples of this process. In ‘Hunger’, he rotoscoped key frames and the
‘tweens were computer-generated. This computer guesswork produced a transition
between movements that appeared to show the characters morphing from
shape-to-shape, a form of interpolation used deliberately by Foldes.
An animation of a digitised 'skeleton' walking. The walking motions are a good example of keyframing - the movement in between each lift and drop of the foot has been filled in by a computer. Also, this shows how moving characters are created in 3D animation - every character is, at base, one of these skeletons.
Since then, advances in the
technology by the likes of Pixar’s Ed Catmull and John Lasseter led to
realistic, 3D CGI animation feature films being created. These developments
were important in 2D digital animation as CGI methods to replace cel animation
were perfected – Disney switched to CGI in the 1990’s and popular cartoon
programmes such as ‘Spongebob Squarepants’ and ‘Family Guy’ became the first
generation of cartoons to exclusively use CGI from the beginning. 2D digital
animation’s popularity grew further as the medium became more accessible to
budding animators – software packages such as Flash, developed by Macromedia
and later Adobe, were available for use on home computers at a relatively low
price and digital animators were able to upload their work to sites such as
Newgrounds and YouTube, sometimes reaching massive audiences. While often an
amateur pursuit, there are professional animators who have risen to fame via
the Internet, using software like Flash. These animations could also be 'exported', or converted to other types of file like digital video or animated .gif image and can be embedded in websites using Java or Flash.
Digital Animation
As different technologies have developed and evolved, different methods of creating digital animation have come into use. As all animations are created from still images, the two types of digital animation are the same as the types of image discussed in the first article - raster and vector.Raster Animation
Raster animation is a form of digital animation where every frame is a still image made from a bitmap - a grid of coloured pixels. Each pixel is assigned a colour and a large number of these coloured squares make up an image. The greater the number of pixels, the higher the image quality as there is more room to show the finer details.As explained in Article I, a raster image file stores colour information for every pixel in the image. This means that larger, high-quality images are made up of a very large amount of data, which can sometimes be too much for a computer to store.
Apply this restriction to an animation made from raster images - if a high-colour image is used, each pixel is made up of 48 bits of information - this adds up to 5.76 million bits for one frame at 400x300 resolution - too small to display in anything near high definition! A twenty-minute animation playing at 14 fps, made up of 400x300 frames would therefore contain 3.02 trillion bits of information, which would be difficult to store on a computer. Add to this that most animations are larger in resolution than 400x300 and that some are longer than twenty minutes and this ends up as a serious problem. Raster animations are also not able to upscale (increase in size) without a loss in quality, as pixels become visible the more the image is expanded.
Raster animations are favoured because raster images are more realistic than their vector counterparts - as they are built up of pixels, a high-definition image can contain an incredible level of detail not possible with computer-generated, vector shapes. For this reason, raster animation is used to create 3D CGI animations like those made by Disney Pixar - the level of colour detail is important in these realistic digital animations. Studios like Pixar facilitate raster animation by operating on several hundred computers at once, sometimes using a computer for each character! Look at this photo from Pixar short film 'For The Birds' - the colour, light and shade is incredibly detailed.Vector Animation
Vector animation is animation where each frame is created from vectors - computer generated shapes. One reason these animations are favoured - especially in web animation - is because the file size of a vector image (and therefore, an animation) is drastically smaller than a raster. This is because rather than being made up of pixels, each vector element is a computer-generated shape that the computer stores as a mathematical equation of the shape's dimensions. This means that the data is a set of numbers, rather than large amounts of colours. Another advantage of this is that the computer can upscale vector images without losing quality, by recalculating the dimensions of each shape.However, vector animations lack one important advantage of rasterised images - realism. Vector shapes can only contain solid colours, where a bitmap image made up of thousands of pixels can contain a wide variety of colours creating light, shade and gradients. This means that vector animation is only used where a 'cartoon' effect is preferable or desired. Most web animations and modern cartoons are created using vector animation programs like Flash (a program which can also be used to create raster animations)
A vector animation - note the solid colours, giving a distinctly cartoony feel to the piece.
Compression
When a file is too large, there are methods of compressing it to drop any data not totally necessary to the file, reducing it in size. In digital graphics and animation, this is necessary for larger raster files - vectors are already small enough without any compression.Compression makes it easier to store files on a computer (not many computers have space for large numbers of uncompressed files) and to transfer files over an Internet connection - imagine trying to upload or download an incredibly large, uncompressed file when every bit is transferred individually - it takes a very long time.
There are multiple types of compression possible for a raster animation file. They all involve dropping colour data, or pixels themselves. Computer software can intelligently compress files, dropping data that isn't needed - this can result in some quality loss, where information dropped has stripped away some of the finer detail of an image or sound. Compression where quality is lost is called lossy compression. Where a drop in quality is not acceptable, lossless compression may be used, where only totally redundant data is dropped and image quality remains the same. For more information on the logistics of compression, refer to Article I in this series.
Colour Compression is a form of compression that drops unnecessary colour information from an image.
Each pixel contains up to 256 colours that it can possibly display. However, if an animation is only made up of a few colours, this means that each frame is storing hundreds of colours it does not need to display - this adds up for large animations. Colour compression reduces the available colour pallete so that it only includes the colours found in most frames. This is ideal for simple animations but can lead to a noticeable loss in quality in more detailed animations. This form of compression is also used in digital graphics.
Pixel Compression is where the computer identifies pixels that repeat themselves and removes or 'prunes' them from the image.
Much of an image will remain unchanged from frame-to-frame - backgrounds and non-moving elements will often not change position for entire scenes and yet each frame stores data for every single pixel - even when that pixel is identical to the one in the frame before! This is a huge waste of space, so pixel compression drops any pixels where there no movement occurs, keeping data related to movement between frames.
File Formats
Just like in digital graphics and video, animation can come in a number of file formats, optimised for different purposes and utilising different methods of compression - or in some cases, no compression at all. These are some of the most commonly-used file types in digital animation.Flash Authoring File (.fla)
.fla is the 'master' format for Flash animations. When a project is created in the Flash program, it is an .fla file that the computer creates and stores all the editable information about the animation in.
FLA files typically include vector image data for use in animations, timelines to control animation playback, and audio; they can also include bitmap video content. These elements can be manipulated in the Flash program, where animations are made. However, .fla files are authoring files and cannot be played back using Flash Player. For a Flash animation to be played, it must be exported to playback file type .swf.
Flash Playback File (.swf)
.swf files are Flash animations optimised for playback. They contain video/images - usually vectors, sound and varying degrees of interactivity, from play/pause buttons to elements used in browser-based gaming. Due to the capability for interactivity, .swf files are used for a wide range of purposes - buttons and interactive banners on websites are often embedded .swf files and animation websites like Newgrounds specialise in hosting .swf animations.
Graphics Interchange Format (.gif)
As described in Article I, the .gif image format is popular for its small file size and is used quite a lot in web design, however is limited in that it only has an 8-bit colour range, making it unsuitable for accurately reproducing full-colour photographs. The .gif is also widely used on the Internet as an animated image format.
The sub-format GIF89a allows a .gif file to play multiple still images in sequence, which allows for motion in the same way as any projector or video display. Frames are made of individual .gif images that can be played on a loop (meaning that the animation repeats infinitely), or show every frame and then stop. .gif images are supported on most modern browsers, although some very old computers may not be able to show anything but the first frame..gif files are preferable over Flash animations for small animations as they are small files using lossless compression, but they do not have a wide range of colours, their bitmap composition means that larger animations would make for quite sizable files and there is no capability for interactivity, even playing or pausing, like there is with .swf files.
Web Animation Software
There are many different animation software programs, whose functions vary in terms of the type of animation/image they are capable of creating or displaying. There are two kinds of animation program - Authoring Programs and Animation Players. The latter function similarly to video players, discussed last week.Animation Authoring Software
Adobe Flash
Flash is popular due to the relative ease with which the user can create vector-based animations, utilising cel-like process such as onion-skinning as well as keyframes and motion tweens. These animations can be imported to the web-friendly .swf format. Interactive elements can be animated using the versatile program, which makes it possible to develop games using the program.
Adobe Director
Adobe (formerly Macromedia) Director is an animation program that was first created for use on original Apple Mac computers in 1987. This program was originally used as an animation program similar to Flash, but its use of the 'Lingo' scripting language made it a more powerful tool for creating graphical user interfaces for DVD menus or interactive kiosks (like self-service tills, for example). Adobe Director can also be used to create 2D or 3D web animation, which can be played over the Internet using Shockwave Player. Director also supports numerous codecs for integrating file directories, PDF readers and text files into Director files. However, these files are usually too large for use on the Internet compared to Flash-based animations and as a result, Flash has been the more popular web animation program for many years.
Animation Players
Flash PlayerFlash Player is a media player that plays .swf Flash animated 'movies' and .flv flash videos. Flash Player is designed to play multimedia files in a web browser - 'plugins' for most web browsers can be downloaded to integrate Flash Player into the browser and Google Chrome integrates Flash by default.
Flash Player accommodates the interactive elements of non-linear animation that Flash can create - buttons, animated banners and Flash games all run using Flash Player. Flash Player was created to display 2D vector animations created in the Flash authoring environment, but has since been adapted to allow for streaming of video and audio content and display of JPEG, GIF and PNG images as well as games and linear animations. Flash Player quickly and easily displays/streams multimedia content on webpages, making it an incredibly popular program. Adobe Systems estimate that almost 90% of desktop computers and a large number of other devices in the world have the latest version of Flash Player installed - it is currently the standard player for animation and interactive content, although it has run into competition with HTML5 coding, which is compatible with a wider range of systems and smart devices. If you can see the videos embedded in this article, you are likely witnessing Flash Player in action.
Shockwave
Adobe's Shockwave Player is to the Director authoring environment as Flash Player is to Flash. Shockwave is the plugin that facilitates browser playback of animations created in Director.
Shockwave is more powerful than Flash Player, allowing for Internet playback of Director's more heavy-duty features like hardware-accelerated 3D graphics and advanced graphical user interfaces. Shockwave can be be used to embed Internet Relay Chat (IRC) services, or chatrooms, in websites.
Shockwave is a viable alternative to Flash where detailed graphics are needed - in virtual learning or training programs, for example. Shockwave reflects Director's wider range of capabilities, but is not compatible with as many browsers and computers as Flash. Relatively simple animations do not require the power of Shockwave and so it is not needed as much as Flash Player.
QuickTime
QuickTime was mentioned in Article II, as it is one of the most common video players - Mac's native media player. One feature that sets QuickTime apart from other media players like Windows Media Player is its capability to play .swf files - Flash animations.
QuickTime's support for .swf files is not as comprehensive as Flash player, given that Flash Player was created to play that kind of file. However, for a popular media player to support .swf files is convenient when offline playback of these files is needed - Flash Player does not work offline in the same manner as video players.
QuickTime is pre-installed on all Apple Mac computers and can also be downloaded for free on Windows systems, either as a standalone program or packaged with iTunes.
RealPlayer
RealPlayer supports playback for .swf and .flv Flash files and can play these files from a web browser. The player also supports the interactive elements of .swf files.
Although RealPlayer was widely used for displaying multimedia online, Flash Player's increase in popularity as well as QuickTime's rise as a competitor to Windows Media Player left RealPlayer redundant - it has now fallen out of popular use, a decline that Real are attempting to combat by launching 'RealPlayer Cloud' - a media player with online file storage/sharing functionality.
Thanks for reading this series of articles - I hope that you now have all the knowledge about interactive media that you could ask for! Check back soon for more articles and media resources.
Click these links for the other two articles in the 'Interactive Media' series: Part I (Digital Graphics) // Part 2 (Video in Interactive Media)
