Technology 3

Banner Ads
Digital video can be used in banner ads to show a real-life display or short animation of what it is
your advertising, when people can actually see it for themselves they may be much more compelled
to buy your product. Incorporating videos into a web banner also adds depth to the banner and
makes it look more professional, adding them in will definitely make the banner look like more effort
has been put in. Many banner ads feature animation and this is becoming more popular, a short 30
second animation explaining what you do is a very popular method of advertising at the moment,
these animations tend to be created on authoring software like Adobe Flash, Director or Adobe
Animate.

A static banner ad is nothing in comparison to these banners which feature animation and video
clips, many people will see a static banner and just think it’s another pop up ad but when your ad
actually looks good and professional and is advertising well then this is a different story.

Animated Interface Elements

Animated interface elements can be really attractive and appealing or they can turn out to be
annoying and tacky, because of this you must be careful with the intensity and amount of AIE
(animated interface elements). An AIE is something which is not static on your advertisement, for
example if you have a rollover button which changes colour when you hover over it, this is an AIE, if
you have a web banner which features video, again, this is an AIE.

Repetitive use of these elements can become annoying for the user as they will be completely
distracted from the product you are advertising and fixated on these annoying moving graphics and
annoying sounds. This does not mean that you shouldn’t use AIE at all, but, you should use it in
moderation, do not overload your project with them. There are also some types of AIE which are
much more annoying than others, for example, a simple rollover button is not annoying but if there
was something like a bell noise every time you click a button then you could see how this could get
annoying. The best way to use AIE is the find a good ratio and work to this ratio, this will ensure that
you aren’t overloading it with annoying content.
Linear and Interactive Animations
Linear animation is used in things like movies and videos, this would be the type of animation which
isn’t necessarily used for advertising but more for that of a film or cartoon. Interactive animations
are in interactive products such as games and computers, these animations have a bit more depth as
they allow you to interact with them. When comparing the two of these animations you’ll realise
that linear animations tend to last longer than interactive animations, linear animations can be
anything like an animated film or an episode of Wallace and Gromit. Interactive animations which
tend to be in games have a much shorter timeframe but may have equal or more work put into them
as they have had the interactive aspects integrated into them.

Promotion
Web animation can be used in promotion, it is used to attract the attention of the chosen
demographic, for example, if you’re advertising a product for a child then an animation which
appeals to children will definitely grab the child’s attention which ultimately is going to grab the
parent’s attention also.

Using animation to show a visual a representation or a harder to understand concept is also a great
idea, this allows you to show the viewer exactly what you’re offering through a short animation, you
want this animation to be straight to the point, easy to understand and possibly an element of
comedy to keep things mellow and not uptight. When using web animation to promote a product
you want to make sure that you keep the point at hand and not stray away from it and end up trying
to make a cool animation, ultimately the product is the main purpose of the animation. Keeping the
animation under 30 seconds will help greatly as this won’t allow much time for the viewer to get
bored, after all, you have to remember that this is an advertisement which most people don’t enjoy
watching.

Instruction
Web animation in instructions is a clever way of doing things, this is a lot like what I have spoken
about in promotion, you are using an animation to give a more fun and light hearted way of telling
the viewer instructions. This could be done in a YouTube video for a tutorial or even at an
information kiosk in somewhere like the Trafford Centre, this would also make the information kiosk
more appealing to children rather than having them nag their parents to hurry up they could enjoy
the animation.

The use of animation in YouTube tutorials is an ever-growing concept, as people are having to come
up with new ideas to keep people watching their videos animation has become a bigger part of this
side of YouTube. Animation also makes it much easier to understand an instruction as you can see it
being done before you visibly with no distractions, you won’t be having to watch the person mess up
as they’re nervous about recording themselves or even poor camera quality as it will be all about the
quality of the animation.
Information
Using animation to show information is a fun way of making the information entertaining, not
everything has to be dull and boring so things like animation can help us with this, it just adds
something new other than simply reading black and white text all the time, it’s nice to have some
variation once in a while.

