Interactive Multimedia

(MMD 2163)
Credit Hours : 3
Contact Hours: 42

General Information

Instructor: Rozalina bt Rosli

Telephone: 03-2020 4403 / 013-343 1705

Room: N106

Email: rozalina@tm.com.my
Principles of Interactive Multimedia
Review of MM Basics :Multimedia Building Blocks
What is multimedia?

• Multimedia is the integration or combination of

the FIVE basic media elements, into an audio
visual (interactive) application or presentation to
convey a clear message to an audience.

Text

Video Graphic

+ INTERACTIVITY
Animation Audio
Cont..

• Multimedia can be presented on disc (e.g. CD-

ROM, laser disc. Floppy) or online (e.g. world wide
web, local network)
• Category of Interactive Multimedia:
 Video games
 Corporate training
 Advertising
 Interactive movie
 Web pages
 Educational programs
Principles of Interactive Multimedia
Concept of multimedia application development
What is interactivity?

• The key word in the definition of interactive

multimedia is INTERACTIVITY
• Interactivity gives the end user control over the
content and flow of information in a project.
• Simple branching is the ability to go to another
section of the multimedia production.
• The combination of variety of multimedia
elements make up a multimedia presentation.
Cont…

Example:

• A viewer choosing which door to open in Myst to find the

secret of the island
• A biology student using ADAM:The Essentials, who clicks
on the icon that turns the medical drawing on the screen
from male to female.
• http://www.noggin.com/
• http://www.bbc.co.uk/schools/
• http://atv.disney.go.com/playhouse/allshows/
• http://www.babloo.com/
• http://www.enchantedlearning.com/categories/interactive.sh
tml
• http://www.shnoozles.com/
Visual Communication Interaction

• Visual communication is about using visual

design as a practical communication tool.
• The creator or designer is responsible for
identifying and having full understanding of 3
elements:
 Audience
 Purpose
 Context –circumstances in which the user will used your
product, at home, in the office.
Stages of a Multimedia Project

PLANNING & DESIGN &

COSTING PRODUCTION

PACKAGING &
DELIVERING TESTING
Stages of a Multimedia Project

Planning and costing:

 The needs of a project are analyzed by outlining its
messages and objectives.
 A graphic template, the structure, and navigational
system are developed.
 A time estimate and a budget are prepared.
 A short prototype or proof-of-concept is prepared
Estimating / costing

• Cost estimation is done by analyzing the tasks

involved in a project and the people who build it.
• The hidden costs of administration and
management are also included in the cost
estimates.
• A contingency rate of 10 to 15 percent of the total
cost should be added to the estimated costs.
Estimating / Costing

The categories of expenses incurred for

producing multimedia are:
 Project development costs.
 Salary, travels, research, proposal preparation
 Production costs.
 Content creation cost, graphics production cost, audio
and video production cost, authoring cost
 Testing costs.
 Printing cost, editing, facility rental, coop fees-payment
for participant
 Distribution costs.
 Documentation, packaging, marketing, manufacturing
Stages of a Multimedia Project

Design and production:

 The planned tasks are performed to create a finished
product.
 The product is revised, based on the continuous
feedback received from the client.
Stages of a Multimedia Project

• Testing - The program is tested to ensure that it

meets the objectives of the project, works on the
proposed delivery platforms, and meets the client
requirements.
• Delivery - The final project is packaged and
delivered to the end user.
Requirements for a Multimedia Project

• Hardware.
• Software.
• Creativity and organizational skills.
Hardware

• The most significant platforms for producing and

delivering multimedia projects are Macintosh
operating system and Microsoft Windows.
• These systems provide an easy-to-use graphical
user interface (GUI) The Macintosh as well as
Windows PC offers a combination of affordability,
and software and hardware availability.
• The Macintosh platform is better suited for
multimedia production than the Windows
platform.
• The hardware platforms provided by Apple are
better equipped to manage both, sound and video
editing.
Software

• Multimedia software provides specific

instructions to the hardware for performing tasks.
• Software tools are divided into production tools
and authoring tools.
Multimedia Planning
Idea Analysis
Idea Analysis

• Before beginning a multimedia project, it is

necessary to determine its scope and content.
• Balance is the key principle in idea analysis.
• The aim is to generate a plan of action that will
become the road map for production.
• It is necessary to continually weigh the purpose
or goal against the feasibility and the cost of
production and delivery.
• Gantt charts - depict all the tasks along a timeline.

Goal & Cost &

purpose delivery
Idea Analysis

Idea analysis involves finding answers to questions

like:
 Who is the intended audience? What are their needs?
 What multimedia elements will best deliver the message?
 What hardware, software, and storage capacity would be
required?
 How much time, effort, and money would be needed?
 How will the final product be distributed?

Exercise : answer the above questions

Task Planning

Task planning involves:

 Designing the instructional framework.
 Holding creative idea sessions.
 Determining the delivery platform and authoring
platform.
 Assembling the team.
 Building a prototype, producing audio and video, testing
