HARRY LISTER - UNIT 65

Banner Ads
Banner ads are graphical web advertising units that are used to generate an income for companies or to gain more users
on a certain website. Companies will pay the site that they want to advertise on to be able to place an advert for their
product/website to gain more acknowledgement from the public. Banner ads typically measure around 468 pixels wide
and 60 pixels tall (i.e. 46860). Banner ads are usually simple pieces of HTML code. It is a rectangular graphic that is
displayed across the top or the bottom of a website or down the right or left sidebar. They are usually basic images with
formats like gif., jpeg., and png. They can also be Flash based with formats like flv., swf., or Java which allows the user to
interact with it.
A banner ads can be any size you want it to be. But are usually:
180x150 (Rectangle)
300x250 (Medium Rectangle)

160x600 ( Wide Skyscraper)

728x90 (Leaderboard)

Still image of an animated banner ad.

More examples of banner ads found on websites:

1.

2.

I searched the internet to find some examples of banner ads that I could use as research and I found two examples, both
which have a different take on advertisement. Example 1 was found on a website that sells computer games. The banner
ad has a short animation at the beginning where the blue background slides on the page. Example 2 was found on a
website that lets you play games. This ad didnt have an animation on it but the advertisers have also got the website
itself to change the background to a still from their product (Outlined in blue). Both banner adds have been outlined in
red.

Animated Interface Elements

Animated Interface Elements allow the user to interact with the program they are using for example menus on
smartphone or buttons on a website that can take you to a different page once clicked on. Animated interface elements
can be made on software like Adobe CS4 Bone Tools. I have placed an example of an AIE below. As you can see
(highlighted with red box), as I hovered my cursor over the Library button it has highlighted itself to make it clearer for
the user to see and the button also has a programmed drop down bar which shows different sub categories within the
Library section.

More examples of AIE found on websites:

1.

2.

Here are two more examples of AIE that I found whilst searching the web. I came across two different versions of animated
interface elements. As you can see in example 1 there are two faint arrows that have been placed on the website (highlighted in
red), now when you hover your cursor over these arrows it changes the picture that is being displayed on the screen so that the
user can see different pictures instead of just one. Example 2 was taken from YouTube. The left picture of example 2 shows a
video being played on full screen whilst the cursor isnt moving, whereas the picture on the right hand side shows what happens
to the screen when the cursor is moved. When you move the cursor whilst watching a video it brings up the name of the video,
the pause button and some other features but they disappear when cursor is still so that the user can watch the video without
any distractions.

Linear Animations
Linear animated adverts cannot be controlled. They are just made to be watched by the user to advertise whatever product/company it was made for. Linear
adverts are usually just an animated character talking about the product, maybe mentioning some simple facts about the product and where they can get it. If
there is a linear animation on a web page it will usually start straight away so that the user has to go to the video to pause it this could lead to them clicking on
the ad and it taking them to the page it is advertising. Linear animations have a fixed start and finish point for example a video on YouTube like the ones below
both have fixed finishing points of 2:44 and 2:01 so when these videos reach that time they will end, there is nothing the user can do to make these videos last
any longer than their set time. Where as with an interactive animation (explained on the next slide) there may be things incorporated into the animation that
could make the animation last longer like a small click and drag activity in the middle of the video.

Clip from Shrek.

Animator vs. Animation.

Interactive Animations
Interactive animated adverts are adverts on a website where the user can control/interact with the advert in some
particular way whether it be a simple click and drag exercise like Throw the ball through the hoop or some other kind
of mini game like Shoot all of the ducks. Interactive adverts are a much better way of advertising than using a linear
advert as it keeps the user involved with the advert therefore they wont get bored of the advert and might choose to
visit the website or buy the product. Below are 4 different examples of interactive animations that have been used on
adverts.

http://digitalsynopsis.com/malteser-typo-crash/

http://digitalsynopsis.com/pringles-click/
http://digitalsynopsis.com/audi-curves/
http://digitalsynopsis.com/itau-insurance-crash/
Screenshot of each interactive advert.

Promotion
All animated adverts found on websites are made to promote the website, product or company it was made for/by. They
are all adverts so they promote things because thats what adverts are for. Animated web ads are a very good way of
promoting things compared to a normal TV advert as a normal TV advert cannot be interacted with so it would be less
likely to entertain the viewers than an interactive web ad. An animated web advert can be either linear or interactive so
there is more variety when it comes to actually making an ad. The most popular and well known brands usually have a
lot more money so that means that they can afford to buy and use more and more different variations of adverts. Two of
these popular companies could be for example, McDonalds and IKEA, both of these companies have enough money to
be able to have many different adverts. Below I have placed both a linear and an interactive advert for each company.

Linear McDonalds advert.

Linear IKEA advert.

