of 27/27
Tutorial 3 Creating Animations

Tutorial 3 Creating Animations

  • View

  • Download

Embed Size (px)


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 Presentation

Text of Tutorial 3 Creating Animations

Tutorial 3

Tutorial 3

Creating AnimationsXPXP1ObjectivesLearn the different elements of animationCreate frames and layersOrganize frames and layers using the Timeline Work with scenesCreate animationsCreate and modify motion tweensNew Perspectives on Adobe Flash CS42XPXP2ObjectivesApply a motion preset animationTest animationsCreate a classic tween animationUse graphic symbols in animationsCreate a frame-by-frame animationCreate shape tween animations

New Perspectives on Adobe Flash CS43XPXP3The TimelineTimelineGrid appearing below the Stage in the program windowUsed to create, modify, and organize layers and framesA few elements of the Timeline Layers organize the content of a documentFrames contain the content for an animation and represent a particular instant in timeKeyframes: frame that contains a new symbol instance or a new graphicPlayhead marks current frameNew Perspectives on Adobe Flash CS44XPXP4The TimelineNew Perspectives on Adobe Flash CS45

XPXP5Changing the View of the TimelineClose panels in the Flash program windowMove the TimelineUndock the Timeline and display it as a floating panelModify the dimensions of the framesTiny, Small, Normal, Medium, and Large frame widths Adjust the height of the Timeline windowNew Perspectives on Adobe Flash CS46XPXP6Frames in Preview and Short ViewNew Perspectives on Adobe Flash CS47

XPXP7Organizing Layers Using the TimelineAdd new layers as you create an animationLengthy or complex animations could have a large number of layersSelect a layer to edit its contentName each layer according to its contentNew Perspectives on Adobe Flash CS48XPXP8Adding Layer FoldersLayer folder: Timeline container holding layers Layers placed in a folder are indented to the rightLayer folders help organize content Layer folders can be collapsed to reduce clutterInserting and using layer foldersClick layer, then click New Folder buttonChange the name of the layer folderClick and drag layers into the new folderNew Perspectives on Adobe Flash CS49XPXP9Adding Layer FoldersNew Perspectives on Adobe Flash CS410

XPXP10Selecting, Copying, and Moving FramesActions allowed on one layer or between layersSelecting frames Individual: click single frame in TimelineMultiple: click and drag mouse pointer across framesCopying and moving selected framesRight-click frames and then select Copy Frames Right-click frames and then select Cut FramesUse Paste Frame on target frame to finish copy/move New Perspectives on Adobe Flash CS411XPXP11Using Scenes and Multiple TimelinesScenes break up a document into smaller sections Each new scene has a separate timelineUsing the Scene panelPath to Scene panel: Window Other Panels Scene Actions: add, delete, duplicate, and move scenesNew Perspectives on Adobe Flash CS412XPXP12Multiple Scenes in One DocumentNew Perspectives on Adobe Flash CS413

XPXP13Creating AnimationDisplaying frames in rapid successionTweened animationDeveloper creates content for beginning and ending framesFlash creates content for the in-between framesFrame-by-frame animationDeveloper creates content for each frameNew Perspectives on Adobe Flash CS414XPXP14Creating a Motion TweenA motion tween is an animation where an object changes its position, rotates, scales in size, or changes in colorIn Flash, these are called object-based animations

New Perspectives on Adobe Flash CS415

XPXP15Creating a Motion TweenTo create a motion tween animation:Add an instance of a symbol or text block at the start of the animationApply a motion tween to the objectFlash creates a 24-frame tween spanModify object propertiesNew Perspectives on Adobe Flash CS416XPXP16Motion Tween PropertiesNew Perspectives on Adobe Flash CS417

XPXP17Creating a Motion TweenNew Perspectives on Adobe Flash CS418

XPXP18Modifying a Motion TweenYou can change the properties of the target object anywhere within the tween span or by changing the curve of the motion pathFlash automatically adjusts the rest of the motion tweenNew Perspectives on Adobe Flash CS419

XPXP19Using Motion PresetsA motion preset is a prebuilt motion tween animationThere are 30 default motion preset animationsSome default motion presets include:New Perspectives on Adobe Flash CS420

XPXP20Using Motion PresetsNew Perspectives on Adobe Flash CS421

XPXP21Applying a Motion Preset AnimationClick Selection toolDraw a marquee around the objectConvert the selected object to a movie click symbolIf necessary, move the objectClick Window, and then click Motion PresetsDouble-click the Default Presets folder, and then select a motion presetClick the Apply buttonNew Perspectives on Adobe Flash CS422XPXP22Testing an Documents AnimationTo 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 CS423XPXP23Using Graphic Symbols in AnimationsYou can specify which frames to play first with a graphic instanceGraphic symbols have their own TimelinesTo change a symbol instance to a graphic instance:Select symbolIn Property inspector, click Instance behaviorClick GraphicSet propertiesNew Perspectives on Adobe Flash CS424XPXP24Creating Frame-by-Frame AnimationRequires content be added to all frames in animationExample: 15 frames must each be supplied with contentGraphic object need not change in every frame Creating a frame-by-frame animationStart with a graphic object in the initial frameAdd a keyframe where you need the object to changeAs you add keyframes, you change the objects positionTest the animation after all keyframes are added New Perspectives on Adobe Flash CS425XPXP25Sample Frame-by-Frame AnimationNew Perspectives on Adobe Flash CS426

XPXP26Creating Shape TweenA shape tween is an animation that takes one shape and transforms it into another shapeTo create a shape tween:Create the graphic content at the beginning and ending framesFlash creates the tweened framesThe object in the shape tween must not be a symbol or grouped objectNew Perspectives on Adobe Flash CS427XPXP27