Uses of web animation

Task: 3
Banner ads: web banners are often used as ads, they are often placed at the top, bottom or
on a website and they most often link back to the advertiser’s website or page. Banners
were often just text and an image but now when they can be animated they are very often
very complicated, the animation on them is used to pull the viewer in and grab his
attention, they often have audio with them as well, this could be a sound effect or even
music if it is an animation for something like a band or a music video. Most website use web
banners as if they advertise on their page they can earn money from just owning the
website and getting viewers. Web banners have become a lot more popular when it comes
to advertising on websites because they are big but also don’t take too much space up on
the page, this is good as the advertiser wants it to be catchy and if they have the space a
web banner grants them they can create something good.
When researching around different websites, some of the main things that is eye-catching
with the web banners are the colours and shapes that they are made from. All the colours
used are bright and in our face. These colours are clearly used to grab your attention as the
user. A lot of websites also use the same dimension of 1200x200 which we were given by
the client in the client meeting. This dimension is a good size as it is a good enough sizer to
fit good size images, videos and there is enough room to add some moving animations.
Looking through cartoon TV show websites, the way that they are designed is visually
appealing. The colours that are used are bright and noticeable around all areas of the
animations included. The Simpsons website is a good example of colours as the main colour
that they use is yellow, which is a bright but usually hard colour to blend with. The site is
split up into little sections with a grey, which then makes any other colour placed next to it
near enough perfect to match. GIF videos are used on it which can direct the user to aim
towards the centre of the banner, this area could include information that may be
important.
Sounds used are basic, as they are simple things such as bells, alarms and pings. These
sounds are simple so that the user doesn’t get out of by listening to them, and they could
become overpowering making them turn their volume either down or off.
Animations aren’t used loads. They are only used in simple things such as the video, and
little areas of text that may be relevant, such as titles etc. They have placed their logo at the
top of it so that its noticeable, and makes it visually appealing

The web banner used by Thomas cook is also made to try and make you book a trip with
them. The banner is place at the top of the page, and the colour schemes that are used are
bright colours and placed above the white web background so that it stands out straight
away. The white text on pink is used so that you notice it straight away so that you notice
that SALE. The image use on the background is large and showing a holiday destination. This
could be used to attract you to book somewhere. By using a child as well could show the
audience which would probably be adults that Thomas Cook are also Family friendly.
However, this banner is static meaning that they are limited with the information that they
place on it, so by having an animated one they could include some more things.
Animated interface elements: animated interface elements are used on almost all website,
any web page that is not static and can move with or without the user is an animated
interface. As most websites have a navigation bar or some buttons. An example of this
would be if someone has a rollover button on their website, this would cause it to change
colour when someone puts their cursor over the button and then when clicked takes you to
somewhere else on the page or on another.

On game, they have a navigation bar that opens a whole section, this is a good example as it
is a big navigation bar, there are many different buttons on it which are all part of the
animated interface.
They also have an interactive banner, this will scroll through and preview 5 different slides,
this advertises their own deals and games. For my own web banner, It will be advertising a
band and the different pages won’t be needed as I am designing it to be just one.
Linear and interactive animations: linear animation is making animations for video and film
and interactive animations is more used for games and computers. Linear animation is
called linear because it follows one line, this means it is designed to play through with no
interaction and change from the user, this is something like a web banner that plays on a
loop or an animated video. Interactive animation or nonlinear animation is where the
animation can be changed by the user, this is like on Games website where the user can
choose between 5 different pages, this allows the user to interact with it and makes it
nonlinear. The banner I am creating for my assignment is a linear animation because it
cannot be changed from what I make it