http://digitalsynopsis.com/mcdonalds-make-better/ http://digitalsynopsis.com/ikea-unbox-banner

Screenshot and link of interactive McDonalds advert Screenshot and link of interactive IKEA advert.

Instruction
Both interactive and linear adverts can be instructional. The way companies do this are with words like Click Here or
telling you how to work their interactive advert with some kind of command and then a button will usually appear at the
end of the interactive advert saying Click here for more or Visit website. The reason these adverts are made is to get
more users to visit their website or attract them to buy there product. Below are two examples of interactive web
adverts that have instructions on them. (Instructions highlighted in red).

http://digitalsynopsis.com/gatorade-push-toy/

http://digitalsynopsis.com/volkswagen-golf-australia-launch/

Screenshot and link of

Gatorade interactive
advert.

Screenshot and link of

Volkswagen interactive
advert.

Information
Companies sometimes make their adverts informative about their product/website to persuade the user to buy their
product or got to their website, through using this technique the viewer can learn the most important facts about the
product to help them decide whether or not to buy it. Colgate did this with their linear Fur Factor advert using facts
about their toothpaste like how it bonds to 100% of your mouths surfaces. Phone companies sometimes use these
type of adverts to promote there new offers instore. Like how Vodafone uses their Freebees advert to show what
Vodafone offers to their customers. Below is an example of both the Colgate and Vodafone adverts.

Colgate Fur Factor advert.

Vodafone Freebees advert.

Entertainment
A lot of adverts nowadays are made to be entertaining, if not fully humorous then it would at least have a small joke in it
somewhere. They are made this way because people love to laugh. Well Most people anyway. There is even a bit of humour in
the example advert on the previous slide in the Vodafone ad when the animated Bee is trying to walk through the glass. Now
humour is a very persuasive technique when it comes to advertisement as no matter what people say they do not like seeing
advertisements when they are using a website or watching TV but if the advert is entertaining then people might actually like
watching the advert therefore gaining a small popularity which could lead to the product being bought or website being viewed.
Having an entertaining factor in an advert will lead to more people remembering the advert/company as it is easier to remember
something when you actually like the advert. Adverts can also have a catchy tune in it for it to be entertaining. Below are three
examples of adverts that I find have some kind of entertaining factor to them, but as everyone has a different opinion they may
not like them as much as other people.

O2 Be More Dog advert.

Skittles Midas Touch advert.

Cadburys Gorilla advert.

Hand Drawn (Cel) Animation

Cel is an abbreviation of the word celluloid. Celluloid is a transparent sheet that animators used to use to make their
animations. The animator would draw or paint one frame of their animation onto a piece of cel. In the production of the
hand drawn animation there would be one piece of celluloid that would usually have a static background on it as
retracing the background onto each cel would take up too much time so they would lay whatever they wanted to draw
on top of the background cel and carry on through their animation. Cel animation was first created by Earl Hurd in 1910.
Cel animation was used to create cartoons like Felix the Cat, Felixs first appearance was in 1919 in the episode Feline
Follies and as technology has evolved Felix the Cat was revamped in the early 2000s with newer animation techniques.
Below are three examples of hand drawn (Cel) animation.

Felix the Cat Feline Follies.

A False Alarm.

Steamboat Willie.

Flick Books
A flick book is a series of pictures laid out into book form where each picture is changes slightly to form the next picture.
The pages are laid out in this format so that when the pages are flicked through fast enough it makes the book into a
moving picture of sorts, an animated picture. The first appearance of the flip book was in September 1868 when it was
patented by John Barnes Linnett under the name of Kineograph (moving picture). The flick book was considered a
great novelty toy for children to play with, so they can still be seen being produced to this date being found as a gift in
children's cereal boxes of Christmas crackers. Flick books can consist of thousands and thousands of pages to make the
animation of it even more smoother and in more detail. Below are three YouTube examples of Flick books going from a
simple to a highly detailed flick book.

Simple short Flick Book.

More detailed Flick Book.

Very long and highly detailed Flick Book.

Animated Cartoon
An animated cartoon is a film that is made using sequential drawings, as opposed to other animation techniques like
Claymation. Animated cartoons are prominently found to be children's TV shows and films. There are even TV channels
that only show animated cartoons like Cartoon Network and NickToons. Snow White and the Seven Dwarves is
considered to be the first ever animated feature film, it was released in 1937. This film was produced by Walt Disney now
a well known company of animated films. Below are three different examples of animated cartoons. As placing a full
length film as an example I have decided to use the films trailer as the example instead.

Snow White and the Seven Dwarves Trailer (first animated feature
film).

Hotel Transylvania 2 Trailer (most recent feature film).

Adventure Time intro (animated cartoon TV show).

