animation illusion of motion –series of gradually changing drawn images –vector images rendered...
Post on 21-Dec-2015
221 views
TRANSCRIPT
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