Kinetic Typography 2 Background CHI2015:TextAlive - - PowerPoint PPT Presentation

▶
kinetic typography
SMART_READER_LITE
LIVE PREVIEW

Kinetic Typography 2 Background CHI2015:TextAlive - - PowerPoint PPT Presentation

Sep 23, 2023 426 likes •735 views

CHI2015:TextAlive TextAlive : Integrated Design Environment for Kinetic Typography Jun Kato, Tomoyasu Nakano, Masataka Goto AIST, Japan 1 Background CHI2015:TextAlive CHI2015:TextAlive Kinetic Typography 2 Background CHI2015:TextAlive

slide-1
SLIDE 1

1

CHI2015:TextAlive

TextAlive:

Integrated Design Environment for Kinetic Typography

Jun Kato, Tomoyasu Nakano, Masataka Goto AIST, Japan

slide-2
SLIDE 2

2

CHI2015:TextAlive CHI2015:TextAlive

Kinetic Typography

Background

slide-3
SLIDE 3

3

CHI2015:TextAlive CHI2015:TextAlive

Kinetic Typography

  • A style of graphical expression to move and

reshape text in videos

  • Prior work focuses on graphical aspects,

most augmenting text-based communication

[Lee, 2006] [Forlizzi, 2003] [Mizuguchi, 2005] [Strapparava, 2006]

Animating lyric text in synchrony with music

This work focuses on

Synchronization is difficult & takes long time

Background

slide-4
SLIDE 4

4

CHI2015:TextAlive CHI2015:TextAlive

Authoring with general tools

Set typographic parameters per character

e.g. Font, Size, Color, …

Specify kinetic behavior from scratch

e.g. Timing, Motion path, …

Adobe After Effects CC

Enormous amount of manual effort

Problem

slide-5
SLIDE 5

5

CHI2015:TextAlive CHI2015:TextAlive

Authoring with specialized tools

Set typographic parameters per character

e.g. Font, Size, Color, …

Specify kinetic behavior from scratch

e.g. Timing, Motion path, …

Choose motion from templates and tweak parameters

Problem

slide-6
SLIDE 6

6

CHI2015:TextAlive CHI2015:TextAlive

Authoring with specialized tools

Choose motion from templates

TypeMonkey

  • Mr. Softie

Kinedit

Manual labor remains to specify lyric timings Lack of flexibility should be more effortless and flexible

Problem

slide-7
SLIDE 7

7

CHI2015:TextAlive CHI2015:TextAlive

TextAlive

Integrated Design Environment

For programmers For designers

Problem

Manual effort Lack of flexibility

Proposed Method

Automatic Video Composition Live Programming

  • f Templates

Interactive Editing

Overview

slide-8
SLIDE 8

8

CHI2015:TextAlive

AUTOMATIC VIDEO COMPOSITION + INTERACTIVE EDITING TextAlive:

Integrated Design Environment for Kinetic Typography

For designers

slide-9
SLIDE 9

9

CHI2015:TextAlive

Demonstration

・Automatic timing estimation ・Interactive timing correction

For designers

slide-10
SLIDE 10

10

CHI2015:TextAlive CHI2015:TextAlive

Automatic timing estimation

Lyrics Song Playable video drastically reduces the manual effort

For designers

slide-11
SLIDE 11

11

CHI2015:TextAlive CHI2015:TextAlive

Interactive timing correction

Timing correction Interactive update Estimation errors can be easily corrected

For designers

slide-12
SLIDE 12

12

CHI2015:TextAlive

Demonstration

・Structure-aware editing

For designers

slide-13
SLIDE 13

13

CHI2015:TextAlive CHI2015:TextAlive

Structure-aware editing

For designers

Multiple templates can be assigned to phrases/words/characters

slide-14
SLIDE 14

14

CHI2015:TextAlive CHI2015:TextAlive

TextAlive workflow (for designers)

Interactive editing of Kinetic Typography videos

Automatic video composition Interactive timing correction Structure-aware editing

For designers

slide-15
SLIDE 15

15

CHI2015:TextAlive CHI2015:TextAlive

TextAlive workflow (for designers)

Interactive editing of Kinetic Typography videos

Automatic video composition Interactive timing correction Structure-aware editing

For designers

slide-16
SLIDE 16

16

CHI2015:TextAlive

LIVE PROGRAMMING OF ANIMATION TEMPLATES TextAlive:

Integrated Design Environment for Kinetic Typography

For programmers

slide-17
SLIDE 17

17

CHI2015:TextAlive CHI2015:TextAlive

Video = f(time) without side effects

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 1. for (all templates)

– manipulate rendering parameters of assigned text units

For programmers

slide-18
SLIDE 18

18

CHI2015:TextAlive

Demonstration

・Live programming of animation templates

For programmers

slide-19
SLIDE 19

19

CHI2015:TextAlive CHI2015:TextAlive

Live Programming

Video authoring Template development Smooth transition between authoring and programming

For programmers

slide-20
SLIDE 20

20

CHI2015:TextAlive CHI2015:TextAlive

Dynamic generation of GUI widgets

enables interactive parameter tuning enables easy template debugging

for programmers: for designers:

Comments to public fields generates GUI widgets bound to the state information

For programmers

slide-21
SLIDE 21

21

CHI2015:TextAlive CHI2015:TextAlive

TextAlive workflow (for programmers)

Live programming GUI widgets generation

Live programming of Kinetic Typography videos

For programmers

slide-22
SLIDE 22

22

CHI2015:TextAlive

PRELIMINARY USER STUDY TextAlive:

Integrated Design Environment for Kinetic Typography

Evaluation

slide-23
SLIDE 23

23

CHI2015:TextAlive CHI2015:TextAlive

Experimental setup

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

Amateur singer, illustrator, disk jockey, interaction designer

Each participant was asked to create a video

Evaluation

Designers and casual users Programmers

slide-24
SLIDE 24

24

CHI2015:TextAlive CHI2015:TextAlive

Results

Evaluation

slide-25
SLIDE 25

25

CHI2015:TextAlive CHI2015:TextAlive

Lessons learned: good side 

  • Automatic video composition is nice since “we no

longer need to create but just edit the video.”

  • Animation templates suggest potential applications of

real-time video creation such as “text jockey.”

  • No need to stop the video = fluid experience
  • “Timeline” at the heart of audio-video synchronization

Evaluation

Integrated interfaces worked as expected

(this should be of interest if you make something similar) especially for programmers

slide-26
SLIDE 26

26

CHI2015:TextAlive CHI2015:TextAlive

Lessons learned: future work 

  • Having a variety of animation templates is good
  • “Stage” should allow more direct manipulation
  • (Programming needs training)

Evaluation

Collaboration between designers and programmers seems to be the key

(and should be an interesting follow-up work)

slide-27
SLIDE 27

27

CHI2015:TextAlive

CONCLUSION TextAlive:

Integrated Design Environment for Kinetic Typography

slide-28
SLIDE 28

28

CHI2015:TextAlive CHI2015:TextAlive

TextAlive

Integrated Design Environment

For programmers For designers

Automatic Video Composition Live Programming

  • f Templates

Interactive Editing

slide-29
SLIDE 29

29

CHI2015:TextAlive CHI2015:TextAlive

TextAlive

(completely rewritten in JavaScript!)

Integrated Design Environment

For programmers For designers

Automatic Video Composition Live Programming

  • f Templates

Interactive Editing

http://textalive.jp