See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/220982846

Automatic kinetic typography composer

Conference Paper · June 2005

DOI: 10.1145/1178477.1178512 · Source: DBLP

CITATIONS READS

10 2,464

2 authors, including:

Katsumi Tanaka
Kyoto University
541 PUBLICATIONS 4,099 CITATIONS

SEE PROFILE

All content following this page was uploaded by Katsumi Tanaka on 27 January 2014.

The user has requested enhancement of the downloaded file.

 Automatic Kinetic Typography Composer

Mitsuru Minakuchi Katsumi Tanaka

National Institute of Information and Kyoto University / National Institute of
Communications Technology Information and Communications Technology
3-5, Hikaridai, Seikacho Yoshida-honmachi, Sakyo-ku
Sourakugun, Kyoto 6190289, Japan Kyoto 6068501, Japan
[email protected] [email protected]

ABSTRACT not superb. Another benefit is that the automatic gener-

Animated text, commonly called kinetic typography, is any ation tools are useful for visualizing information in attrac-
attractive visual expression used in films, TV programs, tive forms. As Ishizaki illustrated information visualization
video games, etc. Previous studies have developed tools using dynamic designs of animated text [5], showing that
that support the authoring and rendering of kinetic typog- automatic generation of kinetic typography can be the basis
raphy. However, authoring kinetic typography is not easy of entertaining information presentation.
because its methodology is still at an early stage. Hence, we
systematize expression elements in kinetic typography and Almighty automatic generators that can create the best an-
propose an automatic composer that converts raw text into imations for input text may be only a pipe dream because
kinetic typography data. the creation of kinetic typography is an extremely creative
task and expressive patterns are unlimited. However, the
creation of adequate animations will certainly be possible if
Categories and Subject Descriptors we limit the scope of the generator. We therefore propose
H.5.1 [Information Systems Applications]: Multime- an automatic kinetic typography composer of a customiz-
dia Information Systems—Animations; I.3.m [Computer able architecture.
Graphics]: Miscellaneous

2. EXPRESSION ELEMENTS
General Terms First, we tried to systematize expression elements in kinetic
Design, Human Factors, Languages typography based on previous analysis because we need a
better-organized taxonomy for fully automatic generation.
1. INTRODUCTION
We often see kinetic typography, which move around and 2.1 Definition of Animated Text
transforms its shapes, in films and on TV. Although the The SMIL animation [10] defines animation as a time-based
visual expression of kinetic typography is becoming more manipulation of a target element. According to this defi-
common, most of it is handmade. Due to the short history nition, we arranged two types of animation elements of ki-
of kinetic typography, its methodology has not been suffi- netic typography: animated attributes and temporal vari-
ciently established. Thus, designers are groping for superb ation. Animated attributes can be categorized into spatial
design and the quality of the text greatly depends on their attributes and literal attributes. Spatial attributes include
skill. Moreover, wide knowledge of design theory is required, location, size, direction, and spacing. Literal attributes in-
including traditional typography and animation, making ki- clude color, font, and glyph. Temporal variation can be cat-
netic typography very difficult for novices to approach. egorized into its dimension of variation: constant, discrete,
linear, quadric, etc. Most motion in kinetic typography can
Automatic generation of kinetic typography is one solution be described as a combination of these animation elements.
to this problem. Fully automatic generation tools, which
convert inputted raw text into kinetic typography without
interaction with the user, have benefits. One benefit is that 2.2 Characteristics of Kinetic Typography
the user only needs to write text. Just seeing written text We investigated three aspects of expressive characteristics
in motion is an enjoyable experience, even if the motion is of kinetic typography: text, typography, and animation.

The first characteristic of text is its explicit message. This

characteristic is the most dominant in meaning expressed by
kinetic typography. As Lee et al. wrote [6], kinetic typog-
raphy “cannot normally replace or override strong emotive
content intrinsic to the meaning of the text.” We classify
relationships between text and motion into three types: syn-
onym, antonym, and collision.

Synonym is the relationship in which motion supplements

