Principles of Web Animation Web animation is used frequently on the internet; they are basically
moving objects or pictures. They are used for a number of reasons and they are
everywhere. In this assignment I will be discussing the different kinds of web animation and
their purposes. Banner Ads
Banner ads are all over the internet and they are easily recognisable
because they are shaped as banners. They are used for a number of reasons by a
number of people; the most common use though is advertisement. Most companies
use banner ads on websites to promote their products because it proves to be
greatly effective. The reasons they are effective is because they draw the
viewers attention with moving pictures and sometimes sound. However, some
people just find them a nuisance but others continue to watch them because they
find them interesting. Some people decide to click on them and they are
automatically teleported to the companies website. When a person clicks on the
ad the company in which the ad is advertising pays the website in which the ad
is shown. Even if the person just clicks on the ad to mute it or cross it off
the advertiser still gets a profit because it proves that the viewer has seen
it. There are many different banner ads but the most commonly used is a full
banner (486 x 60 pixels); this proves to be most effective because it is the
biggest therefor the most visible one. If a banner ad is big displayed on a web
page the viewer is more likely to see it therefore more likely to click it.
There are however other available types of banner ads; for example there are
full banners with a vertical navigation bar( 392 x 72 pixels); half banners
(234 x 60 pixels); vertical banners (120 x 240 pixels); square buttons (125 x
125 pixels); buttons (120 x 90/120 x 60 pixels and micro buttons (88 x 31
pixels). Animated Interface Elements Animated interface elements are basically the controls and buttons that allow interaction between the user and the programme. These can be in the form of menus in mobile phones, buttons on websites that transport you to another part of it and more. An interface is how a program works; every computer based program has to have an interface otherwise it simply wouldn't function. Interfaces are found in a number of computer based things like smartphones and websites. The image to the left shows the interface of The Sims 3 game on the smartphone platform. The interface is all the buttons that are visible because they all have actions to do something. For example the button titled '...' is the menu button and when clicked a number of options come up like 'save' etc. Websites use interfaces to create navigation systems so the viewer has the ability to explore the website with just a click of a button. Interfaces are needed with everything computer based to allow it to work; it also allows the animator to create something cool like an animation to make the website look just that cooler.
Linear and Interactive Animations The difference between linear and interactive animation is that a linear animation is something you view while an interactive animation is one that you play with. Linear animations are probably just films but interactive ones would probably be a game. Interactive animations are usually the most successful ones because they are much more interesting. Promotion There are a number of purposes for web animation but the most common reason is for advertisement. Companies find it very useful to advertise in this form because all of their potential customers will most likely own a PC meaning they have access to the internet. Displaying animations on web pages is a good idea because they draw a lot of attention to themselves because they not only move and stand out they usually make noise. If the advert isn't initially found easy the noise that it makes will create interest within the user which will most likely give them the initiative to look over the web page for the thing creating the noise. However, not all of them make noise but they clearly stand out among the plain text that is usually on the web page. A moving picture will obviously attract attention and the user will be curious to what it’s for; once they find out they may click it and be teleported to the companies website. Once they have been teleported they have the option to buy their products. Instruction Web animation can also be used for education and instruction; these animations are usually on children's websites teaching them life lessons in a fun way. For example they may have an animation teaching them that littering is a bad thing; the way that it is animated rather than just telling them making it interesting therefore imprinting it in their brains. There could also be animations instructing people how to drive; these will most likely be displayed on website regarding driving lessons or maybe the animation is also advertising a driving lesson company. Information Whatever the ultimate purpose of the animation is the main goal is to draw the viewers attention. The whole point of the animation is to attract the viewers eye; this is why the animator must make it attractive and bold. The animation however must relate to its purpose at the same time which can prove to be difficult if it’s not a particularly interesting subject. But if the animator can make the animation appealing it will most likely succeed in fulfilling its purpose. Web animations can be used to tell the viewer information about a number of things; for example it might be telling them that a new vote will be taking progress soon. Entertainment Web animation is also used for entertainment; these are usually in the form of flash games and movies. The purpose of these may be to promote websites that offer free online games or movies. However, these animations may of also been put there by the website to keep the viewers interest. For example, social networks can become very boring after awhile of scrolling up and down the page but I noticed recently that they had an animation on the side of the page playing an old Popeye the Sailor Man cartoon. I think this was put there to relate with the viewers and keep their interest in the website so they don’t leave. A lot of websites do this maybe to gain more members or subscribers with enticing them because the viewer may want to find out for example if there will be another episode of the cartoon.
Flick Book: A flip book is a book that contains a number of pictures that gradually change from page to page so that when the pages are turned at a fast pace the pictures appear to animate. The flip book is a very old form of animation as it first appeared in 1868; it relies on the persistence of vision to create the illusion of continuous motion. They played a very important role in the development of animation but now they are regarded as the simplest form of animation.
Hand-cel Animation: Hand-cel animation is a technique where each frame is drawn by hand; it used to be very popular until the development of computer animation. The first hand-cel animations were in the form of giant story boards that would be recorded scene by scene and put together. In the early days of animation there was no sound but once that had been discovered animators also has to record sounds and synchronise it to the animation. There was a lot of cartoons in the 30's that used this technique like Popeye the Sailor Man. It was a very long process drawing every frame and especially for full-length features like Snow White and the Seven Dwarfs.
Claymation: Claymation is a form of stop motion animation in which each animated object is usually made from plasticine clay or other malleable substances. Like cel animation and stop motion each frame is recording digitally then put together to form an animation. This technique was and still is very popular today because it gives the animation such a unique look. Famous films like Wallace and Gromit were made using this technique, much like modern kids show Bob the Builder. This technique isn't only used for children's productions though as it was used to make Adult Swims Robot Chicken (which is very inappropriate for children).
Stop Frame: Stop frame is an animation technique used to make an object appear as if it's moved on its own. It works by taking photographs of frames in which the object has been moved slightly each time creating the illusion of movement when it's all been put together. Claymation is linked very closely to stop frame because they take pictures of the objects being morphed slightly each time; however other objects can be used in stop frame like dolls, humans or everyday objects. The first stop frame production was created in 1902 and was titled Fun in a Bakery Shop. After that stop frames were very common and the technique has been used ever since. One of the most recent stop frame films was Fantastic Mr Fox which became a huge success.
Rotoscoping: Rotoscoping is an animation technique where animators trace over the footage of live-action or animated films frame by frame. The name rotoscoping came from the projection equipment (rotoscope) they originally used to re-draw over the scenes; however now computers have replaced the need for one. Max Fleischer invented this technique 1915 using it in his series Out of the Inkwell. The technique has since been developed and has been used to create such well known features like Looney Tunes, Flash Gordon and the music video for Aha's Take on Me.
Digital Techniques for 2D Animation 2D Bitmap Graphics: 2D bitmap graphics are computer generated digital images that have been formed from 2D models (e.g. text, geometric models). The development of 2D bitmap graphics began in the 50's and were widely used in raster-based devices later. These graphics are made up of pixels which means the size cannot be altered because it creates blurriness. 2D graphics are mainly used for logos and other not detailed graphics; this is because 2D bitmaps can't handle the coding for a detailed image.
2D Vector Graphics: 2D Vector graphics also use geometrical primitives like lines and shapes to create images however the points between each line of a vector defines the position. Vectors are best suited for images with more details because when the image is enlarged the quality stays the same unlike the bitmap.
Tweening: Tweening is a term used to describe a technique used in Adobe Flash Professional to connect two key frames together. Tween comes from the words 'in between' so it describes the process in which an animator connects two different scenes. There are a number of different tweens; the classic tween (uses older animation method), the motion tween (uses motion editor & motion paths), and the shape tween (morphing two separate vector shapes together). Tweening is a very useful method because it speeds the animating process up because the animator doesn't have to waste time creating in-between frames. The tweening technique does it for you by making the frames run smoothly.
Key Frames: Key frames are frames in an animation that define the start and end points of a transition. A number of key frames have to be created to define the illusion of movement but with Adobe Flash Professional the tweens are placed in between the key frames to create a smooth transition.
Onion Skinning: Onion skinning is a term used in 2D computer graphics when creating animations to see a number of frames at the same time. Traditionally, individual frames were drawn on thin onionskin paper above a light source then the animator would place the previous and next drawings underneath it so they could draw the tween to give a smooth motion. In the present onion skinning is done in computer software by making frames translucent and putting them on top of one another. This technique has also been used to create motion blurs like in The Matrix when they dodge bullets.
Animated GIFS: GIFS are a bitmap image format that was introduced in the late 80's; it allows 8 bits per pixel allowing it to chose from 256 colours. This format supports animations and is pretty much only used for this purpose. It is unsuitable to be used for colour photo's because it is only suitable for simple graphics with solid areas. GIFS were disregarded not so long ago but in the present era there has been a craze of animated GIFS. A number of sites can view animated GIFS and the most popular now is https://www.tumblr.com/. However, Myspace used to be widely used and that had hundreds of GIFS displayed on the site.
Application Software
Flash: Adobe Flash Professional is an application software used to create animation and multimedia content. It is very interactive and can be used on a number of devices (e.g. PC, tablet, TV, smartphones). The software can be used to create a number of things including web applications, games, movies and mobile phone content.
After Effects:
Adobe After Effects is an application software that lets the user create cinematic effects and motion graphics quickly using the Global Performance Cache. The software has built-in text and shape extrusion, mask feathering options and easy-to-use 3D Camera Tracker. It is used in post-production of film and television production. Its main uses are 2D and pseudo 3D animation, visual effects and finishing.
Anime Studio: Anime Studio is an application software used to create animations; it has a number of systems that allows the user to create professional looking animations. It has a bone rigging system, frame-by-frame animation system, animation timeline, a physics engine, auto trace for your own artwork, vector based art, audio importers and 2D or 3D spaces. This software is almost like a game engine because it simplifies everything for the animator; everything is made faster when using the Anime Studio. Toon Boom Studio: The Toon Boom Studio is somewhat similar to the Anime Studio in the way that it makes animating very simple. It already has physics systems, rigid body systems and more already coded into the application.
Cinema There are a lot of animated films created for a number of genres; however most animated films are family films made to appeal to children. Animation is a great form of film for children because it easy to keep the attention of a child with an animated film. With animation there is no limits so anything is possible and this is great when making childrens things because they like to watch things that capture their imagination with things that cannot possibly exist. A film that really depicts this well is Shrek because it is all about fantasy. Children love fantasy and this movie has all the characters from childrens fairytales. Obviously animation is needed to create this movie because the creatures within it obviously don't exist. As I said, children love fantasy because they are very imaginative; most childrens films are about things children have actually thought about before. For example Toy Story is about toys that are actually alive and have adventures. Every child has imagined what it would be like if there toys were real.
However it isn't only children's films that are animated. The Nightmare Before Christmas is an animated fantasy musical mainly aimed at adults. Since the movie is produced by Tim Burton it will obviously be a bit weird. The style of the animation is strange because the features of the characters are extremely exaggerated and their mannerisms are odd; this can only be depicted with animation obviously because it is fantasy and cannot exist. I think we've determined that animation is used when the animator wants to create something that doesn't exist. One of the most visually beautiful modern animated movies is obviously Avatar. It is part digitally recorded and part animated. Again the animation was used to create something fantasy like. When animating people usually opt for fantasy because they can go crazy designing opposed to if they were creating it digitally. Avatars animation is extremely good because they animation fits in with the digitally recorded scenes because the graphics are that good.
Advertising
Animation is sometimes used in advertising to make a product stand out; animation is usually used when advertising products that already are well known because it's a high cost and most companies can't afford it. Coca Cola obviously can thought because they create a lot of animated adverts. The animated adverts originally used to be saved for Christmas adverts where Santa Clause is usually delivering bottles of the drink. However Coca Cola has invested in creating very extravagant adverts for their product. The reason why they create these great adverts is because they want their product to stand out and they succeed.
Compare the Market also use animation to promote their site to make them stand out. The animation also gives them the opportunity to create their own mascots; this has become a gimmick and is probably the way the company gets a lot of business. They have even started giving away plushies of their mascots when someone gets a quote from them. Animation has really paid off for this company because everyone remembers the advert because the animation makes it memorable.
Lloyds TSB also uses animation to create their adverts; again it's used to make them stand out and make them memorable, which it is because everyone knows the advert and even remembers the theme tune of it. Adverts use animation to exaggerate how good their product is; in this case they're trying to symbolise that they care about their customers and that they're both on a journey together through life because the customer banks with them.
Childrens Telivision Children's TV shows have been animated for a very long time; animated shows have proved more popular with children than digitally recorded because anything is possible when animating. A very early animated kids show is Mr Benn that was aired in the early 70's; it had very simple animations and they didn't really run smoothly because the frames were so far apart. The way they animated was by drawing different scenes then taking pictures of them and putting them together. The cartoon style looked as if it had been drawn by a child which again would appeal to children because they can relate. The show is about a man, Mr Benn who visits a costume shop every day and when he puts on a costume he takes over its role; it is a very imaginative and interesting kids show which is based on fantasy, adventure and magic. I think the reason Mr Benn was so low quality (considering animation) is because they had a low budget because animators have been creating much more advanced animations much earlier than this. However they might have styled it this way because the animation is fitting because the whole idea of the show is that the child is being read a story by the narrator and they are flicking through a book looking at the pictures.
Much earlier than this Huckleberry Hound was being produced by Hanna-Barbera in the late 50's. The show was very popular; the story follows a laid back, southern blue dog with good intentions that just can't seem to catch a break. The show is meant to be humorous which is why the animation works well. It allowed the animator to create a funny fictional character and put it into ridiculous situations. In a lot of kids shows the mannerisms and body movements of characters are exaggerated to make it more humorous which is why animation is used because kids find this appealing.
Another show created during the 50's was The Gumby Show; this was an American kids show. The animation used to create this program is interesting and is called claymation; basically the animator has created character with clay and took pictures of them in different scenes and put the animation together. This style would have been popular with children because they can relate because they enjoy arts and crafts. The clay also allows the animator to create anything they want but with a much more unique look than just a regular cartoon. However, there is a disadvantage to creating animations this way, it is a very long process but it's worth it to see your creations come to life.
Now in the modern era animators have the ability to create more advanced animations for kids shows. For example the creators of The Amazing World of Gumball have used a very interesting technique, rotoscoping. They have digitally recorded the world but animated the characters and some objects. I think this show is great for kids not only because it is visually interesting but it gives the illusion that these creatures actually exist in this world. What I mean is, it fuels the child's imagination which is important.
Music Videos
Animation is used in music videos to make them more interesting and get across the songs message more. One of the most famous animated music videos is obviously Take On Me by Aha. The song is about two people who fall in love but one day the man has to leave so he promises that he will be back for her one day. Then one day he discovers she's moved on because he never came back like he said so he tries to move on. Using animation to tell this story was a great idea because it shows how he really loved her by taking her into their own world and protecting her from the bad. The video depicts what it would have been like if he had come back (came out of the newspaper). The animation style is quite basic and understated which I think is the point because he's trying to symbolise their love which is 'black and white'. Using the animation in the music video brought something new to the music industry and made Aha stand out; it was very successful and the video probably had something to do with it.
In the modern era a lot of bands have started using animation for many of their music videos. A band that is famous for this is the Gorillaz; the reason why they used animation in their videos was to bring something new to the music scene and make them stand out. It is very hard to be successful in the music industry and the band thought they'd increase their chances by doing something creative.
The animations in their videos are very good considering the art; it's a mixture of 2D and 3D. The characters (band members) are always in 2D but the scenery and objects are 3D/pseudo 3D. Most of their songs talk about the problems the world is facing but in a upbeat way. In their song Feel Good Inc. they say "feel good, ahhhhahahahah"; I'm pretty sure they're using sarcasm and humour here to put their point across because just before hand they were talking about problems. The animation is used to grab the viewers attention so they become interested then the band can get their point across to the public.
In most cases animation is used to enhance the story that the song is telling but sometimes it's just random to make it look more interesting. For example Bjork is a very strange woman so it doesn't surprise me at all that she used animation in her music video for 'I Miss You'. The animation doesn't really have any story to it at all, it's just completely random a lot like her singing style. The way she sings is very unusual so the video goes with her style. The video reminds me of the 60's because it has a psychedelic feel to it.
I think that we've established that anything following the psychedelic theme likes to use animation. The reason for this is, like I've said they're very drug influenced and they like to make things appear 'trippy'. One band that uses minimal animation for their videos to give it this effect is MGMT; the band is a psychedelic rock band. They use animation in their videos to make it look weird and unusual; the animator creates things that don't make sense (e.g Andrew VanWyngarden, the lead singer riding a giant cat in their music video Time To Pretend) to give it the vibe. Also the way they include fantasy things in the video goes with the song because it talks about pretending and having imagination like a child so the animation adds to it.
Computer Games All computer games are animated but there are many different ways to animate to give it a particular feel for a particular genre. For example when creating a horror game it is important that they get the animation right so it depicts the scary theme. A game that does this well is FEAR 3; the animator has created the game with a unique style. They have used harsh lights for visions to make it feel uncomfortable. Lighting is very important in the horror genre because it depicts the mood; usually they make the world dark to make it scary and give it a more 'jumpy' feel. The cut scenes are where it usually gets scary because it is where the character is having visions. They display disturbing images, sounds and harsh lights to give it a scary atmosphere.
Games that are aimed at families and children however have a very different animation style. For example Mario Kart is very bright and colourful and incorporates fun animations that determine the unique features of each kart. As I've said before children love to use their imagination and it's important that animators take this into account when creating a game aimed at them. The animators of Mario Kart did this well by taking the traditional Mario style but giving it a style much like Wacky Races which was also aimed at children.
RPGs and adventure games have very distinctive styles of animation; most of these games go for photo-realistic graphics to immerse the gamer into the world. For example Skyrim used that exact technique when creating it's animation; since the game is very fantasy based it is important to make it look as real as possible because otherwise it would just look too gimmicky. RPG fans get very enthusiastic about beautiful graphics which is why more and more companies are competing to make the most photo-realistic game. However it is not just RPGs and adventure games that go for photo-realistic graphics and animation. L.A. Noire is a crime mystery game that goes for a realistic style because the story is very important to the game. You can bet that the animation and graphics will be better in story based games because the developers want the player to feel like they are in the role of the character completely.
Mobile Phones There are a number of mobile phones that incorporate animations into their device; usually these phones are smartphones, iPhones and Windows phones. For example on the Windows phone there is an Xbox Live app and when it is pinned to the home page the persons avatar peeks at the side of the icon. This is quite a cool animation and it has been made to make the app stand out more opposed to if it was just a still image. Similarly the phone pins the pictures app onto the home page and the icon that you click to open the pictures shuffles through photos that are on the phone or connected to their Facebook account. Mobile phones use animations to make their device stand out; it is very important that it stands out because it is a very competitive industry. The more interactive elements the phone has determines how successful it will be; this is why the iPhone is the best selling phone because it has animations, a huge app market and a lot of other features. Websites Websites use animations to make it more interesting; a website without animations appear very boring and tedious but when they have animations it feels fun just to browse through it. Most websites have animations now because it is a great way to attract peoples attention; you can bet that if a website has animations more people will want to use it. Websites can be there for a number of reasons but the animations within them are just there to make them look more profession and exiting. Websites for children seem to always have a lot more animations because kids have very short attention spans but animations capture their attention. For example http://www.nick.co.uk/has a lot of animations. There's animations promoting things, animations on the buttons, animations on banner ads and more.
Monty Python was a British surreal comedy show produced in the late 60's by the Python troupe aired on the BBC. Their influence on comedy has been compared to The Beatles influence on music. The show was very popular during the era (and even now) due to the whole psychedelic theme of the program. As most people know the 60's was a very drug influenced era and most people were taking them; obviously this encouraged people's enthusiasm of strange things that seemed 'trippy'. Monty Python was a show based on its comedy sketches; a lot of them were with real actors but other sketches were animated. The reason why they used animated scenes is because the animation could depict what people cannot; obviously with animation your imagination can go wild creating. This is exactly what Monty Python did by creating bizarre sketches with animation techniques. For example they have a sketch called Conrad Pooh's Dancing Teeth; the title pretty much explains it all, it is an animation of a mans teeth dancing.
Monty Python, like many others used animation to make their show a little more interesting. Anyone that uses animation can create anything they like, there's no limits. During the era everyone liked psychedelia which is why bright colours, weird drawings and weird animations were put into the show, so it would appeal to the audience.
Yellow Submarine
Like Monty Python the Yellow Submarine film was produced during the late 60's and followed a psychedelic theme. The movie was written by The Beatles themselves and stared animated characters depicting the band. As we know The Beatles were a psychedelic rock band that enjoyed singing about unusual things. The band was obviously very drug influenced like everyone else at the time and went with the weird themes. The film is an animated fantasy musical; the story is based on how The Beatles travel from an underwater paradise to an Aztec island in their yellow submarine. Later in the story the island is attacked by the 'Blue Meanies' and the band eventually beats them with the power of song. The animation style of the movie is compared to some of the work by the famous psychedelic pop art artist, Peter Max. This means that the art is very colourful and bold; the animated scenes are very weird and have sequences that don't even make sense but that is the whole point. Even the way the narrator speaks is strange; he has a very mellow tone and speaks as if he is confused. The animation however is very bright and bold, the images depict fantasy things to make it look unusual.
A Scanner Darkly A Scanner Darkly is a science fiction thriller that tells the story of identity and deception in a dystopia under heavy police surveillance in a drug addiction epidemic. Obviously the plot is rather unusual so the creators decided it would be a good idea to style it a bit strange as well to go with the theme. The movie was first digitally filmed and then animated using the interpolated rotoscope technique. Rotoscoping is where animators trace over footage frame by frame; this means they draw over the images already there to make them look like a cartoon. This is a great technique to use if they want an animated movie with realistic and stylised imagery. Again, like the other movies, they used this technique to give it an unusual feel to it; the film has a weird plot so it fits that the style is strange too. The animation makes the movie more interesting as it can depict strange things while still having live actors in it.
Persepolis Persepolis is a French animated film in which the story follows a young girl coming of age during the Iranian Revolution. In the movie the girl starts to rebel against typical Iranian morals (e.g. women covering up). I think there are numerous reasons why the film is animated; one of the main reasons is because nobody would actually be able to film during a revolution and especially since the film is so controversial the country would not approve. The film was nominated for an Academy Award due to it's gripping story; the animation itself is pretty simple. I think they chose to play down the style because a fancy style would distract from the story and the points it's trying to make. However the theme is very stylish and does represent the French style because it is sleek and simple.
