Business and Computing Deanery

Multimedia

Week 6 Animation

Multimedia 2

Last weekLecture Colour

RGB CLUT

Vector Graphics Flash

Handed in storyboards and navigation charts

Supported session Finish off activities

from the lecture Draw in Flash Create Symbols

and Instances

Multimedia 3

This weekLecture Animation

Chapter 8 Digital Multimedia 2nd edition

Supported session Finish off activities

from the lecture Creating a

Timeline Animation

Add animation and Navigation to Buttons

Multimedia 4

Animation The creation of moving pictures one

frame at a time Literally to bring to life eg make a sequence of drawings on

paper in which a characters position changes slightly in each drawing

Photograph drawings in sequence using movie camera that advances one frame at a time

Play back resulting film ndash character will move

242

Chapman N and Chapman J (2004)

Multimedia 5

Traditional Methods Drawingspaintings on paper

1440 drawings for every minute of film Cel Painted or scratched film Cut-outs Clay animation (Claymation) etc

243ndash244

Chapman N and Chapman J (2004)

Multimedia 6

Captured Animation Computer + video camera +

traditional technique Frame grabbing ndash record each frame

to disk Save as QuickTime ampc edit non-

linearly like video Can also use scanner or digital still

camera or create each frame in a graphics program (eg Painter)

245ndash246

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 2

Last weekLecture Colour

RGB CLUT

Vector Graphics Flash

Handed in storyboards and navigation charts

Supported session Finish off activities

from the lecture Draw in Flash Create Symbols

and Instances

Multimedia 3

This weekLecture Animation

Chapter 8 Digital Multimedia 2nd edition

Supported session Finish off activities

from the lecture Creating a

Timeline Animation

Add animation and Navigation to Buttons

Multimedia 4

Animation The creation of moving pictures one

frame at a time Literally to bring to life eg make a sequence of drawings on

paper in which a characters position changes slightly in each drawing

Photograph drawings in sequence using movie camera that advances one frame at a time

Play back resulting film ndash character will move

242

Chapman N and Chapman J (2004)

Multimedia 5

Traditional Methods Drawingspaintings on paper

1440 drawings for every minute of film Cel Painted or scratched film Cut-outs Clay animation (Claymation) etc

243ndash244

Chapman N and Chapman J (2004)

Multimedia 6

Captured Animation Computer + video camera +

traditional technique Frame grabbing ndash record each frame

to disk Save as QuickTime ampc edit non-

linearly like video Can also use scanner or digital still

camera or create each frame in a graphics program (eg Painter)

245ndash246

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 3

This weekLecture Animation

Chapter 8 Digital Multimedia 2nd edition

Supported session Finish off activities

from the lecture Creating a

Timeline Animation

Add animation and Navigation to Buttons

Multimedia 4

Animation The creation of moving pictures one

frame at a time Literally to bring to life eg make a sequence of drawings on

paper in which a characters position changes slightly in each drawing

Photograph drawings in sequence using movie camera that advances one frame at a time

Play back resulting film ndash character will move

242

Chapman N and Chapman J (2004)

Multimedia 5

Traditional Methods Drawingspaintings on paper

1440 drawings for every minute of film Cel Painted or scratched film Cut-outs Clay animation (Claymation) etc

243ndash244

Chapman N and Chapman J (2004)

Multimedia 6

Captured Animation Computer + video camera +

traditional technique Frame grabbing ndash record each frame

to disk Save as QuickTime ampc edit non-

linearly like video Can also use scanner or digital still

camera or create each frame in a graphics program (eg Painter)

245ndash246

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 4

Animation The creation of moving pictures one

frame at a time Literally to bring to life eg make a sequence of drawings on

paper in which a characters position changes slightly in each drawing

Photograph drawings in sequence using movie camera that advances one frame at a time

Play back resulting film ndash character will move

242

Chapman N and Chapman J (2004)

Multimedia 5

Traditional Methods Drawingspaintings on paper

1440 drawings for every minute of film Cel Painted or scratched film Cut-outs Clay animation (Claymation) etc

243ndash244

Chapman N and Chapman J (2004)

Multimedia 6

Captured Animation Computer + video camera +

traditional technique Frame grabbing ndash record each frame

to disk Save as QuickTime ampc edit non-

