time & motion

graphic design: the new basics's chapter on time and motion highlights the theory behind the work we're doing currently with our haiku animation.

a critical thing to realize (that perhaps a lot of people, including newish designers, might not) is that any still image has an implied motion (or implied stasis) at the same time as motion graphics must share compositional principles with print. the two are not so separate and different as they might seem.

potential modes of visual change include literal movement, scale change, transparency/color change, & layer shift, among others, all while the background itself has the option of remaining a neutral stage or participating in the action around the figure. the eyes of painters, typographers, animators, and filmmakers must come together in the mind of the motion graphic designer in order to successfully create a work with motion.

in panning and presentation, styleframes and storyboards are critical. styleframes are composed of the contents of an animation, while adhering to the strategies of still, static design, formulated to explain the visual language of the motion graphic to come, to establish its color schemes, typographic elements, illustrations, etc. storyboards take the most important key moments from a temporal design to show its progression, movement, and changes across a visual timeline.

the basics of animation rest in the use of keyframes and tweening. keyframes refer to the critical starts and stops of particular actions, while tweens are the frames that occur in between to create a smooth transition from one keyframe to another. in animation production, often one designer or key animator will generate the keyframes and leave the "inbetweening" to assistants. in our case, (and many others, especially more recently, as it's become an easy & reliable solution) we are leaving the tweening to computer automation within adobe flash. we build the keyframes, and select the space between them, and the computer fills in the gaps with a much smoother, mathematically calculated transition than we could have created by hand. this is particularly good for type and abstract graphic elements, but for subtleties like the movement of a body or facial expressions, there's no beating a by-hand approach.

[the next step, slightly outside the scope of what we are doing currently, is interactive motion design. in this type of motion graphic, rather than building a narrative/timeline, a sequence of actions that flow from one to the next, the designer creates a system of behaviors controlled by a coded list of if,then: statements. for instance: if the cursor rolls over it, then: the logo will dance. the actions have no sequence, and the interaction may change with every user, all while being constructed from the same building blocks. (which sounds pretty exciting, but we're not quite there yet.)]