Web Animation

Uses of Web Animation

Banner ads are small rectangular pieces of advertisement that can appear on web pages
and if you click on them you will go to the advertisers website. Banner ads are simple
pieces of HTML code. They can be found at the top or the side of a web page or even popup
in front of your screen. Banner advertisements are used to make income as the advertising
company pays the websites to put there ads on the up to make people go to their website.
Advertisements online are really important for small site because without the money from
the ads they would find it hard to keep the website up unless they have a membership to
get onto their website that people had to pay. Banner ads can be on different formats such
as GIFs, PNGs, JPEGs and the ads you can interactive with come from flash and are called
flv., swf. and java.

Example of Banner Ads

This example shows a pop up ad you could get when you are
reading or watching something online. It shows many different ads
there is one at the top of the webpage saying you have a new
message and there is two popup ads one with deals for going on
holiday and another for adding surveillance to your house. Unlike
this webpage some websites have all there ads put together tidily
so that it doesnt stick out as much.

Animated Interface Element

This is where something changes on the screen usually by clicking or going over it. For example a
button that changes colour when the user puts his mouse over it. Normally the interface
element is done on flash and it is like a rollover button because it reveals or changes something.
You can use Flashs invisible buttons and have one layer have particular colour when the user
highlights over it. Animated interfaces are found mainly on I-Phones and Android Smartphones
as you can find menus on the users phone or you can find buttons on a website what if you
hover over them can give you a drop down menu. The reason their animated is because it makes
it much simpler and is a better way for the interface element to be done. You could do it on
JavaScript as that makes it look more realistic. The picture shows when hovering over the t-shirt
it comes up with a border around the picture.

Linear Animations
Linear animated adverts are uncontrollable as you have to watch it and click on it if it
interested you but you cannot get rid of it. An example of Linear animation is YouTube, as
videos on YouTube are flash videos where they load at the start and end at a set time
making YouTube, Linear animation. In a Linear animation you have to watch people or an
animation play and watch until the end when they are talking about the product. The advert
would include some good points about the product and how to buy it and what it is called
and how to contact the company. Most people end up watching these linear animations
because the video can start playing without you pressing play. The videos starts straight
away so people have to go straight to it so they can watch it or pause it and if they like it
they can follow the video to the products website and buy the product.

Interactive Animations
An Interactive animation is a Flash animation that allows people to interact with the
animation on the webpage. This is done to engage the audience and help participate with
the animation instead of just watching it. You should be able to click, control, chose and
take part in different activities throughout the animation. Which is different from Linear
animations as with that you cant change anything. The interactive adverts are much more
inventive of getting people to visit your product site because when you offer them to get
involved a lot of people will just go straight away. When the person completes a mini game
a link activates and takes you straight to the products site and that will show you all the
different offers and prices.

Promotion
All web animated adverts are made to promote the products. The company that is selling the
product are trying to make it stand out so the product sells easier. Just like a TV advert, web
adverts can do what the TV adverts cannot because they can be linear or interactive, plus the
interactive animations can be playable as soon as the site is entered. Many different brands have
lots of different ways of promoting their product, brands like Coca Cola. They use the different
forms of web animation and pay a lot of money to make sure that they have different types of
promotion so it everyone finds it interesting not just certain group of people. Because mainly
everyone has the internet all over the world the adverts will also be seen all over the world.

Instruction
As well as being interactive different adverts could be instructional as well. They can be
instructional in different ways such as commands like click here or click for more. It will have
some sort of incentive like it could be a game or video which when you click on leads you to
more games or more videos. This is done so that the site is using a type of advertising that is
generating a lot more visitors. to the site for the purpose of keeping it running and getting more
money. A good example of this is Sam learning, which is a online education service for schools in
England. It supports self-assessment method of interactive revision and examination practice.

Information
This is where the person seeing the advert learns more about the company and the promotion
through the advert. The advert will tell you that there is a deal on or percentage off what you
get to find out more about by clicking on the advert. This helps the site get more money as it
gets more visitors. Different brands use informational based adverts to show its promotions. A
good example for information is the website howstuffworks.com. There are separate links that
surround the webpage. Also by adding in an extract from the link it draws in the audience and
gives them more of a reason to click on it. The information, which is data and facts can be
transmitted through using animations such as an animated trailer of an advert that has detailed
information that transmitted to the audience.

Entertainment
Some adverts are made to entertain you they do this by making them funny in how it looks or in
a game that you play. The reason for this is because people will click on the advert knowing that
the advert is funny or because it gets them interested in what the sites content is and so theyll
go on it to see. Animations has been a form of entertainment in a wide range of forms such as
CGI movies like Disney: Tangled. Hand drawn animations also are used for entertainment with
shows such as for example The Simpsons and Scooby Doo. CGI can be seen and mostly found in
most present day cartoons.

History Of Animation

