4-1 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animation and Guidelines for Flash Project Design Macromedia Flash Design & Application

4-2 OBJ Copyright 2003, Paradigm Publishing Inc.  Describe the difference between frame-by-frame animation and tweened animation. Describe the difference between frame-by-frame animation and tweened animation.  Create and edit a motion tweened animation. Create and edit a motion tweened animation.  Distinguish between regular frames, keyframes, and tweened frames in the Timeline. Distinguish between regular frames, keyframes, and tweened frames in the Timeline.  Rotate and scale a motion tween. Rotate and scale a motion tween.  Ease in and Ease out a motion tween. Ease in and Ease out a motion tween.  Create a motion guide to move an object along a path other than a straight line. Create a motion guide to move an object along a path other than a straight line.  Change the color of an object in a motion tween. Change the color of an object in a motion tween.  Add keyframes in a motion tween. Add keyframes in a motion tween.  Insert, move, copy, and delete frames and keyframes. Insert, move, copy, and delete frames and keyframes.  Preview animations using scrubbing and looped techniques. Preview animations using scrubbing and looped techniques.  Create and edit a shape tweened animation. Create and edit a shape tweened animation. Performance Objectives

4-3 OBJ Copyright 2003, Paradigm Publishing Inc.  Add shape hints to a shape tweened animation. Add shape hints to a shape tweened animation.  Change the frame rate to slow down or speed up an animation. Change the frame rate to slow down or speed up an animation.  Create and edit a frame-by-frame animation. Create and edit a frame-by-frame animation.  Use onion skin tools to view and edit multiple frames in an animation. Use onion skin tools to view and edit multiple frames in an animation.  Change frame view options. Change frame view options.  Describe the role of scenes in a Flash movie. Describe the role of scenes in a Flash movie.  Insert, rename, delete, duplicate, and rearrange scenes. Insert, rename, delete, duplicate, and rearrange scenes.  Define a project's goals and limiting factors. Define a project's goals and limiting factors.  Determine the audience for a Flash movie. Determine the audience for a Flash movie.  Describe how to research best practices for Flash projects. Describe how to research best practices for Flash projects.  List elements to be included in a flow chart and storyboard for a movie. List elements to be included in a flow chart and storyboard for a movie.  COMMANDS REVIEW COMMANDS REVIEW Performance Objectives

4-4 OBJ Copyright 2003, Paradigm Publishing Inc. Techniques for Creating Animation -each change in the movie created in a separate keyframe -suited to movies where the images are complex, require quick movement, or need subtle changes -increased file size frame-by-frame -only two keyframes are created and then Flash creates the frames between the start and end objects called interpolated frames -suited for objects which move smoothly along a path -less file space tweened Animation can be created in Flash using either a frame-by-frame or tweened approach.

4-5 OBJ Copyright 2003, Paradigm Publishing Inc. Types of Tweened Animations MOTION TWEENS -move a grouped object, instance, or text block from one location to another -can change the object's position, size, rotation, or color as it moves SHAPE TWEENS -gradually transform an object from one shape into another in a process known as morphing

4-6 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Motion Tweened Animation Create the object in the starting keyframe and convert the object to a symbol.

4-7 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Motion Tweened Animation…/2 Insert a keyframe where you want the object to end in the animation. -appears as a hollow dot With the inserted keyframe active, move the instance to the ending location.

4-8 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Motion Tweened Animation…/3 select the starting keyframe Insert, Create Motion Tween -frames are shaded and a black arrow is drawn -pointing over any of these shaded frames displays Motion Tweening in a tooltip solid dot indicates keyframe with content

4-9 OBJ Copyright 2003, Paradigm Publishing Inc. Rotating and Scaling a Motion Tween By default, Flash scales the size difference between the starting and ending object in a motion tween. A motion tween can rotate the object clockwise or counterclockwise a set number of times between the starting and ending position on the stage.

4-10 OBJ Copyright 2003, Paradigm Publishing Inc. Slowing Down or Speeding Up a Motion Tween The speed with which an object moves in a tweened animation is constant. Key a positive or negative value between 1 and 100 or drag the slider bar to accelerate or decelerate the speed of movement.

