Flash Animation
syllabus | schedule | assignments | Web Resources | ARTC courses
[Flash Intro]     [Drawing]     [Other Tools]     [Modify/Import]     [Symbols]     [Animation]     [Navigation]     [Publishing]    [Audio]     [ActionScript]     [Textboxes]     [Conditionals/Loops]     [Functions]     [Timing]     [Interaction]    [KeyPressed]    
Animation:

With Flash you can: move an object across the stage, change its size, rotate, change color, fade in and out, or change the shape of an object, and any combination of these.

  • There are two types:
    • Frame-by-Frame (keyframe in every frame, change item in every frame) = bigger file.
    • Tweened (start / end keyframes, Flash does the rest) = smaller file.

  • You must insert frames to animate. Although you can see rectangles that look like frames on the timeline, those frames are EMPTY. You must ADD FRAMES before starting your animation. (F5 or Insert > Frame).

  • Inserting a frame ADDS a frame to your animation, increasing the overall length, pushing frames down the timeline.

  • You must also insert KEYFRAMES at the beginning & end of your animation sequence (F6 or Insert > Keyframe OR F7 Insert > Blank Keyframe).

  • Each animated item must be in its OWN SEPARATE LAYER!

To extend still frames over time: (used for backgrounds, etc.):

  1. Put an Instance into the first frame of a layer.
  2. Click a frame to the right of the start frame (the end frame).
  3. Insert > Timeline > Frame OR OPT Drag the first keyframe to the right.

To make the background last longer or animations take more time (slow them down):

  1. Go to the middle of the animation and hit F5 (Insert > Timeline > Frame).

To make animations take less time (make them faster):

  1. Go the middle of the animation and hit Shift F5 (Edit > Timeline > Remove Frames).

Editing Keyframes:

Using the animation in more than one spot:

  1. Select all the frames (get both keyframes).
  2. Edit > Timeline > Copy Frames (or Control click on a selected frame to get Contextual menu).
  3. Select new frame and Edit > Timeline > Paste Frames

Be sure to select the same number of layers if you are pasting more than 1 layer!!!

Moving a keyframe:

  1. Select the keyframe (click once).
  2. Click again and drag to move it.

Adding more keyframes to an existing animation:

  1. Select a keyframe.
  2. Hold OPT and drag it to where you want the new keyframe (a + appears on the grabber).
    (takes info from the last keyframe and copies it to the new keyframe).

Moving frames:

  1. Select the frames.
  2. Drag them to new frame - this may add new keyframes.

Reverse a sequence:

  1. Select frames (must have keys on either end).
  2. Modify > Timeline > Reverse frames .

Deleting images from keyframes:

  1. Select the frame and Modify > Timeline > Clear Keyframe (Shift + F6).

Deleting extra frames:

  1. Select the frames - Edit > Timeline > Remove Frames (Shift + F5).

Viewing animations:

  1. To Preview: Control > Play OR Windows >Toolbars > Controller, Click Play.
  2. Test Movie: Control > Test Movie, Creates a .swf temp file in separate window (must do for interactivity).

Tweening:

  • Two types: Motion - position, size, rotation, skew.
  • Shape - change the shape or make new object.
  • Can also change the Color or Fade (Alpha) of Instances over time.

Motion Tweening: (Position)

  1. Make a new Layer (click the +) and name it Position. Drag an instance from the Library into it.
  2. With the keyframe selected, Insert > Timeline > Create Motion Tween or choose Motion from the Tween drop down menu in the Propery Inspector.
  3. Select a frame to be the last frame (or next keyframe) of the animation.
  4. Insert > Timeline > Keyframe (F6) - you may need to add a new frame (F5) if it goes beyond the end.
  5. Select the Arrow Tool and move the Instance across the stage; Repeat for each keyframe.
  6. Control > Rewind (OPT + CMD + R) Hit Enter to Play.
    ** NOTE: Flash will create a new keyframe within a motion tween when you move an object on the stage.

Motion Tweening: (Scale)

  1. Make a new layer and name it Scale - Select the frame that you want your animation to start on.
  2. If it doesn't have a keyframe Insert > Timeline > Keyframe or F6 and drag a new Instance into it.
  3. Insert > Timeline > Create Motion Tween.
  4. Select last frame of the animation, if it goes beyond the existing animation, F5 (Insert > Timeline > Frame).
  5. Hit F6 (Insert > Timeline > Keyframe).
  6. Select the Free Transform Tool and Scale the Instance on the last frame.

Motion Tweening: (Rotation)

  1. Make a new layer and name it Rotate - Select the frame that you want your animation to start on.
  2. If there isn't a keyframe there Hit F6.
  3. Drag a new Instance to it.
  4. Click on the keyframe and select Insert > Timeline > Create Motion Tween.
  5. Select the last frame of the Animation.
  6. Hit F6 (Insert Keyframe).
  7. Rotate the Instance on the last frame.
  8. Select the first keyframe and select the Frame Property Inspector.
  9. Select Rotate: None, Automatic (finds the shortest path to reach final destination), Clockwise (CW), or Counterclockwise (CCW) and specify how many times you want it to rotate.
  10. Select Ease: drag slider up or down for IN (- num) or OUT (+ num).
  11. Select Edit: can edit the curve like in Maya.