Hand Drawn(Cel)
Cel animation is a type of animation that makes the film or TV show looks hand drawn. Some of
the first animations ever were hand drawn, with the advancement of technology the hand
drawn style of animation can be created by using computer animation to give hand drawn a
different and sometimes better look. The reason why people use the Cel animation style on a
computer is because it is easier and cheaper to do than to do a whole animation hand drawn.
Video Games that use this type of animation include Dragon Ball Z, Some of the Zelda games
and Child of Light.

Flick Books
Flick Books are one of the earliest forms of animations and probably the most basic. Flicks Books
are made in a little booklet and on each page you draw an animation but on the next page you
draw the animation a little different with the goal of having it go somewhere. The animations
could be anything, The animation doesnt move too much when viewing the different pages
normally, instead when the book is flipped with speed so that it gives the illusion that your
viewing an animation instead of looking at many separate drawings one after the other. Flick
Books or Flip Books are often illustrated mainly for children but could also be for adults.
Software packages and websites can also convert digital video files into custom-made Flick
Books.

Animated Cartoons
An animated cartoon is a film for a cinema, computer screen or TV. It will feature some
sort of plot or story which is created using drawings. This is distinct from the terms
animated films and animation. Cartoons can use many different types of animation,
they all fall under the tradition animation category. There are many different children
TV shows, there are even channels devoted to cartoon for children such as Nickelodeon.
There are many different animated cartoons which are popular and are film such as
Snow white and SpongeBob the movie.

Animation Process
In the early days of animation, people creating a hand drawn animation like snow white it would
take over 3 years to make because it took a long time to draw every individual scene. Now it is a
lot easily, with applications such as CorelDraw, Illusion Mage and Flash it will not take as long to
make films. People who use these applications are professional animators probably. The process
of animation if different depending on what animation it is, it could be CGI animation, cartoon
and anime style animation or Cel shaded animation.

GIF
Graphics Interchange Format (GIF) is limited to an 8-bit palette or 256 colours. This makes the
GIF suitable for storing graphics with relatively few colours such as shapes, logos, diagrams and
cartoon style images. GIF supports animation and is widely used still now to provide animations.
It also uses a lossless compression that is more effective when large areas have a single colour
and ineffective for dithered and detailed images. GIFS are a type of animation that is used for
adverts but not for normal animation. Here is a link to a website for GIFS and a screenshot of a
gif.

http://giphy.com/

DHTML
This is a term for a collection of technologies used to create interactive and animated websites.
This is done by using a combination of a static mark-up language such as HTML, a presentation
definition language such as CSS, a document object model or a client scripting language such as
JavaScript. DHTML allows authors to add effects to their pages what would normally be very
difficult to achieve. DHTML allows authors to animate text and images in their document,
embed a ticker that automatically refreshes its content with the latest news and other data,
authors can use a form to capture user input and then process verify and respond to that data
without having to send data back to the server and it also means the author can include rollover
buttons and drop-down menus.

XHTML
XHTML stands for extensive hypertext mark-up language and is identical to HTML 4.01
with a stricter and cleaner version of HTML that is defined as an XML application as well
as being supported by all major browsers. XML is made to describe data and HTML is
made to display data. Today the market consists of different browser technologies,
some browsers run on mobile phones, some run on computers. If you combine the
strengths of the HTML and the XML it makes the useful XHTML. Instead of just using
page formats, XHTML can also include Mathematical mark-up language which displays
mathematical formulas and vector graphic images on the page.

Java Applets
A java applet is a small application written in Java and delivered to users in the form of
bytecode. The user launches the Java applet from a web page. The java applet then executes
within a JVM in a process separate from the web browser itself, but it can appear in a frame of
the web page in a new application window. Java applets were introduced in the first version of
the Java language in 1995. Java applets can be written in any programming language. Java
applets run at very fast speeds comparable to but slower than other compiled languages such as
C++ but until 2011 it has been many times faster than JavaScript. Java applets can be executed
by browsers for many platforms such as Microsoft, Windows, OS X, Linux and FreeBSD.

Animation Techniques

Optical Illusion of Motion

This is a theory that a strip of still images in any order can be given the effect of animation if it is
viewed by a human at a certain rate. Persistence of vision is another term for this phenomenon
in the realm of cinema history. Audiences still interpret motion at rates as low as ten frames per
second or slower. In drawn animation, moving characters are shot in twos this means that one
drawing for example is shown for every two frames of film, which means there are only 12
drawing per second. A blend of the two techniques keeps the eye fooled plus without
unnecessary production cost.

Claymation
Clay animation is one form of stop motion animation. Each animated piece, either background
or character is deformable. It is made of malleable substance such as plasticine. All traditional
animation is produced in the same fashion and done through cel animation or stop motion.
Every single frame is recorded on film or digital media and then played back in very fast
succession. The playback feature creating an illusion is true of all moving images The techniques
involved with creating a CGI are normally removed from a frame-by-frame process. In clay
animation every object is sculpted in clay or another pliable material such as plasticine. This
form of object animation, the object or character is then moved by hand slightly. Another frame
is taken and again the object is moved slightly, this is repeated until the animator has what they
need for the film.