the functionality, and delivering the final product.
Developing the Gantt Chart (exercise)

• Proposal & treatment Approval

• Scheduling (Gantt Chart)
• Research (background Research, Fact Finding, Data Gathering)
• Precedence Study (case study)
• Data Gathering
• Storyboard I
• Storyboard II
• Navigational Flowchart
• Multimedia Scriptwriting
• Photography
• Video production
• Interface Design
• Icon Design
• Packaging Design
• Compilation
• Final presentation
• Submission
Multimedia Planning
Multimedia Development Team
Multimedia Development Team

• A team of skilled individuals is required to create

a good multimedia project.
• Team building refers to activities that help a group
and its members function at optimum levels.
• The diverse range of skills required for a project is
called the multimedia skillset.
Members of a Multimedia Team

A multimedia team consists of the following:

 Project manager.
 Multimedia designer.
 Interface designer.
 Writer.
 Video Specialist
 Audio Specialist
 Multimedia programmer.
 Producer for the Web.
 Computer programmers.
Roles and Responsibilities in a MM Team

The project manager is responsible for:

 The overall development, implementation, and day-to-

day operations of the project.

 The design and management of a project.

 Understanding the strengths and limitations of hardware

and software.

 Ensuring people skills and organizational skills.

 Conveying information between the team and the client.

Roles and Responsibilities in a MM Team

Multimedia designer - This team consists of:

 Graphics designers, illustrators, animators, and image
processing specialists who deal with visuals, thereby
making the project appealing and aesthetic.
 Interface designers, who devise the navigational
pathways and content maps.
 Creating a software device that organizes content, allows
users to access or modify content, and presents that
content on the screen.
 Building a user-friendly interface.

 Information designers, who structure content, determine

user pathways and feedback, and select presentation
media.
Roles and Responsibilities in a MM Team

A multimedia writer is responsible for:

 Creating characters, actions, point of view, and
interactivity.
 Writing proposals and test screens.
 Scripting voice-overs and actors' narrations.
Roles and Responsibilities in a MM Team

A video specialist needs to understand:

 The delivery of video files on CD, DVD, or the Web.
 How to shoot quality video.
 How to transfer the video footage to a computer.
 How to edit the footage down to a final product
Roles and Responsibilities in a MM Team

An audio specialist is responsible for:

 Locating and selecting suitable music talent.
 Scheduling recording sessions.
 Digitizing and editing recorded material into computer
files.
Roles and Responsibilities in a MM Team

Multimedia programmer, also called a software

engineer:
 Integrates all the multimedia elements into a seamless
project, using authoring systems or programming
language.
 Writes codes for the display of multimedia elements, and
to control various peripheral devices.
 Manages timings, transitions, and record keeping.
Multimedia Content Development
Digital content creation
Basic Model -ADDIE

A D D I E
Analysis Design Develop Implement Evaluate
Basic Model – Analysis (A)

• Must define the problem, identify the source of the

problem and determine possible solution.
• My include specific research techniques such as
needs analysis, performance analysis and task
analysis.
• Need analysis – to define a need and solution
• Performance analysis – identify the reason and
cause of the problem
• Task analysis – organize what is the content.
(need to do research)
Basic Model – Design (D)

• Must outline how to reach the goals determined

during the analyze phase and expand the
instructional foundation.
Basic Model – Develop (D)

• During this phase, you will develop the product,

all media that will be used in the instruction and
any supporting documentation
• This may include hardware and software
Basic Model – Implement (I)

• Refers to the actual delivery whether it is CD

based or Web based
• The purpose of this phase is the effective and
efficient delivery of instruction
Basic Model – Evaluate (E)

• Measures the effectiveness and efficiency of the

product.
Multimedia Planning
Media Script Proposal
Media Script Proposal

• The first step in creating a multimedia project is to

start with a script for multimedia production,
which is putting your idea on paper.
• The script works in conjunction with the
storyboard and flowchart to provide a printed
version of all text, graphics and dialogue used in
production.
• These are the basic information to be contained in
your proposal.
 Project title, product character, target audience,
treatment, produced by.
What is treatment?

• Treatment is an idea of a story before developing

it into a script.
• Writers write treatment to help define and refine
their intentions.
Research and content organization
Digital content creation
Content Definition

• Clear idea and good understanding of what is the

application is all about
• Assume target audience have zero knowledge-it’ll
make sure every topic will be covered
• Task analysis - the process of hierarchically
outlining an application’s content
 Understand the content
 Do research on the content thoroughly
Navigation

• Never begin a multimedia project without first

outlining its structure and content.
• Navigation map/ site map:
 Provide table of contents, chart of the logical flow of the
interactive interface
 outline the connections or links among various areas the
content
 Help organize content and messages
 Basic structure:
 Linear
 Hierarchical
 Nonlinear
 Composite
Navigation

• Linear
 Users navigate sequentially, from one frame or bite of
information to another

example
Navigation

• Hierarchical
 Also known as “linear with branching”
 Users navigate along the branches of tree structure that
