Multimedia Authoring and Tools

Multimedia Authoring
 Multimedia authoring: creation of
multimedia productions, sometimes
called “movies” or “presentations”.
 In this lecture, we take a look at:
– Multimedia Authoring Metaphors
– Multimedia Production
– Multimedia Presentation
– Automatic Authoring
Multimedia Authoring Metaphors

 Scripting Language Metaphor: use a

special language to enable interactivity
(buttons, mouse, etc.), and to allow con-
ditionals, jumps, loops,
functions/macros etc. E.g., a small
Toolbook program is as below:
Scripting Language Metaphor
Multimedia Authoring Metaphors
 Slide Show Metaphor: A linear presentation by
default, although tools exist to perform jumps in
slide shows
– Example: PowerPoint
 Hierarchical Metaphor: User-controllable
elements are organized into a tree structure
– often used in menu-driven applications.
 Iconic/Flow-control Metaphor: Graphical icons
are available in a toolbox, and authoring proceeds
by creating a flowchart with icons attached
Iconic/flow-control Metaphor

 Example: Authorware
– A leading visual authoring tool for creating
rich-media e-learning applications for delivery
on corporate networks, CD/DVD, and the Web.
– Drag and drop icons to create logical outline
– Flowline metaphor
Iconic/flow-control Metaphor
Frames Metaphor
 Frames Metaphor: Like Iconic/Flow-control Metaphor;
however links between icons are more conceptual, rather
than representing the actual flow of the program

Adapted from Li & Drew by T. Arndt

Card/Scripting Metaphor

 Card/Scripting Metaphor: Uses a

simple index-card structure - easy route
to producing applications that use
hypertext or hypermedia; used in
schools.
– Examples: Hypercard, Supercard.
Cast/Score/Scripting Metaphor
 Time is shown horizontally; like a
spreadsheet: rows, or tracks, represent
instantiations of characters in a multimedia
production.
 Multimedia elements are drawn from a cast
of characters, and scripts are basically
event-procedures or procedures that are
triggered by timer events.
 Director, by Macromedia, is the chief example
of this metaphor. Director uses the Lingo
scripting language, an object-oriented event-
driven language.
Developing Multimedia
Presentations
 Phases for MM presentations development:
– Storyboarding
– Flowcharting
– Prototyping
– User testing
– Media Production
– Programming
– Debugging
– Distribution
Elements of Multimedia
Presentations
 Graphics Styles: Human visual
dynamics impact how presentations
must be constructed.
– Color principles and guidelines: Some
color schemes and art styles are best
combined with a certain theme or style. A
general hint is to not use too many colors,
as this can be distracting.
Elements of Multimedia
Presentations
 Fonts: For effective visual
communication in a presentation, it
is best to use large fonts (i.e., 18 to
36 points), and no more than 6 to 8
lines per screen.
 Sans-serif fonts fonts work better
than serif fonts.
Elements of Multimedia
Presentations
 Multimedia presentations often use
sprite animations
Video Transitions
 Video transitions can be used in multimedia
presentations to signal scene changes
 Many different types of transitions:
– 1. Cut: an abrupt change of image contents
formed by abutting two video frames
consecutively. This is the simplest and most
frequently used video transition.
Video Transitions

 Wipe: a replacement of the pixels in a

region of the viewport with those from
another video. Wipes can be left-to-
right, right-to-left, vertical, horizontal,
swept out like the hands of a clock, etc.
Video Transitions

 Dissolve: replaces every pixel with a

mixture over time of the two videos,
gradually replacing the first by the
second. Most dissolves can be
classified as two types: cross dissolve
and dither dissolve.
Dither Dissolve

 Determined by (t), increasingly more

and more pixels in video A will abruptly
(instead of gradually as in Type I)
change to video B.
Some Technical Design Issues
 Computer Platform: Much software is
ostensibly “portable” but cross-platform
software relies on run-time modules which
may not work well across systems.
 Video format and resolution: The most
popular video formats - NTSC, PAL, and
SECAM| are not compatible, so a conversion
is required before a video can be played on a
player supporting a different format.
Some Technical Design Issues
 Memory and Disk Space Requirement:
– At least 128 MB of RAM and 20 GB of hard-disk space
should be available for acceptable performance and
storage for multimedia programs.
 Delivery Methods:
