Frame-By-Frame Animation 02

project: Frame-By-Frame Animation 02

description: In this tutorial you will learn how to make a simple frame-by-frame animation like the one at right.

Files: The frame_by_frame_02.fla file is in your fla_files folder.

step 1: Select the Oval Tool, set the stroke to none and the fill to any color then draw an oval on the stage (Figure A)

step 2: Insert a keyframe on frame 2 in the timeline. (Figure B)

step 3: At this point you could use any number of methods to alter the shape/size/color of the oval but I'm going to suggest you use a most underutilized tool: the Subselection Tool. (Figure C)

step 4: Click on the edge of the oval, select an anchor point, and make slight changes to the shape of the oval by clicking and dragging the points as shown in this movie. (Figure D)

step 5: Insert a keyframe in frame 3 and repeat step 4. In the following movie notice that you have more anchor points now that the shape has been altered. (Figure E)

step 6: Scrub the playhead back and forth to check your progress as shown in the following movie. (Figure F)

•Note: You can always click on any keyframe and further modify the shape.

step 7: With each additional keyframe the anchor points multiply. (Figure G) Use them to mold your shape.

step 8: Continue to add keyframes and alter your what-was-once-an-oval. (Figure H)

step 9: Continue to scrub the playhead to check your progress. (Figure I)

step 10: Wrap-up your animation after 10 frames or so. (Figure J)

step 11: Save your file (Command-S) and Control > Test Movie (Command-Return) to see results. (Figure K)

step 12: To make the animation loop seamlessly we will duplicate and reverse all but the last keyframe. Select the frames by click-dragging in one motion as shown in the following movie. (Figure L)

•Note: If you click and release prior to dragging you will end up moving the keyframe. Edit > Undo (Command-Z) will soon be your best friend! Click away from the selected frame to deselect it and try again.

step 13: Option-drag (hold down the Option key and drag) the keyframes to duplicate them and reposition as shown in the following movie. (Figure M)

step 14: With the frames still selected, Control-Click to access the contextual menu and select Reverse Frames. (Figure N)

step 15: Move the playhead over your last frame to verify your oval resides there. (Figure O)

step 16: Test your movie (Command-Return) to see your creation. (Figure P)

step 17: Again, you can make far more creative Flash animations than this one using only frame-by-frame techniques. Practice and refine your skills because you will find many uses for frame-by-framing. When you're ready to move on, proceed to Shape Tweening Basics.

contents