Motion
Time and motion are closely related principles.
Any word or image that moves functions both spatially and temporally. Motion is a kind of change, and change takes place in time. Time and motion are considerations for all design work, from a multipage printed book, whose pages follow each other in time, to animations for film and television, which have literal duration.
~ from Graphic Design: The New Basics
Assignment
Create a 3 act sequence using linear navigation between 3 screens.
Act 1: Beginning state (static, at rest)
Example A: Apple
Example B: Clark Kent
Act 2: Events that occur to change the state (activity, motion)
Example A: Animation showing apple as each bite is taken out of it.
Example B: Phone booth shaking as if something is bumping around inside.
Act 3: End state (static, at rest, but different from beginning state)
Example A: Apple core
Example B: Superman? Clark Kent in a dress?
Navigation
You must provide forward/backward navigation so the user can go from screen 1 to 2 to 3 and back from 3 to 2 to 1. You can use arrows (obvious) or some other creative element to link from one screen to another, but make sure your navigation is designed so that it matches the tone and style of your content.
Ideas
Some suggestions of BEFORE/AFTER STATES from our brainstorming session:
| BEFORE | TRANSITION/ACTION |
AFTER |
| cold | >>>>>> ? >>>>>> |
hot or warm |
| dark | >>>>>> ? >>>>>> |
light |
| one | >>>>>> ? >>>>>> |
many |
| closed | >>>>>> ? >>>>>> |
open |
| skinny | >>>>>> ? >>>>>> |
fat |
| small | >>>>>> ? >>>>>> |
big |
| far | >>>>>> ? >>>>>> |
near or close |
| hidden | >>>>>> ? >>>>>> |
visible |
| on | >>>>>> ? >>>>>> |
off |
| less | >>>>>> ? >>>>>> |
more |
| empty | >>>>>> ? >>>>>> |
full |
| broken | >>>>>> ? >>>>>> |
fixed |
| fine | >>>>>> ? >>>>>> |
wrecked, ruined |
| boy | >>>>>> ? >>>>>> |
girl |
Suggested Processing sketches
You may use Processing in any of these but it is not required.
Sequential
http://processing.org/learning/topics/sequential.htm
Image Sprite
http://www.learningprocessing.com/examples/chapter-15/example-15-2-image-sprite/l
You may use anything you know, even if it isn't from this class (i.e. Flash, embedded video).
I will be grading on both design and storytelling ability.
NOTE: My examples are lame - Do not use them!
If you are confused email me