1. Ben Henderson
Investigate the uses of web animation unit 65
Banner ads
Banner adverts are animated gifs that are used to promote and advertise a product. They are used
to attract the viewers’ attention by moving, changing colour, changing images, and making sound so
the viewer of the site will see and be drawn to the banner advert and click on it to learn more about
the product/service. They are located on most
websites, usually at the sides or along the top of
the web page. They are located on most websites
and especially popular websites such as social
networking sites, eBay, and amazonetc.
An example of a banner ad is on the image it is
located on the left side of the page and has moving
text and images.
An advantage of a banner advert is that it is an easy
way to grab a viewers attenetion. Although a disadvantage is that viewers of websites usually
associate banner ads with unfriendly, virusous sites that could a harm their computer.
Animated interface elements
Animated interface elements are animated websites or videos thatare completely
animated and are usually created in a program such as flash. Animated interface
elementsoften uselinear animation and interactive animation or
both.www.thesimpsons.comis an example of a completely animated website
created almost entirely in flash.
An advantage of animated interface elements is that they grab the
audience’s attention, and are entertaining to watch more than a
simple web page. A disadvantage is that they can take a considerable
amount of time to load.
2. Ben Henderson
Linear and interactive animations
Linear animation is where the animation takes you from start to finish without stopping like a
regular film, whereas an interactive animation is in stages and the viewer can choose what can
happen. One of the best examples of this iswww.thesimpsons.com. This is because when the
website has loaded up it goes into a linear animation showing a
short little cartoon to set the theme of the website, which in this
case is a careers day at a school. Then it uses interactive
animation, in the form of buttons that can direct the web user to
various parts of the website that they want. When the user clicks
a button it goes into a different linear animation, transporting
the user to a different page by showing them via the animation
moving into a different room at the school.
An advantage of linear animation is that they can be
entertaining to watch, but a disadvantage is that you can’t
control it. An advantage of interactive animation is that you
can control what happens, but an disadvantage is that they tend to run for a long time, and stop
start.
Promotion
Web animations are also used to help promote, products or websites. They often placed on many
popular websites such as Facebook, twitter, amazon, etc.
Instruction
Instructional animations are used to help people learn, by showing them what to do and explaining
how to do it in the animation usually using
interactivity. An example here is how to use
Macromedia Flash professional 8. The animation
takes you through the software showing you what
buttons to press and what they do. It is interactive
because the animation actually allows you to click
the buttons and type sentences into the animation.
Information
Informational animations are used to portray information in a user friendly interactive style. This can
vary from formal information like what might be used on internet news shows, or informal
information like what size clothes are on a shopping website.
3. Ben Henderson
Entertainment
Web animations are usually used by companies or websites solely to attract the viewer’s attention.
But websites often use animations for the purpose of entertainment. Websites such as
www.thesimpsons.comare used to entertain the website viewer, raise awareness of the show, and
to sell merchandise.It is no a serious, formal website
Investigate the development of animation
Flick books
Flick books are hand drawn images on a page in a book. Each page is like a frame in animation
software. Each image is slightly altered and moved on every page to create the illusion of movement
the pages of the book are flicked through.
Animation using DHTML
Using DHTML isn’t as popular as using the likes of flash for animation but has been largely
recognised in the past. DHTML or Dynamic Hypertext Mark-up Language can help with the creation
of animations and dynamic menus on web pages. The DHTML code is made up of HTML, CSS and
Java Script. As versatile as it is in earlier platforms, users running Windows 95 or Windows 98 won't
get the smooth animation you hope they would. Even by trying to increase the speed, there is still a
limit on how fast you can allow your animation to go with DHTML and therefore how smooth it will
play. Therefore, it is not very cross-platform compatible. However, DHTML animation well work
fairly well on all platforms if it is carrying out simple animation such as transitional effects, drop
down menus, wipe effects and other animations with a small duration. Animation using DHTML is an
easy way of making a site interactive for the user without the need of a lot of code and testing.
Animation using XHTML
XHTML or Extensible Hypertext Mark-up Language.XHTML is a spinoff of the hypertext mark-up
language (HTML) used for creating Web pages. It is based on the HTML 4.0 syntax, but has been
modified to follow the guidelines of XML, the Extensible Mark-up Language. Therefore, XHTML 1.0 is
sometimes referred to as HTML 5.0.
Because XHTML is "extensible," Web developers can create their own objects and tags for each Web
page they build. This gives the developers more control over the appearance and organization of
their Web pages. The only requirement is that the custom tags and attributes are defined in a
document type definition (DTD) that is referenced by the XHTML page.
4. Ben Henderson
Java Applets
Java applets are small programs used on web pages to help operate animation. Unlike DHTML java
applets are quite cross platform compatible. This is because Java interpreters are not available on all
platforms and don’t always agree about what they consider to be proper code. Java applets primarily
are used to provide interactive features to web applications that cannot be provided by HTML, they
create motion on screen by drawing successive frames at a high speed of around 10 – 20 times per
second.
Investigate Animation Techniques
The optical illusion of motion (persistence of vision)
Persistence of vision is where the eye can see an afterimage for a fraction of a second longer than
normal creating the illusion of movement, although if the frame rates (the rate in which frames are
played) is slower than 10-12 rates you would be able to see each image individually, which would
make the animation look jumpy and unprofessional.
Stop motion
Stop motion animation is where you create the illusion of motion, movement of an object by taking
a vast series of photographs. These are then usually transferred to a computer program and given a
frame rate of 10-12 frames per second (fps) although this can vary. At this speed, when the photos
are played one after another together creates the illusion of movement. If the frame rate is any
slower the animation would look unappealing and unprofessional, because it would look like the
animation is “jumping” from frame to frame.
Claymation
Clay animation or Claymation is a form of stop motion animation. Usually the character or the
background or both are made of clay. The clay character is sculpted then placed where it needs to
be. Then you take a photograph of the clay character, move it slightly, and take another picture etc.
until the animator gets the desired effect.
Investigate Digital Animation
Vector animation
Vector animation is a type of digital animation. These vector animations are created on a computer
program such as flash because this is a vector animation program. Vector animation has the
capability to have cleaner, smoother animations. This is because the images or frames are displayed
and can be resized using mathematical values, instead of stored pixel values, like raster (bitmap).
The files are a lot smaller as well because the animation program doesn’t have to save the colour of
every pixel unlike raster images.
5. Ben Henderson
Raster (bitmap) animation
Raster (Bitmap) animation is another type of digital animation.Rasteranimation formats stores pixel
data and has to save information about the colour of every pixel in the image. This can take up a lot
of memory so the file size is larger and can take a longer time to load. Also if you have to resize an
image or frame, the pixels stretch and the image becomes blurry.
Investigate Web Animation Software and web player
plugins
Flash and Director
Flash and Director both use layers and timelines to create animations. Also both programs are vector
based so animation can load quicker. They both use key frames and tweens to animate between the
key frames. Also they both can export files into a shockwave file, which can be embedded onto most
websites.