A static depiction and input technique for 2D animations

Shin Takahashi (Univ. of Tsukuba)Yoshikazu Kato (Tokyo Tech)

Etsuya Shibayama (Tokyo Tech)

Background

• 2D-Animation• Create attractive presentation slide or

webpage• PowerPoint, Macromedia Flash, etc.

• Animation effects• "slide-in", "slide-out", etc.

Making animations

• Keyframe-based creation• keyframes + interpolation• difficult, tedious, hard to learn, …

• Library-based creation• applying effects in animation libraries• with menus and dialog boxes

Problem

• Hard to imagine the animation from texual representation

Our approach

• Visual representation of animation effects

• Sketch-based interface• Without menus or dialog-boxes

we use “effect lines!”

Effect lines

• Used in comics• They depict

• motions, feelings, sounds, etc.

Our idea

• Creating animations by drawing effect lines

Examples of our effect lines•“Move”

•“2D-Rotation”

• “Vibration”

• “Expanding”

: direction of drawing

Examples of setting parameters

• “Move”

• “2D-Rotation”

• “Vibration”

• “Expanding”

Move length

Rotation degrees

Default sizedirection

direction

direction

Vibration width

Combining animation effects

• “2D-Rotation” + “Move” 　 “Rolling”

• “Vibration” + “Move” “Undulating”

Definition of effect lines

EffectLine<Strks> → Effect<Type,Params>

TargetObj, Strks, Type, Params

Move (x1,y1)

rotate Θ

Animation : <Object, Effects>

(x1,y1)

Θ

effect lines in storyboard

• static representation of animation

effect lines and keyframe

• before or after?: keyframe

: motionEffect lines

Path drawing

Prototype system “KO-KA”

• Java + SATIN Toolkit

The view of "KO-KA"

Story view

Edit view

DemoIntroduction to "KO-KA"

Related work(1/2)

• Researches for static depiction of motions.• Speed lines [M.Masuch et al.99]• Motion lines [A.Lake et al. 2000]• Cartoon blur [Kawagishi et al.03]

• They are only to depict motions.

Related Work(2/2)

• Drawing paths to create animations• e.g. Motion Doodles: An Interface for Sketching

Character Motion, Matthew Thorne et al. SIGGRAPH2004

• specialized to character motion

constraints?

• animation effect = temporal/spatial constraints on parameters of graphical objects

• effect lines = their visual representation

• e.g.

vibration(rect(x,y,w,h)) →　　 { rect(x,y,w,h) | x = x0 + vib(t), y = y0, …}

Future Work• more expressive effect lines

• spatial constraints• effects for group of objects• combined effect lines• multi-step animation on a picture

visual constraint programming?

Summary

• effect lines to apply animation effects• The user can easily

• set animation effects to the target object• recognize the animation on static view• combine animation effects