Flash Tweening Computers and Creativity Richard D Webster COSC 109 Instructor Office 7800 York Road Room 422 Phone 410 7042424 email webstertowsonedu 109 website ID: 699753
Download Presentation The PPT/PDF document "Chapter 8 – Part III Interactive Multi..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Chapter 8 – Part IIIInteractive Multimedia Authoring with Flash: Animation
Flash: Tweening “Computers and Creativity”Richard D. Webster, COSC 109 InstructorOffice: 7800 York Road, Room 422 | Phone: (410) 704-2424e-mail: webster@towson.edu109 website: https://tigerweb.towson.edu/webster/109/index.html
1Slide2
In this lecture, you will learn:
2the types of tweening: classic tweenmotion tweenshape tweenhow to create tween animationhow to animate an object following a custom pathSlide3
TweeningTo 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 keyframes3Slide4
To Create Keyframes in FlashMethod 1:Select a frame on timeline
Choose Insert > Timeline > KeyframeMethod 2:Right-click (Windows) or Control-click (Mac OS) on a frame on timelineChoose Insert Keyframe4Slide5
Types of Tween in FlashClassic tween (called Motion tween in Flash CS3 and prior)
Motion tweenShape tween5Slide6
Motion (Classic) Tween vs. Shape Tween
Motion and Classic TweenShape TweenWorks with symbols onlyWorks with shapes onlyNot changing the shapesMorphing the shapesCannot have more than one symbol in a frame of the same layerCan have more than one shapes in a keyframe, but the result is unpredictableCan be tweened to follow a path that is drawn as a stroke
Does not work
with motion guide
Tweened frames
are colored blue (Motion tween) or purple (Classic tween) on timeline
Tweened frames are colored green on timeline
6Slide7
Classic Tween
Example7Slide8
Example of Classic Tween
8A leaf is created as a Graphic symbol, and placed on the stage.Slide9
Example of Classic Tween
9Keyframe at frame 1Slide10
Example of Classic Tween
10Keyframe at frame 20:The leaf is repositioned, rotated, and scaled bigger.Slide11
Example of Classic Tween
11Keyframe at frame 60:The leaf is repositioned again, rotated, and scaled smaller.Slide12
Example of Classic Tween12
Result after applying classic tween to the keyframes:60 framesBut 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.Slide13
Properties of a symbol instance that can be tweened using Classic tweenPosition
RotationWidthHeightColorOpacity13Slide14
Motion Tween
Example14Slide15
Example of Motion Tween
15A leaf is created as a Graphic symbol, and placed on the stage.Slide16
Example of Classic Tween
16Keyframe at frame 1Slide17
Example of Classic Tween
17Keyframe at frame 20:The leaf is repositioned, rotated, and scaled bigger.Slide18
Example of Classic Tween
18Keyframe at frame 60:The leaf is repositioned again, rotated, and scaled smaller.Slide19
Properties of a symbol instance that can be tweened using Motion tweenPosition
RotationWidthHeightColor (Classic tween)Opacity (Classic tween)19Slide20
Shape Tween
Example20Slide21
Example of Shape Tween
21Keyframe at frame 1:A shape of the letter "I" in blueSlide22
Example of Shape Tween
22Keyframe at frame 15:A heart shape in pinkSlide23
Example of Shape Tween
23Keyframe at frame 40:A shape of the letter "U" in greenSlide24
Example of Shape Tween
24Result after applying shape tween to the keyframes:40 framesBut only 3 keyframes to specify the shapes.The computer interpolates the shapes between keyframes.Slide25
Properties of a shape that can be tweened in shape tweenPosition
RotationWidthHeightColorOpacityShape25Slide26
TroubleshootingIf a Classic or Shape tween sequence is working correctly:
an solid-line arrow in timelineIf a Classic or Shape tween sequence is working correctly:a dash line in timeline26Slide27
Possible Causes for Tweening ProblemsMultiple symbol instances in the same keyframe
Classic tween applied to shapesShape tween applied to symbol instancesA mix of symbol instances and shapes in the same keyframe27Slide28
Tween a Symbol to Follow a Path
28Slide29
Tween a Symbol to Follow a PathMotion pathfor Motion tween
Motion guidefor Classic tween29Slide30
Motion Guide30Slide31
Motion GuideAllows an object to follow a path that you draw as a stroke
Works with symbols, not shapesNote that the color and width of the path in the motion guide do not matter31Slide32
To Create Animation with Motion Guide
Create keyframes like you would create a classic tween animationCreate 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 guideIn 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.32Slide33
Motion Guide
Example:Returning to the leaf animation to make it follow a more complex path33Slide34
Example of Motion Guide
34A classic tween sequence with the leaf is created using only 2 keyframes.Slide35
Example of Motion Guide
35A motion guide is created for the classic tween layer.Slide36
Example of Motion Guide
36A complex path is drawn in the motion guide layer using the Pencil tool.Slide37
Example of Motion Guide
37The leaf in frame 1 (first keyframe) is snapped to the beginning of the path.Slide38
Example of Motion Guide
38The leaf in frame 60 (last keyframe) is snapped to the end of the path.Slide39
Example of Motion Guide
39Result:60 frames of animationThe leaf follows the path drawn in the motion guide layerSlide40
More About Motion GuideThe 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.40Slide41
Motion Pathfor Motion tween
41Slide42
Motion Path42
A motion path is automatically generated for each Motion twee span.Slide43
Motion Path43
Can be edited like a stroke using Selection and Subselection toolsSlide44
Motion PathCan also be a custom-drawn strokeTo apply a stroke as the motion path for a Motion tween:
Copy the strokeSelect the Motion tween span on the timelinePaste the stroke44Slide45
Chapter 8Interactive Multimedia Authoring with Flash: Animation
Flash: Mask45Slide46
Mask
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.In other words, the mask item acts as a window that reveals the area of linked layers that lie beneath it. The rest of the mask layer conceals everything else on these linked layers46Slide47
Mask47
a mask
original
mask effectSlide48
To Create Mask EffectOn 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.48Slide49
Mask Effect ExampleSpotlight Effect
49Slide50
Mask Effect Example:
Spotlight Effect50Slide51
Mask Effect Example:
Spotlight Effect51Maskee layer
Maskee contentSlide52
Mask Effect Example:
Spotlight Effect52Mask layer
Mask content:black circleSlide53
Mask Effect Appliedby locking the mask layer
53Slide54
More About Mask EffectThe 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.54Slide55
Mask Effect ExampleX-ray Effect
55Slide56
Mask Effect Example:X-ray Effect
mask layer,
immediately above the maskee layer(s)
Right-click on it, choose "Mask" to make it a mask
maskee layer(s)
56Slide57
Mask Effect Example:X-ray Effect
5757
mask layer,
immediately above the maskee layer(s)
Right-click on it, choose "Mask" to make it a mask
maskee layer(s)
Resulted mask effect
57Slide58
Mask Effect Example:X-ray Effect
5858
Add a bottom layer of a man
ResultSlide59
If you create a tween animation of the x-ray bar (the mask), then you get
59Slide60
Mask Effect ExampleAppearance Effect
60Slide61
Mask Effect Example:
Appearance Effect61Maskee layer:Contains only the little alienSlide62
Mask Effect Example:
Appearance Effect62Mask layer:Contains only the light beamSlide63
Mask Effect Example:
Appearance Effect63Mask effect is applied by locking the mask layer.Note: The mask does not always show up.Slide64
Mask Effect Example:
Appearance Effect64Blue beam layer:Overlay the blue beam by adding it on another layer because we want to see the blue beam.Slide65
If you tween the height of the blue beam (both the mask and the blue beam on the extra layer), then you get
65