Using Multimedia on the Web

1
Using Multimedia on the Web Animation
2
Animations pervade the Web - from banner ads to
complex diagrams of scientific processes. What
do we mean by animation? - Anything that moves on
the screen - A drawing (or image) that moves,
bringing the drawing to life. More formally,
the term animation generally refers to any time
sequence of visual changes in a scene. In
addition to changing object position with
translations and rotations, an animation could
display time variations in object size, colour,
transparency or surface texture.
3
Animation may be used for - Entertainment
(action, realism) - Education (visualization,
demonstration) Animation is a powerful tool
capable of communicating complex ideas. E.g. How
the heart beats http//www.smm.org/heart/heart/t
op.html Easier to show somebody how something
works then to try and explain it.
4
Animation may be used to capture attention and
entertain viewers. But, if shown repeatedly in
an endless loop - it becomes a distraction
5
Animation is possible because of a biological
phenomenon know as persistence of vision - An
object seen by the eye remains mapped on the
eyes retina for a brief time after
viewing. This makes it possible for a a series
of images that are changed very slightly and very
rapidly, one after the other, to seemingly blend
together into a visual illusion of movement. In
other words, if you are changing slightly the
shape or position of an object rapidly enough,
the eye will perceive the changes as motion. (The
same is true for video.)
6
In order to achieve an animation in which the
movement is non-jerky, the frames should be
displayed at least at a rate of 10 frames per
second (fps). A better rate is 20-30 frames per
second. Example bouncing ball animated gif
The bouncing ball animation consists of these 6
frames.
7
Examples Bouncing Ball.gif Horse.gif Rotating
Earth.gif Bouncing Beach Ball.png
8
Possibilities for Animation on the
Web Animations that entertain and promote e.g.
banner advertising Animations that explain a
process or guide you through a series of
steps Animations that set a mood or create an
on-screen environment
9
Animation particularly good for training and
educational sites E.g. http//auto.howstuffworks
.com/engine1.htm
10
Simple animation Via - animated GIF and PNG
images - Dynamic HTML (DHTML) gtgt HTML
JavaScript
11
Advanced animation Via - Flash animations
developed by Adobes Flash CS4 authoring tool
vector graphics (.swf) - Shockwave animations
produced by Adobes Director authoring tool
highly sophisticated - can include streaming
audio and video (.dcr) Shockwave is the export
format of Director files gtgt used extensively
for on-line games gtgt can contain sound,
animation, graphics and 3D components.
12
See The Difference between Flash and
Shockwave http//www.howstuffworks.com/web-anima
tion6.htm
13
Uses of Animation

• Computer-Based Training Programs
• Demonstrate the way something works
• e.g. assemble parts,
• adjust controls,perform surgery.
• http//www.dnalc.org/stemcells.html
• Education
• Teach applied and hands-on skills
• Examples
• Spelling and foreign language programs for
  students
• Programs that prepare students for exams
• Learning to play a musical instrument
• Athletes learning techniques in their sport
• Games
• All games on the market, e.g. Playstation,
  Nintendo, Xbox, etc.
• Web
• Animated buttons, banners, text, and characters
  are used for visual appeal for example to
  market/advertise services and information.
  http//www.entheosweb.com/photoshop_templat
  es/flash_intros.asp

14
Types of Animation

• Two categories of animation exist
• 2-D animation
• via Frame animation
• via Path animation
• 3-D animation

