contents
 

project: Frame-By-Frame Animation 01
 
   
 

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_01.fla file is in your fla_files folder.
   
 
   
  step 1: Open a new Flash document. (Figure A)
   
  A
   
  *Note: Your stage does not have to be the same size as mine (400 x 200 pixels).
   
   
  step 2: Select the Text Tool, click on the stage, and type an F. (Figure B) To format your text (font, color, and size), highlight it and change setting in the Properties Panel.
   
  B
   
  step 3: Click on the second frame in the timeline. (Figure C)
   
  C
   
  step 4: Insert a keyframe. If your prefer the menu, select Insert > Keyframe. (Figure D) You can also control-click on the frame to access the contextual menu. (Figure E)
   
 

D

E

   
  •Note: F6 is the unlisted keyboard shortcut to Insert > Keyframe
   
  step 5: Click on the second keyframe to select it. (Figure F)
   
  F
   
  step 6: Watch the following movie and follow the steps to complete the first five keyframes. (Figure G)
   
  G
   
  step 7: Chances are your text is off-center. Click on the Edit Multiple Frames icon in the timeline. (Figure H)
   
  H
   
  step 8: Drag the left handle so all keyframes are highlighted. (Figure I)
   
  I
   
  step 9: Use the Arrow Tool as shown in the following movie (Figure J) to select and reposition your text.
   
  J
   
  •Note: Use the arrow keys to reposition your selection 1 pixel at a time.
   
  step 10: Click the Edit Multiple Frames icon to deselect that option. (Figure K)
   
  K
   
  step 11: Next we will change the color of the text. Insert another keyframe in frame 6 and notice that the Properties Panel is set to Frame. (Figure L)
   
  L
   
  step 12: Using the Arrow Tool, click on the text to make it active. (Figure M)
   
 

M

   
  step 13: Now you can change the text color in the Properties Panel. (Figure N)
   
  N
   
  step 14: Add several extra keyframes (changing the color each time) then Insert Blank Keyframe. (Figure O)
   
  O
   
  step 14: The blank keyframe gives us a clean stage to work with. Notice that the frame rate is set too high for this animation. (Figure P)
   
  P
   
  step 14: Click on the stage and set the frame rate to 5 in the Properties Panel. (Figure Q)
   
  Q
   
  step 14: After saving your Flash project, Control > Test Movie to see your work. (Figure R)
   
  R
   
  step 14: This simple technique can be used to make far more creative Flash animations than the one seen above. An alternate technique can be found in the Frame-By-Frame 02 tutorial. Experiment with both animation strategies and later we'll mix them with shape and motion tweens. For now, however, proceed to Frame-By-Frame 02.
   
   
   
 
contents