the meaning of text, and it is used to emphasize and comple- people who are angry turn red, and people who are sad shed
ment the meaning. Antonym is the relationship in which the tears. This kind of expression complements speakers’ feel-
meaning implied by the motion is opposed to the meaning ings. Assigning physiological motions to words that refer to
of text. This is used for ironic expression and emphasis by emotional status is one approach to automatic generation.
contrast. Collision is the relationship in which the meaning
of motion and text are unrelated. This is rarely used be- Although body language may be categorized as semiotic mo-
cause it is difficult to understand, but proper use of collision tion, we categorize it here because it is real motion which
gives a novel impression. The choice of these relationships is visible. However, because of its semiotic characteristic,
is a creative task and should be made intentionally by the body language greatly depends on culture. Body language
author because inattentive use might confuse readers. As is easy to generate automatically because it uses specific ac-
for automatic generation, synonym should be used mainly tions, although they are sometimes complex motions that
because it is the safest choice. Others should be carefully are difficult to render exactly as intended.
used according to setting of applications and users.
Semiotic motions are the most abstract class, and they vi-
The second characteristic of kinetic typography is its typo- sualize imaginary motions. Because semiotic motions de-
graphic characteristic. Traditional (i.e., static) typography pend on cultural backgrounds, applications need to restrict
as a graphic art has been widely used in posters, magazines, the kinds of automatically generated semiotic motions. We
and so on. It is not only decorative, but also expresses ad- again divide this category into three categories: visualiza-
ditional information, such as structure, temporal intervals, tion of sound, exaggeration, and metaphor.
progression, and implied meaning. Kinetic typography ex-
tends this expressive ability of traditional typography, espe- Sound is comparatively easy to visualize: it is sometimes
cially of temporal intervals. visualized as sampling wave patterns. For example, loudness
can be visualized by the sizes of characters pitch by vertical
The third characteristic is the animation of kinetic typogra- location, tempo by the period of motion, etc. Visualization
phy. The artistry of motion effects makes kinetic typography of sound is used mostly for dialogs because it naturally and
attractive, as has been seen in films. Furthermore, temporal effectively conveys tone of voice. The use of visualized tone
visual change has other effects. The capture or direction of has been thoroughly discussed by Lee et al [6]. One special
attention, which were pointed out in previous analyses, are case is visualizing onomatopoeia, which itself is symbolized
part of this characteristic. Readability is another important expression (Video Figure 4).
feature, known as rapid serial visual presentation [9].
Exaggeration is mainly based on principles of cartoon ani-
2.3 Expressive Patterns of Meaning mation [11]. Since Lee et al. [6] explained this pattern, we
omit a detailed description.
The fact that kinetic typography can add implied meaning
to text means that motion itself has meaning. Here, we
Metaphor is extremely abstract expression that depends on
discuss expressive patterns that have fundamental meaning
context and background knowledge. For example, the mo-
and classify them as temporal change of static expression,
tion of snow falling may create negative images, such as cold,
imitation of motion in the real world, and semiotic motion.
sad, lonely, etc. However, if the text or context represents
Christmas or a new year explicitly, the image will be happy.
Meanings of temporal changes in static expressions are based
Furthermore, people who live in tropical regions may not as-
on typographic expressions. Static typography can express
sociate any meaning with snow. Thus, automatic generation
additional meaning and many expressive techniques have
of proper metaphorical motion is challenging.
been systematized. For example, serif font families usu-
ally give a more serious and formal impression than sans-
serif font families. Big characters are usually regarded as 2.4 Time and Space
important. Changes in these static attributes emphasize Kinetic typography can be regarded as a temporal exten-
their meanings by contrast (Video Figure 1). In other cases, sion to traditional typography, i.e., space. Expressive pat-
changes express transitions of status (Video Figure 2). terns that use relationships between time and space may
include dialogs, capture and direction of attention, informa-
Imitation of motion can easily communicate meaning if it tion structure, and pseudo 3D.
is designed to be understood. We further categorize motion
in the real world into three sub-classes: physical motion, Dialogs, which belong to visualization of sound, use space to
physiological phenomena, and body language. distinguish characters. Capture and direction of attention
are the effect that moving objects draw viewer ’s attention.
Physical motion is a design pattern that mimics natural Lee et al. explained these patterns in detail [6]. Automatic
phenomena, like falling, bouncing, etc. Although physical creation of characters in dialog is easy if speakers of words
motion has rather implicit meaning, combining the motion are identified. The latter is difficult to generate automati-
with the meaning of text can be effective (Video Figure 3). cally because guidance of attention is often intentional.
This kind of expression consists of subject (text) and verb
(motion), which can easily automatically generated using As for information structure, traditional typography visu-
natural language processing. alizes information structure by space, i.e., size and layout.
Font size can represent hierarchies of information and layout
Physiological phenomena are mimicry of human (or some- can make streams of meaning. Similarly, kinetic typography
times animal) reactions. Emotions cause these phenomena: can visualize structure by time. Temporal intervals work
as separators of information, as spacial intervals represent is referred by useAnimation elements. Document fragments
paragraphs. Transition speed has similar effect to font size; that contain defAnimation elements are stored in the mo-
text that is displayed for a long time is important. tion database. The abstract motion generator selects ab-
stract motions described by defAnimation elements, and
Pseudo 3D is unusual effect, which utilizes motion parallax. integrates them into generated abstract motion data with
In combination with projective method and concealment of useAnimation elements.
back objects, viewers perceive the depth.
The defAnimation element has attributes for meta-data: a
category attribute describes the expressive pattern of the
3. ARCHITECTURE motion and a keyword attribute describes free keywords.
We have designed a customizable architecture of the auto-
We defined values for category by simplifying the expressive
matic composer that is composed of three major divisions:
patterns discussed in Section 2.3: static, physical, gesture
a text analyzer, an abstract motion generator, and a mo-
(combining physiological phenomena and body language),
tion composer (Figure 1). The text analyzer analyzes plain
phonetics, semiotic (combining exaggeration and metaphor),
text written in natural language and extracts its meaning
and misc. Values of category attributes are referred by the
and structure. It can use many techniques, such as keyword
abstract motion generator to select motions of consistent
matching, semantic analyses like concept finding and ontol-
and proper expression patterns. Keywords are used to find
ogy, structure analysis by heuristic rules, etc. The abstract
the most semantically related abstract motion to the mean-
motion generator receives the results of the text analyzer
ing obtained by the text analyzer.
and generates abstract motion data, which is intermediate
data of the engine, by marking up input data with abstract
We have currently defined only the simplest of timing mech-
motions. The motion composer makes final output data in
anisms with the time element because we think that kinetic
graphical format from the abstract motion data. We have
typography is basically sequential and a simpler language is
adopted plug-in architecture to make use of many formats
preferable. The time element has a begin attribute for the
that are available to represent kinetic typography: Macro-
time when the contents of the element begin to be displayed,
media Flash, SVG, movie formats like MPEG, and so on.
and a dur attribute for the duration of displaying.