4-11 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Motion Path A motion guide layer can be connected to a tweened object to direct its movement along a path other than a straight line. Orienting the tweened object to the motion path will cause the object to move relative to the angle of the line or shape on the guide layer.

4-12 OBJ Copyright 2003, Paradigm Publishing Inc. Steps to Create a Motion Guide Path for a Tweened Object Make active the layer containing the tweened object. use drawing tools to draw a path Connect the tweened object to the beginning of the path by selecting the object and then dragging its center point to the beginning of the line. click Add Motion Guide lock the motion guide layer Connect the tweened object to the end of the path by dragging its center point to the end of the line. OR Insert, Motion Guide

4-13 OBJ Copyright 2003, Paradigm Publishing Inc. Play the Movie in Flash Player Format Exports the document in swf format and then previews the animation in a Flash Player window. Control, Test Movie or Ctrl + Enter Notice the motion guide line is not displayed.

4-14 OBJ Copyright 2003, Paradigm Publishing Inc. Orienting the Object to the Path Select to orient the object to the motion guide. e.g. cars entering the loop of a roller coaster turn upside down when the loop curves

4-15 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Tween to Change the Color of an Instance Change the color of a symbol instance using these options. Gradually changes the color of the tweened object.

4-16 OBJ Copyright 2003, Paradigm Publishing Inc. Inserting a Keyframe in a Motion Tween Insert, Keyframe Inserting a keyframe between the starting and ending keyframes of an existing motion tween causes Flash to create back-to-back motion tweens.

4-17 OBJ Copyright 2003, Paradigm Publishing Inc. Selecting Frames  Hold down the Shift key and click the mouse to select the range of frames adjacent to the current frame.  Hold down the Ctrl key and click the mouse to select nonadjacent frames.  Frames can also be selected by dragging the mouse across the frame boxes. Selected frames within an existing animation display in black.

4-18 OBJ Copyright 2003, Paradigm Publishing Inc. Inserting and Removing Frames INSERTING FRAMES -lengthens the duration of a movie -Insert, Frame or F5 REMOVING FRAMES -deletes the selected frames including all content associated with the frames -Insert, Remove Frames or Shift + F5

4-19 OBJ Copyright 2003, Paradigm Publishing Inc. Clearing Frames -removes a selected frame's content but leaves the frame box intact - a cleared frame is converted to a blank keyframe Edit, Clear Frames or Alt + Backspace

4-20 OBJ Copyright 2003, Paradigm Publishing Inc. Moving Frames Select ending frames in all layers and then drag right to increase length of animation.

4-21 OBJ Copyright 2003, Paradigm Publishing Inc. Copying Frames duplicates content within an animation Edit, Copy Frames or Ctrl + Alt + C Edit, Paste Frames or Ctrl + Alt + V

4-22 OBJ Copyright 2003, Paradigm Publishing Inc. Previewing Animations Control, Play or Enter Previews the animation once and then stops. Control, Loop Playback Previews the animation over and over again. Control, Stop or Enter Stops playing the animation.

4-23 OBJ Copyright 2003, Paradigm Publishing Inc. ScrubbingScrubbing A technique used to preview a movie by dragging the playhead back and forth.

4-24 OBJ Copyright 2003, Paradigm Publishing Inc. Using the Controller Window, Toolbars, Controller Stop Rewind Step BackPlay Step Forward Go To End

4-25 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Shape Tweened Animation Create a shape tweened animation from the Interpolate drop-down list. Select morph type to interpolate the frames in a smooth fashion or by maintaining corners and straight lines. The object must be ungrouped so that Flash can calculate the vectors that transform the shape.

4-26 OBJ Copyright 2003, Paradigm Publishing Inc. Using Shape Hints Corresponding markers placed on the start and end objects that control how the shape is interpolated. -mapping Flash labels corresponding markers with lowercase alphabetic letters.

4-27 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Shape Hints Modify, Shape, Add Shape Hint or Ctrl + Shift + H A red circle with a lowercase letter is inserted in the middle of the object. Drag to the location where you want to map your first point. The marker will not change color to yellow until the corresponding marker on the end object is mapped to a valid point. Click the ending keyframe and drag the marker to the point which you want to correlate with the marker on the starting object. Markers need to be placed on the outside edges of a shape.