– Not everyone has rewriteable DVD drives, as yet.
– CD-ROMs: may not have enough storage to hold a
multimedia presentation. As well, access time for CD-
ROM drives is longer than for hard-disk drives.
– Electronic delivery is an option, but depends on network
bandwidth at the user side (and at server). A streaming
option may be available, depending on the presentation.
 Automatic Authoring
• Hypermedia documents: Generally, three steps:

1. Capture of media: From text or using an

audio digitizer or video frame-grabber; is
highly developed and well automated.

2. Authoring: How best to structure the data

in order to support multiple views of the
available data, rather than a single, static
view.

21
3. Publication: i.e. Presentation, is the objective of the
multimedia tools we have been considering.

Externalization versus linearization:

(a) Fig. 2.12(a) shows the essential problem involved in
communicating ideas without using a hypermedia
mechanism.
•
(b) In contrast, hyperlinks allow us the freedom
to partially mimic the author’s thought process
(i.e., externalization).

(c) Using, e.g., Microsoft Word, creates a

hypertext version of a document by following
the layout already set up in chapters,
headings, and so on. But problems arise
when we actually need to automatically
extract semantic content and find links and
anchors (even considering just text and not
images etc.) Fig. 2.13 displays the problem.

23
 (a)

(b)

Fig. 2.12: Communication using hyperlinks

24
 Fig. 2.13: Complex information space [from David Lowe].

(d) Once a dataset becomes large we should employ

database methods. The issues become focused on
scalability (to a large dataset), maintainability, addition of
material, and reusability.

25
 Semi-automatic migration of
hypertext
• The structure of hyperlinks for text information is
simple:
“nodes” represent semantic information and these
are anchors for links to other pages.

Fig. 2.14: Nodes and anchors in hypertext [from David Lowe].

26
 Hyperimages
• We need an automated method to help
us produce true hypermedia:

Fig. 2.15: Structure of hypermedia [from David Lowe].

27
• Can manually delineate syntactic image
elements by masking image areas. Fig. 2.16
shows a “hyperimage”, with image areas
identified and automatically linked to other
parts of a document:

Fig. 2.16: Hyperimage.

28
Some Useful Authoring Tools
 One needs real vehicles for showing
understanding principles of and creating
multimedia. And straight programming in C++
or Java is not always the best way of showing
your knowledge and creativity.
 Some popular authoring tools include the
following:
 Adobe Premiere

 Macromedia Director

 Macromedia Flash

 Dreamweaver

 Cakewalk Pro Audio

30
Macromedia Director

 Director is a complete environment for

creating interactive movies
 Uses the movie metaphor
– Stage
– Cast
• Each instance is called a sprite
• Sprites can have behaviors attached
– Score
Macromedia Director
– Many predefined events (such as mouse
events)
– Score has one horizontal line for each
sprite and vertical frames
– Behaviors (both predefined and user
defined) are written in the Director scripting
language - Lingo
– Both cel animation and tweening are
possible
Macromedia Flash
 Flash is a simple authoring tool that facilitates
the creation of interactive movies.
– A movie is composed of one or more scenes
– Components that make up a movie are called
symbols
• Included in movie by placing them on the stage
• The stage may have multiple layers
• The timeline window has one horizontal bar for each
layer
• Composed of a number of keyframes
• Scripts can be attached to keyframes or symbols in a
keyframe
Macromedia Dreamweaver
 Dreamweaver is used to build
multimedia-enabled web sites as well as
Internet applications in HTML, XML and
other formats
– Supports WYSIWYG web page
development as well as support for
JavaScript, ASP, PHP, XML.
– Contains a number of prepackaged
behaviors and is extensible
VRML (Virtual Reality
Modeling Language)
 VRML: conceived in the first international
conference of the World Wide Web as a
platform-independent language that would be
viewed on the Internet.
 Objective of VRML: capability to put colored
objects into a 3D environment.
 VRML is an interpreted language; however it
has been very influential since it was the first
method available for displaying a 3D world on
the World Wide Web.
History of VRML
 VRML 1.0 was created in May of 1995, with a