is shaped by the natural logic of the content

example
Navigation

• Nonlinear
 Users navigate freely through the content of the project,
unbound by predetermined routes

example
Navigation

• Composites
 Users may navigate freely(nonlinearly) but are
occasionally constrained to linear presentation

example
Navigation

• Hot spot
 When users click a hot spot at that location, something happens

• General categories of hot spot:

1. Text (hypertext and text button)
 Hyperlink
 Hotspot connects the user to another part of the document or program to a
different program or website
2. Button
 If the hotspot is a graphic image designed to look like a push button or
toggle switch
3. Icons
 Graphic objects designed specifically to be meaningful buttons and are
usually small
 Fundamental graphic objects symbolic of an activity or concept

• Navigation design must provide buttons that make sense and

within one style or concept
Navigation
• Hyperlink
 www.yahoo.com
 home

• Buttons • Icons
Multimedia Planning
Navigational Flowchart
Flowchart

• The production flowchart is a visual representation of the

sequence of the content of your product. It shows what
comes first, second, third, etc. as well as what your
audience will do, if anything, and what will happen when
they've done it.
• A completed flowchart organizes your topics, strategies,
treatments, and options into a plan from which you can
work out the details of what each screen, page, frame, or
shot will look like.
• Essentially, it is a working map of your final product. The
flowchart is not created in stone. It will probably change as
you work through all of the details of your final product.

• here are some symbols
commonly used in flowcharts.
Start and End
This symbol is used to
indicate both the beginning
and the end of your program.
Graphic/Text
This symbol indicates
individual content for
screens, pages, or frames.
Decision
This symbol is used when
there is interactivity between
your audience and the
program. It is usually in the
form of a yes/no question,
with branching flow lines
depending upon the answer.
Place Marker
This is a place marker. If you
have to go to another line or
page with your flowchart, this
symbol is numbered and put
at the end of the line or page.
It is then used at the
beginning of the next line or
page with the same number
so a reader of the chart can
follow the path.
The draft of the flowchart
Organizational flowchart
Multimedia Planning
Storyboard
Storyboard-video production
• a series of rough sketches that show the plot, action, characters, and setting of a film, used before
actual filming begins.
www.fablevision.com/smokescreeners/glossary.html
• a drawing used in the design of scenes to help visualize how things will be
www.movieprop.com/prop.htm
• A series of illustrations or layouts showing a program s video and audio sequences in
chronological order.
www.waptac.org/sp.asp
• Sequence of pictures created by a production illustrator to communicate the desired general visual
appearance on camera of a scene or movie.
www.teako170.com/glossary5.html
• Used as a planning tool for multimedia, a storyboard is a visual representations of a finished
screen or of a shot in a finished video. A storyboard typically includes a drawing of the visual
image, as well as the text of any narration or words that appear on the screen, and production
instructions, such as "fade to the next scene" or "link this screen to screen 141."
alt.uno.edu/glossary.html
• A set of mockups (as of Web pages or animation frames) that serves to capture the concept and
content of a yet-to-be-produced production version.
docs.rinet.ru/WebLomaster/appa.htm
• Editing software that utilizes thumbnails of video clips to illustrate scenes. Transitions are typically
placed between scene thumbnails. Generally considered easy-to-use, since everything is drag-and-
drop simple. Storyboard thumbnails are all the same size, regardless of the duration of the clip.
www.videomaker.com/scripts/article_print.cfm
• A board or panel containing a series of small drawings or sketches that roughly depict the
sequence of action for a script to be filmed, as for a motion picture, television commercial, music
video, or the like.
www.sd58.bc.ca/Scope%20&%20Sequence%20webpages/glossary.htm
• Storyboards are illustrations displayed in sequence for the purpose of previsualizing an animated
or live-action film.
en.wikipedia.org/wiki/Storyboard
TV commercial
Storyboard-interactive CD or web

• A visual outline of a Web site showing the page-layout plan.

highered.mcgraw-hill.com/sites/0072407611/student_view0/glossary.html
• a sketch our outline showing the basic navigation structure or arrangement
of web pages in a web site, much like a storyboard used in the planning of a
film creation.
www.247webpages.com/01/pages/pg-glossary.html
• A set of mockups (as of Web pages or animation frames) that serves to
capture the concept and content of a yet-to-be-produced production
version.
docs.rinet.ru/WebLomaster/appa.htm
• a small sketch that represents every page in a Web site. Like a flowchart, a
storyboard shows the relationship of each page to the other pages in the
site. Storyboards can be helpful when planning a Web site because they
allow you to visualize how each page in the site is linked to the others
pages.
itclass.heinz.cmu.edu/itppmweb03/group11/project/Glossary/GlossaryIndex
.htm
• Editing software that utilizes thumbnails of video clips to illustrate scenes.
Transitions are typically placed between scene thumbnails. Generally
considered easy-to-use, since everything is drag-and-drop simple.
Storyboard thumbnails are all the same size, regardless of the duration of
the clip.
www.videomaker.com/scripts/article_print.cfm