Animation can also display information in ways which text can’t, you can even use a mix of text and
animation to display the information as best as possible. Using characters in your animations can
also begin to give your company a mascot, for example if you are a computer in a library which
displays information before logging in on in animation form then the character which is telling you
the information may be a funny librarian character or something similar.

Animation can also be used in a way where there are no characters it may simply be text which is
displayed with bright colours and a cool background with quirky animation, this is much more fun to
watch than simply reading it in black and white. Ultimately all this comes down to how good your
animator is, but, you can even buy templates off the internet which are really good and there’s even
some free ones which aren’t too bad.

Entertainment
Web animation is used for entertainment all across the internet, it is seen on YouTube from YouTube
channels which are exclusively animations, some of these channels have a cult following and rack up
millions of views on every video, this is more than some TV shows will get and a lot of them are
created by one person, as these animations are quite time consuming to make you shouldn’t expect
the videos to come out very close to each other as some of them can take months to finish.

There are many animated series which are only available on the internet, shows like Rick and Morty
which are Netflix originals are only available to stream through the Netflix website or the sharkswim
website.

With technology always advancing even the animations are advancing as the software used to create
them is being updated and having more features added to them, there’s also more people learning
about the software and creating tutorials which leads to even more people being able to create
these top-quality animations. Many people are making jobs out of this type of work which simply
started off as a hobby and they have educated themselves using YouTube and other sources of
animation tutorials.
Technology 4
Hand Drawn (cell)
Hand drawn cells were the original animation, they were drawn by hand and shot frame by frame.
This method of animating was very popular before the come about of computer generated
animations, hand drawing every frame is very time consuming, the aid of computers makes
animating much more streamlined and less tedious. Hand drawn animations were the dominant
form of animation but were not the only form, there were other forms like Claymation and others.

Hand drawn animations have to be planned like all other forms of animation, they even state what
camera angle will be used and shot distance, creating a hand drawn cell is very similar to that of any
other form but it is simply hand drawn.

Flick Books
A flick book is a form of animation, you draw a frame on each page and then fan the pages in a way
that the drawings appear to move or whatever you choose. This form of animation is very old but is
still done today as you can even find services where people will make them with special messages,
this could be something like a proposal or a happy birthday.

Many flick books are children’s books, this is because this style can appeal to children as it’s a bit
more interactive and more fun for them, they actually get to do something rather than just look at
the animation or read a book with the illustrations.

The first known appearance of the flick book was in 1868, it was patented by a man names John
Barnes Linnett, it was given the name ‘kineograph’ which just means moving picture.
Animated Cartoon
Over the years animated cartoons have evolved a lot, even from things like Tom and Jerry to today’s
cartoons is a huge step forward, Tom and Jerry didn’t even have voice acting, it was simply
animation. The golden age for cartoons was from the 1920’s to the 1960’s, many of these animated
cartoons were shown before a film in a cinema. There was a huge number of animated cartoons
produced in this time hence the name the ‘golden age’.

Disney was the main creator of these cartoons, they were usually 5-10 minutes in length and
referred to as ‘shorts’. In 1926, a cartoon used a soundtrack for the first time, the film was called
‘Max Fleischer's My Old Kentucky Home’. There was actually a fault with the synchronisation with
this animation as they had used a ‘De Forest’ sound system and this resulted in the sound not being
synced up with the animation.

Animation Process
The process of animating has a few steps, this includes briefing the client to animating then signing
off. First of all, you must brief your client, this is very important so you should be taking notes. You
need to find out all the information you need in this meeting, they will tell you their specifications
and you should ask any questions you have about the product. You want this to be as streamlined as
possible so getting off to a good start in the brief will help you with this a lot.