linearly like video Can also use scanner or digital still

camera or create each frame in a graphics program (eg Painter)

245ndash246

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 5

Traditional Methods Drawingspaintings on paper

1440 drawings for every minute of film Cel Painted or scratched film Cut-outs Clay animation (Claymation) etc

243ndash244

Chapman N and Chapman J (2004)

Multimedia 6

Captured Animation Computer + video camera +

traditional technique Frame grabbing ndash record each frame

to disk Save as QuickTime ampc edit non-

linearly like video Can also use scanner or digital still

camera or create each frame in a graphics program (eg Painter)

245ndash246

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 6

Captured Animation Computer + video camera +

traditional technique Frame grabbing ndash record each frame

to disk Save as QuickTime ampc edit non-

linearly like video Can also use scanner or digital still

camera or create each frame in a graphics program (eg Painter)

245ndash246

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 7

Digital Cel Use layers (eg in Photoshop) like

sheets of acetate in traditional cel animation eg static background on one layer

moving simple object on a layer in front of it Make the object move by repositioning the layer

More complex cases just need to change those layers where movement or other change occurs between frames

249ndash250

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 8

Key Frame Animation Traditional key frames drawn by

chief animators at important points in the animation In-between frames drawn by less

skilled animators Computer-based key frames drawn

explicitly In-between frames interpolated by

software

251ndash252

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 9

Animated GIFs Sequence of images can be stored

in a single GIF file and displayed one after another by a Web browser or other software No browser plug-in required Can specify looping delay between

frames 256 colour palette No sound

247ndash249

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 10

SWF Popular Web animation format Usually generated by Macromedia

Flash Vector animation format

Motion represented as numerical operations on vector data

Can also include bitmapped images (eg as backgrounds)

254

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 11

Flash Timeline ndash graphical representation of

sequence of frames Key frames ndash drawncopied from previous

and transformed Simple frames ndash hold on previous key frame

Stage ndash sub-window in which frames are created by drawing with vector tools Can also import bitmaps as objects add text

254ndash256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 12

Flash interface

Stage

Timeline and layersRemember to put every new object on a new layer

Property inspector

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 13

Timeline Important to use layers

Name them

Macromedia Flash Help

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 14

Symbols Reusable objects stored in a library

Graphic symbols Button symbols (for interactivity) Movie clip symbols (self-contained

animations within a movie) Create instances by dragging on to

stage If symbol is edited all its instances

updated

256ndash257

Chapman N and Chapman J (2004)

Why is this important

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 15

Types of symbols Graphic symbols for static images and

to create reusable pieces of animation that are tied to the main Timeline

Button symbols to create interactive buttons that respond to mouse clicks rollovers or other actions

Movie clip symbols to create reusable pieces of animation Movie clips have their own multiframe Timeline that is independent from the main Movie clip instances can be placed inside the

Timeline of a button symbol to create animated buttons

Macromedia Flash Help

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 16

Library To view your symbols

Window gt Library Remember to name everything

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 17

Motion Tweening Motion tweening

Object is placed in a key frame Create Motion Tween

Object is turned into a symbol Add key frame at end of tweened

sequence and move or transform object

Motion in intermediate frames is interpolated (tweened)

Flash movie

256

Chapman N and Chapman J (2004)

Multimedia 18

Types of motion tweening Between two

positions Along a path

Multimedia 19

Shape Tweening Also called morphing

Shapes of graphical objects are transformed in between key frames

Have to generate the interpolated frames so resulting SWF is bigger than when motion tweening is used

Flash movie

257

Multimedia 19

Shape Tweening Also called morphing

Shapes of graphical objects are transformed in between key frames

Have to generate the interpolated frames so resulting SWF is bigger than when motion tweening is used

Flash movie

257

Multimedia 20

Types of shape tweening Colour Shape Shape to text

Multimedia 21

Linear Interpolation Constant velocity

Motion begins and ends instantaneously

252

Chapman N and Chapman J (2004)

Multimedia 22

Easing In Object accelerates

gradual transition from stasis to motion

253

Chapman N and Chapman J (2004)

Multimedia 23

Easing Out Object decelerates

gradual transition from motion to stasis

253

Chapman N and Chapman J (2004)

Multimedia 24

Mask For spotlight effects and transitions Use a mask layer to create a hole