Animation Process
Back in 1937 when Snow White was created the main animation process used was cel animation, that was how snow
white was created it took Disney 3 years to create Snow White the team had to draw each different cel of the full film.
Nowadays there are is a lot more variety when it comes to animation process. There are now lots of different programs
that you can use to create an animation, some of these programmes are Flash, CorelDRAW and even Adobe Photoshop.
Big name animation companies like Disney and Pixar write their own animation programs to create their films with. The
process of animation varies on what form the animation takes for example CGI animation has a different process to cel
animation. Below are 3 examples of different forms of animation.

CGI Animation from Jurassic World.

Cel Animation found on YouTube.

Animated Cartoon (Pokmon).

GIF (Graphic Information File Format)

A GIF is a file format that is used to save pictures. This particular file format is used a lot within advertising, like on
banner adverts to help promote different websites or products. Because of the fact that the GIF format uses a
palette of up to 256 different colours for each frame, this format wouldnt be the best to use on photographs or
images with continuous colour, but it is still used a lot for simpler images like logos and graphics with solid areas of
colour. This type of animation is mainly used in advertisements and not for normal animations. Below are three
examples of animated GIFs that I have found online (GIFs will start when PowerPoint is activated).

Rotating globe GIF.

GIF of a cartoon.

Optical illusion GIF.

DHTML (Dynamic HyperText Markup Language) and XHTML (Extensible HTML)

DHTML is a term used largely to describe a group of tools used to create an interactive and animated website. Using
DHTML can allow you to add things like rollover buttons, drop down bars and even images moving across your screen.
Using a normal HTML you would not be able to add things like that onto your webpage. DHTML is a group of
technologies that consist of a static markup language like HTML, a client-side scripting language like JavaScript, a
presentation definition language like CSS, and the Document Object Model.
Extensible HyperText Markup Language includes multiple languages in a webpage. With XHTML it is possible to read and
show more extiensible markup language. XHTML can also include mathematical markup language which displays
mathematical formula and vector graphics on the page.

DHTML logo.

XHTML Logo.

Java Applet
A Java Applet is an application created in Java to allow the user to access different
types of online media without having to install any other unneeded programs to
their computers. Instead the Java Applet runs the piece of media just like it would a
normal piece of media. The Java Applet usually takes around 30 seconds to 2
minutes to load up and open the online media instead of having to wait for a full
computer program to install. Java Applet makes it a lot easier for people to watch
videos, play online games and fill in forms seen as though they dont have to have
the software pre installed on their computer.
Java logo.

Optical Illusion of Motion (Persistence of Vision)

Persistence of vision is where multiple images blend into one image in the brain therefore causing the illusion of motion
within the animation. Depending on the frame rate of the animation the mind will adapt to what it is seeing, for example
if the frame rate was quite low the illusion of motion will not really take action because the mind has adapted to the
picture before it in time to see the next one. Whereas if the frame rate was high the mind will the blend each image
together as it is not fast enough to tell the difference between each picture at that speed therefore causing the illusion
of motion. Good examples to see persistence of vision working are flick books (explained in previous slides). Below is an
example of flick book with a slow frame rate and a fast frame rate to show how the brain sees images at different
speeds.

Flip book showing different frame rates.

Claymation
Claymation is an animation that is produced by still images being taken of figure in a series of positions made out of a
malleable substance, usually plasticine clay and the images then played back at a high speed to create an animation.
Each clay figure is made out of a wire frame to give it support and then covered in modelling clay to give it a character.
Below are some examples of different aspects of Claymation. There are some very famous animations that have been
made using Claymation, animations like Wallace & Gromit and Morph. There have even been full length feature films
made fully from Claymation like Chicken Run. It took 5 years to make the Wallace & Gromit film that includes writing
planning and filming. Below are some examples of different aspects of Claymation.

Clip of Wallace & Gromit.

Clip of Morph.

Chicken Run trailer.

Stop Motion
Stop Motion animation very long haul process of animation. It is made by a series of photographs of a model or object
that are put into a sequence and played back at a much faster rate. The reason it is a long haul process is because if one
tiny visible mistake is made the process will have to start all over again as it could ruin the overall outcome of the
animation. One of the most famous stop motion animated feature films is The Nightmare Before Christmas. The film
took at a 24 frame per second. It roughly consisted of 110,000 frames. It would take a week to create just one minute of
the film, therefore it took over three years to create the full motion picture. Before stop motion was used for full feature
films it sometimes took a small part in some films like Jason and the Argonauts and King King. Below are some example
of stop motion animations.

The Nightmare Before Christmas clip.

Jason and the Argonauts clip.

King Kong (1933) clip.