revision for clarification called VRML 1.0C in
January of 1996:
– VRML is based on a subset of the file inventor
format created by Silicon Graphics Inc.
– VRML 1.0 allowed for the creation of many simple
3D objects such as a cube and sphere as well as
user-defined polygons. Materials and textures can
be specified for objects to make the objects more
realistic.
History of VRML
 The last major revision of VRML was VRML 2.0,
standardized by ISO as VRML97:
– This revision added the ability to create an interactive world.
VRML 2.0, also called “Moving Worlds”, allows for animation
and sound in an interactive virtual world.
– New objects were added to make the creation of virtual
worlds easier.
– Java and Javascript have been included in VRML to allow
for interactive objects and user-defined actions.
– VRML 2.0 was a large change from VRML 1.0 and they are
not compatible with each other. However, conversion utilities
are available to convert VRML 1.0 to VRML 2.0
automatically.
VRML Shapes
 VRML contains basic geometric shapes that
can be combined to create more complex
objects. Fig. 2.28 displays some of these
shapes:
VRML Nodes
 Shape node is a generic node for all
objects in VRML.
 Material node specifies the surface
properties of an object. It can control
what color the object is by specifying
the red, green and blue values of the
object.
VRML Nodes
 There are three kinds of texture nodes that can
be used to map textures onto any object:
1. ImageTexture: The most common one that
can take an external JPEG or PNG image file
and map it onto the shape.
2. MovieTexture: allows the mapping of a
movie onto an object; can only use MPEG
movies.
3. PixelTexture: simply means creating an
image to usewith ImageTexture within VRML.
A Simple VRML Scene
VRML
 Three types of lighting can be used in a
VRML world:
– DirectionalLight node shines a light across the
whole world in a certain direction.
– PointLight shines a light from all directions from a
certain point in space.
– SpotLight shines a light in a certain direction from
a point.
– RenderMan: rendering package created by Pixar.
VRML
 The background of the VRML world can also
be specified using the Background node.
 A Panorama node can map a texture to the
sides of the world. A panorama is mapped
onto a large cube surrounding the VRML
world.
Animations and Interaction
 The only method of animation in VRML is by
tweening - done by slowly changing an object that
is specified in an interpolator node.
– This node will modify an object over time, based on the
six types of interpolators: color, coordinate, normal,
orientation, position, and scalar.
• (a) All interpolators have two nodes that must be specified: the
key and keyValue.
• (b) The key consists of a list of two or more numbers starting
with 0 and ending with 1, defines how far along the animation
is.
• (c) Each key element must be complemented with a keyValue
element: defines what values should change.
Animations and Interaction
 To time an animation, a TimeSensor node
should be used:
– (a) TimeSensor has no physical form in the VRML
world and just keeps time.
– (b) To notify an interpolator of a time change, a
ROUTE is needed to connect two nodes together.
– (c) Most animation can be accomplished through
the method of routing a TimeSensor to an
interpolator node, and then the interpolator node
to the object to be animated.
Animations and Interaction
 Two categories of sensors can be used
in VRML to obtain input from a user:
– (a) Environment sensors: three kinds of
environmental sensor nodes:
VisibilitySensor, ProximitySensor, and
Collision.
– (b) Pointing device sensors: touch
sensor and drag sensors.
VRML Specifics
 Some VRML Specifics:
– (a) A VRML file is simply a text file with a “.wrl” extension.
– (b) VRML97 needs to include the line #VRML V2.0 UTF8 in
the first line of the VRML file - tells the VRML client what
version of VRML to use.
– (c) VRML nodes are case sensitive and are usually built in
a hierarchical manner.
– (d) All Nodes begin with “{“ and end with “}” and most can
contain nodes inside of nodes.
– (e) Special nodes called group nodes can cluster together
multiple nodes and use the keyword “children” followed by
“[ ... ]”.
VRML Specifics
– (f) Nodes can be named using DEF and be used again
later by using the keyword USE. This allows for the
creation of complex objects using many simple objects.
 A simple VRML example to create a box in
VRML: one can accomplish this by typing:
Shape {
Geometry Box{}
}
– The Box defaults to a 2-meter long cube in the center of
the screen. Putting it into a Transform node can move
this box to a different part of the scene. We can also
give the box a different color, such as red.
VRML Example
Transform { translation 0 10 0 children [
Shape {
Geometry Box{}
appearance Appearance {
material Material {
diffuseColor 1 0 0
}
}
}
]}