4. KINETIC TYPOGRAPHY DESCRIPTION 5. EXAMPLE

LANGUAGE We explain an example procedure for composition of kinetic
The key feature of our approach to automatic generation is typography with Video Figure 5.
abstraction of motion from meaning. For this purpose, we
designed a simple description format, the Kinetic Typogra- In this example, we use a simple keyword matching method
phy Description Language (KTDL). The KTDL consists of for a text analyzer. First, it divides the original text into
elements for document structure, text, font, basic motions, words. Then, it finds an abstract motion that corresponds
abstract motions, and timing. to each of the words from among the keyword database. For
example, a word “world” belongs to an abstract motion of
A ktdl element acts as the root element for a KTDL docu- “world”, “regret” belongs to “unhappy”, and so on.
ment fragment and defines width, height, aspect ratio, and
background color of a drawing area. After the text analyzer assigns abstract motions, the ab-
stract motion generator generates a KTDL document. The
All text is marked up with text elements. A text element generator sets the screen size, colors, and font. Then, de-
has attributes for its position, an angle of its base line, an scriptions of abstract motions follow. In this example, each
anchor position for alignment, and color. word is displayed sequentially by a series description of time
elements, of which duration is determined according to du-
Font settings are described with font elements. The font ration of abstract motions. Each word is marked up with
element has attributes corresponding to some font proper- a text element and attached a useAnimation element that
ties of Cascading Style Sheets [2]. A fontmapping element refers the definition of abstract motion.
defines logical font names that are assigned to physical font
names. Logical font names are referred by font-family at- Once a KTDL document has generated, the media data gen-
tributes of font elements. erator interprets and converts it into data in a target format.
In this example, a SVG document is shown.
We have defined the following basic motions as built-in ele-
ments: translate, accelerate, rotate, zoom, changeColor, 6. RELATED WORK
and changeOpacity. Two-dimensional affine transforma- Many studies have concentrated on kinetic typography. Some
tions and changes of color can be described by combinations have explored design principles [6, 14, 15], some have devel-
of these elements. A text element can contain elements for oped authoring tools [3, 4, 7] and graphics engines [6], and
motion. Motions within a text element are superposed. others have tried to build applications that make use of ki-
netic typography [1, 5, 8, 13].
The defAnimation element is used to define abstract mo-
tions that combine meta-data and specific motion. The Some studies have tried to organize design principles. Wong
defAnimation element consists of elements of basic motions. demonstrated “temporal typography” [14] and mentioned
It can also include references to native descriptions in the its three effects: inflection, tone of voice, and physical ac-
output format. Motions defined with defAnimation element tion. Suguru Ishizaki investigated the potential of kinetic
 Text Analyzer Concept
