tutorial 3 creating animations
DESCRIPTION
Tutorial 3 Creating Animations. Objectives. Learn the different elements of animation Create frames and layers Organize frames and layers using the Timeline Work with scenes Create animations Create and modify motion tweens. Objectives. Apply a motion preset animation Test animations - PowerPoint PPT PresentationTRANSCRIPT
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• Create animations• Create and modify motion tweens
New Perspectives on Adobe Flash CS4 2
XPXPObjectives• Apply a motion preset animation• Test animations• Create a classic tween animation• Use graphic symbols in animations• Create a frame-by-frame animation• Create shape tween animations
New Perspectives on Adobe Flash CS4 3
XPXPThe Timeline• Timeline– Grid appearing below the Stage in the program window– Used to create, modify, and organize layers and frames
• A few elements of the Timeline – Layers organize the content of a document– Frames contain the content for an animation and
represent a particular instant in time• Keyframes: frame that contains a new symbol
instance or a new graphic– Playhead marks current frame
New Perspectives on Adobe Flash CS4 4
XPXPThe Timeline
New Perspectives on Adobe Flash CS4 5
XPXPChanging the View of the Timeline• Close panels in the Flash program window• Move the Timeline• Undock the Timeline and display it as a floating
panel• Modify the dimensions of the frames– Tiny, Small, Normal, Medium, and Large frame
widths • Adjust the height of the Timeline window
New Perspectives on Adobe Flash CS4 6
XPXPFrames in Preview and Short View
New Perspectives on Adobe Flash CS4 7
XPXPOrganizing Layers Using the Timeline• Add new layers as you create an animation• Lengthy or complex animations could have a
large number of layers• Select a layer to edit its content• Name each layer according to its content
New Perspectives on Adobe Flash CS4 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 layer, then click New Folder button– Change the name of the layer folder– Click and drag layers into the new folder
New Perspectives on Adobe Flash CS4 9
XPXPAdding Layer Folders
New Perspectives on Adobe Flash CS4 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 CS4 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 CS4 12
XPXPMultiple Scenes in One Document
New Perspectives on Adobe Flash CS4 13
XPXPCreating Animation• Displaying frames in rapid succession• Tweened animation– Developer creates content for beginning and
ending frames– Flash creates content for the in-between frames
• Frame-by-frame animation– Developer creates content for each frame
New Perspectives on Adobe Flash CS4 14
XPXPCreating a Motion Tween• A motion tween is an animation where an object
changes its position, rotates, scales in size, or changes in color– In Flash, these are called object-based animations
New Perspectives on Adobe Flash CS4 15
XPXPCreating a Motion Tween• To create a motion tween animation:– Add an instance of a symbol or text block at the
start of the animation– Apply a motion tween to the object– Flash creates a 24-frame tween span–Modify object properties
New Perspectives on Adobe Flash CS4 16
XPXPMotion Tween Properties
New Perspectives on Adobe Flash CS4 17
XPXPCreating a Motion Tween
New Perspectives on Adobe Flash CS4 18
XPXPModifying a Motion Tween• You can change the properties of the target
object anywhere within the tween span or by changing the curve of the motion path– Flash automatically adjusts the rest of the motion
tween
New Perspectives on Adobe Flash CS4 19
XPXPUsing Motion Presets• A motion preset is a prebuilt motion tween
animation– There are 30 default motion preset animations– Some default motion presets include:
New Perspectives on Adobe Flash CS4 20
XPXPUsing Motion Presets
New Perspectives on Adobe Flash CS4 21
XPXPApplying a Motion Preset Animation• Click Selection tool• Draw a marquee around the object• Convert the selected object to a movie click
symbol• If necessary, move the object• Click Window, and then click Motion Presets• Double-click the Default Presets folder, and then
select a motion preset• Click the Apply buttonNew Perspectives on Adobe Flash CS4 22
XPXPTesting an Document’s Animation• To test an animation on the Stage, on the
Application bar, click Control, and then click Play (or press the Enter key).
• To test a few frames of animation, scrub the playhead along the Timeline header.
• To test the animation in a Flash Player window, on the Application bar, click Control, and then click Test Movie.
• To test the animation in a Web page, on the Application bar, click File, point to Publish Preview, and click Default - (HTML).
New Perspectives on Adobe Flash CS4 23
XPXPUsing Graphic Symbols in Animations• You can specify which frames to play first with a
graphic instance• Graphic symbols have their own Timelines• To change a symbol instance to a graphic
instance:– Select symbol– In Property inspector, click Instance behavior– Click Graphic– Set properties
New Perspectives on Adobe Flash CS4 24
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 CS4 25
XPXPSample Frame-by-Frame Animation
New Perspectives on Adobe Flash CS4 26
XPXPCreating Shape Tween• A shape tween is an animation that takes one
shape and transforms it into another shape• To create a shape tween:– Create the graphic content at the beginning and
ending frames– Flash creates the tweened frames– The object in the shape tween must not be a
symbol or grouped object
New Perspectives on Adobe Flash CS4 27