Websites like “armour games” use nonlinear animation a lot, this is because the games they
use on their website are embedded and are all interactive making them nonlinear, all the
games on the website will be flash games as this is the easiest way of putting a game on a
website. Websites like Facebook use flash games now as it is very easy to do and keeps user
retention.
Promotion: promotion Is very import, this is because it is a method of making people aware
of what you are selling or your organization/business. This is important because small
businesses want to get the exposer. It will also increase their sales and public awareness. An
example of promotion would be a video which advertises something they are selling. EE do
this well as they have an advert that they put on
YouTube and television giving a clear
understanding of what they are selling, are a very
known brand and have grown a lot in the past
couple of years as their promotional campaign
has been very good. In my web banner I am
including a video of the band that I am creating
the ad for, this is good because I can add a video
in that shows the band.
Instruction: instruction when in animation is where the animator creates an app or website
that informs a user of how to do something or helps do a task. A website like BBC bitesize
does this well, they have a full website that has most GCSE courses on there and a lot of
different revision material. They also have an app that allows users to do questions on the
desired course they like.
Most apps like these use very basic interaction, this is like click here or select these. They
use this because it is easy for the user and easy to code, this is good as they can update and
make the exams better. It is also good as the user can very simply click the boxes instead of
having to do some complicated things.
Information: this information can be anything, but it must be transmitted using animation,
this is like facts and statistics. This could be a slide show that is presented in a meeting, it
would be very easy to setup for the user as it is made with a simple slideshow software, this
would mean just typing the facts or importing images. Something like infographics could
also be used, this is a form of animation where information is broken down into chunks
which are presented well and easy to understand. These sorts of animations can be used to
show something like how a volcano erupts, this would work well as it can give an inside
perspective on the volcano and show what happens and not just say it.
Entertainment: there are many different uses
of animation in entertainment, the main one is
cartoons on TV or online, these are the shows
like The Simpsons which has been running since
1990 with 522 episodes of 25 seasons, these
sorts of animations are very easy to create for
the developers and work very well. New shows
have come out in this style like rick and Morty. There are also shows like Wallace and
Gromit or Shawn the sheep, these animations are made from clay and are known as
Claymation, this is a very important thing within entertainment as one of the biggest
companies are ARDMAN which are known for their Claymation. As sites like YouTube have
been getting big many people have been making their own animations, there are many
different channels being created and they have a range of animations. A YouTube animator
like Alan Becker can create content from their own computer, Alan Becker creates small
animations that have become very big on YouTube.
Task: 4
Hand drawn: hand drawn animation is the traditional animation. It is the technique where
each frame is drawn from hand, this is how people used to animate before things like the
computer were invented, it would use a storyboard like most other animations and then the
animator would draw each frame in a more detailed form.
The animator will go off the storyboards to create the frames, often they will use tracing
paper as it will allow them to get the onion skill effect and add to the animation more, this is
will allow them to get the smoothest animation for their design. They will have to make sure
they have the dialogue written before hand to make sure they can sync up the lips of the
animation they are creating.
Flick books: a flick book is a book that has a set of images on it, they gradually change from
the first one that is drawn on so it tells a story or shows something, this is the very basics of
animation, once the pages are turned very quickly it looks like whole thing is animated. The
little change that goes from image to image allows it to look like a very good animation for
what it is. Flick books nowadays are often made for
children as entertainment or sold in shops as little
products, as the years have come a long they are being
used a lot less as most things are becoming computer
processed. Companies do use them though for things to
go into magazines or can simply be their own thing
advertising the company.
Flip books can be anything from a black and white stick figure to a very detailed drawing.
Animated cartoon: The definition of an animated cartoon is “a motion picture that is made
from a series of drawings, computer graphics, or photographs of inanimate objects (as
puppets) and that simulates movement by slight progressive changes in each frame.”
Animated cartoons originally came from drawing, this is like how the flick books are done
but they are then put into a computer and made into a better
animation and more advanced. These sorts of animations are made
to tell a story, they can be any length. The sort of animation used in
shows like The Simpsons fall under the traditional animation
category. The Simpsons has been running since 1990 with 522
episodes of 25 seasons, these sorts of animations are very easy to
create for the developers and work very well.
Animation Process: To start storyboards are made, this is the initial ideas for the animation
you are creating, it will be the simplest form of your animation
All the animators that are working on the animation will then put all there storyboards
together and design something of all the ideas they have. This gives a very good overview of
what everyone wants and what they think looks good.
Putting all the storyboards together will bring together an initial story for the animation
Once the story is laid out the animators will then write out the dialogue for the animation,
this is so the animators can sync the facial movement with the words that they will be
saying, the dialogue cannot be changed after this point as they will need to change the
whole face of someone that is speaking.
The dialogue is then recorded, the animators then get rough sketches of the characters,
these are often drawings and they are very simple.
Once the animation has been drawn up completely, and all the dialogue is recorded the
drawings go to the inking department, these are very accurate and are inked onto celluloid
acetate.
Once the outline of the characters has been made clear the celluloid is moved to the
printing department. This will make them seem crisp and clear and it allows colours to be
made much easier.
Before the celluloid acetates of the animations get photographed, backgrounds must be
added. This is because celluloid acetates are clear and it only has the painted character on it,
if a background is made, it will show through. Usually backgrounds are painted with
Tempera or Water Colour paint. Although, in some Disney productions, the background was
painted on glass, and combined with other glass painted backgrounds to create the illusion
of extreme movement.