Stop Motion
Stop motion is an animation technique, that makes a physically manipulated object and it looks
like it is moving on its own. Dolls with movable joints or clay figures are often used in stop
motion for their ease of repositioning. Stop motion animation using Plasticine is called clay
animation or Claymation. Flash is one of the most common pieces of software used in the
industry. Not all stop motion requires figures or models; many stop motion films can involve
using humans, household appliances. Stop motion using objects is sometimes referred to as
object animation.

Computer Generation
Frame rate is the frequency at which an imaging device produces unique consecutive images
called frames. Frame rate is most often expressed in frames per second and also expressed in
progressive scan monitors as hertz. A key frame in animation is drawing which defines the
starting and ending points of any smooth transition. The drawings are called frames because
their position in time is measured in frames on a strip of film. Because only two or three key
frames over the span of a second do not create the illusion of movement, the remaining frames
are filled with in-betweens. Onion skinning is a 2d computer graphics term for creating animated
cartoons and editing movies to see several frames at once. The animators would put the next and
previous drawings exactly beneath the working drawing so they can draw the in between to give
a smooth motion. Tween is actually short for in between and refers to the creation of successive
frames of animation between key frames. In computer animation the term is used for Flash
processes.

Digital Animation

Vector and Raster Animation

Vector animation is a term used to refer to animation whose art or motion is controlled by
vectors rather than pixels. Vector animation often allows cleaner, smoother animation
because images are displayed or resized using math values instead of stored pixel values.
One of the most commonly used vector animation programs is Macromedias Flash. Raster
based animation frames are made up of individual pixels. These pixels each contain
information about the colour and brightness of that particular spot on the image. Raster
animation is used for depicting realistic representations of people, places or animals rather
than the more stylized anime-style animation you might get with vector graphics. Raster
animations is also use to create animation for banners or logo based on pictures or
drawings.

Compression
A technique which is a compression algorithm by Apple is best suited to animation and
computer-generated video content. The animation compressor can be used to compress
sequences of screen images. It can store images and it can work in either a lossy or lossless
mode. The lossless mode maintains picture maintains picture content by storing an
animation as a series of run-length encoded images. The lossy mode can lose image quality.
FLA is the format in Adobe Flash for authoring in and storing work that is still in progress or
under development. FLA files are then converted into SWF format. MNG is a format for
storing multiple bitmaps and animations. When storing images MNG allows both lossless
compression similar to PNG and lossy compression similar to JPEG.

SVG and SWF

SVG is a text based graphics language that describes images with vector shapes, text, and
embedded raster graphics. SVG files provide resolution independent, high resolution dots per
inch, graphics on the web, in print, and on mobile devices in a compact format. The ability to
make SVG with CSS and the support of scripting and animation makes SVG an integral part of the
web platform. SVG is interactive, data-drive, personalized graphics. SWF is an Adobe Flash file
format used for multimedia, vector graphics and ActionScript. SWF files can contain animations
or applets of varying degrees of interactivity and function. SWF can be on Flash, Flash Builder,
After Effects, MXMLC and Flex SDK.

Software and Plugins

Flash
Adobe Flash is a multimedia and software platform used for authoring of vector graphics,
animation, games and RIAs which can be viewed, played and executed in the Flash Player. Flash
is frequently used to add streamed video or audio players, advertisement and interactive
multimedia content to web pages but usage of Flash on website is declining. Flash content
accessible on various computer systems and devices and is available free of charge for common
web browsers (as a plug-in) under a few of the major operating systems, some smartphones and
tablets, and a few other electronic devices using Flash Lite. Flash manipulates vector and raster
graphics to provide animation of text, drawings, and still images.

Swish
Swish is a Flash creation tool that is commonly used to create cross-platform and
interactive movies, animations and presentations. Swish Max is generally
considered to be a simpler and less costly Flash creation tool in comparison with
Adobe Flash. Swish Max does not support some Adobe Flash features such as
ActionScript 3.0, shape tweens, and bitmap drawing capabilities.

Director
Adobe Director is a multimedia application authoring platform created by
Macromedia. It allows users to build applications built on a movie metaphor
with the user as the director of the movie. Adobe Director supports both 2D and
3D multimedia projects. Originally designed for creating animation sequences,
the addition of a scripting language called Lingo made it a popular choice for
creating CD-ROMs and standalone kiosks and web content using Adobe
Shockwave.

Players
The Adobe Flash Player is freeware software for viewing multimedia, executing rich Internet
applications, and streaming video and audio, content created on the Adobe Flash platform. Flash
Player supports vector and raster graphics, 3D graphics, an embedded scripting language called
ActionScript executed in ActionScript Virtual Machine, and streaming of video and audio. Adobe
Shockwave is a multimedia platform used to add animation and interactivity to web pages. It
allows Adobe Director applications to be published on the Internet and viewed in a web browser
on any computer which has the Shockwave plug-in installed. RealPlayer is a cross-platform
software product created by Real Networks primarily used for the playing of recorded media.
QuickTime is an extensible multimedia framework developed by Apple Inc., capable of handling
various formats of digital video, picture, sound, panoramic images, and interactivity.