Chapter 8 interactive multimedia authoring with flash animation
Download
1 / 65

Chapter 8 Interactive Multimedia Authoring with Flash: Animation - PowerPoint PPT Presentation


  • 144 Views
  • Uploaded on

Chapter 8 Interactive Multimedia Authoring with Flash: Animation. Flash: Tweening. In this lecture, you will learn:. the types of tweening: classic tween motion tween shape tween how to create tween animation how to animate an object following a custom path. Tweening.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Chapter 8 Interactive Multimedia Authoring with Flash: Animation' - chars


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Chapter 8 interactive multimedia authoring with flash animation

Chapter 8Interactive Multimedia Authoring with Flash: Animation

Flash: Tweening


In this lecture you will learn
In this lecture, you will learn:

  • the types of tweening:

    • classic tween

    • motion tween

    • shape tween

  • how to create tween animation

  • how to animate an object following a custom path


Tweening
Tweening

  • To create movement and changes of visual content over time, without having to manually create the content frame by frame

  • The computer interpolates the changes between 2 keyframes


To create keyframes in flash
To Create Keyframes in Flash

  • Method 1:

    • Select a frame on timeline

    • Choose Insert > Timeline > Keyframe

  • Method 2:

    • Right-click (Windows) or Control-click (Mac OS) on a frame on timeline

    • Choose Insert Keyframe


Types of tween in flash
Types of Tween in Flash

  • Classic tween (called Motion tween in Flash CS3 and prior)

  • Motion tween

  • Shape tween



Classic tween

Classic Tween

Example


Example of classic tween
Example of Classic Tween

A leaf is created as a Graphic symbol, and placed on the stage.


Example of classic tween1
Example of Classic Tween

Keyframe at frame 1


Example of classic tween2
Example of Classic Tween

Keyframe at frame 20:

The leaf is repositioned, rotated, and scaled bigger.


Example of classic tween3
Example of Classic Tween

Keyframe at frame 60:

The leaf is repositioned again, rotated, and scaled smaller.


Example of classic tween4
Example of Classic Tween

  • Result after applying classic tween to the keyframes:

  • 60 frames

  • But only 3 keyframes to specify the leaf's position, rotation, and size.

  • The computer interpolates the positions, rotation, and size of the leaf between keyframes.


Properties of a symbol instance that can be tweened using classic tween
Properties of a symbol instance that can be tweened using Classic tween

  • Position

  • Rotation

  • Width

  • Height

  • Color

  • Opacity


Motion tween

Motion Tween Classic tween

Example


Example of motion tween
Example of Motion Tween Classic tween

A leaf is created as a Graphic symbol, and placed on the stage.


Example of classic tween5
Example of Classic Tween Classic tween

Keyframe at frame 1


Example of classic tween6
Example of Classic Tween Classic tween

Keyframe at frame 20:

The leaf is repositioned, rotated, and scaled bigger.


Example of classic tween7
Example of Classic Tween Classic tween

Keyframe at frame 60:

The leaf is repositioned again, rotated, and scaled smaller.


Properties of a symbol instance that can be tweened using motion tween
Properties of a symbol instance that can be tweened using Motion tween

  • Position

  • Rotation

  • Width

  • Height

  • Color (Classic tween)

  • Opacity (Classic tween)


Shape tween

Shape Tween Motion tween

Example


Example of shape tween
Example of Shape Tween Motion tween

Keyframe at frame 1:

A shape of the letter "I" in blue


Example of shape tween1
Example of Shape Tween Motion tween

Keyframe at frame 15:

A heart shape in pink


Example of shape tween2
Example of Shape Tween Motion tween

Keyframe at frame 40:

A shape of the letter "U" in green


Example of shape tween3
Example of Shape Tween Motion tween

  • Result after applying shape tween to the keyframes:

  • 40 frames

  • But only 3 keyframes to specify the shapes.

  • The computer interpolates the shapes between keyframes.


Properties of a shape that can be tweened in shape tween
Properties of a shape that can be tweened in shape tween Motion tween

  • Position

  • Rotation

  • Width

  • Height

  • Color

  • Opacity

  • Shape


Troubleshooting
Troubleshooting Motion tween

  • If a Classic or Shape tween sequence is working correctly: an solid-line arrow in timeline

  • If a Classic or Shape tween sequence is working incorrectly: a dash line in timeline


Possible causes for tweening problems
Possible Causes for Tweening Problems Motion tween

  • Multiple symbol instances in the same keyframe

  • Classic tween applied to shapes

  • Shape tween applied to symbol instances

  • A mix of symbol instances and shapes in the same keyframe


Tween a symbol to follow a path

Tween a Symbol Motion tweento Follow a Path


Tween a symbol to follow a path1
Tween a Symbol to Follow a Path Motion tween

  • Motion path

    • for Motion tween

  • Motion guide

    • for Classic tween


Motion guide

Motion Guide Motion tween

for Classic tween


Motion guide1
Motion Guide Motion tween

  • Allows an object to follow a path that you draw as a stroke

  • Works with symbols, not shapes