Keyword DB Motion DB
View publication stats Dictionary
SVG SVG
Plug-in Data

Motion
Semantic Composer Flash Flush
Interpreter Plug-in Data
Abstract Abstract
Plain Morphological Motion
Motion
Text Analyzer Data
Generator
Keyword
Matcher

Figure 1: Architecture of the automatic kinetic typography composer.

typography in many works, which showed how kinetic ty- [2] Cascading Style Sheets, level 2 CSS2 specification.
pography can be used to visualize characters in dialogs, tone http://www.w3.org/tr/rec-css2/.
of voice, and onomatopoeia. Woolman and Bellantoni orga-
[3] C. M. Chao and J. Maeda. Concrete programming
nized expressive elements [15]. They discussed the use of
paradigm for kinetic typography. In Proceedings of
spatial structure, typographical attributes, time of motion,
VL’97, pages 446–447, 1997.
and supplemental graphics, and sound. Lee et al. explained
animation techniques for kinetic text [6], including tradi- [4] J. Forlizzi, J. Lee, and S. Hudson. The kinedit system:
tional animation techniques, tones of voice, analogous mo- affective messages using dynamic texts. In Proceedings
tions, portrayals of characters, and direction of attention. of CHI’03, pages 377–384, 2003.

A few researchers tried automatic generation of kinetic ty- [5] S. Ishizaki. Multiagent model of dynamic design:
pography. Uekita et al. used kansei information processing visualization as an emergent behavior of active design
of Japanese onomatopoeia to set parameters of motion [12]. agents. In Proceedings of CHI’96, pages 347–354, 1996.
Ishizaki developed a dynamic news display system and e- [6] J. C. Lee, J. Forlizzi, and S. E. Hudson. The kinetic
mail reader that dynamically renders information using a typography engine: an extensible system for
multi-agent model [5]. Wang used emotional arousal, which animating expressive text. In Proceedings of UIST’02,
was estimated using galvanic skin response data, to adjust pages 81–90, 2002.
parameters of animation, such as size and tempo, in an an-
imated chat application [13]. [7] J. E. Lewis and A. Weyers. Activetext: a method for
creating dynamic and interactive texts. In Proceedings
of UIST’99, pages 131–140, 1999.
7. DISCUSSION AND CONCLUSION [8] G. Möhler, M. Osen, and H. Harrikari. A user
We proposed an automatic kinetic typography composer and interface framework for kinetic typography-enabled
KTDL based on our systematization of expression elements messaging applications. In CHI’04 extended abstracts,
in kinetic typography. pages 1505–1508, 2004.

Our composer currently can, in some degree, automatically [9] M. C. Potter. Rapid serial visual presentation
generate kinetic typography in SVG format from text data. (RSVP): a method for studying language processing,
However, two issues must be dealt with to improve the com- pages 91–118. 1984.
poser. One issue is that the quality of output content greatly [10] SMIL Animation. http://www.w3.org/tr/2001/rec-
depends on the text analyzer and the motion database. The smil-animation-20010904/.
current implementation by the keyword matching is too sim-
ple to produce sophisticated expression such as parallel mo- [11] F. Thomas and O. Johnston. The Illusion of Life:
tions of words. We are planning to develop a toolkit for the Disney Animation. Abbeville Press, 1981.
text analyzer and to build a motion library. The other is [12] Y. Uekita, J. Sakamoto, and M. Furukata. Composing
expressive limitation by the output format. For example, motion grammar of kinetic typography. In Proceedings
random vibration cannot be described by SVG alone. We of VL’00, pages 91–92, 2000.
may need to define more basic motions in the KTDL.
[13] H. Wang, H. Prendinger, and T. Igarashi.
We are also developing a kinetic browser that converts RSS Communicating emotions in online chat using
data provided by news sites and blogs into kinetic typogra- physiological sensors and animated text. In CHI’04
phy and displays it on a peripheral display. extended abstracts, pages 1171–1174, 2004.
[14] Y. Y. Wong. Temporal typography: a proposal to
enrich written expression. In CHI’96 extended
8. REFERENCES abstracts, pages 408–409, 1996.
[1] K. Bodine and M. Pignol. Kinetic typography-based
instant messaging. In CHI’03 extended abstracts, pages [15] M. Woolman and J. Bellantoni. Moving Type. F+W
914–915, 2003. Publications, 2001.