tutorial 3 creating animations. xp objectives learn the different elements of animation create...
TRANSCRIPT
Tutorial 3
Creating Animations
XPXPObjectives• Learn the different elements of animation• Create frames and layers• Organize frames and layers using the Timeline • Work with scenes
New Perspectives on Adobe Flash CS3 2
XPXPObjectives• Create Timeline effects• Create frame-by-frame animations• Create tweened animations• Create a graphic symbol animation
New Perspectives on Adobe Flash CS3 3
XPXPThe Timeline• Timeline– Grid appearing above the Stage in the program window– Used to create, modify, and organize layers and frames
• 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 in content from the previous frame– Playhead: red rectangle with red vertical line below it
New Perspectives on Adobe Flash CS3 4
XPXPTimeline of a Sample Document
New Perspectives on Adobe Flash CS3 5
XPXPChanging 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
• Adjust the height of the Timeline window
New Perspectives on Adobe Flash CS3 6
XPXPTimeline Window Resized
New Perspectives on Adobe Flash CS3 7
XPXPOrganizing 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
• Advice: insert new layers as you add new content
New Perspectives on Adobe Flash CS3 8
XPXPAdding 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 Insert Layer Folder button– Change the name of the layer folder– Click and drag layers into the new folder
New Perspectives on Adobe Flash CS3 9
XPXPAdding Layer Folders
New Perspectives on Adobe Flash CS3 10
XPXPSelecting, 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
New Perspectives on Adobe Flash CS3 11
XPXPUsing 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
New Perspectives on Adobe Flash CS3 12
XPXPMultiple Scenes in One Document
New Perspectives on Adobe Flash CS3 13
XPXPCreating 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
New Perspectives on Adobe Flash CS3 14
XPXPTimeline 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
New Perspectives on Adobe Flash CS3 15
XPXPExample of a Timeline Effect Dialog Box
New Perspectives on Adobe Flash CS3 16
XPXPAdding 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
New Perspectives on Adobe Flash CS3 17
XPXPSettings for Transform Timeline Effect
New Perspectives on Adobe Flash CS3 18
XPXPCreating 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
New Perspectives on Adobe Flash CS3 19
XPXPSample Frame-by-Frame Animation
New Perspectives on Adobe Flash CS3 20
XPXPTesting 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)
New Perspectives on Adobe Flash CS3 21
XPXPCreating 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
New Perspectives on Adobe Flash CS3 22
XPXPCreating a 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
New Perspectives on Adobe Flash CS3 23
XPXPMotion Tweening: Property Inspector with Motion Tweened Options
New Perspectives on Adobe Flash CS3 24
XPXPCreating Shape Tween• 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
New Perspectives on Adobe Flash CS3 25
XPXPCreating 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
New Perspectives on Adobe Flash CS3 26
XPXPGraphic Instance Properties in the Property Inspector
New Perspectives on Adobe Flash CS3 27
XPXPGraphic Symbol Instances
New Perspectives on Adobe Flash CS3 28