To create animation with motion guide
To Create Animation with Motion Guide Motion tween

  • Create keyframes like you would create a classic tween animation

  • Create a motion guide layer for the tween animation:

    • In the timeline, right-click (Windows) or Control-click (Mac OS) on the motion tween layer.

    • Choose the option of motion guide

  • In the motion guide layer, draw a path (using pencil or pen tool) in one single stroke.Do not create multiple strokes.

  • For each keyframe of the tween animation, drag the symbol instance to snap on the path.


Motion guide2

Motion Guide Motion tween

Example:

Returning to the leaf animation to make it follow a more complex path


Example of motion guide
Example of Motion Guide Motion tween

A classic tween sequence with the leaf is created using only 2 keyframes.


Example of motion guide1
Example of Motion Guide Motion tween

A motion guide is created for the classic tween layer.


Example of motion guide2
Example of Motion Guide Motion tween

A complex path is drawn in the motion guide layer using the Pencil tool.


Example of motion guide3
Example of Motion Guide Motion tween

The leaf in frame 1 (first keyframe) is snapped to the beginning of the path.


Example of motion guide4
Example of Motion Guide Motion tween

The leaf in frame 60 (last keyframe) is snapped to the end of the path.


Example of motion guide5
Example of Motion Guide Motion tween

  • Result:

  • 60 frames of animation

  • The leaf follows the path drawn in the motion guide layer


More about motion guide
More About Motion Guide Motion tween

  • The color and width of the path do not matter.

  • The motion guide is automatically hidden when the movie plays.

  • In the example:

    • Only 2 keyframes are used but it can have more than 2 keyframes.

    • The leaf is snapped to the two ends of the path, but it can be snapped anywhere along the path.


Motion path

Motion Path Motion tween

for Motion tween


Motion path1
Motion Path Motion tween

A motion path is automatically generated for each Motion twee span.


Motion path2
Motion Path Motion tween

Can be edited like a stroke using Selection and Subselection tools


Motion path3
Motion Path Motion tween

  • Can also be a custom-drawn stroke

  • To apply a stroke as the motion path for a Motion tween:

    • Copy the stroke

    • Select the Motion tween span on the timeline

    • Paste the stroke


Chapter 8 interactive multimedia authoring with flash animation1

Chapter 8 Motion tweenInteractive Multimedia Authoring with Flash: Animation

Flash: Mask


Mask Motion tween

  • Defines areas to reveal its linked layer (maskee layer)

  • The content in a mask layer can be thought of as a hole that lets the underlying maskee layers show through.


Mask Motion tween

a mask

original

mask effect


To create mask effect
To Create Mask Effect Motion tween

  • On the timeline, arrange the maskee layer immediately below the layer that you want to be the mask layer.

  • On the timeline, right-click (Windows) or Control-click (Mac OS) on the mask layer, and select Mask.


Mask effect example

Mask Effect Example Motion tween

Spotlight Effect


Mask effect example spotlight effect
Mask Effect Example: Motion tweenSpotlight Effect


Mask effect example spotlight effect1
Mask Effect Example: Motion tweenSpotlight Effect

Maskee content

Maskee layer


Mask effect example spotlight effect2
Mask Effect Example: Motion tweenSpotlight Effect

Mask content:black circle

Mask layer


Mask effect applied by locking the mask layer
Mask Effect Applied Motion tweenby locking the mask layer


More about mask effect
More About Mask Effect Motion tween

  • The resulted mask effect can be seen on the stage by locking the mask layer.

  • The mask effect always shows when you do a Test Movie, with or without unlocking the mask layer.

  • Don't forget to unlock the mask layer when you want to edit the mask layer.


Mask effect example1

Mask Effect Example Motion tween

X-ray Effect


Mask effect example x ray effect
Mask Effect Example: Motion tweenX-ray Effect

maskee layer(s)

mask layer,

immediately above the maskee layer(s)

Right-click on it, choose "Mask" to make it a mask


Mask effect example x ray effect1
Mask Effect Example: Motion tweenX-ray Effect

57

maskee layer(s)

Resulted mask effect

mask layer,

immediately above the maskee layer(s)

Right-click on it, choose "Mask" to make it a mask

57


Mask effect example x ray effect2
Mask Effect Example: Motion tweenX-ray Effect

Add a bottom layer of a man

Result

58



Mask effect example2

Mask Effect Example then you get

Appearance Effect


Mask effect example appearance effect
Mask Effect Example: then you getAppearance Effect

Maskee layer:

Contains only the little alien


Mask effect example appearance effect1
Mask Effect Example: then you getAppearance Effect

Mask layer:

Contains only the light beam


Mask effect example appearance effect2
Mask Effect Example: then you getAppearance Effect

Mask effect is applied by locking the mask layer.

Note: The mask does not always show up.


Mask effect example appearance effect3
Mask Effect Example: then you getAppearance Effect

Blue beam layer:

Overlay the blue beam by adding it on another layer because we want to see the blue beam.


If you tween the height of the blue beam (both the mask and the blue beam on the extra layer), then you get


ad