AnimationAnimation

Illusion of MotionIllusion of Motion– Series of gradually changing drawn imagesSeries of gradually changing drawn images– Vector images rendered as bitmapsVector images rendered as bitmaps– Requires little disk space - ~1KB per frame @ Requires little disk space - ~1KB per frame @

320 x240320 x240– Effective medium for illustrating moving Effective medium for illustrating moving

functionality or adding animated cartoon-like functionality or adding animated cartoon-like interludesinterludes

Animation creationAnimation creation

Created by an Animation program Created by an Animation program

Or imposed by MM applications tools on Or imposed by MM applications tools on components used within it – do not exist components used within it – do not exist as independent filesas independent files

Native or Proprietary Native or Proprietary Formats?Formats?

Can be kept in Animation Application’s native Can be kept in Animation Application’s native format if usable by MM Application or Web format if usable by MM Application or Web browserbrowser– Autodesk Animator (Pro)/3d-Studio are PC formats Autodesk Animator (Pro)/3d-Studio are PC formats

((.FLC, .FLI.FLC, .FLI))– Animated GIF fileAnimated GIF file

PhotoShop/Fireworks can create them through Image ready PhotoShop/Fireworks can create them through Image ready Add onAdd on

Premiere canPremiere can

Native or Proprietary Native or Proprietary Formats? 2Formats? 2

Shockwave Flash file – widely used on the Web Shockwave Flash file – widely used on the Web (.(.SWFSWF))– created by Macromedia Flashcreated by Macromedia Flash

– imported by Directorimported by Director

Apples PICS animation format is a sequence of Apples PICS animation format is a sequence of PICT imagesPICT images

Can be converted to Can be converted to QuickTime QuickTime or or AVI AVI video file video file formatformat– Premiere can do this but the result is a piece of Premiere can do this but the result is a piece of

Video media not an animationVideo media not an animation

Animation: Animation: QuestionsQuestions

What can be animated?What can be animated?

Are there different sorts of animation?Are there different sorts of animation?

What can animations be used for within an What can animations be used for within an application of multimedia?application of multimedia?

Types of Animation Types of Animation & Terms& Terms

CelCel

Flip-book or Frame-basedFlip-book or Frame-based

Sprite or Cast -basedSprite or Cast -based

PathPath

VectorVector

CharacterCharacter

Cel AnimationCel Animation

Celluloid - LayersCelluloid - Layers– One for BackgroundOne for Background– One for each moving objectOne for each moving object

called a called a celcel

– One frameOne framebackground plus objectsbackground plus objects

Computer animation derived from cel Computer animation derived from cel animationanimation– uses a lot of its terminologyuses a lot of its terminology

Flip-book Flip-book AnimationAnimation

Series of complete drawingsSeries of complete drawings– each slightly different from the lasteach slightly different from the last

Each frame is a complete imageEach frame is a complete image

Animation created by showing each frame in Animation created by showing each frame in rapid successionrapid succession

Machine must be capable of doing thisMachine must be capable of doing this– depends on image complexity for vectorsdepends on image complexity for vectors– depends on colour depth for bitmapsdepends on colour depth for bitmaps

Sprite AnimationSprite Animation

Computer version of Computer version of Cel AnimationCel Animation

Sprites or Cels are rectangular areas of the Sprites or Cels are rectangular areas of the screen containing one or more different screen containing one or more different bitmap images of the spritebitmap images of the sprite

Only first frame of sequence is generated Only first frame of sequence is generated completelycompletely– other frames alter just the sprite(s) areaother frames alter just the sprite(s) area– often use memory buffer where alteration to often use memory buffer where alteration to

sprite area is made before displaysprite area is made before display

Path AnimationPath Animation

Sprites may be further animated by moving Sprites may be further animated by moving it along a motion-pathit along a motion-path– some sprites demand thissome sprites demand this

running man, flying birdrunning man, flying bird

– some don’tsome don’trotating earthrotating earth

Can be applied to static spritesCan be applied to static sprites– texttext– ballball

Path Animation 2Path Animation 2

Motion paths are typically defined by curves Motion paths are typically defined by curves made of line segmentsmade of line segments– end points of each segment can be movedend points of each segment can be moved– sprite moves uniformly between end pointssprite moves uniformly between end points

the closer the end points the more slowly it appears to the closer the end points the more slowly it appears to movemove

– more sophisticated paths are spline-curvesmore sophisticated paths are spline-curvesIf the motion represents accelerationIf the motion represents acceleration

– need to be able to vary rate of motionneed to be able to vary rate of motionrunning man starting from standstillrunning man starting from standstillbouncing ballbouncing ball

Spline-based Spline-based AnimationAnimation