4-28 OBJ Copyright 2003, Paradigm Publishing Inc. Viewing and Removing Shape Hints View, Show Shape Hints or Ctrl + Alt + H -toggles on or off the display of shape hints Modify, Shape, Remove All Hints -deletes all markers from the objects Drag individual shape hint off the stage. -automatically deletes corresponding marker

4-29 OBJ Copyright 2003, Paradigm Publishing Inc. Adjusting the Frame Rate for Animations Modify, Document or Ctrl + J Complex animations can play back at variable rates dependent on the processing speed of the computer. adjust frame rate -default is 12 fps -higher fps setting increases the file size

4-30 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Frame-by-Frame Animations Insert, Blank Keyframe Frame-by-frame animations are built by inserting keyframes at each change in content. -clears the stage of content from the previous keyframe Insert, Clear Keyframe or Shift + F6 -removes the frame's keyframe status and associated content

4-31 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Frame-by-Frame Animations…/2  Automatically creates a keyframe span  includes frames from the starting keyframe to the frame immediately left of the next keyframe  Frames between keyframes are shaded gray  motion tweened frames are shaded light blue  shape tweened frames are shaded light green  Keyframes can be created by converting regular frames to keyframes

4-32 OBJ Copyright 2003, Paradigm Publishing Inc. Onion Skin View -displays the position of objects on more than one frame on the stage -can provide a better insight into an animation's movements hidden or locked layers do not display displays current frame in color while adjacent frames are dimmed

4-33 OBJ Copyright 2003, Paradigm Publishing Inc. Viewing Onion Skinned Frames as Outlines -displays the objects with the dimmed frames in Outline mode

4-34 OBJ Copyright 2003, Paradigm Publishing Inc. Editing in Onion Skin View Start and End Onion Skin markers -can be dragged left or right to increase or decrease the span of onion skinned frames Any of the sailboats can be moved to a new position in Edit Multiple Frames Click Modify Onion Markers to choose options controlling the number of frames displayed

4-35 OBJ Copyright 2003, Paradigm Publishing Inc. Changing Frame View Options Frames in the Timeline can be displayed with different width and height options by clicking the Frame View button at the top right of the Timeline panel.

4-36 OBJ Copyright 2003, Paradigm Publishing Inc. Changing Frame View Options…/2 Small frames Medium frames Large frames

4-37 OBJ Copyright 2003, Paradigm Publishing Inc. Changing Frame View Options…/3 Preview frames Preview In Context frames

4-38 OBJ Copyright 2003, Paradigm Publishing Inc. Centering a Frame within the Timeline Panel -centers the active frame within the Timeline window -useful for large movies

4-39 OBJ Copyright 2003, Paradigm Publishing Inc. Organizing Animations Using Scenes  Scenes are an organizational tool  for larger, more complex movies  to organize content into manageable sections  Each scene is created and edited in a separate Timeline and stage

4-40 OBJ Copyright 2003, Paradigm Publishing Inc. Working with Scenes Window, Scene or Shift + F2 Delete scene Add scene Duplicate scene OR Insert, Remove Scene Insert, Scene

4-41 OBJ Copyright 2003, Paradigm Publishing Inc. Navigating Scenes OR click a scene name click the Edit Scene button and click a scene name

4-42 OBJ Copyright 2003, Paradigm Publishing Inc. Guidelines for Flash Project Design  Understanding the scope of the process will complement your technical skills  allows you to put the production process in perspective  The Role of Communication  needs must be clearly communicated and understood by all team members  clear communication is essential for completion of a successful project

4-43 OBJ Copyright 2003, Paradigm Publishing Inc. Defining the Goals and Limiting Factors  An understanding of the expected outcomes from the movie is the first step in the process  What is the movie's purpose?  Is the movie intended to inform or entertain the end user?  Should the movie promote a bias towards a product or service?  What is the main message that is to be portrayed?

