Chapter Seven

Making Multimedia

Let’s start!
Chapter Highlights
01 02 03
Method to Authoring Authoring
Integrate Metaphors Process
Media

04 05 06
Guidelines Development Development
select an Team Plan
Authoring
Application
2 Methods to Integrate Media
• Programming
– Languages specify how the media is
presented and user interactions carried out.
– Requires command of the language.
– Is time consuming.
• Authoring
– Applications specially designed to integrate
and present media elements.
– Developers can concentrate on design,
interactivity, and functionality of the
project.
Authoring Applications
• Software designed for creation of multimedia
projects.
• Applications are used to:
– Assemble media elements
– Synchronize content
– Design user interface
– Provide user interactivity
 Authoring Metaphors

• Authoring applications are grouped around

three metaphors:
– Card A metaphor is a comparison
of one thing to another to
– Icon enhance understanding.

– Timeline
• Metaphors help orient developer to how the
software organizes the media, sequences
events, and presents final project.
 Card Metaphors

• Media is organized in sequential order on a

stack of cards or slides.
– Appropriate for static media that is
normally experienced in sequence.
• Cards have two layers:
– Background layer contains shared elements.
– Foreground layer contains content specific to
that card or slide.
 Card Metaphors

• Benefits of card layers:

– Background content is created once which
saves development time.
– Common background layer provides
consistent design.
– File sizes are minimized by sharing
background elements.
 Icon Metaphors

• Icons define media and forms of interactivity.

• Icons are placed on a flowline to create the
application structure.
– Each icon has a dialog box with
properties and parameters identified by
the developer.
– Flowlines let developers visualize and adjust
the structure of the application.
• Branching routines add controls for user
interaction.
 Icon Metaphors

• Flowline is a graphical representation of the

relationships between components of the
application.
 Timeline Metaphors

• Organizes media and interactivity as sequence

of frames.
– Each frame can have multiple layers.
– Layers define the stacking order of the
content to be displayed.
• Appropriate for dynamic media as the media
can by synchronized precisely over time.
 Timeline Metaphors

• Popular timeline-based applications include

