Macromedia Flash Design Application OBJ 4 1 Creating

Performance Objectives OBJ 4 -2 Ø Describe the difference between frame-by-frame animation and tweened animation. Ø Create and edit a motion tweened animation. Ø Distinguish between regular frames, keyframes, and tweened frames in the Timeline. Ø Rotate and scale 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. Ø Change the color of an object in a motion tween. Ø Add keyframes in a motion tween. Ø Insert, move, copy, and delete frames and keyframes. Ø Preview animations using scrubbing and looped techniques. Ø Create and edit a shape tweened animation. Copyright 2003, Paradigm Publishing Inc.

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

Techniques for Creating Animation can be created in Flash using either a frame-by-frame or tweened approach. frame-by-frame tweened -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 -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 OBJ 4 -4 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 OBJ 4 -5 Copyright 2003, Paradigm Publishing Inc.

Creating a Motion Tweened Animation Create the object in the starting keyframe and convert

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

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 OBJ 4 -8 Copyright 2003, Paradigm Publishing Inc.

Rotating and Scaling 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. OBJ 4 -9 Copyright 2003, Paradigm Publishing Inc. By default, Flash scales the size difference between the starting and ending object in a motion tween.

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. OBJ 4 -10 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. OBJ 4 -11 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. Copyright 2003, Paradigm Publishing Inc.

Steps to Create a Motion Guide Path for a Tweened Object Make active the layer containing the tweened object. click Add Motion Guide OR Insert, Motion Guide 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. use drawing tools to draw a path OBJ 4 -12 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. 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. OBJ 4 -13 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 OBJ 4 -14 Copyright 2003, Paradigm Publishing Inc.

Creating a Tween to Change the Color of an Instance Gradually changes the color of the tweened object. Change the color of a symbol instance using these options. OBJ 4 -15 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. OBJ 4 -16 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. OBJ 4 -17 Copyright 2003, Paradigm Publishing Inc.

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

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

Moving Frames Select ending frames in all layers and then drag right to increase

Copying Frames duplicates content within an animation Edit, Copy Frames or Ctrl + Alt

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. OBJ 4 -22 Copyright 2003, Paradigm Publishing Inc.

Scrubbing A technique used to preview a movie by dragging the playhead back and

Using the Controller Window, Toolbars, Controller Stop Rewind Step Back OBJ 4 -24 Copyright

Creating a Shape Tweened Animation The object must be ungrouped so that Flash can calculate the vectors that transform the shape. 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. OBJ 4 -25 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. OBJ 4 -26 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. OBJ 4 -27 Markers need to be placed on the outside edges of a shape. 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 OBJ 4 -28 Copyright 2003, Paradigm Publishing Inc.

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

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

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 OBJ 4 -31 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 OBJ 4 -32 displays current frame in color while adjacent frames are dimmed Copyright 2003, Paradigm Publishing Inc.

Viewing Onion Skinned Frames as Outlines -displays the objects with the dimmed frames in

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 OBJ 4 -34 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. OBJ 4 -35 Copyright 2003, Paradigm Publishing Inc.

Changing Frame View Options…/2 Small frames Medium frames Large frames OBJ 4 -36 Copyright

Changing Frame View Options…/3 Preview frames Preview In Context frames OBJ 4 -37 Copyright

Centering a Frame within the Timeline Panel -centers the active frame within the Timeline

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 OBJ 4 -39 Copyright 2003, Paradigm Publishing Inc.

Working with Scenes Window, Scene or Shift + F 2 OR OBJ 4 -40

Navigating Scenes click a scene name click the Edit Scene button and click a

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 OBJ 4 -42 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? OBJ 4 -43 Copyright 2003, Paradigm Publishing Inc.

Defining the Goals and Limiting Factors…/2 Ø Determine if there any limiting factors § § § § § OBJ 4 -44 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 reengineered? 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? 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. OBJ 4 -45 Copyright 2003, Paradigm Publishing Inc.

Researching Best Practices for Flash Ø Spend time surfing the Web sites of successful organizations who serve the target audience § § § § OBJ 4 -46 § 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? 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 OBJ 4 -47 Ø Flash projects are usually divided up among group members based on expertise Ø A Flash project is usually part of a larger Web design strategy Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you add a scene? Insert, Scene OBJ 4 -48 Copyright

Commands Review How do you add shape hints? Modify, Shape, Add Shape Hint or

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

Commands Review How do you clear a keyframe? Insert, Clear Keyframe or Shift +

Commands Review How do you copy frames? Edit, Copy Frames or Ctrl + Alt

Commands Review How do you display the Controller toolbar? Window, Toolbars, Controller OBJ 4

Commands Review How do you create a motion tween? Insert, Create Motion Tween OBJ

Commands Review How do you cut frames? Edit, Cut Frames or Ctrl + Alt

Commands Review How do you display the document properties dialog box? Modify, Document or

Commands Review How do you insert a blank keyframe? Insert, Blank Keyframe -clears the

Commands Review How do you insert a frame? INSERTING FRAMES -lengthens the duration of

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. OBJ 4 -59 Copyright 2003, Paradigm Publishing Inc.

Commands Review How do you insert a motion guide? Insert, Motion Guide OBJ 4

Commands Review How do you loop the playback of a movie? Control, Loop Playback

Commands Review How do you paste frames? Edit, Paste Frames or Ctrl + Alt

Commands Review How do you access the Paste in Place feature? Edit, Paste in

Commands Review How do you play a movie? Control, Play or Enter Previews the

Commands Review How do you play a movie in Flash Player format? Control, Test

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 + F 5 OBJ 4 -66 Copyright 2003, Paradigm Publishing Inc.