MULTIMEDIA and COMMUNICATIONS Computer Science CS1033ab Animation

1
A Vision of Students Today
MULTIMEDIA and COMMUNICATIONSComputer Science
CS1033a/b Animation Lecture 8 Instructors
Laura Reid (section 001) Vivi Tryphonopoulos
(section 002)
2
Todays Agenda

• 4 Topics Left
• Video (2)
• Sound (1)
• Review (1)

• Announcements
• Warm Up
• Todays Lecture
• Animation

3
Announcements

• Assignment 2 Update

4
Announcements

• Assignment 3 - 15 Assignment 3
• Due Thursday, June 11, 2009 by Midnight
• Uploading to your gaul account (P drive) NOT
  panther see assigment writeup for details
• When you have finished your website. YOU MUST
  DOUBLE CHECK FROM A MACHINE NOT IN MIDDLESEX
  COLLEGE that ALL your links and images are
  working.
• Do this from a machine in one of the labs in
  Natural Sciences or from your home machine but do
  NOT double check your site from a middlesex
  college lab machine
• http//publish.gaul.csd.uwo.ca/jsmith34
  /assign3/
• YOU MUST STILL submit to WebCT
• Submission Form
• .txt file

5
http//www.youtube.com/watch?v8SBfN9ltF8c
Quote of the week "Animation can explain
whatever the mind of man can conceive. This
facility makes it the most versatile and explicit
means of communication yet devised for quick mass
appreciation.? Brad Bird
6
Warm Up Questions

• If you want a table in your webpage to
  automatically resize as the user resizes the
  window, then you should define it in terms of
  pixels not percentages
• True
• False

• Which of the following is the most important in
  terms of getting your website ranked highly in
  Google.
• A domain name with good keywords in it
• The number of links from your page to other pages
• The number of links from other pages to your page
• Having good keywords in the title
• Have good meta tag keywords.

7
Todays Agenda

• Introduction to Animation
• Uses of Animation
• Types of Animation
• 3D Animation
• Morphing
• Virtual Reality
• Break ?
• Animated GIFs
• Animated Software
• Animation in Movies

8
Announcements

• Assignment 3 is due Thursday, June 11 at
  midnight.
• Once you have posted your website on the P
  drive, test all you links from HOME!
• Remember Tas will mark Assignment 2 and mark will
  be on webct. It has an associated .xls file now
  in webct that will tell you your mark breakdown.
• Exam
• Sunday, June 14, 2 - 4 pm

9
Intro to Animation

• What is animation?
• A drawing that moves, bringing the drawing to
  life
• Animation is a powerful tool capable of
  communicating complex ideas
• How the heart beats
• Easier to show somebody how something works then
  to try and explain it

10
Intro to Animation

• Rely on animations moving images for effective
  communication
• Animation is used for
• Entertainment (action, realism)
• Education (visualization, demonstration)
• Why Use Animation?

Four Stroke Engine
11
Intro to Animation

• Simulation of movement through a series of
  pictures that have objects in slightly different
  positions
• Each drawing is called a ___________
• Required Frames Per Second FPS

• Facts
• Movies on film - ______
• TV ____________
• 9000 frames for five minute cartoon
• Computer animation
• jerky anything less

12
Intro to Animation

• In animation, each frame overlaps the previous
  one
• Movement is caused by
• ___________________

http//animationarchive.net/Behind20the20Scenes/
Animation20Basics/
13
Types of Animation

• Computer Based Training Programs
• Demonstrate the way something works ie. 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 grade
  school children
• Programs that prepare high school students for
  college exams
• Learning to play an instrument
• Athletes learning techniques in their sport
• Games
• All games on the market ie. Playstation,
  Nintendo, Xbox, gameboys
• 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_tem
  plates/flash_intros.asp

14
Types of Animation

• Two types of animation exist
• 2-D animation
• Cel animation
• Path animation
• 3-D animation

15
2-D Animation ? Cel-Based

• Cel (________) clear sheet material on which
  images were drawn by movie animators
• images placed on a stationary background.
• Background remains __________
• Object changes ______________
• Ex. Toonz software

Gaits of the Horse, by E. Muybridge (1834-1904)
A brief history of the first animated full length
feature Charlie Brown
16
2-D Animation ? Path-Based

• Moves object along ______________
• Path straight or any curves
• Often object does not change (but resized or
  rotated)
• Path animation easier to create than cel based
  animation
• Specify beginning and end position
• Tweening
• Software PowerPoint, Flash, 3DPlus, for
  example
• http//www.youtube.com/watch?vHOMFMQCiTLo (we
  will just watch the first 2 minutes)

17
2-D Animation ? Path-Based

18
2-D Animation ? Path-Based

• Animation Software Features
• Frame Rate
• Transitions
• User Control
• Looping

19
3-D Animation

• 3-Dimensional animation involves 3 steps
• Modelling
• Animating
• Rendering

Sample Demo
20
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
• _________________________

21


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)
http//hof.povray.org/
22
Animation ? Some Special Effects

• Morphing
• Process of blending together two images into a
  series of images
• Useful for showing how image might change over
  time
• Warping
• ________ a single image
• Warp frown into smile