through which underlying layers are visible A mask item can be a filled shape a

type object an instance of a graphic symbol or a movie clip

Flash movie

Multimedia 21

Linear Interpolation Constant velocity

Motion begins and ends instantaneously

252

Chapman N and Chapman J (2004)

Multimedia 22

Easing In Object accelerates

gradual transition from stasis to motion

253

Chapman N and Chapman J (2004)

Multimedia 23

Easing Out Object decelerates

gradual transition from motion to stasis

253

Chapman N and Chapman J (2004)

Multimedia 24

Mask For spotlight effects and transitions Use a mask layer to create a hole

through which underlying layers are visible A mask item can be a filled shape a

type object an instance of a graphic symbol or a movie clip

Flash movie

Multimedia 22

Easing In Object accelerates

gradual transition from stasis to motion

253

Chapman N and Chapman J (2004)

Multimedia 23

Easing Out Object decelerates

gradual transition from motion to stasis

253

Chapman N and Chapman J (2004)

Multimedia 24

Mask For spotlight effects and transitions Use a mask layer to create a hole

through which underlying layers are visible A mask item can be a filled shape a

type object an instance of a graphic symbol or a movie clip

Flash movie

Multimedia 23

Easing Out Object decelerates

gradual transition from motion to stasis

253

Chapman N and Chapman J (2004)

Multimedia 24

Mask For spotlight effects and transitions Use a mask layer to create a hole

through which underlying layers are visible A mask item can be a filled shape a

type object an instance of a graphic symbol or a movie clip

Flash movie

Multimedia 24

Mask For spotlight effects and transitions Use a mask layer to create a hole

through which underlying layers are visible A mask item can be a filled shape a

type object an instance of a graphic symbol or a movie clip

Flash movie

Multimedia 25

Motion Graphics Like time-based graphic design Move transform alter layers of a

bitmapped image between frames Apply time-varying filters and effects

AfterEffects supports linear and Beacutezier interpolation in both space and time (rate of change)

Can have new effects that only make sense in time eg shatter particle effects

261ndash266

Chapman N and Chapman J (2004)

Multimedia 26

3-D Animation Easy to describe but much harder to do Properties of 3-D models (shape size

position rotation surface characteristics etc) light sources and cameras are numerically defined

Animate a scene by changing the numbers rendering a new frame changing further hellip

Can make objects move or move the camera Requires 3-D visualization and animation

skills and great amount of processing power More next semester

266ndash267

Chapman N and Chapman J (2004)

Multimedia 27

Activities Create a motion animation Create a motion along a path Create a tweened shape animation

changing colour Create a tweened shape animation

changing shape Create a tweened shape animation

changing a letter to a shape Display Onion Skins

Remember to use layers

Multimedia 28

Some questions Scenario You have been asked by

Hope library to create an animation to act as a logo Suggest three different methods

discuss how they would be implemented and make a recommendation for one

Discuss the desirability of using a Flash animation as a logo

How else might a Flash animation be used in a website

Multimedia 29

What have we covered today Animation

Tweening Symbols and the library

How will naming things and adding them to the library help your workflow

What is the difference between an Instance and a Symbol

Motion Shape

Can you give examples for use

Your animation is due in next week Screen grab with Onion Skins

Multimedia 30

For Next Week Directed Reading

Digital Multimedia Second Edition Chapter 10 and 11 Text

Independent study Continue to work on your storyboards and

navigation This should be an ongoing process Start thinking about how your ideas will translate into

a Flash interface Attend the supported session to get to know

Flash HelpHow Do I

1048707 Draw in Flash 1048707 Create Symbols and Instances

Animation ndash due week 7

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files

Multimedia 26

3-D Animation Easy to describe but much harder to do Properties of 3-D models (shape size

position rotation surface characteristics etc) light sources and cameras are numerically defined

Animate a scene by changing the numbers rendering a new frame changing further hellip

Can make objects move or move the camera Requires 3-D visualization and animation

skills and great amount of processing power More next semester

266ndash267

Chapman N and Chapman J (2004)

Multimedia 27

Activities Create a motion animation Create a motion along a path Create a tweened shape animation

changing colour Create a tweened shape animation

changing shape Create a tweened shape animation

changing a letter to a shape Display Onion Skins

