Adobe Photoshop 7.0 Design Professional

1
(No Transcript)
2
Chapter Concepts

• OVERVIEW

• Discuss Using Animation on the Web
• Examine the Methods for Creating Animation
• Understand 3-D Animation, Special Effects, and VR
• Explore Animation Software
• Discuss Animation File Formats for the Web

3
Introduction

• INTRODUCTION

• Animation Simply a moving or changing graphic
  image
• Virtual world created by animated objects has
  physical properties including height, width,
  depth, time
• Used appropriately, animation can be an integral
  part of a Web site

4
Introduction

• INTRODUCTION

• Drawing attention to something of no use is an
  example of an ineffective and negative
  application of animation
• An animation specialist is responsible for
  creating the animation on a Web site

5
Introduction

• INTRODUCTION

• Planning is important to ensure the animation is
  appropriate and well conceived
• Storyboards help visualize the multimedia Web
  site
• Animation specialist must have technical skills
  and design savvy

6
Discuss Using Animation on the Web

• CONCEPT 1

• Excellent way to increase appeal of Web site and
  ensure return visits
• Animations can be simple, as in blinking text,
  marquee-like scrolling headlines, rotating logos,
  animated icons, Web buttons, 2-D action figures

7
Discuss Using Animation on the Web

• CONCEPT 1

• Complex concepts can be simplified and can use
  animation to visualize each concept
• Animation often a better instructional tool than
  video
• Easy to understand, more cost-effective and also
  creates smaller file size

8
Discuss Using Animation on the Web

• CONCEPT 1

• Many Web sites use animation geared toward
  entertaining kids as they learn

9
Discuss Using Animation on the Web

• CONCEPT 1

• Macromedia Flash allows Web pages to run
  animations with small file size
• Animation must be designed to be appropriate to
  the application and geared toward users of the
  site

10
Animation Guidelines

• CONCEPT 1

• Animations should impact not detract
• Determine amount of animation
• Animate what you want users to notice
• Animation is appropriate to mood and content of
  the application
• Not too many animated objects per page

11
Animation Guidelines

• CONCEPT 1

• Animation that does the same thing over and over
  is also annoying
• Use transitions and special effects that help
  communicate message
• Make sure animation loads quickly

12
Examine the Methods for Creating Animation

• CONCEPT 2

• Digital animation based on flipbooks
• Animation A series of still images played back
  fast enough to trick our minds into believing
  that there is movement
• Two rates used to measure animation Sampling and
  Playback

13
Sampling Rates

• CONCEPT 2

• Sampling rate number of different images that
  occur per second
• Playback rate number of frames displayed per
  second when animation is being viewed
• Playback rate cannot be higher than the sampling
  rate

14
Frame-based Animation

• CONCEPT 2

• Frame-based animation also called cel animation

15
Frame-based Animation

• CONCEPT 2

• Computer-based cel animation based on changes
  that occur from one frame to the next
• Prior to computer-generated animation, artists
  drew each cel or frame needed to create the
  illusion of movement

16
Frame-based Animation

• CONCEPT 2

• Tweening Process of drawing between frames
  requires keyframes
• Morphing Special technique that uses frames to
  create the illusion of one object changing into
  another
• Morphing on the Web generally uses process called
  shape tweening

17
Path-based Animation

• CONCEPT 2

• Also called vector animation
• Involves the creation of one object and a path
  then tweening is used to fill in the frames as
  the object moves along the path
• Computational animation move object by varying
  coordinates

18
Program- or Script-basedAnimation

• CONCEPT 2

• Involves use of programming/scripting languages
  to create animation
• Animations are often more flexible than those
  created using the other methods

19
Understand 3-D Animation,Special Effects, and VR

• CONCEPT 3

• 3-D animation is the foundation of many
  multimedia games and adventure Web sites
• Creating 3-D animation is considerably more
  complex than creating 2-D animation

20
Understand 3-D Animation,Special Effects, and VR

• CONCEPT 3

• Animating 3-D images and objects may involve
  frame-based, cell-based, or program-based
  animation to change the objects shape or
  position