Watch this short movie about animation
techniques http//www.nfb.ca/film/animando_engli
sh/
15
2-D animation 2-D animation figures are created
and/or edited on the computer using authoring
tools that work with either 2-D bitmap graphics
and/or 2-D vector graphics. This includes
automated, computerized versions of traditional
animation techniques such as of tweening,
morphing, onion skinning, etc.
16
3-D animation 3-D animation digital models are
developed around a mesh which is given a digital
skeletal structure that can be used to control
the mesh. Various techniques can be applied,
such as mathematical functions (e.g. gravity,
particle simulations), simulated fur or hair,
effects such as fire and water, etc. Many 3-D
animations are very believable and are commonly
used as visual effects for professional films.
17
Animation on the Web Two kinds of animation
technologies are used on the Web - frame
animation - vector animation These two types
created with different tools, compressed in
different ways, and saved in different file
formats.
18
Frame Animation (aka Cel Animation) Frame
animation animates a graphical object by creating
smooth transitions between various
(key)frames. - Displays a sequence of still
images or frames, one after another in rapid
succession ? creates illusion of
animation. Each frame is only slightly
different from preceding one, and some parts of
the image are identical across the whole
sequence. Each frame is a bit-mapped image.
19
Simulation of movement through a series of
pictures or drawings, i.e. frames, that have
objects in slightly different positions .
A sequence of images frame-by-frame animation
20
Frame-by-frame animation is a technique that is
normally used for objects that evolve (i.e.
change shape). Aside the word cel derives
from celluloid - clear sheet material on which
images were drawn by movie animators. Examples
Walking.swf Cars.swf
Note Flash can be used to develop both frame-
and vector-based animations.
21
For simple animations may use .GIF or .PNG
formats. Special type of GIF file known as an
animated GIF. Most banner ads, and other small,
attention-seeking animations are created in this
frame-by-frame manner and may be saved in
animated GIF or PNG formats (via Photoshop or
Adobes Fireworks). - file contains all frames
and timing information, in compressed format.
When the GIF document is viewed, the multiple
images display, quickly and in succession, and
produce a streaming animation.
22
No plug-ins required animated GIFs require no
plug-ins. But no sound If you need sound in
addition to motion, you cannot use an animated
GIF by itself. Instead, you may want to
consider other animation alternatives, such as
Flash, or even video. Large animated GIF/PNG
files may require compression - each frame is
compressed as a still image, then a
frame-difference compression is applied.
23
Vector Animation (aka Path-based animation) So
called because object moves along a pre-defined
path or vector. Path may be straight line or
any curve. Often object does not change (but is
resized or rotated by the authoring software,
e.g. Flash.) Path animation easier to create
than cel based animation. Specify beginning and
end position of object.
24
A more complex type of animation than frame-based
- object moves along a defined path (vector) on
the screen. - draw object and then define its
path. E.g. object 40 x 60 pixel rectangle
colour red parabolic path starting at (12, 34)
and ending at (56, 45) speed 12 pixels per
sec. No bitmap, no sequence of frames. Browser
displays vector animation using a plug-in. -
Most common plug-in for vector animation is Adobe
Flash. Also now Microsoft Silverlight.
25
Example
26
Define points on a path, and properties at those
points Authoring software (e.g. Flash)
interpolates animation between key points (key
frames) to give the appearance that the first
image evolves smoothly into the second
image. Various options for how interpolation is
done.
27
Some Terminology Tweening (jargon for
in-betweening) is an animation technique that
interpolates the differences between two key
frames along a timeline. Tweening is best
suited for simple movement (a change in position
or scale). It can produce changes in scale,
position, color, rotation, and shape. Tweening
is the fastest and easiest way to animate an
object, and it gives you smaller file sizes.
28
Morphing is a special effect in animations that
changes (or morphs) one image into another
through a seamless transition. Process of
blending together two images into a series of
images. Useful for showing how image might change
over time Popular example Three frames from a
morph from George W. Bush to Arnold
Schwarzenegger showing the mid-point between the
two extremes
See also http//www.luisguillermo.com/chavstro/
29
Onion skinning is a term for a technique used in
creating animated movies to see several frames
at once. This way, the animator can make
decisions on how to create or change an image
based on the previous image in the sequence. -
The animators (aka in-betweener) would put the
previous and next drawings exactly beneath the
working drawing, so that they could draw the in
between to give a smooth motion. - In computer
software, this effect is achieved by making
frames translucent and projecting them on top of
each other.
30
Example Onion skin of frame 7 of Horse.gif
showing previous three frames
31
A vector animation can be much larger, contain
more moving objects, and last longer than a frame
animation of the same file size. Since vector
animation files contain less data, they do not
need compression. Various software tools such
as Flash, Fireworks, QuickTime plus others may be
used to create vector animations.
32
Cool web sites that use Flash http//www.zapiram
.es/ Click on ZAPIRAM http//www.pablogarib
ay.com/
33
(No Transcript)
34
May also use DHTML (Dynamic HTML) for creating
animation - specifically, the use of scripting
or programming languages such as JavaScript,
VBScript, Java or Visual Basic.
35
3-D Animation

• 3-D animation involves three steps
• Modelling
• Animating
• Rendering

Sample Demo
36
3-D Animation Process

• Modelling
• Process of creating broad contours and structure
  of 3D objects and scenes (draw views top,
  side, cross section.
• Animating
• Defining lighting and perspective views to create
  change during animation.
• Rendering

37
This is a website where all the images are
created by ray tracing and computers, yet they
look amazingly real (Check out the Hall of Fame).
Free software!
http//hof.povray.org/
38
Creating 3-D Animations Animations so far have
been 2-D Software packages are available for
creating 3-D animations e.g. Adobes Director -
Shockwave Uleads Cool 3D
Autodesks Maya used in the Lord of the Rings
film.
39
Embedding Animation in a Web Page GIF
animation Browsers treat animated GIFs in the
same way as ordinary static GIF images gt use
same HTML to embed an animated GIF. E.g.
ltimg src images/bouncingball.gif /gt
40
Other Animations Because Web browsers do not
naturally recognize and display animations in the
Flash (.swf) or QuickTime (.mov) format, these
files use plug-ins helper software Any file
that uses a plug-in should use the HTML object
element. But, to make your animation content
available to the maximum number of users, it is
recommended that you use both the object and
embed elements.
41
To place a Flash animation on the page with a
width of 550 and a height of 400, that plays and
loops automatically, you could use code like
this ltobject classid"clsidd27cdb6e-ae6d-11cf-9
6b8-444553540000" codebase"http//fpdownload.macr
omedia.com/pub/shockwave/cabs/flash/swflash.
cabversion8,0,0,0" width"550" height"400"
id"animation" align"middle"gt ltparam
name"allowScriptAccess" value"sameDomain" /gt
ltparam name"movie" value"animation.swf" /gt
ltparam name"quality" value"autohigh" /gt
ltparam name"play" value"true" /gt ltparam
name"loop" value"true" /gt ltparam
name"bgcolor" value"ffffff" /gt ltembed
src"test.swf" quality"autohigh"
bgcolor"ffffff" width"550" height"400"
name"test" align"middle" play"true"
loop"true" allowScriptAccess"sameDomain"
type"application/x-shockwave-flash"
pluginspage"http//www.macromedia.com/go/getflash
player" /gt lt/objectgt