Computer Generation
Computer generated animation, or CGI animation is where an animated image is created on a computer program like
Flash using 2D or 3D graphics. A film/video frame is one of many still images that are put together to compose a moving
picture. Frames are lay out in order for the user to see which frame may need editing. Frame Rate is the rate at which
each frame is shown one after another, its is measured in frames per second (FPS). Onion Skinning is the technique used
so that separate frames are visible behind the frame you are viewing so that you can see what frames need editing or
changing. Tweening is the technique that helps move one frame to another more fluently. The Classic Tween is used to get
a smoother transition between 2 key frames by filling in the gap with a gliding effect from one to the other. A Motion
Tween helps a figure or character to have smoother movement in walking for example. You can create a path for it to walk
along and choose how it will walk.

Example of onion skinning.

Vector Animation
Vector animation is animation that is created using different shapes, lines and curves which basically work
as a mathematical formula. The reason it is made using different shapes is that if it were to use pixels
(Raster) instead you wouldnt be able to view it properly as it may distort whilst being stretched or changed
but because it is made up of shapes it can be stretched and still be completely visible. In terms of popular
animation vector animation is hardly used as there are much more productive ways of animating
nowadays. Below I found two examples of vector animations.

https://www.youtube.com/watch?v=D58RoJ4hl8E

https://www.youtube.com/watch?v=5ns5t7m3IzU

Raster Animation
Raster animation is the type of animation that is created using Raster graphics which
means that it is made out of thousands of different coloured pixels. Vector animation
cannot be distorted depending on the size you view it whereas raster animation can be
as it doesnt have a big enough colour palette to cover the amount of different colours
the pixels need to be. Below is a link to an animation with raster elements in it, you can
see the animation become pixelated if you zoom into the webpage on your computer.

http://users.wfu.edu/matthews/misc/psp/AnimTut/Layers/raster/animation/RasterAnim.html
Screenshot and link to Raster animation.

Compression and Scalability

To make a digital file smaller in size it must be compressed. Compression is where the file size will be reduced because there are
unnecessary parts that have been removed so the file size can be smaller. If too much is taken from the file then when the file is opened,
the visual quality of the file itself may be lower as there is too much data missing from it. If the file has a small compression rate, then you
will get a more visible outcome than if you used a larger compression rate. The main reasons that compression is used is so that
download/upload speeds can be a lot faster and so that each file doesnt take up as much memory on your storage device. If a file is large
then it could end up slowing down the website that they are using. Scalability is where files are enlarged or shrunk to fit the systems light
or heavy loads. Scalability is a bit like compression is the fact that it compresses files. Vector graphics can be enlarged as much as you
want as they are made of a mathematical formula, but raster graphics will pixelate if enlarged too much because it is supposed to be
shown at its default file size.

Image of a cat at normal size.

Zoomed in version of the same picture. It has become pixelated.

File Formats
There are different file formats for both vector and raster graphics that each have a different compression
rate. Applications like Flash and Photoshop also have their own file format so that the application can save
all specific parts properly.
.fla This is the file format that is used by the Flash application. This format allows the file to be edited
before the final verision is made. The final version will be saved using
.swf, this file format is the Shockwave file format that you are not able to edit once this format is used.
.gif This file format is used to save small animations like animated GIFs.
.mng .mng is a lot like the .png file format. .mng is a graphics file for an animated image.
.svg This is a file format that is used to save 2D vector graphics and animations.

Authoring
An authoring system is a program that has already has elements programmed in for the development of interactive
multimedia software titles. Flash is an animation software where you can create animated videos and export them to a
disc or the internet. Flash can create quite advanced animations. For example the animations on YouTube called Salad
Fingers is made using Flash. Swish Max is another program that is like Flash and can create animations, movies and
presentations. Swish Max is cheaper than Flash but does not support all of the same features as Flash but does support
most main features. Amara is an application that is used mainly to create website animations like banners and photos.
The file format that is used on the application is .swf, this is the same file format for Flash therefore Flash projects are
accessible through Amara. Director is an application that is used for creating interactive CD ROMs and is used by
businesses to show off a new product, it also allows you to be the director of your own movie.

https://www.youtube.com/watch?v=M3iOROuTuMA

Players
A media player is a piece of computer software that allows you play multimedia files on your computer
without having to download big applications to be able to play them. To activate the players their plug-ins
need to be installed.
Flash Player - This is used to play Shockwave files which are usually found to be animated or movies. It is
used on websites that cant host the video on its own.
Shockwave Player This player is used to play animated and interactive videos on websites.
Real Player Real Player is a multi platform media player. It can play most files e.g. MP3, Quick Time and
Windows Media. It is also used by Facebook and YouTube, both of these sites have generated a lot of
visitors.

QuickTime Player This player is used by Apple. It plays multiple media formats like sounds, videos and
photos. This player is also used on Apples iPhones and other products.