Now everything combined can be photographed. Although, the final product is not filmed
with a normal projector, or camera. A special device, with a lens mounted facing down on to
a table top captures each frame of the animated feature. Usually, the background is placed
into a special mount, then covered with the celluloid acetate, then covered with a large
piece of glass, then photographed.

Now everything has been done or the film, it may be edited at this stage.

Now everything has finished the film, or whatever has been made can be released to the
public.

Graphic information format: GIF is an image file that is compressed to reduce file transfer
time. It is limited to only 8-bit or 256 colours. GIF formats are good for sorting graphics with
fewer colours which are normally things like shapes, logos and simple diagrams. On a
website if you want your logo to load before the websites page loads a GIF format could be
used to make it load. A GIF is good because the less colours makes the image loading time
less. GIFs can also be multiple images, this makes it an animated GIF, these have no sound
and the images are often lower quality. They use lossless compression because it is more
effective when different places have only one colour.

This image is an animated GIF, it

works very well because there is a lot
of black in the background and most
of the wolf is white/grey. The file size
would be a lot smaller than any
animation file. GIFs can’t be
something that has dialogue and if it
does it would either must be obvious
or it would need subtitles.

Optical illusion of motion: An optical illusion is characterized by visually perceived images

that differ from objective reality. The information gathered by the eye is processed in the
brain to give a perception that does not agree with a physical measurement of the stimulus
source. There are three main types: literal optical illusions that create images that are
different from the objects that make them, physiological illusions that are the effects of
excessive stimulation of a specific type (brightness, colour, size, position, tilt, movement),
and cognitive illusions, the result of unconscious inferences. A familiar phenomenon and
example for a physical visual illusion is when mountains appear to be much nearer in clear
weather with low humidity than they are. This is because haze is a cue for depth perception
for far-away objects. The classical example of a physical illusion is when a stick that is half
immerged in water appears bent. This phenomenon has already been discussed by Ptolemy
and was often a prototypical example for an illusion. Physiological illusions, such as the
afterimages following bright lights, or adapting stimuli of excessively longer alternating
patterns, are presumed to be the effects on the eyes or brain of excessive stimulation or
interaction with contextual or competing stimuli of a specific type—brightness, color,
position, tile, size, movement, etc. The theory is that a stimulus follows its individual
dedicated neural path in the early stages of visual processing, and that intense or repetitive
activity in that or interaction with active adjoining channels cause a physiological imbalance
that alters perception. Cognitive illusions are
assumed to arise by interaction with assumptions
about the world, leading to unconscious inferences,
an idea first suggested in the 19th century by the
German physicist and physician Hermann
Helmholtz. Cognitive illusions are commonly
divided into ambiguous illusions, distorting
illusions, paradox illusions, or fiction illusions.

Claymation: Claymation is a generalized term for clay animation, this is a form of stop
motion animation which uses clay. Will Vinton is the original creator of Claymation, he
owned an animation studio that worked with clay to create animations. Each object or
character is sculpted from clay or other such similarly pliable material as plasticine, usually
around a wire skeleton called an armature, and then arranged on the set, where it is
photographed once before being slightly moved by hand to prepare it for the next shot, and
so on until the animator has achieved the desired amount of film. Upon playback, the mind
of the viewer perceives the series of slightly changing, rapidly succeeding images as motion.

Shawn the sheep is a very good example of Claymation, it is a show that is shown for
children on CBBC, it doesn’t involve any dialogue but it is very entertaining. There have been
5 series of it and the show only lasts 7 minutes. The most known Claymation film is Wallace
and Gromit, this is one of the original Claymation films, they are often short films and there
have been a few longer movies created, when it was first created it had 100% positive
ratings on rotten tomatoes, this shows how good people thought it was in the 90s.

To create Claymation shows a detailed storyboard, a set

and the plasticine models are created, the films are shot
one frame at a time, moving the models of the characters
slightly to give the impression of movement in the final
film. In common with other animation techniques, the
stop motion animation in Wallace and Gromit may
duplicate frames if there is little motion, and in action
scenes sometimes multiple exposures per frame are used to produce a faux motion blur.
Because a second of film constitutes 24 separate frames, even a short half-hour film like A
Close Shave takes a great deal of time to animate.