A spline is a mathematical representation of A spline is a mathematical representation of a curve - used in most drawing programsa curve - used in most drawing programs– defined by a series of anchor points for the defined by a series of anchor points for the

curvecurve– can manipulate the curve by moving the two can manipulate the curve by moving the two

control handles on each anchor pointcontrol handles on each anchor pointexcept the end points of the line which have only except the end points of the line which have only oneone

– the program can ensure that the curve passes the program can ensure that the curve passes through the anchor points smoothly if requiredthrough the anchor points smoothly if required

Vector-based Vector-based AnimationAnimation

Similar to bitmap sprite-based animation but Similar to bitmap sprite-based animation but uses vector drawings for spriteuses vector drawings for sprite

Advantages:Advantages:– small file size for spritesmall file size for sprite

can be manipulated more quicklycan be manipulated more quickly

– sprites are scaleable without pixellationsprites are scaleable without pixellationbitmap sprites become jaggedbitmap sprites become jagged

Character Character AnimationAnimation

Animation of “living” objectsAnimation of “living” objects– often complexoften complex– multiple secondary hierarchical motionsmultiple secondary hierarchical motions

Often uses Often uses Inverse KinematicsInverse Kinematics (IK) (IK)– definitions derived from scientific study of how definitions derived from scientific study of how

connected parts move when one part is given connected parts move when one part is given a specified motiona specified motion

hand is raised; IK defines how lower arm, elbow, hand is raised; IK defines how lower arm, elbow, upper arm and shoulder should move realisticallyupper arm and shoulder should move realistically

Key FrameKey Frame

In traditional animation the best animators In traditional animation the best animators only drew most important frames; these only drew most important frames; these established the main dramatic poses, established the main dramatic poses, defined the flow of action and created the defined the flow of action and created the animation’s graphic style. Defines the action animation’s graphic style. Defines the action or places at which scene or view changes.or places at which scene or view changes.

Computing Computing KeyframesKeyframes

in computer usage a in computer usage a key framekey frame is one in which is one in which the whole of the information required to the whole of the information required to create the on-screen image is stored as create the on-screen image is stored as opposed to just the information about the opposed to just the information about the changes between one frame and anotherchanges between one frame and another

in Flash a in Flash a keyframekeyframe is any frame that contains is any frame that contains new content or in which a user controlled new content or in which a user controlled property of a sprite changesproperty of a sprite changes

TermsTerms

Frame RateFrame Rate: rate at which frames are : rate at which frames are displayed - usually per seconddisplayed - usually per second– film is 24 fps; UK TV is 25 fps; 10-15 usually film is 24 fps; UK TV is 25 fps; 10-15 usually

acceptable for web animation acceptable for web animation

TweeningTweening: drawing of the frames (tweens) : drawing of the frames (tweens) in between key frames - done by other in between key frames - done by other animators. Done now by animation animators. Done now by animation programsprograms

Terms 2Terms 2

TimelinesTimelines: axes representing time along : axes representing time along which the start and end timings of which the start and end timings of individual objects, such as sprites can be individual objects, such as sprites can be specifiedspecified

TracksTracks: objects in timelines are often : objects in timelines are often represented by a series of images represented by a series of images occupying the time allocatedoccupying the time allocated

Terms 3Terms 3

Animation sequencerAnimation sequencer: software that organises : software that organises the display/play sequence of objects in an the display/play sequence of objects in an animation; frequently uses timelines with animation; frequently uses timelines with tracks and provides a preview of the resulttracks and provides a preview of the result

Frame transitionsFrame transitions: computer generated : computer generated tweens may result in highly noticeable abrupt tweens may result in highly noticeable abrupt changes at the key frames; these frame changes at the key frames; these frame transitions need to be smoothed awaytransitions need to be smoothed away

Morphing:Morphing: the generation of tweens for the the generation of tweens for the change in shape and appearance from one change in shape and appearance from one photographic image to another. The photographic image to another. The photographic equivalent of tweeningphotographic equivalent of tweening

Terms 4Terms 4

RotoscopingRotoscoping: drawing on top of existing : drawing on top of existing film, video or animationfilm, video or animation– PhotoShop can do rotoscoping using the PhotoShop can do rotoscoping using the

filmstrip (.filmstrip (.FLMFLM) format exported by Premiere) format exported by Premiere

Particle system animationParticle system animation: generating : generating effects by defining the behaviour of a effects by defining the behaviour of a swarm of particles: smoke, rain, swarm of particles: smoke, rain, explosions explosions

What do Authoring What do Authoring packages do?packages do?

Most can do some animation within themMost can do some animation within them

Many can animate TextMany can animate Text

Some do path animationSome do path animation

Some can animate graphsSome can animate graphs

Some provide spritesSome provide sprites ( (actorsactors) ) Flash’s two types of sprite are called either:Flash’s two types of sprite are called either:

– animated graphic symbolsanimated graphic symbols– movie-clip symbolsmovie-clip symbols

Tips: When Using Tips: When Using AnimationAnimation

Great animation can enhance a titleGreat animation can enhance a title

Keep it simpleKeep it simple

Test out your animationTest out your animation– the type of motionthe type of motion– and the style of the artworkand the style of the artwork– and the frame rateand the frame rate

Where Do You Where Do You Get Animation?Get Animation?

Create them yourselfCreate them yourself– If you If you createcreate, you own it, you own it

Copy them from another sourceCopy them from another source– If you If you copycopy, you don’t own it but you may or , you don’t own it but you may or

may not be entitled to use itmay not be entitled to use it

Copyrights must be satisfiedCopyrights must be satisfied

License from Stock film and music houses: License from Stock film and music houses: products now available on CD-ROM/DVDproducts now available on CD-ROM/DVD

Multimedia Multimedia Authoring PackageAuthoring Package

Flash will import:Flash will import:– QuickTime movies – Most QuickTime movies – Most

animation packages can animation packages can create QT moviescreate QT movies

– Flash animationsFlash animations– Most Digital Video Most Digital Video

formatsformats

Flash can then animate Flash can then animate any visual media itemany visual media item

WWW PagesWWW Pages

Animations can be provided by:Animations can be provided by:– animated GIF files, animated GIF files, – Java applets, Java applets, – Javascript, Javascript, – Macromedia Flash movies, Macromedia Flash movies, – Shockwaved Director moviesShockwaved Director movies– and Dynamic HTMLand Dynamic HTML

Animation FormatsAnimation Formats

Animations in other formats Animations in other formats

(QuickTime, (QuickTime,

Autodesk Animator, Autodesk Animator,

3-D Studio, etc) 3-D Studio, etc)

can also be converted into video file formats: can also be converted into video file formats: .avi, .mov, and .mpg.avi, .mov, and .mpg

Using Using Animated Animated GIFS GIFS

Use of animated GIFs should not be Use of animated GIFs should not be overdone; experienced browsers are overdone; experienced browsers are generally fed-up with them and generally fed-up with them and consider them a distractionconsider them a distraction– avoid more than one on a pageavoid more than one on a page

– use it to communicate something in a truly use it to communicate something in a truly clever wayclever way

– don’t use where it may distractdon’t use where it may distract

Use of Animated Use of Animated GIF’s - 2GIF’s - 2

– consider whether you can really justify consider whether you can really justify the extra bandwidththe extra bandwidth

– don’t make it loop unnecessarily – don’t make it loop unnecessarily – once is often more than enoughonce is often more than enough

– try long pauses between loopstry long pauses between loops

Reducing Animated Reducing Animated GIF SizesGIF Sizes

general GIF suggestions apply – in general GIF suggestions apply – in particular low bit depth – 16 or 32 coloursparticular low bit depth – 16 or 32 colours

keep the number of frames to a minimum – keep the number of frames to a minimum – though if each frame is small and the though if each frame is small and the frame delay is not too small the may frame delay is not too small the may download quickly enough to keep up with download quickly enough to keep up with demanddemand

OptimisingOptimising

GIF creation tools may offer optimisation, GIF creation tools may offer optimisation, e.g.:e.g.:– frame differencing – only the pixels that have frame differencing – only the pixels that have

changed are stored for each framechanged are stored for each frame

Adding Animation Adding Animation to a Web Pageto a Web Page

Animated GIF files specified as ordinary in-line Animated GIF files specified as ordinary in-line graphics, e.g.:graphics, e.g.:– <IMG SRC=”animation.gif”><IMG SRC=”animation.gif”>

Let Dreamweaver generate the HTML code for Let Dreamweaver generate the HTML code for you!you!– Use Insert, Applet and point to the Java class file Use Insert, Applet and point to the Java class file

you needyou need– <APPLET CODE=”BounceItem.class” <APPLET CODE=”BounceItem.class”

CODEBASE=”BouncingHeads”CODEBASE=”BouncingHeads” WIDTH=”300” HEIGHT=”500”></APPLET> WIDTH=”300” HEIGHT=”500”></APPLET>

JavaScript JavaScript AnimationAnimation

Let Dreamweaver generate the HTML code for Let Dreamweaver generate the HTML code for you!you!– use Insert, Script and leave the Script box empty use Insert, Script and leave the Script box empty

(unless you are copying and pasting a JavaScript (unless you are copying and pasting a JavaScript script)script)

– then use the Property Inspector to specify the then use the Property Inspector to specify the language as JavaScript and then to point to the language as JavaScript and then to point to the JavaScript file you needJavaScript file you need