Next step you need to create your script, this is the talking in your animation, this should take up a
lot of time depending on how long the animation is, for example writing the script for an animated
film take much longer than that of an animated short. Now you need to create your dope sheets,
this is the style of the shots and the angles they will be shot from, even though it will be created on a
computer you still need to decide on these options. Now it is time to animate, creating your
animation is going to be the hard part as this is time consuming and requires some skill.

The final step, we now export the animation and send it to the client.

Graphic Information File Format (GIF)

This file format is primarily used for moving images, they’re often referred to as animated GIF’s.
Created in 1987 by Steve Wilhite, it is now used across the internet due to its compatibility and wide
support. This file format can only support up to 8 bits per pixel, this means a single GIF image can
display up to 256 different colours.

GIF can support images but is mainly used for its ability to display animation, they’re becoming more
and more popular as websites like Giphy allow us to search a library containing millions of gifs, they
even have categories to choose from so you can find the perfect GIF for you. Even sites like
Facebook are now incorporating GIFS, when you are chatting to someone there is a little button
which brings up a library (this is also linked to Giphy) of GIF’s which you can then search and send to
your friends.

GIF’s are compressed using lossless data compression, this is a technique used to lower the size of
the file without lowering the quality, as you can see this would clearly be beneficial to the owner of
the GIF.

Optical Illusion of Motion

Optical illusion of motion, otherwise known as persistence of vision is an illusion where you can still
see the object even after the rays of light have finished reaching your eye. Some people have
described this illusion as ‘retinal persistence’ and some people believe it is the same thing which
psychologists call positive after images.

A good example of what persistence of vision is a sparklers trail effect, when the sparkler is lit and
you move it around rapidly you will still see the light in places it is no longer in, for example you
could draw an ‘8’ in the sky and you’d still see it once you’d finished drawing it if you did it fast
enough.

Persistence of vision has actually been disproved by scientists since 1912, many film historians
believe that the scientists are wrong however and still go on believing persistence of vision. This
optical illusion has been dated back to 384 BCE by the famous Aristotle, in his notes he has stated
that the sun had stayed in his vision even after he stopped looking at it, however, the discovery of
this illusion is often credited to a Roman poet named Lucretius who discovered it in 99 BCE.

Stop Motion
Much like Claymation, stop motion is the use of small movements and photographed, this gives the
effect that the object is moving on its own, as it easy to bend and mould clay this is usually the
material that is used for these animations which makes it very similar to Claymation.

There are other forms of stop motion which don’t use clay such as the famous TV show South Park,
this show is now animated but when it first started it was actually paper characters and paper
scenes, using stop motion they were able to give the effect of movements, for things like
incorporating voiceover they would have a couple of different mouth cut-outs which would make
the look of the characters talking.

The first time stop motion was used was in ‘The Humpty Dumpty Circus’, this was created by ‘Albert
E. Smith’ and J. Stuart Blackton in 1897. As you can see stop motion dates back very far and at the
time it was an astonishing way of creating films as this technology was very advanced at the time. In
today’s day and age, it would be very rare to see a stop motion film as this method is extremely time
consuming and tedious, if one of your character’s model breaks you can be sure that the next frame
is going to look different than the last as it’ll be hard to make them look the exact same and get
them in the same position.

Computer Generation
Computer generated animations have many elements, these include frames, key frames, onion
skinning and tweening. The frames in an animation is basically how long it is, there is also the factor
of FPS (frames per second), this is how many frames will be displayed in a second, a 30 FPS clip
doesn’t look nearly as smooth as a 60 FPS clip, this is essentially because they have put in twice the
number of frames but the clip is the same length, this is what it makes it look smooth. When
creating an animation using a computer you will definitely come into contact with key frames, this is
the lifeblood of animation. Key frames allow you to add effects, move and scale all of your objects so
without these the animation would be more of a still image. If you wanted to move an object using
keyframes you would set the keyframe at the frame you would like it to start then set the keyframe
where you would like it to end and move your object to the desired location.

