Presentation is loading. Please wait.

Presentation is loading. Please wait.

Tutorial 3 Creating Animations.

Similar presentations


Presentation on theme: "Tutorial 3 Creating Animations."— Presentation transcript:

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


Download ppt "Tutorial 3 Creating Animations."

Similar presentations


Ads by Google