Director and Flash.
• Best used when animation or video
is central to the application.
The
Authoring
Process
From Project Design to Delivery
Application Design
• Authoring software supports the design
process.
– Outline view in PowerPoint
structures presentation.
– Storyboard development is common in
complex applications.
• Storyboard is a series of screen
sketches to guide development process.
Important Content
• Media is generally created in media-specific
applications and imported into the authoring
environment.
– File formats for imported media are
important.
– Conversion utilities within the application
are useful.
Create and Edit Content
• All authoring applications include some tools
for creating and editing media content. For
example:
– Text adjustments to font size and color.
– Paint tools to add shapes and edit image
features.
– Sound adjustment on volume, duration.
– Animation changes to speed and direction.
Integration, Synchronization & Playback
• Techniques for integration are based on the
metaphor (card, icon, timeline).
• Sounds, animations and transitions must be
synchronized to present a unified flow of
information.
• Playback of the content is often dependent on
hardware factors.
• Timing controls can be established to ensure
correct playback.
Establishing Navigation
• Authoring software can establish the order of
the content on playback.
• Basic navigation structures include:
– Linear or sequential
– Hierarchical
– Networked
– Conditional
Programming
• Provides more flexibility and control.
– For projects with extensive interactivity, custom
features.
• Two programming methods.
– Script: series of commands specifying properties or
behavior of an
element in the project.
• Commands are interpreted as the project is executed.
– Icon: dialog boxes allow the developer to specify
parameters for icon's use.
• Does not require programming knowledge but does limit
commands to icon parameters.
Database Support
• Some projects may require access to a
collection of related files to store and retrieve
user input.
– Tutorials have databases of related facts
to test comprehension.
– User stores answers for future reference
and scoring.
• Authorware and Director applications offer an
interface to a database.
Preview, Test, Debug
• Projects are created in the development
mode.
– Necessary to preview the project as it will
appear in the final product and test the
components of the screen displays.
– Authoring applications often have a preview
mode to test the assembled project during
development.
• Debugger tools can identify errors in
program code.
Project Delivery
• Projects are published so they play outside the
authoring environment.
• Two approaches to publishing.
– Remote delivery
• Store the application and data on a
server for access through a network,
most often the WWW.
– Local installation
• Application is installed and maintained on
user’s device.
Project Delivery
• Projects are published so they play outside the
authoring environment.
• Two approaches to publishing.
– Remote delivery
• Store the application and data on a
server for access through a network,
most often the WWW.
– Local installation
• Application is installed and maintained on
user’s device.
Project Delivery
• Remote delivery through a network connection.
– Advantages:
• Content revisions are managed by server database.
• Wide market access
• Developer can track users and determine
patterns of usage.
– Limitations:
• Bandwidth restrictions may apply depending on
user’s
location or network service.
• Browser applications are not uniformly compatible
with all devices or applications.
Project Delivery
• Local installation on user device.
– Advantages:
• Project does not require constant connection
to a network.
• Developer can incorporate larger data files within
the
application.
– Disadvantages:
• Platform dependency.
• Version control and critical updates are user
dependent.
• Inability to track demographics and patterns of
use.
Local Delivery Approaches
• Projects for local delivery have two
approaches to provide the application:
– Project requires a separate player
program to present the multimedia
content.
• QuickTime, Flash, and MediaPlayer
programs are free player downloads.
– Project embeds the player in the
multimedia project.
• Larger files, but project is a stand-alone
application.
Choosing an Authoring Application
• No single authoring tool is suitable for all
projects. To select the right application:
– Consider the subject (static or dynamic
media).
– Consider the media (source file formats
compatible).
– Consider delivery (where used, means of
distribution).
– Consider maintenance (expertise needed to
revise content, frequent update cycles).
The
Development
Team
From Project Design to Delivery
Development Team
• Team of experts is important for project.
– They produce high quality media.
– They contribute to the development of
ideas in the project cycle.
• Development is both:
– Interactive: Team members share expertise
and ideas during the development cycle.
– Iterative: Revisions result from
development feedback.
Team Member
• Project Manager
– Responsible for delivering the product with
promised features, on time, and on budget.
– Oversees the business aspects of the development
process.
– Must be organized, focused, and task oriented.
• Project Designer
– Responsible for overall structure of content, the
look, feel, and functionality of user interface.
Team Member
• Content Expert
– Has detailed understanding of the topic.
– Some projects may rely on the client to provide
content for project.
• Writers
– Create original text for the project.
– Provide written requirements of the project such as
documentation, contracts, help screens.
– Technical writing skills are useful.
Media Specialists
• Responsible for preparation of individual
elements in a multimedia application.
– Graphics Specialist
• Artists skilled in design principles and most
current digital technology.
– Sound Specialist
• Trained in traditional sound production and
has a working knowledge of a sound studio.
• Familiar with digital tools for creating and
editing sounds.
Media Specialists
– Animation Artist
• Understands the principles of composition and
color and can produce drawings.
• Understands the elements of motion and can
envision action sequences.
• Knows computer animation programs and
techniques.
– Video Specialist
• Videographers who have knowledge of film
techniques, writing, sound, and digital video
production and editing.
Media Specialists
– Programmer
• Responsible for computer code that unites the
media elements and provides the product's
functionality.
– Acquisitions Specialist
• Knowledgeable about sources for copyright-
protected content and process of securing
permissions.
• Establishes agreements to protect the creative
work of the project developers.
Development Plan
• Addresses three essential tasks:
1. Definition
2. Design Development is an
3. Production iterative process: earlier
stages are re-shaped as
development progresses.

• Progress markers or rewards are identified at

each stage.
• Deliverables are sent to the client as project
takes shape.
• Payment schedules often tied to deliverables.
 Stage 1: Definition

• Identify project goal or purpose.

– What should the application accomplish?
• Identify the audience.
– Who are the intended users?
• Identify role of multimedia in this project.
• Advantages of multimedia to accomplish
goal.
• Media elements it requires.
• Forms of interactivity to provide.
• Delivery method and cost estimate.
Key Documents in Stage 1
• Preliminary Proposal
– Short description of the proposed
application.
• Includes project goal, audience,
outcomes, description of media, types
and uses of interactivity, preliminary cost
estimate.
– Often includes a flowchart.
• A simple box diagram with brief
descriptions of product contents.
Sample Flowchart