Motion Tweening: (Color and Fade)

  1. Make a new layer and name it Color - Select the frame that you want your animation to start on
  2. Hit F6 and drag in an Instance and Insert > Create Motion Tween
  3. On the last Frame hit F5 (if necessary) & F6
  4. Select the Instance image in the first or last frame of your new animation
  5. In the Property Inspector, Select Brightness, Tint or Alpha and change them
  • Advanced option changes transparency AND color. Use them together to create the effect you want.
    • First column = percentage of effect OR Second Column = the direct value of the effect

Motion Path Animation: (objects follow path you create)

  1. Make a layer and name it Motion Path - Select the first frame of animation - F6 if necessary.
  2. Move an Instance into the layer and Insert > Timeline > Create Motion Tween.
  3. Select last frame of animation and F5 (if needed).
  4. Move Instance to automatically make a keyframe.
  5. Insert > Timeline > Motion Guide (also available in layer area of window).
  6. On the Guide Layer, use pencil, paintbrush, circle, rectangle or line to draw the path.
  7. In the Motion Path layer select the first keyframe and move the object to the start of the path.
  8. Go to the last frame of the animation and move the Instance to the end of the path.
  • Click the Eye column on the Guide layer to hide path during the animation.
  • Unlink your guided layers: Modify > Timeline > Layer Properties; select Normal.

To get the object to point towards the Path:

  1. Go to the first frame and rotate the object to orient properly on the path.
  2. Go to the last frame and rotate the object to orient properly on the path.
  3. Select the first keyframe of the Motion Path layer and check Options: Orient to Path in property Inspector.
  4. You may need to move the center point (Free transform Tool) to have it orient properly.
  • Make sure any new layers you make are above the Guide Layer so they are not effected by the guide.
  • Shape Tweening:

    • For best results place only one shape on a layer. Multiple shapes have unpredictable results!
    • Must be a shape, NOT a SYMBOL - cannot be a group, Instance, text block, or bitmap (this is the opposite of Motion Tweening).
    • Draw a NEW object, OR select an instance and Modify > Break Apart to make it a shape.
    1. Make a layer and name it Shape - make sure the new layer is not under the Guide.
    2. Make a keyframe then draw a circle on the start frame of the animation.
    3. Make a keyframe for the last frame of the animation.
    4. On the last frame delete the circle and make a star (Poly tool with star option) or modify the original circle.
    5. Select the first keyframe and in Property Inspector: select Shape from Tween pull down menu.
    6. Set Blend:
      1. Distributive - inbetweens are smoother and irregular.
      2. Angular - preserves corners & straight lines (use if you have corners & straight lines).
    7. Set the Easing IN/OUT (- numbers = slow in, + numbers = slow out).

    Shape Hints:

    • Hints identify areas that should correspond in start and end frames
    • Can have up to 26 shape hints
    • Yellow for starting frame, Green for ending frame, Red for not used (not on the curve)
    • Might need to draw some inbetween shapes if the morph does not work well

    To Use Shape Hints:

    • Prep: Make a complex shape and optimize it. Then make a Shape Tween using steps 1-7 above.
    1. Select 1st keyframe for shape tweened animation.
    2. Modify > Shape > Add Shape Hint (CMD + shift + H) - must have a shape tween for menu to be available.
    3. On first frame: Move the Red hint (a) to a spot on a problem point on the shape.
    4. On last frame: Move the Red hint (a) to a spot where you want the first hint to match up with.
    5. Repeat for each additional hint added; Add COUNTERCLOCKWISE from last hint (test after each one).

    Turning off and on hints visibility:

    • View > Show Shape Hints (CMD + OPT + H).
    • To Remove an existing shape hint: Drag hint off of the stage.
    • To remove all hints: Modify > Shape > Remove All Hints.

    Frame by frame Animation:

    • This method creates the animation one frame at a time without tweening and is similar to traditional cel animation.
    • Frame by frame animation makes larger files that are much slower to load.
    1. Make a new layer and name it Frame by Frame.
    2. Click frame and Add a keyframe.
    3. Draw a picture.
    4. Click the next frame and Add a Keyframe (Will duplicate contents of previous frame).
    5. Draw a new picture or modify existing one.
    6. Repeat procedure until the animation is done.

    Onion skinning: allows you to see more than one frame of your animation at a time.

    • Turn ON Onion Skinning by clicking the Onion Skin Button.
    • the onion skin button

    • Clicking Onion Skin Outline makes an outline of each object in each frame.
    • the onion skin outline button

    • Change the range of onion skinned frames by dragging the markers in the timeline.
    • the range slider

    • Locking layers prevents them from showing up in the onion skin.
    • lock layers

    • Edit Multiple Frames Button: allows you to work on more than one image without going to that frame.
    • the multiple frames button

    A good use for Edit Multiple Frames: Moving an entire animation.

    1. Unlock all layers.
    2. To move everything on one or more layers but nothing on other layers, lock or hide all the layers you don't want to move.
    3. Click the Edit Multiple Frames button in the Timeline.
    4. Drag the onion skin markers so that they enclose all the frames you want to select, or click Modify Onion Markers and select Onion All.
    5. Select Edit > Select All.
    6. Drag the entire animation to the new location on the Stage.

    Modify onion markers button: (To change display of onion skin markers)

    modify onion markers
    • Always Show Markers - shows the onion skin range whether or not Onion Skin is ON or OFF.
    • Anchor Onion Marks - keeps the range permanently fixed on a set of frames (won't move).
    • Onion 2 - displays 2 frames on either side of the selected frame.
    • Onion 5 - displays 5 frames on either side of the selected frame.
    • Onion All - displays all frames on either side of the selected frame.

    Do the in-class exercise to improve your animation skills.