Onion skinning is a type of computer animation where you are shown more than one frame at a
time, this can give the effect of a horse running for example as you will see its original set of legs and
then also a couple more sets of legs which have lower opacity, this gives a trail effect which is similar
to the persistence of vision.

Tweening is found in all types of animation, it is also known as inbetweening. Tweening is the
process of creating a smooth transition between two images, it is done by generating frames
between these two images. This gives the effect that these frames have transitioned smoothly.

Claymation
Claymation literally means clay animation. It is a method of animation which uses frames and small
movements of clay figurines/shapes, these figurines are malleable and easily change shape. A
background is also commonly used as it sets the scene. Wire moulds are often used to support the
clay figurines. Claymation all started from when plasticine was invented in 1897, however, a film
using clay figurines wasn’t created until 1908. Due to the effort and tediousness of Claymation, the
films tend to be shorter. Claymation was a breakthrough for 3D animation as it allowed for
computers to aid the sculptures through CGI (computer generated imagery).

When creating a Claymation animation, you are going to be spending a lot of time moving clay
figures, in fact, most of your time is spent moving clay figures as all you are doing is taking a picture
once you have moved the figures then moving them again for the next picture. Although this is time
consuming and much longer than creating the animation on computer, these Claymation’s have a
certain feel to them that you can’t create any other way, animations like Wallace and Gromit are cult
classics because of this.

Technology 5
Vector Animation
Unlike raster animations vector doesn’t use resolution and pixels, instead they use lines, polygons
and curves. This difference allows for vector animations to be enlarged to any point with no loss in
quality at all! The size of the file is also considerably smaller than that of a raster animation. Adobe
Illustrator is a very common program used to create these vector animation as it is based around
lines and anchor points, files created in Illustrator are usually exported in AI format as this is the
native format for this program. Vector animations are defined by mathematical equations, these
equations are called Bezier curves and are the replacement for pixels, these curves always render at
the highest quality resulting in them looking crisp and smooth. One drawback of vector is that it
can’t be used for hyper realistic animations, rather they are better suited for graphics like logos,
however, vector is evolving and we are able to do much more than we could a decade ago. With
todays technology we can actually add a bitmapped texture to a vector and give it a hyper-realistic
look. These graphics are based on vectors and these vectors lead through specific points called
control points or nodes, these points have a specific position on the X and Y axes of the work plane
and this determines the direction of the path. An EPS file stands for ‘Encapsulated PostScript’, EPS is
a file format for graphics which are either bitmap or vector. This file format works for both types of
graphics, it’s a standard format for the importation and exportation of PostScript files
Raster Animation
Raster animations (bitmap graphics) are the most common animations. They are made up from
pixels of different colours arranged in a grid of X and Y coordinates unless 3D then a Z coordinate is
also added, these grids are usually rectangular in shape (as this best fits a monitor/paper). The file
size of a raster animation is decided by how many pixels there are in total, for example a 1920x1080
animation containing 2,073,600 pixels has a larger file size than a 1280x720 animation with 921,600
pixels.

One drawback of raster graphics is that you can’t resize them from their original size without losing
quality, however, you can make them smaller without loss of quality. These animations also have a
naturally high file size and are inefficient in terms of computer storage space, to aid with this we can
compress these graphics. Run length coding (lossless) is a common form of compression on raster
animations, this is because instead of pixel values being repeated they are coded in pairs (run-
length, value). The main data is in pairs otherwise known as tuples, these tuples contain a pixel value
and a repetition value which is the number of pixels in the run length. Data is created by scanning
through the raster row by row, a new tuple is created whenever the pixel value changed or when it
reaches the end of the row.

There are 2 types of compression, lossless and lossy. Lossless compression allows for the original
data to be recovered after compression. In lossy compression this is not the case and some of the
original data can’t be restored, instead it is deleted permanently.