4-44 OBJ Copyright 2003, Paradigm Publishing Inc. Defining the Goals and Limiting Factors…/2  Determine if there are any limiting factors  What is the project schedule?  What is the project budget?  How will the content be delivered?  Are we starting from scratch or does the client have existing material that can be reused or re- engineered?  Are graphics required that cannot be done in Flash?  Is sound or video required?  Has the client presented any design guidelines?  What are the specifications for the Web site in which the movie will be incorporated?  Are there any copyright issues that have to be resolved?

4-45 OBJ Copyright 2003, Paradigm Publishing Inc. Determining the Audience  Audience-centered design involves researching:  Demographics of expected audience.  Audience expectations for a Web site or multimedia package for the product or service that is being represented.  Presence of a bias or other preconception about the subject matter.

4-46 OBJ Copyright 2003, Paradigm Publishing Inc. Researching Best Practices for Flash  Spend time surfing the Web sites of successful organizations who serve the target audience  What was the element that held your interest?  Was the surfing experience intuitive?  How much interactivity was included?  What colors were used and did the colors create a sense of harmony?  What properties were used for the text?  How much graphical content was incorporated and how was it used?  Did the movie take too long to download?  Was there a method with which users could turn the sound on or off?  What would you improve at the site?

4-47 OBJ Copyright 2003, Paradigm Publishing Inc. Creating a Flow Chart and Storyboard  A flow chart is a dynamic document that visually maps the movie in sequence  designed to show the logical progression of the content  Storyboarding a project includes details and specifications on document properties, each individual frame and its objects including graphics, colors, fonts, position, sound, and video  represents the master script with enough information so that anyone could take over the project  Flash projects are usually divided up among group members based on expertise  A Flash project is usually part of a larger Web design strategy

4-48 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you add a scene? Insert, Scene

4-49 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you add shape hints? Modify, Shape, Add Shape Hint or Ctrl + Shift + H

4-50 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you clear frames? -removes a selected frame's content but leaves the frame box intact - a cleared frame is converted to a blank keyframe Edit, Clear Frames or Alt + Backspace

4-51 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you clear a keyframe? Insert, Clear Keyframe or Shift + F6 -removes the frame's keyframe status and associated content

4-52 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you copy frames? Edit, Copy Frames or Ctrl + Alt + C

4-53 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the Controller toolbar? Window, Toolbars, Controller

4-54 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you create a motion tween? Insert, Create Motion Tween

4-55 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you cut frames? Edit, Cut Frames or Ctrl + Alt + X

4-56 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the document properties dialog box? Modify, Document or Ctrl + J

4-57 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you insert a blank keyframe? Insert, Blank Keyframe -clears the stage of content from the previous keyframe

4-58 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you insert a frame? INSERTING FRAMES -lengthens the duration of a movie -Insert, Frame or F5

4-59 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you insert a keyframe? Insert, Keyframe Inserting a keyframe between the starting and ending keyframes of an existing motion tween causes Flash to create back-to-back motion tweens.

4-60 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you insert a motion guide? Insert, Motion Guide

4-61 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you loop the playback of a movie? Control, Loop Playback Previews the animation over and over again.

4-62 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you paste frames? Edit, Paste Frames or Ctrl + Alt + V

4-63 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you access the Paste in Place feature? Edit, Paste in Place or Ctrl + Shift + V

4-64 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you play a movie? Control, Play or Enter Previews the animation once and then stops.

4-65 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you play a movie in Flash Player format? Control, Test Movie or Ctrl + Enter

4-66 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you remove frames? REMOVING FRAMES -deletes the selected frames including all content associated with the frames -Insert, Remove Frames or Shift + F5

4-67 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you remove a scene? Insert, Remove Scene

4-68 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you remove shape hints? Modify, Shape, Remove All Hints -deletes all markers from the objects

4-69 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you stop the playback of a looped movie? Control, Stop or Enter Stops playing the animation.

4-70 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you view shape hints? View, Show Shape Hints or Ctrl + Alt + H -toggles on or off the display of shape hints

4-71 OBJ Copyright 2003, Paradigm Publishing Inc. Commands Review How do you display the Scene panel? Window, Scene or Shift + F2

4-72 OBJ Copyright 2003, Paradigm Publishing Inc. Adding Sound, Video, and Basic Interactivity with Buttons Coming Next