Syllabus --------------------- Calendar/Schedule --------------------- Lecture Notes --------------------- Projects --------------------- Resources --------------------- Student Work				Art 444 Lecture Notes Flash MX 2004 Lecture Notes Frame-By-Frame Animations (Chapter 7) Using the Timeline: the timeline can be resized, undocked, has five options for viewing frames and two for previewing thumbnails of frame contents. Creating Keyframes: Insert> Timeline> Blank Keyframe defines a keyframe that is empty (F7). Insert> Timeline> Keyframe defines a keyframe that duplicates the content of a preceding keyframe in that layer (F6). A blank keyframe is represented with a empty circle in a frame; a keyframe is one with a solid black circle on the timeline. Note: hold the Control key on a frame to bring up these commands. In-Between Frames: are frames that appear between and are related to the keyframe that precedes them. Creating In-between Frames: to create an in-between frame, select your keyframe and use Insert> Timeline> Frame (F5). Selecting Frames: you can select an individual keyframe or a block of keyframes and in-between frames and move them to different positions on the timeline and to different layers. To add to an selection use shift + select feature or drag the selection across to opposite corners. Copying & Pasting Frames: you can't copy or paste frames by using standard copy & paste commands; after selecting the frames to copy, from Edit> Timeline> select Copy Frames. Create a new layer or blank keyframe to with Paste Frames (Edit> Timeline> Paste Frames). Note: hold the Control key on a frame to bring up these commands. Removing Frames: To delete a range of frames or keyframes, shift/select the frames to be removed and hold your option key on a frame and select Remove Frame (shift +F5). or Clear Keyframe (shift +F6). Frame-by-Frame Animation: each keyframe has a slightly different content and when animated gives a sense of movement or change. This type of animation is time consuming and adds to your movie's final size. Tweened Animation: Flash interpolates the minor changes that take place between keyframes. This type of animation is less tedious to create than frame-by-frame Animation and creates smaller file sizes. Previewing the Action: a controller window offers VCR-style playback buttons (Window> Toolbars> Controller) To playback in the Flash editor press Return/Enter key. To playback w/ the Flash Player choose Control> Test Movie or Test Scene. Playback may be looped with Control> Loop Playback. "Scrubbing" or moving back & forth the red bar on the timeline also previews action. Onion Skinning: allows you to see the position or state of the frames surrounding your selected keyframe. To turn onion skinning on, click the Onion Skin icon in the status bar of the timeline. To turn outline onion skinning on, click the Onion Skin Outlines icon in the status bar of the timeline. You can change the number of frames included in onion skinning by adjusting the slider bar at the top of the timeline or by clicking the Modify Onion Markers button in the status bar of the Timeline. Editing Multiple Frames: by clicking the Edit Multiple frames icon in the status bar of the Timeline, you can reposition related, animated items by selecting all at once and moving them to a new position. Frame Rate: select the stage and in Properties panel change your movie's frame rate. For web-based animation, the default setting of 12 fps is a good to use. Varying Animation Speed: by adding more frames to each keyframe of an animation you can slow down the effect. Animation With Motion Tweening: (Chapter 8) Creating a motion tween: Extend an object on the stage over several frames. Select the object's first keyframe on the timeline and while holding the Control key, select Create Motion Tween from the pull-down menu. You should see a dotted line across the frames. Select the last frame in the sequence and while holding the Control key, select Insert Keyframe. An arrow will replace the dotted line showing the inbetween of the animation. Select the object on the stage and move it to a new position. Scrub the timline to see the object move back and forth. Setting the tween property: motion tweens can also be created in the Frame Properties panel. Ending a motion tween: select the beginning keyframe of a motion tween sequence and select None from the Tween pull-down menu in the Frame Properties panel. Adding keyframes to motion tweens: insert a new keyframe within a motion tween holding the Control key on a frame within the motion tween. Keyboard shortcuts: F5 (insert frame), F6 (insert keyframe), F7 (insert blank keyframe) Animating color effects: tweens automatically convert an object to a symbol so color effects (such as alpha) in the Frame Properties panel can be applied and animated over time. opacity (alpha), and brightness of an object over time. Note: first select the frame on the timeline where you want the change to occur then select the object on the stage to apply the color effect. Animating the graphics scale: change the size of an object by selecting a keyframe in a motion tween and applying the Free Transform tool. Rotating & spinning a graphic: create motion-tween for a baton shaped object. Rather than moving the second keyframe to a new spot, select the first frame on the timline and then select the baton object on the stage. In the Tween Properties panel select Rotate> CW (clock-wise) or CCW (counter clock-wise)and number of times to rotate. Creating a motion guide: allows movement of an object along an arc or non-straight path. After creating a point-to-point motion tween, click on the Add Guide Layer icon in the status bar of the Timeline (next to Add Layer icon). Make sure Snap is checked in the Tween Properties panel. With both the Onion Skin and the Edit Multiple Frames icons selected, select the Guide layer and with any drawing tool create an arc line connecting the beginning and ending keyframes of the tweened object. The first and last keyframe must snap to starting and ending points of the arc. The object should follow the motion curve when you scrub the timeline. Additional tweened objects on different layers may be guided with the same motion guide. To see your animation without the motion guide line, turn the off the visibility of the motion guide layer. Orienting graphics to a motion path: some shapes do not follow the motion paths properly. To correct, you can select the Orient to Path' option in the Tween Properties panel. Additionally, the Orient to Path feature may need to be tweaked to animate properly. Add additional keyframes and rotate the object to the right position at this point. Changing tween speed: Flash distributes motion evenly over frames. Changing tween speed allows you to Ease In (start slowly then accelerate) and Ease Out (start quickly then decelerate) the motion over time. Change tween speed in the Tween Properties panel, a lower easing value (-) the greater the rate of acceleration and a higher (+) value the greater the rate of deceleration. Animation With Shape Tweening: (Chapter 9) Shape tweening: requires an editable shape (this technique will not work on symbols or groups) with beginning & ending keyframes. You define the in-between frames as a shape tween. Morphing simple lines & fills: create an oval shape on the stage and extend it for four frames (F5). On the fifth frame insert a blank keyframe (F7) and draw a rectangle into it. Select the first frame and change the select Shape from the Tween pull-down menu in Frame Properties (you should see a tween arrow and the first four frames will change to light green). To align the oval and rectangle on top of one another use onion skinning. Shape tweening multiple shapes: position one shape tween per layer as you may get unexpected results with more than one. Transforming simple shapes into complex shapes: Flash doesn't always translate shape tweens logically. Shape hints may be used to help 'guide' the shape tween. They are markers that allow you to identify points on the original shape's outline and correspond to points on the final shape's outline. See pages 367-371. Moving shape tweens: shape tweens can not be moved across a path although you can move them in a staright line by moving the end keyframe to a different part of the stage.

Back to top of page | School of Art, Design and Art History | SDSU Main