Flash Symbols and Animation

From Knowledge Kitchen
Jump to navigation Jump to search


Symbols

What are symbols?

  • reusable shape templates
  • multiple instances of the same symbol can be put on the Stage
  • reduces file size
  • especially useful for animations, where the same object may be on the Stage in different positions at different times
  • symbol instances can be adjusted in position, size, and rotation while still retaining connection to original symbol

How to create a symbol

  • by converting a regular shape into a symbol
    • draw a shape in object or merge modes
    • select the shape
    • convert it to a symbol
      • click Modify -> Convert to Symbol�
      • enter a name
      • select Graphic as the Type option
      • click Ok
    • your new symbol now appears in the Library Panel
    • you can drag your symbol onto the stage anywhere you like
  • by starting from scratch
    • click Insert -> New Symbol
    • draw a shape the usual way
    • click the back arrow in the top Edit bar of the window
    • drag your new shape from the Library onto the Stage


Animation concepts

  • Tweening is the process of automatically creating in-between frames
  • used to create animation by linking together keyframes with automatically-generated in-between frames

Keyframes

  • the most crucial frames that define a movement
  • frames where you position symbols and shapes on the Stage in static positions
  • created manually by you

In-between frames

    • transition frames, where symbols and shapes from one keyframe animate and morph towards their positions and shapes in the next keyframe
    • create the simulation of movement
    • are automatically created for you by the process of Tweening

Adding keyframes

  • there is one keyframe created by default for you when you create a new document
  • Insert -> Timeline -> Keyframe
    • creates a duplicate of the previous keyframe
    • contains all the same shapes and symbols as the previous keyframe
    • drag and reposition the shapes and symbols within this keyframe without affecting the position of things in the previous keyframe
  • Insert -> Timeline -> Blank keyframe
    • creates a new blank keyframe
    • draw new symbols and shapes into this new keyframe

Adding in-between frames

  • position playhead where you want to add a new frame
  • click Insert -> Timeline -> Frame

Creating stop-animation

  • make lots of keyframes
  • adjust the position or shape of the objects in each of the keyframes slightly

Onion Skin button

  • allows you to see the position of objects in the previous and next keyframes
  • helps you adjust the position of the objects in the current keyframe in relation to other keyframes

Edit Multiple Frames button

  • used in combination with the Onion Skin button, this allows you to edit multiple keyframes at once


Classic Tweening

  • Allows you to create animations.
  • Only works with Symbols

How to create a classic tween

  • create a keyframe
  • drag a symbol into the keyframe
  • create a second keyframe
  • drag the second keyframe further down the timeline
  • select the first keyframe in the timeline
  • select the shape you want to tween
  • click Insert -> Classic Tween

Create a tween along a path

  • create a regular tween following the instructions above
  • click the first keyframe
  • click View -> Snapping -> Snap to Objects
  • Cmd-click (Ctrl-click) the Layer name in the Timeline and select Add Classic Motion Guide
  • draw a stroke in the guide layer
  • center the shape in all keyframes onto part of the stroke

Tweening changes in color, size, and rotation

  • in any of the keyframes, changes the symbol's attributes

Rotating automatically

  • click a keyframe in the timeline
  • change the Rotate direction and count in the Property Inspector


Examples

Apathetic faces classic tweening example includes three symbols undergoing classic tweens. One of the faces is following a motion guide path, while the other two simply follow straight lines.

Bird and box classic tween example. Includes two symbols undergoing classic tweens. The box follows a set of standard straight-line tweens. The bird tween follows a guide path, which was drawn using the pen tool. Note that the guide path does not appear in the final exported movie.


What links here