JavaScript:JavaScript:– <SCRIPT LANGUAGE=”javascript” <SCRIPT LANGUAGE=”javascript”

FILE=”hello.js”></SCRIPT>FILE=”hello.js”></SCRIPT>

FlashFlash

Flash movies can be placed on a Web Flash movies can be placed on a Web page after they have been page after they have been Shockwaved (.swf) - normalShockwaved (.swf) - normal– and they involve relatively small files even and they involve relatively small files even

for something complicatedfor something complicatedthey are based on vector graphicsthey are based on vector graphics

These can be placed on the page in These can be placed on the page in DreamweaverDreamweaver– <<EMBEDEMBED …> or < …> or <OBJECTOBJECT>>

Specification for Specification for animationanimation

As animations are dynamic media they need to As animations are dynamic media they need to be specified at greater length than a static be specified at greater length than a static media itemmedia item

A way of indicating the “animation” involved is A way of indicating the “animation” involved is neededneeded

This could be:This could be:– A series of “thumbnails” indicating the important A series of “thumbnails” indicating the important

changes - a storyboardchanges - a storyboard– A written description –a ScriptA written description –a Script– or probably bothor probably both

StoryboardsStoryboards

For animation creation a plan is vitalFor animation creation a plan is vital

The appearance of the animation is normally The appearance of the animation is normally represented on a storyboardrepresented on a storyboard

Every change of scene must be indicated – Every change of scene must be indicated – including viewpoint, etc.including viewpoint, etc.

The duration of each scene and the principal The duration of each scene and the principal activities recorded must be indicated visually activities recorded must be indicated visually with annotation as necessarywith annotation as necessary

The important point is that everything visual is The important point is that everything visual is specified on the storyboardspecified on the storyboard

ScriptsScripts

The important features of the animation must be The important features of the animation must be described in the scriptdescribed in the script

– particularly timingsparticularly timings– the transitions between scenesthe transitions between scenes

Scripts - 2Scripts - 2

The important features of the animation to be The important features of the animation to be described are:described are:

– Appearance of main elementsAppearance of main elements– Appearance of the background (if self-Appearance of the background (if self-

contained)contained)– The motion animation of each elementThe motion animation of each element– The relative timings of these component The relative timings of these component

animationsanimations

These could be presented as a separate These could be presented as a separate timelinetimeline

Scripts - 3Scripts - 3

The description of the animation of the The description of the animation of the elements involved must be clear and elements involved must be clear and unambiguousunambiguous

The script may describe actions to be The script may describe actions to be mimicked and styles to be adoptedmimicked and styles to be adopted– modern animations can be highly realistic (3D) or modern animations can be highly realistic (3D) or

cartoon-like (2D)cartoon-like (2D)

– so specification must indicate a standard of so specification must indicate a standard of realism to work torealism to work to

Event soundEvent sound

The crash bang wallop in an animationThe crash bang wallop in an animationFor sound effects the script will be fairly For sound effects the script will be fairly

simplesimple

– The activities that produce the required The activities that produce the required noisenoise

– Background noises (if desired)Background noises (if desired)

– The durationThe duration

Music/SoundMusic/Sound

For music in place of or in addition to sounds For music in place of or in addition to sounds effects:effects:

– The StyleThe Style– The FlairThe Flair– The Emotive KeyThe Emotive Key– The DissonanceThe Dissonance– Major to Minor key changes and their exact Major to Minor key changes and their exact

timing to synchronise with other on-screen timing to synchronise with other on-screen eventsevents

– The moods to be matched and their timingsThe moods to be matched and their timings

Sound -2 Sound -2

For narrative in place of or in addition to For narrative in place of or in addition to sounds effects and/or music:sounds effects and/or music:– The voiceThe voice– The pace and timingsThe pace and timings– The actual words to be spokenThe actual words to be spoken

Be aware of Accessibility requirements – Be aware of Accessibility requirements – – where possible provide subtitleswhere possible provide subtitles

The important thing is that The important thing is that everything is specifiedeverything is specified!!

Don’t use a script and you risk Don’t use a script and you risk animating something you’ll throw animating something you’ll throw

awayaway

Hint: Have you ever seen a Hint: Have you ever seen a deleted scene on an animated deleted scene on an animated

movie DVD?movie DVD?

Time LinesTime Lines

The principal indications are The principal indications are – the visible duration (appear and disappear) of the visible duration (appear and disappear) of

the symbolsthe symbols– the duration of movement (start and finish) of the duration of movement (start and finish) of

the symbolsthe symbols

In the creation package time line(s) these In the creation package time line(s) these may be clearly indicated separately may be clearly indicated separately (Flash) or may be hidden in an indication (Flash) or may be hidden in an indication of “on-stage” time onlyof “on-stage” time only