tutorial 3 creating animations

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


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


XPXPThe Timeline


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


XPXPFrames in Preview and Short View


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


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


XPXPAdding Layer Folders


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


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


XPXPMultiple Scenes in One Document


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


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


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


XPXPMotion Tween Properties


XPXPCreating a Motion Tween


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


XPXPUsing Motion Presets• A motion preset is a prebuilt motion tween

animation– There are 30 default motion preset animations– Some default motion presets include:


XPXPUsing Motion Presets


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).


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


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


XPXPSample Frame-by-Frame Animation


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


tutorial 3 creating animations

Documents

adobe flash cs46xpxp6frames

layers layers

copymove new perspectives

new foldernew perspectives

adobe flash cs45 xpxp5changing

documentnew perspectives

contentnew perspectives

scenesnew perspectives