Stop motion: Stop motion is a widely-

used technique in the film industry. It is
a simple technique like a flip book where
you slowly move objects in pictures and
play them continuously, so it looks like
the objects are moving by themselves.
Anything can be used to create stop
motion whereas Claymation can only use clay/plasticine. Stop motion is often created with
other things like Lego, this allows it to be homemade very easily as all you need is a camera
and a lot of time. As it is often 24 frames per second it takes a very long time to create
therefore people that create their own use less frames per second, something like Wallace
and Gromit would use the full 24 frames per second because they have the time and a full
team creating them. Stop motion doesn’t just use clay or small figures, they could use
humans as they did when they didn’t have something to record with and only cameras.
Computer Generation: Computer animation or CGI is the process of creating animated
images using computer graphics. This could be a static or dynamic scene and dynamic
images only means moving
images. Nowadays computers
use 3D graphics but 2D graphics
are used to create something
with its own style or if they want
it to be a smaller file or with a
smaller bandwidth. Often CGI is
created using a frame from a
human, this is done using balls all over a body and a camera getting the frame of the body,
this will simply be put in the program and then the designer will create a human like frame
with it, every movement made by the balls will be tracked so the animator can get very
realistic movement from the frame, they can then design what they want over the frame
like a robot or another human just made using CGI. The human may also add in props to get
things like vaulting, this would make the frame copy what they are doing and it would
outcome in a vaulting animation.
“Frame rate (frames per second or fps) is the rate at which consecutive images called frames
appear on a display. The term applies equally to film and video cameras, computer graphics,
and motion capture systems. The frame rate is used to sync up video and audio within a
project, the animator wants to make sure they have the same frame rate for the audio and
animation to make sure they sync up, it is also good for getting a video smooth, stop motion
uses 24 fps which means 24 still images to make 1 second of video, this allows the whole
animation to run smoothly even though the base product was just images, most movies run
at 24/30 fps which allows the movie to be smooth enough for the people watching. “
Onion skinning is where someone creating an animation in 2D graphics can see multiple
layers on the animation, this allows them to see what they have animated so far and can
make changes to it to make the animation
smoother. The layers they have already
created are shown faint in the background
to show the movement that the animation
is taking, this is very good for someone
creating something like an arm moving up
as they can see how the arm moves and
make sure it doesn’t loose its length or have
too big of a gap between each frame.
Task 5:
Vector animation: Vector animation use polygons to map images in two or three
dimensional worlds, they are better than raster images as they can be zoomed in and out
without dropping any quality, this means they are better for animation that need to have
their shape changed, like logos or a graphic that may need to be 16px manipulated up to
64px. Vector animation use less space up than raster images which gives them a big pro
against raster images. The main program that people use to create vector animations is
Adobe flash. Vector images are stored in .ai and .fla, these file types are editable in the
software they were saved from. Ai files are files that are saved from adobe illustrator for
single page graphics. An fla file is one that is made from adobe animate, this file type can
contain more than adobe illustrators file type as it can store videos. These. .eps files are files
that contain images or text, they are used by computer drawing apps and can also store font
designs. Images that are saved like this can be used to go back and edit the text or graphic
where as when you save the animtiaon into GIF, JPG and PNG they cannot be edited. Vector
images are made from lines and curves, this allows them to be manipulated into an image,
the line and curves are then edited into polygons and are saved, vector animation don’t look
realistic as they aren’t using the pixel based colour system which raster do to get the
colours, they are normally made up of block colours which gives them a very cartoon look.
Vector animation are never super realistic and used in graphics instead of photography.
Vector images have no data lost if stretched of manipulated. The lines and curves have
anchor points which join them together.

Raster animation: A raster animation (bitmap) is an animation captured by a camera or