Created for a multimedia application based on the poem Fra Lippo

Lippi developed by Savage and Vogel.
Key Documents in Stage 1
• Storyboard
– Series of sketches of major screens.
– Rough drawings of media elements such
as photos, animations, or videos are
sketched in.
– Navigational aides are identified.
– Used to:
• Communicate with the client during the
definition stage
• Communicate project goals and
requirements to the development team.
Sample Storyboard

Storyboard used in Fra Lippo Lippi application with key

elements identified.

Check the storyboard processfor ToyStory.

Key Documents in Stage 1
• Functional specification
– Detailed description of the elements
and performance of multimedia
project.
– Basis of a detailed business contract.
• Developer and client understanding of
what has been promised and the
procedures to follow if changes are made
in specifications.
 Stage 2: Design

• Purpose is to create an incomplete working

model of the project àPrototype.
– First media elements are created.
– Interface is designed.
– Elements are combined to create the prototype.
• Media Creation
– Required media identified in a content inventory
list.
– Media preproduction, production, postproduction
are carried out.
Interface Design
• User interface defines how user experiences
the content on the screen.
• Goal of interface design is to engage the user.
– Must support the project goals, match
the expectations and abilities of
audience.
– Should establish appropriate tone
determined by style of media elements and
controls.
Interface Design
• Features of user interface
– Intuitive
• Immediately understood by the user.
• Common strategy is to use a metaphor.
– Consistent
• Common backgrounds and consistent
location of user controls.
– Predictable and reliable
• Similar actions should produce similar
results.
• Identical actions produce identical
results.
Sample Interface Design

One navigation interface for the multimedia application, Exploring Fra

Lippo Lippi. User can randomly access segments of the poem by clicking
on a line number. Gray bar provides visual feedback on their progress
through the poem. Other means of navigating the poem are presented in
the overall design.
Prototype
• An incomplete working model of the final
product.
• Functions of prototype:
– Refine the definition of the product
– Test proposed features
– Guide further work of team members.
• Generally built in the authoring application
that will produce final project.
Prototype
• Used to test the product itself.
– Test proposals.
– Test assumptions of definition and design
stage.
– Test product to see if it performs as
anticipated.
– Test navigation of product.
– Obtain internal and external product review.
• Guides subsequent work to complete the
project.
Sample Prototype

Prototype created in Flash MX, includes media, design, user

interface and provides an incomplete working model to test the
product's functionality.
 Stage 3: Production

• Remaining elements of product are created

and integrated into the application.
• Includes quality assurance testing with bug
reports and corrective measures.
– Alpha version: includes most media
elements but also many "bugs."
– Beta version: includes all media but still has
a few bugs.
– Gold master: complete, bug-free application.
 Stage 3: Production

• Completion of release notes, manuals, and

packaging.
• Project materials are systematically archived.
– Archived files may resolve disputes between
client and developers.
– Project may need revisions that use archived
files.
– Copyrighted materials may be used in future
projects.
Wrap Up
• Authoring applications
– Integrate and synchronize media elements,
add interface and interactivity, and deliver a
project.
• Authoring metaphors
– Card, Icon, Timeline.
• Applications have tools built in to support
basic authoring functions.
• Choosing an application depends on project
needs.
Wrap Up
• Multimedia development is a team effort.
– Team members provide expertise in the
varied disciplines needed to complete the
project.
– Process is interactive and iterative.
• Development plan guides the process to keep
production on task and on time.
– Follows three major stages: Definition,
Design, Production.
 Key Term Check Up
Authoring Frame Networked
Authoring application Hierarchical Player
Background layer Hyperlink Programming
Card metaphor Icon Script
Conditional Icon metaphor Storyboard
Database Icon programming Timeline metaphor
Debugger Image map
Flowline Linear
Foreground layer Metaphor
Key Term Check Up