• Changing lighting, perspective, and camera angle
  assists in creating the illusion of animation in
  a 3-D world

21
Understand 3-D Animation,Special Effects, and VR

• CONCEPT 3

• Rendering Giving objects attributes such as
  colors, surface textures, and opacity

22

• CONCEPT 3

Special Animation Effects

• Onion skinning Create new images by tracing over
  an existing image
• Trail effect When image from the previous frame
  is not completely erased so that it appears in
  the new frame

23
Special Animation Effects

• CONCEPT 3

• Warping Single image used
• Morphing More than one object

24
Virtual Reality

• CONCEPT 3

• Used to describe 3-D scenes on the Web that
  surround user to become part of the experience
• Using VR, Web developers are able to create 3-D
  objects that users can manipulate with a pointing
  device such as a mouse, trackball, or joystick

25
Explore Animation Software

• CONCEPT 4

• Macromedia
• Macromedia Fireworks
• Macromedia Flash
• Adobe
• Adobe ImageReady
• Shareware

26
Macromedia Fireworks

• CONCEPT 4

• Combines both bitmap- and vector-editing tools
  within single environment
• Allows you to import files from digital cameras,
  scanners, and other graphics applications

27
Macromedia Flash

• CONCEPT 4

• Vast majority of animations seen on the Web
  created using Flash
• Allows you to work with vector graphics to create
  incredibly smooth, compact animation

28
Macromedia Flash

• CONCEPT 4

• Can import artwork from drawing programs such as
  Adobe Illustrator and Macromedia FreeHand
• Macromedia Flash uses a timeline for development
  and control
• Macromedia Flash has a built-in scripting
  language ActionScript

29
Adobe ImageReady

• CONCEPT 4

• Packaged with Adobe Photoshop Specifically
  designed for producing superior Web graphics and
  animation
• Allows developers to creative interactive
  elements without writing
• Produce high-quality graphics and animations with
  the smallest possible file sizes

30
Shareware

• CONCEPT 4

• Distributed on the honor system
• Sometimes free of charge, or small fee for
  delivery
• Create animated banners and signs, apply special
  effects such as transitions and spins, rotate,
  crop, color-adjust, and resize

31
Animated GIFS

• CONCEPT 5

• When viewed on the Web, the multiple images are
  streamed, or played back one at a time
• Animated GIFs require no plug-ins or players and
  are supported by all major browsers

32
SWF Format

• CONCEPT 5

• Designed for efficient graphic delivery over the
  Web
• Files are small, support streaming so they can be
  delivered over a network with limited bandwidth
• To view SWF files, Macromedia Flash Player must
  be installed on users computer

33
QuickTime (MOV)

• CONCEPT 5

• Apples animation and movie file format
• Non-platform specific
• Can be either downloaded or streamed for quicker
  viewing
• QuickTime player needed to view QuickTime files

34
MPEG

• CONCEPT 5

• Moving Picture Experts Group (MPEG)
• Created standards for interactive animation and
  video
• MPEG files are much smaller compared to other
  coding formats
• Much higher quality for the size

35
AVI

• CONCEPT 5

• Audio Video Interleave format (AVI)
• Microsofts animation and movie file format for
  Windows
• Quality is adequate, but do not offer some of the
  features and cross-platform compatibility found
  in other formats
• Files may take longer to download

36
MNG

• CONCEPT 5

• Multiple Image Network Graphics
• Similar to animated GIF this format stores
  multiple images that are then streamed for quick
  download and playback
• Offers advantages over GIF format
• Supports multiple levels of transparency

37
Summary

• SUMMARY

• Discuss Using Animation on the Web
• Animation Guidelines
• Examine the Methods for Creating Animation
• Sampling Rates
• Frame-based Animation
• Program- or Script-based Animation

38
Summary

• SUMMARY

• Understand 3-D Animation,Special Effects, and VR
• Virtual Reality
• Macromedia Fireworks
• Macromedia Flash
• Macromedia
• Adobe ImageReady

39
Summary

• SUMMARY

• Shareware
• Animated GIFS
• SWF Format
• QuickTime (MOV)
• MPEG
• AVI
• MNG