Download presentation
Presentation is loading. Please wait.
1
Tutorial 3 Creating Animations
2
Objectives Learn the different elements of animation
Create frames and layers Organize frames and layers using the Timeline Work with scenes
3
Objectives (continued)
Create Timeline effects Create frame-by-frame animations Create tweened animations Create a graphic symbol animation
4
Elements of Animation Animation changes the content of an object in time Layers: planes organizing Flash document content Guide layers Align objects on other layers to objects on guide layer Contents of guide layer do not appear in SWF file Motion guide layer: provides path for an object to follow Guided layer: layer below motion guide layer
5
Elements of Animation (continued)
Mask layers Reveal portions of a masked (underlying) layer Graphic objects on mask layer define the visible region Frames Contain the content for an animation Represent a particular instant in time Keyframe: represents content change from previous frame
6
The Timeline Timeline A few elements of the Timeline
Grid appearing above the Stage in the program window Used to create, modify, and organize layers and frames Coordinates display of frames used in animation A few elements of the Timeline Layers and layer controls are located on the left Frames for a layer are shown to the right of the layer Keyframes: change frames with a white or black dot Playhead: red rectangle with red vertical line below it
7
Timeline of a Sample Document
8
Changing the View of the Timeline
One method: close panels on right side of window Options available on Frame View pop-up menu Tiny, Small, Normal, Medium, and Large frame widths Preview: shows thumbnail of frame content (scaled) Preview in Context: shows entire frame’s content Tinted Frames: color coded frames based on content
9
Timeline’s Frame View Pop-Up Menu
10
Organizing Layers Using the Timeline
To select a layer you click it in the Timeline Delete a selected layer by clicking Delete Layer Click Delete Layer button at the bottom of the Timeline Adding more layers Click the Insert Layer button on the Timeline Layer Properties dialog box Controls layer properties, such as name and layer height Advice: insert new layers as you add new content
11
Layer Properties Dialog Box
12
Adding Layer Folders Layer folder: Timeline container holding layers
Layers placed in a folder are indented to the right Layer folders help organize content Layer folders can be collapsed to reduce clutter Inserting and using layer folders Click Layer Folder button Change the name of the layer folder Click and drag layers into the new folder
13
Adding Layer Folders
14
Selecting, Copying, and Moving Frames
Actions allowed on one layer or between layers Selecting frames Individual: click single frame in Timeline Multiple: click and drag mouse pointer across frames Copying and moving selected frames Right-click frames and then select Copy Frames Right-click frames and then select Cut Frames Use Paste Frame on target frame to finish copy/move
15
Scenes and Multiple Timelines
Scenes break up a document into smaller sections Each new scene has a separate timeline Using the Scene panel Path to Scene panel: Window Other Panels Scene Actions: add, delete, duplicate, and move scenes Adding a duplicate scene to the Flounders banner Sequence 1: fish swimming across Stage with a sale sign Sequence 2: several fish swimming, plant leaves moving
16
Multiple Scenes in One Document
17
Creating Animation Displaying frames in rapid succession
Timeline effects: animation created by Flash Frame-by-frame animation Developer creates content for each frame Tweened animation Developer creates content for beginning and ending frames Flash creates content for the in-between frames
18
Timeline Effects Accessing Timeline effect dialog boxes
Select object to which effect will be applied Click Insert and then point to Timeline Submenu items: Assistants, Effects, Transform/Transition Select submenu item to open dialog box Using a Timeline effect dialog box Preview effect in the right pane of the dialog box Change the settings and Update Preview to apply them Timeline effects can be modified or removed
19
Example of a Timeline Effect Dialog Box
20
Adding a Timeline Effect to the Flounders Pet Shop Banner
Scene 1 will involve a fish moving with a sign Use Transform Timeline effect to animate Scene 1 Overview of tasks Select, sign, line and fish all at once Open Transform dialog box Change settings: frame number, position, motion ease Click Update Preview Click OK to close dialog and create effect in Timeline
21
Settings for Transform Timeline Effect
22
Frame-by-Frame Animation
Requires content be added to all frames in animation Example: 15 frames must each be supplied with content Graphic object need not change in every frame Creating a frame-by-frame animation Start with a graphic object in the initial frame Add a keyframe where you need the object to change As you add keyframes, you change the object’s position Test the animation after all keyframes are added
23
Sample Frame-by-Frame Animation
24
Adding Frame-by-Frame Animation to the Flounders Pet Shop Banner
Banner has graphic element resembling a plant Animating the plant Convert plant graphic into a symbol Move leaves using frame-by-frame animation Leaves are animated in Timeline of plant symbol Suggestions for creating illusion of movement Add keyframes on every other frame from 1 to 9 Move the tips of the leaves slightly in each keyframe
25
Testing a Document’s Animation
Purpose: ensure that a document works correctly Several techniques for testing animation Click Play command on the Control menu Press Enter on the keyboard Drag playhead back and forth through frames (scrubbing) Click Test Movie command on the Control menu Point to File Publish Preview, click Default (HTML)
26
Tweened Animation Flash varies content between two keyframes
Comparison with frame-by frame animation Tweened animation is quicker Tweened animation does not provide as much control Motion tweening Object changes position or color, rotates, scales in size Shape tweening Changes a shape into another shape over time
27
Motion Tweening Requirement: animated object must be a symbol
Animated object should be placed on a separate layer Overview of process for creating a motion tween Place symbol instance in a keyframe Create a keyframe where the animation will end Change position or color properties of the object Go back to first keyframe and create the animation Creating a motion tweened animation Fish swims between sides of tank in 48 frames
28
Motion Tweening: Property Inspector with Motion Tweened Options
29
Shape Tweening Object used must not be a symbol or grouped object
Requirement differs from that for motion tweens Creating a shape tween Insert object into first keyframe Add keyframe at the end of the animation Change shape of object at terminal end Return to first keyframe and create the animation Flounders Pet Shop banner does not use shape tween
30
Graphic Symbol Animations
Graphic symbols have their own Timeline Frames are synchronized with document’s main Timeline Multiple instances can have different starting frames Instances display their animation when you scrub playhead Creating graphic symbol animations Follow procedure for creating a movie clip animation Property inspector can be used to indicate start frame Graphic can play continuously, once, or only one frame
31
Graphic Instance Properties in the Property Inspector
32
Graphic Symbol Animations (continued)
Plan for animated text in Flounders Web Site banner Words “Fish” and “Aquarium” are displayed on the Stage Words will display one at a time Words will continuously change from one to the other Animation will appear in several places Implementing animated text display Create a primary graphic symbol animation Create several instances of the symbol in the Intro scene Set each instance to begin animation in a different frame
33
Graphic Symbol Instances
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.