23
Animation ? Some Special Effects

• Virtual Reality (VR)
• Creates environment where user becomes part of
  the experience
• Boeing flight simulators of airplane cockpits
  (hydraulic controlled on legs)
• CD based adventure games point and go thru
  doors, stairs
• Hand-held equipment allows person to interact
  with environment

A 2D cockpit for a Boeing 737. Some gauges are
retained from the default MSFS 737, while others
are modernized. Some non-functional controls are
included in the dashboard.
24
Break ?

• Here are some of the assignment twos
• Which one do you think should win ??

25
Animated GIFS

• For simple animations use .GIF format
• Special type of GIF file known as an animated
  GIF/GIF89a that provides the animation you need.
• Animated GIFs are formally ?
• ___________________________________________
• When the GIF document is viewed, the multiple
  images display, quickly and in succession, and
  produce a streaming animation

26
Animated GIF files - continued

• Characteristics of an Animated GIF
• File size is affected by
• of colors
• No Plug-ins Required Animated GIFs require no
  plug-ins, and the authoring tools to create them
  are often free and easy to learn.
• 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

Plug-in A program that permits web browser to
access and execute files that the browser would
not normally recognize. Flash uses Shockwave
27
Sources of Animation

• Animation clip art websites available on Internet
  for free or at cost http//www.animation-central.
  com/misc.htm
• The ones for a cost are more professional and
  creative
• Create each image that corresponds to a frame
  using a draw or paint program
• Create animations with software
• Enhance using an editing program such as Adobe
  Photoshop
• Multimedia authoring programs like Macromedia
  Director allow you to easily create path
  animations

28
Other Animation File Types

• Animated Gifs (.gif) (universal)
• Flash (.fla, .swf) (by Adobe)
• Macromedia Director
• Sophisticated Animations
• Strata 3D, LightWave, 3D Studio Max, Maya, and
  Houdini

29
Animation File Types

• Flash Software
• Flash uses the .FLA file extension for source
  files
• .SWF extension for the Flash movie that is
  created and played.
• .swf originally meant Shockwave Flash but now
  Small Web Format
• Animation is choreographed using one or more
  sequential timelines in which actions and
  interactions are defined

Animation is choreographed using one or more
sequential timelines in which actions and
interactions are defined
30
Animation Software

• Flash Professional CS3
• A multimedia authoring and playback system
• Launched in 1996 by Macromedia/ Adobe bought in
  2005
• Flash became popular for its animated graphics
• Responsible for much of the animations,
  advertisements and video components found on
  today's Web sites
• Flash is the industry's most advanced authoring
  environment for creating interactive websites,
  digital experiences and mobile content.

Cool Websites that use Flash http//www.zapiram.e
s/ http//www.pablogaribay.com/
31
Animation Software

• Why Is Flash So Popular?
• Professional designs
• Interactive content rich with video, graphics,
  animation
• Import multimedia elements from other
  applications
• Support vector graphics
• much more space efficient over bitmapped frames
• scale up with accurate detail no matter how large
  the window is resized by the user.
• Flash Player is a free client application that
  works with popular Web browsers to play the
  animation
• Adobe Flash Player is the standard for delivering
  high-impact, rich Web content. Designs,
  animation, and application user interfaces are
  deployed immediately across all browsers and
  platforms

32
Animation ?The How To

• Something to think about
• Suppose we had the give starting picture and the
  given ending picture, what things do you think
  you would have to consider in order to make it
  appear animated but it should have a smooth
  animation, not jerky?

Start picture
End picture
33
Animation ? Some Terminology

• Keyframe
• Tweening
• Onion Skinning
• http//www.csd.uwo.ca/lreid/cs033/flash
• Lets bring up Flash and try it out

34
Some Terminology
Keyframe Animation Animating a graphical object
by creating smooth transitions between various
keyframes, _______________________________ http
//en.wikipedia.org/wiki/Key_frame
Tweening Short for in-betweening, the
__________________________________ to give the
appearance that the first image evolves smoothly
into the second image.

35
Some Terminology
Onion skinning is a 2D computer graphics term
for a technique used in creating animated
cartoons and editing movies to see
________________________
Great little tutorial take a look at
it! http//www.mystery-productions.com/flash/onion
skinning.html

• http//www.csd.uwo.ca/lreid/cs033/flash

36
Animation Software
.swf originally meant Shockwave Flash but now
Small Web Format

flv (used on YouTube) or swf (Flash Animations) ?
37
Animation in the Movies

• Digital Video
• 1983 Star Trek ? the Wrath of Khan dead planet
  transformed to lush earth-like habitat
• http//en.wikipedia.org/wiki/TWOKEffects
• Digital Animation
• What was the first full length film that was
  created entirely with digital animation.
• What year did it come out?

38
Animation in the Movies
Short Clip From Titanic
39
Animation in the Movies

• Movies - Visual effects

40
Animation in the Movies
12 Highest Gross Earnings made so far by Computer
Generated Animations worldwide at of 2007.
Can anyone guess what was the highest grossing
computer generated film?
41
One more clever example

• Click on the banner of this webpage
• http//www.mustangdrive-in.com/

42
Lets Review