some device and are made up of many x and y coordinates on a display. The raster file is
larger than a vector file and when modified can easily lose quality, GIF, JPG, BMP, PNG and
PSD files are all bitmap, when zoomed these files will lose quality as the resolution will go
down as you zoom, this means if you want to get a more high quality animations you will
need it to be a higher resolution which will take up more space as a file. PSD files open
photoshop as they are photoshops unique files where as files like BMP will be opened onto
the windows gallery. PNG files are lossless bitmap files and can be opened using most file
openers. Lossy files are animation or a file that is stored to take up lower space, this means
when you store it or upload it, it loses quality and becomes a worse picture, the pros of this
is that it uses less space and takes less time to upload. Lossless files use up a lot of space as
when they are being saved or uploaded as they don’t lose any quality, this allows them to
look as good as they did but they take up more space. Depending on what quality is needed.
Compared to vector images they take up way more space but that is because they look a lot
more realistic instead of cartoony and don’t use block colours.
Compression: lossless compression lets you recreate the original file exactly. All lossless
compression is based on the idea of breaking a file into a "smaller" form for transmission or
storage and then putting it back together on the other end so it can be used again.
Lossy compression works very differently. These programs simply eliminate "unnecessary"
bits of information, tailoring the file so that it is smaller. This type of compression is used a
lot for reducing the file size of bitmap pictures, which tend to be fairly bulky. To see how this
works, let's consider how your computer might compress a scanned photograph.
File formats
SWF: SWF is an abbreviation for small web format, an Adobe Flash file
format used for multimedia, vector graphics and ActionScript. Originating
with FutureWave Software, then transferred to Macromedia, and then
coming under the control of Adobe, SWF files can contain animations or
applets of varying degrees of interactivity and function. They may also occur in programs,
commonly browser games, using ActionScript.
FLA: Files that contain the .fla file extension are files that are used by the Adobe Flash
application. The Adobe Flash application was previously referred to as Macromedia Flash.
Adobe Systems acquired Macromedia in 2005. Most Web browsers can support the Adobe
Flash feature. Files that contain the .fla file extension store movies or animation files that
have been created with the Adobe Flash application. These files are often
saved as SWF files for use on the Internet. The FLA file is a raw editable file
that is saved by the Flash software application. The SWF file is the
compressed file that is created from the FLA file for use on the Web.
Flash and Director: Adobe flash player is a software that is used to create several
multimedia format products such as games, animations, vector images and rich internet
applications. Flash is most commonly used to create animations based on text and pre-
made images. It also has the capability of being able to import sound files and even record
some from a microphone. Adobe flash is one of the most used software’s in animation, this
is because it has the capability to create 2d animation. Flash can be used to create films that
are up to 90 minutes long and has a good exporting scheme as no compression is used
meaning that your file will be exported in its full quality. Director is also used to create
animations; however, the difference is that is mainly aimed at DVD menus. Director uses
code as well to control the frames from stopping a directing section back to certain areas.
For example, you can use the code “go to the frame” to stop the script from running and
hold on a certain frame. Director publishes in a projector file which means that the stage
size that you set will be displayed on the device you are viewing in this size. This programme
also can read HTML code meaning that links can be put in forwarding the user to another
website of your choice. Within director you can use the tools to create items such as shapes,
buttons etc.
Flash player: Adobe Flash Player is freeware software for using content created on the
Adobe Flash platform, including viewing multimedia, executing rich Internet applications,
and streaming video and audio. Flash Player can run from a web browser as a browser plug-
in or on supported mobile devices. Flash Player was created by Macromedia and has been
developed and distributed by Adobe Systems since Adobe acquired Macromedia. Flash
Player runs SWF files that can be created by the Adobe Animate and Adobe Flash
Professional authoring tools, by Adobe Flash Builder or by third party tools such as
FlashDevelop. Flash Player supports vector and raster graphics, 3D graphics,
an embedded scripting language called ActionScript, and streaming of
video and audio. ActionScript is based on ECMAScript, and supports
object-oriented code, and is like JavaScript. Flash Player has a wide user
base, and is a common format for games, animations, and graphical user
interfaces (GUIs) embedded in web pages. Adobe stated in 2013 that more
than 400 million out of over 1 billion connected desktops update to the new version of Flash
Player within six weeks of release.
Quicktime: QuickTime is bundled with macOS. QuickTime for Microsoft Windows is
downloadable as a standalone installation, and was bundled with Apple's iTunes prior to
iTunes 10.5, but is no longer supported and therefore security vulnerabilities will no longer
be patched. It is available free of charge for both macOS and Windows operating systems.
There are some other free player applications that rely on the QuickTime
framework, providing features not available in the basic QuickTime Player.
For example, iTunes can export audio in WAV, AIFF, MP3, AAC, and Apple
Lossless. In addition, macOS has a simple AppleScript that can be used to
play a movie in full-screen mode. but since version 7.2 full-screen viewing is
now supported in the non-Pro version.