Motion Tweening Basics

project: Motion Tweening Basics

description: In this tutorial you will learn to make a simple animation like the one at right using motion tweening.

Files: The motion_tween_01.fla is in the fla_files folder.

step 1: Open a new document and draw a circle on the stage. Use the Arrow Tool to move it near the top of the stage. (Figure A)

step 2: Use the Arrow Tool to select the circle. (Figure B)

•Important: If your object has a stroke make sure it is selected as well or this won't work. The ENTIRE object must be selected!

step 3: Insert > Convert to Symbol (F8). (Figure C)

•Tip: Since you MUST convert your objects to symbols to apply motion tweens, and since motion tweens are used for the majority of Flash animations, think of it as your FATE to Insert > Convert to Symbol... (F8 is the shortcut)

Your FATE... F8... FATE... F8... Get it? FATE = F8

step 4: Make sure the Graphic Behavior is selected. (Figure D)

step 5: Name your symbols! (Figure E)

step 6: Notice how symbols are highlighted when selected. (Figure F) Gone is the selection mesh.

step 7: Insert > Keyframe (F6) on frame 30. (Figure G)

step 8: Click on the first keyframe and set the Tween to Motion in the Properties Panel. (Figure H)

•Note: If you get a dotted line between frames 1 and 30 you probably didn't convert your object to a symbol correctly. Best to start again. (It'll only take 2 or 3 minutes.)

step 9: Insert > Keyframe (F6) on frame 15. (Figure I)

step 10: Use the Arrow Tool to move your symbol straight down toward the bottom of the stage. (Hold the Shift key down to constrain the angle.) Use the down arrow key to nudge the circle to the very bottom of the stage (all shown in the following movie). (Figure J)

step 11: That's it. You did it. Save (Command-S) and Control > Test Movie (Command-Return). (Figure K)

step 12: We'll be using all three animation techniques (Frame-By-Frame, Shape Tween, and Motion Tween) but since motion tweens are used most often, we're going to focus on that technique for the next few tutorials. Next up, Symbols, Instances, and the Library.

contents