Remember to use layers

Multimedia 28

Some questions Scenario You have been asked by

Hope library to create an animation to act as a logo Suggest three different methods

discuss how they would be implemented and make a recommendation for one

Discuss the desirability of using a Flash animation as a logo

How else might a Flash animation be used in a website

Multimedia 29

What have we covered today Animation

Tweening Symbols and the library

How will naming things and adding them to the library help your workflow

What is the difference between an Instance and a Symbol

Motion Shape

Can you give examples for use

Your animation is due in next week Screen grab with Onion Skins

Multimedia 30

For Next Week Directed Reading

Digital Multimedia Second Edition Chapter 10 and 11 Text

Independent study Continue to work on your storyboards and

navigation This should be an ongoing process Start thinking about how your ideas will translate into

a Flash interface Attend the supported session to get to know

Flash HelpHow Do I

1048707 Draw in Flash 1048707 Create Symbols and Instances

Animation ndash due week 7

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files

Multimedia 27

Activities Create a motion animation Create a motion along a path Create a tweened shape animation

changing colour Create a tweened shape animation

changing shape Create a tweened shape animation

changing a letter to a shape Display Onion Skins

Remember to use layers

Multimedia 28

Some questions Scenario You have been asked by

Hope library to create an animation to act as a logo Suggest three different methods

discuss how they would be implemented and make a recommendation for one

Discuss the desirability of using a Flash animation as a logo

How else might a Flash animation be used in a website

Multimedia 29

What have we covered today Animation

Tweening Symbols and the library

How will naming things and adding them to the library help your workflow

What is the difference between an Instance and a Symbol

Motion Shape

Can you give examples for use

Your animation is due in next week Screen grab with Onion Skins

Multimedia 30

For Next Week Directed Reading

Digital Multimedia Second Edition Chapter 10 and 11 Text

Independent study Continue to work on your storyboards and

navigation This should be an ongoing process Start thinking about how your ideas will translate into

a Flash interface Attend the supported session to get to know

Flash HelpHow Do I

1048707 Draw in Flash 1048707 Create Symbols and Instances

Animation ndash due week 7

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files

Multimedia 28

Some questions Scenario You have been asked by

Hope library to create an animation to act as a logo Suggest three different methods

discuss how they would be implemented and make a recommendation for one

Discuss the desirability of using a Flash animation as a logo

How else might a Flash animation be used in a website

Multimedia 29

What have we covered today Animation

Tweening Symbols and the library

How will naming things and adding them to the library help your workflow

What is the difference between an Instance and a Symbol

Motion Shape

Can you give examples for use

Your animation is due in next week Screen grab with Onion Skins

Multimedia 30

For Next Week Directed Reading

Digital Multimedia Second Edition Chapter 10 and 11 Text

Independent study Continue to work on your storyboards and

navigation This should be an ongoing process Start thinking about how your ideas will translate into

a Flash interface Attend the supported session to get to know

Flash HelpHow Do I

1048707 Draw in Flash 1048707 Create Symbols and Instances

Animation ndash due week 7

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files

Multimedia 29

What have we covered today Animation

Tweening Symbols and the library

How will naming things and adding them to the library help your workflow

What is the difference between an Instance and a Symbol

Motion Shape

Can you give examples for use

Your animation is due in next week Screen grab with Onion Skins

Multimedia 30

For Next Week Directed Reading

Digital Multimedia Second Edition Chapter 10 and 11 Text

Independent study Continue to work on your storyboards and

navigation This should be an ongoing process Start thinking about how your ideas will translate into

a Flash interface Attend the supported session to get to know

Flash HelpHow Do I

1048707 Draw in Flash 1048707 Create Symbols and Instances

Animation ndash due week 7

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files

Multimedia 30

For Next Week Directed Reading

Digital Multimedia Second Edition Chapter 10 and 11 Text

Independent study Continue to work on your storyboards and

navigation This should be an ongoing process Start thinking about how your ideas will translate into

a Flash interface Attend the supported session to get to know

Flash HelpHow Do I

1048707 Draw in Flash 1048707 Create Symbols and Instances

Animation ndash due week 7

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files

Multimedia 31

References Chapman N and Chapman J (2004)

Digital Multimedia Second Edition London Wiley

Macromedia Flash MX2004 Help files