CHI2015:TextAlive

TextAlive:

Integrated Design Environmentfor Kinetic Typography
Jun Kato, Tomoyasu Nakano, Masataka Goto
AIST, Japan

1

Background

CHI2015:TextAlive

Kinetic Typography

2

Background

CHI2015:TextAlive

Kinetic Typography• A style of graphical expression to move andreshape text in videos• Prior work focuses on graphical aspects,
most augmenting text-based communication[Lee, 2006] [Forlizzi, 2003] [Mizuguchi, 2005] [Strapparava, 2006]
This work focuses onAnimating lyric text in synchrony with music
Synchronization is difficult & takes long time3

ProblemCHI2015:TextAlive

Authoring with general tools
Set typographic
parameters per
charactere.g. Font, Size, Color, …

Specify kinetic
behavior fromscratche.g. Timing, Motion path, …

Adobe After Effects CC

Enormous amount of manual effort
4

Problem

CHI2015:TextAlive

Authoring with specialized tools
Set typographic
parameters per
charactere.g. Font, Size, Color, …

Specify kinetic
behavior fromscratchChoose motion fromtemplates and tweak
parameters

e.g. Timing, Motion path, …

5

Problem

CHI2015:TextAlive

Authoring with specialized tools
Choose motion from templatesMr. Softie

Manual labor remains
to specify lyric timings

Kinedit

TypeMonkey

Lack of flexibility

should be more effortless and flexible
6

Overview

CHI2015:TextAlive

TextAlive
ProblemManual effort

Lack of flexibility

Proposed Method

Live Programming
Automatic Videoof TemplatesComposition
InteractiveEditing
For programmers
For designers
Integrated Design Environment7

For designers

CHI2015:TextAlive

TextAlive:

Integrated Design Environment for Kinetic Typography

AUTOMATIC VIDEO COMPOSITION+ INTERACTIVE EDITING

8

For designers

CHI2015:TextAlive

Demonstration
・Automatic timing estimation
・Interactive timing correction
9For designers

CHI2015:TextAlive

Automatic timing estimation

LyricsSong

Playable video

drastically reduces the manual effort
10For designers

CHI2015:TextAlive

Interactive timing correction

Timing correction

Interactive update

Estimation errors can be easily corrected11For designers

CHI2015:TextAlive

Demonstration
・Structure-aware editing

12For designers

CHI2015:TextAlive

Structure-aware editing

Multiple templates can be assigned tophrases/words/characters
13

For designers

CHI2015:TextAlive

TextAlive workflow (for designers)

Automatic video composition
Interactive timing correction
Structure-aware editing

Interactive editing ofKinetic Typography videos
14

For designers

CHI2015:TextAlive

TextAlive workflow (for designers)

Automatic video composition
Interactive timing correction
Structure-aware editing

Interactive editing ofKinetic Typography videos
15

For programmers

CHI2015:TextAlive

TextAlive:

Integrated Design Environment for Kinetic Typography

LIVE PROGRAMMING OFANIMATION TEMPLATES

16

For programmers

CHI2015:TextAlive

Video = f(time) without side effects
1. for (all templates)– manipulate rendering parameters ofassigned text units

2. for (phrases) transform the coordinate system– for (words) transform the coordinate system•for (characters) transform the coordinate systems;–render the character.

3. for (graphic units) render graphics
17

For programmers

CHI2015:TextAlive

Demonstration
・Live programming of animation templates

18

For programmers

CHI2015:TextAlive

Live ProgrammingVideo authoring

Template development

Smooth transition
between authoring and programming
19

For programmers

CHI2015:TextAlive

Dynamic generation of GUI widgets

Comments to public fields generates GUI widgets
bound to the state information
for programmers:

enables easy template debugging
for designers:

enables interactive parameter tuning
20

For programmers

CHI2015:TextAlive

TextAlive workflow (for programmers)

Live programming
GUI widgets generation

Live programming ofKinetic Typography videos
21

Evaluation

CHI2015:TextAlive

TextAlive:

Integrated Design Environment for Kinetic Typography

PRELIMINARY USER STUDY22

Evaluation

CHI2015:TextAlive

Experimental setup

Designers and casual users

Programmers

Amateur singer, illustrator, disk jockey, interaction designer

3 have lots of experience, 2 have a little bit of experience,
2 have no experience of using video authoring tools.

Each participant was asked to create a video
23

Evaluation

CHI2015:TextAlive

Results

24

Evaluation

CHI2015:TextAlive

Lessons learned: good side • Automatic video composition is nice since “we nolonger need to create but just edit the video.”• Animation templates suggest potential applications ofreal-time video creation such as “text jockey.”• No need to stop the video = fluid experience• “Timeline” at the heart of audio-video synchronization
especially for programmers

Integrated interfaces worked as expected(this should be of interest if you make something similar)
25

Evaluation

CHI2015:TextAlive

Lessons learned: future work • Having a variety of animation templates is good• “Stage” should allow more direct manipulation• (Programming needs training)

Collaboration between designers andprogrammers seems to be the key(and should be an interesting follow-up work)
26

CHI2015:TextAlive

TextAlive:

Integrated Design Environment for Kinetic Typography

CONCLUSION

27

CHI2015:TextAlive

TextAlive

Live Programming
Automatic Videoof TemplatesComposition
InteractiveEditing
For programmers
For designers
Integrated Design Environment
28

CHI2015:TextAlive

TextAlive(completely rewritten in JavaScript!)

http://textalive.jp
Live Programming
Automatic Videoof TemplatesComposition
InteractiveEditing
For programmers
For designers
Integrated Design Environment
29