Raster graphics can come in many formats Including GIF which can be used to make small
animations, however, these are not the best quality as they’re limited to an 8-bit palette. PNG is a
very common format for raster animations and it was created to be an alternative to GIF, PNG has a
much larger range of colours as it has the capability to use 48-bit TrueColor. Exclusive to Photoshop
PSD is a format that uses layers and still allows the editing of these layers even after saving, this
works out great for graphic designers and those who may need to make altercations to their work.
Compression
When creating web animation, you may find that the outcome of your creation is very large in file
size, this will be due to an overload of graphics, videos, images and sound, it may also be partly from
a poor software which cannot create the file in a smaller size. However, we are able to compress
these ourselves, using third party software we can easily compress our files. There are a couple of
types of compression and one of them is lossless, this means that no quality will be lost through the
process of the compression. I believe lossless is the best form of compression as we are simply
getting rid of waste data that shouldn’t have been there to begin with. If you really wish to compress
your file a lot then this form of compression may not be as useful, your file may be so big that it
needs to be compressed a lot, this is where you would use the other form of compression which will
lose some quality but will also decrease the file size greatly.

Download speed is a factor in the size of the file, if the web animation is a huge file then someone
with a lower internet download speed may end up waiting a long time for it to load, whereas you

who has a high download speed never encountered this and won’t know about it until someone
points it out to you, at this point, your banner has already come across negatively to at least one
person.

File Formats
When creating web animations there are a couple of formats you may use, these two formats are
.fla and .swf. The .fla format is created by Adobe Animate, this program is used to draw and export
animations which are interactive, this format can contain videos, graphics, text and even audio. This
is a complete format which would be great for a web banner. There is a slight hitch when using .FLA
on the internet however, they are not compatible with the flash plugin which most computers use,
because of this .SWF is mainly used for use on the internet. .SWF is usually created with Adobe Flash
and is playable in flash player and any web browser with flash installed, it can feature raster and
vector graphics and also text, there is also the ability to use interactive content which is written in
ActionScript.

Authoring
There are two main authoring software’s which are used when creating web animations, these are
Macromedia Director and Adobe Flash, adobe flash is for more advanced animations, something like
a short film. Director is mainly used for creating web banners or interactive web animations, director
allows for more interactivity.

When creating a web animation in director you are required to create and gather all your assets
beforehand and then import them into your workspace, you will then add them to the timeline and
begin to create your work. You cannot edit your assets in director so you must do all your editing
beforehand, for example if you had a video clip with sound but you did not want to use the sound
then you would have to first remove the sound in another program, export it then import it into
director.

Adobe Flash is better for step by step animation which is basically frame by frame, it allows for a
more advanced animation with more effects, ultimately you would be able to create a better
animation in Adobe Flash as this is mainly for creating animations which may be used in something
like a short film or quick YouTube animation.

Players
When creating a web animation, you must make sure that everyone will be able to view it,
there are a few ways of doing this such as ensuring that your file is compatible with the
many players which may try and view your animation. The two main players I will be
considering are Flash Player and Quicktime, Flash player is a very common player in today’s
time and almost every computer will have it installed as so many things on the internet
require you to have it to view them such as games, videos, animations etc. The players link
into the file format of the file as like I stated earlier, .FLA files will not be viewable by Flash
Player, this pretty much rules out using .FLA on any form of internet animation as most
people won’t be able to view it, if you’re creating the animation for something which is not
based on the internet, perhaps an information kiosk or something similar then this file
format will be perfectly fine.
QuickTime is a player which is created by Apple which is capable of playing various formats
of video, sound, graphics etc. Created in 1991 QuickTime has grown over the years and is
used on all computers running iOS to view internet videos. You can also download
QuickTime on a windows computer but you will have to do this manually as it doesn’t come
with the operating system. You can get a pro key for QuickTime which gives you added
features, you don’t have to do any additional downloading but you will have to pay a small
fee.