adobe flash professional cs5 – illustrated unit d: creating animation
TRANSCRIPT
![Page 1: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/1.jpg)
Adobe Flash Professional CS5 – Illustrated
Unit D: Creating Animation
![Page 2: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/2.jpg)
Adobe Flash Professional CS5 – Illustrated
Objectives
Understand animation
Use frames
Create a motion tween
Create and copy a motion path
Use easing
Add nested symbols to a movie clip
![Page 3: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/3.jpg)
Adobe Flash Professional CS5 – Illustrated
Objectives
Animate nested symbols
Create frame-by-frame animation
Create a shape tween
Use shape hints
Plan and specialize animation
![Page 4: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/4.jpg)
Adobe Flash Professional CS5 – Illustrated
Understanding Animation
Create and adjust frames and artwork that appears in them
Determine length of the animation
Set a frame rate to control the speed
Animate shape, size, color, position
![Page 5: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/5.jpg)
Adobe Flash Professional CS5 – Illustrated
Specify Frames
Change over time is represented by frames in the Timeline Blank keyframe
• Single frame in the Timeline when a new document is opened
Keyframe• Special frame that signals a change in a
movie or animation
Frame span• A group of frames
![Page 6: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/6.jpg)
Adobe Flash Professional CS5 – Illustrated
Select Animation Methods
Frame-by-frame animation
Tweened animation
Flash animates object gradually over several consecutive frames
You can control action in every frame
Can be time-consuming and result in large file size
Flash automatically creates animation between two keyframes
You define starting and ending keyframes, then modify object/symbol
Types of tweensMotion tweensShape tweens
![Page 7: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/7.jpg)
Adobe Flash Professional CS5 – Illustrated
Select Animation Methods
Sample frame-by-frame animation
![Page 8: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/8.jpg)
Adobe Flash Professional CS5 – Illustrated
Select Animation Methods
Sample motion tween
![Page 9: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/9.jpg)
Adobe Flash Professional CS5 – Illustrated
Understand Tweensin the Timeline
Motion tween spans Blue Symbols show movement Property keyframe
• Contains specific property values that change in that frame: position, scale, skew, rotation, color, or filter
Shape tween spans Green Use morphing
![Page 10: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/10.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Frames
Frame types
![Page 11: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/11.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Frames
Viewing a frame span
![Page 12: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/12.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating a Motion Tween
Apply a motion tween to a symbol by: Placing an instance in starting keyframe Modifying position or transformation
properties of the instance in last keyframe of the animation
![Page 13: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/13.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating a Motion Tween
Adjusting the value of a property keyframe
![Page 14: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/14.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating and Copyinga Motion Path
Copy/paste motion tween on other layers to keep animations consistent and save time
Using the Motion Presets panel
Motion Presets panel
![Page 15: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/15.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating and Copyinga Motion Path
Creating a motion path
![Page 16: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/16.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating and Copyinga Motion Path
Modifying a motion path
![Page 17: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/17.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Easing
Adjust easing on Properties panel
Use easing to speed up or slow down start or end of an animation Object eases in: starts out slow, then
speeds up at the end Object eases out: starts out fast, then
slows down
![Page 18: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/18.jpg)
Adobe Flash Professional CS5 – Illustrated
Using the Motion Editor
Provides detailed control over properties in every keyframe
Sections: Basic Motion, Transformation, Color Effect, Filter, and Eases
Each property has its own timeline Adjust X and Y values Add keyframes Create custom easing Apply preset easing option
![Page 19: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/19.jpg)
Adobe Flash Professional CS5 – Illustrated
Using the Motion Editor
The Motion Editor
![Page 20: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/20.jpg)
Adobe Flash Professional CS5 – Illustrated
Adding Nested Symbolsto a Movie Clip
Nested symbols Are created by placing a symbol inside
another symbol Create a unique new symbol while
preserving individuality of original symbols
![Page 21: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/21.jpg)
Adobe Flash Professional CS5 – Illustrated
Adding Nested Symbolsto a Movie Clip
Creating a Movie Clip symbol
![Page 22: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/22.jpg)
Adobe Flash Professional CS5 – Illustrated
Adding Nested Symbolsto a Movie Clip
Extending a frame span to multiple layers in a movie clip
![Page 23: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/23.jpg)
Adobe Flash Professional CS5 – Illustrated
Timeline Commands
![Page 24: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/24.jpg)
Adobe Flash Professional CS5 – Illustrated
Animating Nested Symbols
Still allows reuse of the symbol in other parts of the movie, where it can be part of another animation
![Page 25: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/25.jpg)
Adobe Flash Professional CS5 – Illustrated
Animating Nested Symbols
Modified nested symbols
![Page 26: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/26.jpg)
Adobe Flash Professional CS5 – Illustrated
Animating Nested Symbols
Modifying instances in a new keyframe
![Page 27: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/27.jpg)
Adobe Flash Professional CS5 – Illustrated
Animating Nested Symbols
Viewing a movie clip
![Page 28: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/28.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating Frame-by-FrameAnimation
Comes closest to traditional animation techniques
Content is created in every frame
Can be time-consuming, but offers detailed control over the animation
![Page 29: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/29.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating Frame-by-FrameAnimation
Completed frame-by-frame animation
![Page 30: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/30.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating a Shape Tween
Changes (morphs) starting shape into a different ending shape
Create by using shapes instead of symbols, bitmap images, or text Place starting shape in first frame Place ending shape in last frame Create the shape tween
![Page 31: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/31.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating a Shape Tween
Creating a cloud shape
![Page 32: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/32.jpg)
Adobe Flash Professional CS5 – Illustrated
Creating a Shape Tween
Reshaping an object in a shape tween
![Page 33: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/33.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Shape Hints
Mark specific points on beginning and ending shapes that Flash uses to transition one area into another
Correct appearance of a shape tween
Work most effectively when arranged in a clockwise or counterclockwise pattern
![Page 34: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/34.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Shape Hints
Positioning shape hints on the starting shape
![Page 35: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/35.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Shape Hints
Positioned shape hints on the ending shape
![Page 36: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/36.jpg)
Adobe Flash Professional CS5 – Illustrated
Using Shape Hints
Improved shape tween
![Page 37: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/37.jpg)
Planning and Specializing Animation
Planning movies with storyboards Basic storyboards should provide an
organizational and page-level view
Creating a mask Use the shape of an object on one layer
to expose the content of the layer directly beneath it
Adobe Flash Professional CS5 – Illustrated
![Page 38: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/38.jpg)
Planning and Specializing Animation
Animating using the Bone tool Create inverse kinematics (IK) Click and draw hinged segments in the
object Creating a pose
• Adjusting the configuration of the joints in each keyframe
Adobe Flash Professional CS5 – Illustrated
![Page 39: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/39.jpg)
Planning and Specializing Animation
Creating a mask
Adobe Flash Professional CS5 – Illustrated
![Page 40: Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation](https://reader035.vdocument.in/reader035/viewer/2022062301/5697bf871a28abf838c88b9e/html5/thumbnails/40.jpg)
Planning and Specializing Animation
Viewing Inverse Kinematics animated objects
Adobe Flash Professional CS5 – Illustrated