CIT735

Download as pdf or txt
Download as pdf or txt
You are on page 1of 289

 

NATIONAL OPEN UNIVERSITY OF NIGERIA

SCHOOL OF SCIENCE AND TECHNOLOGY

COURSE CODE: CIT 735

COURSE TITLE: APPLICATION SOFTWARE DESIGN AND


MULTIMEDIA

 
 

COURSE
GUIDE

CIT 735
APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Course Team Mr. A. F. Adekoya (Course Developer/Writer) -


Federal University of Agriculture
Abeokuta.

NATIONAL OPEN UNIVERSITY OF NIGERIA

 
 

 
CIT 735 COURSE GUIDE

National Open University of Nigeria


Headquarters
14/16 Ahmadu Bello Way
Victoria Island, Lagos

Abuja Office
5 Dar es Salaam Street
Off Aminu Kano Crescent
Wuse II, Abuja

e-mail: centralinfo@nou.edu.ng

URL: www.nou.edu.ng

Published By
National Open University of Nigeria

Printed 2013

ISBN: 978-058-483-8

All Rights Reserved

ii
CIT 735 COURSE GUIDE

CONTENTS PAGE

Introduction……………………………………………… iii
What this Course Will Help You Do………………….… iii
Course Aims……………………………………..……… iv
Course Objectives…………………………..…………… iv
Working through this Course…………………….……… v
Course Materials……………………………………….... v
Online Materials………………………………………… vi
Equipment………………………………………………. vii
Study Units ……………………………………………… vi
Assessment……………………………………………… viii
Course Overview………………………………………… viii
How to Get the Most from this Course…………………. viii
Facilitators/Tutors and Tutorials……………………….. ix
Summary………………………………………………… x

INTRODUCTION

The course, Application Software Design and Multimedia, is an


important course for students studying towards acquiring the PGD in
Information Technology. In this course, we will study the concepts and
principles of multimedia applications, and techniques require for
designing, developing and deploying effective multimedia applications.

The overall aims of this course are to introduce you to how multimedia
presentations are developed. Topics related to Multimedia elements,
Hypermedia, Interactive Multimedia and Metamedia, Properties of
Multimedia Element, Multimedia Design and Development Strategies,
and Multimedia Authoring: Flash Technology and Development are
equally discussed. The bottom-up approach is adopted in structuring this
course. We start with the basic building blocks of multimedia concepts
and elements, and then move on to the fundamental design principles of
multimedia applications.

WHAT THIS COURSE WILL HELP YOU DO

The overall aims and objectives of this course provide guidance on what
you should be achieving in the course of your studies. Each unit also has
its own unit objectives which state specifically what you should be
achieving in the corresponding unit. To evaluate your progress
continuously, you are expected to refer to the overall course aims and
objectives as well as the corresponding unit objectives upon the
completion of each.

iii
CIT 735 COURSE GUIDE

The course guide tells you briefly what the course is about, what course
materials you will be using and how you can work with these materials.
In addition, it advocates some general guidelines for the amount of time
you are likely to spend on each unit of the course in order to complete it
successfully.

It gives you guidance in respect of your Tutor-Marked Assignment


which will be made available in the assignment file. There will be
regular tutorial classes that are related to the course. It is advisable for
you to attend these tutorial sessions. The course will prepare you for the
challenges you will meet in the field of multimedia systems.

COURSE AIMS

The overall aims and objectives of this course include:

o Develop your knowledge and understanding of the underlying


principles of Multimedia Systems.
o Build up your capacity to evaluate different techniques for
creating multimedia applications.
o Develop your competence in analysing multimedia systems.
o Build up your capacity for developing simple multimedia
applications.

COURSE OBJECTIVES

To achieve the aims set out, the course has a set of objectives. Each unit
has specific objectives which are included at the beginning of the unit.
You should read these objectives before you study the unit. You may
wish to refer to them during your study to check on your progress. You
should always look at the unit objectives after completion of each unit.
By so doing, you would have followed the instructions in the unit.

Below are the comprehensive objectives of the course as a whole. By


meeting these objectives, you should have achieved the aims of the
course as a whole. In addition to the aims above, this course sets to
achieve some objectives. Thus, upon completion of the course, you
should be able to:

o Define basic concepts like multimedia, hypermedia, hyperlinks


etc.
o Describe the basic the properties of multimedia elements.
o Highlights and describe the hardware and software tools
necessary for developing effective multimedia applications.
o Explain the notions of multimedia life cycle.

iv
CIT 735 COURSE GUIDE

o Outline the appropriate skills and knowledge required for


assembling a multimedia development team.
o Discuss the underlying multimedia learning and cognitive
principles in multimedia learning design.
o Discuss and deploy various multimedia authoring tools such as
flash, windows movie maker, audacity, Dreamweaver, AJAX, etc.
o Develop simple multimedia applications.

WORKING THROUGH THIS COURSE

We designed this course in a systematic way, so you need to work


through it from Module 1, Unit 1 through to Module 4, Unit 4. This will
enable you appreciate the course better.

Each unit contains self-assessment exercises and at certain points in the


course you would be required to submit assignments for assessment
purposes. At the end of the course, there is a final examination. The
course should take you about 21 weeks to complete. Below you will find
listed all the components of the course, what you have to do and how
you should allocate your time to each unit in order to complete the
course successfully on time.

This course entails that you spend a lot of time to read. I would advice
that you avail yourself the opportunity of attending the tutorial sessions
where you have the opportunity of comparing your knowledge with that
of other learners.

COURSE MATERIALS

Basically, we made use of textbooks and online materials by leading


scholars and experienced practitioners in the field of multimedia systems.
You are expected to search for more literature and web references for
further understanding. Each unit has references and web references that
were used to develop them.

The main components of the course are:

1. The Course Guide


2. Study Units
3. Further Readings/References
4. Assignments
5. Presentation Schedule

v
CIT 735 COURSE GUIDE

STUDY UNITS

There are 4 modules in this course. Each module comprises 6, 5 or 4


units which you are expected to complete in 3 hours. The 4 modules and
their units are listed below.

Module 1 Basic Concepts in Multimedia

Unit 1 Introduction to Multimedia


Unit 2 Hypermedia
Unit 3 Interactive Multimedia and Metamedia
Unit 4 Issues in Multimedia Systems
Unit 5 Multimedia Tools: Hardware
Unit 6 Multimedia Tools: Software

Module 2 Properties of Multimedia Element

Unit 1 Text
Unit 2 Graphics, Pictures and Images
Unit 3 Sound and Audio
Unit 4 Video and Animation

Module 3 Multimedia Design and Development Strategies

Unit 1 Multimedia Systems Development Life Cycle


Unit 2 Human Computer Interaction and User-Centered Design
Unit 3 Structure and Tools
Unit 4 Assembling a Multimedia Development Team
Unit 5 e-Learning, Multimedia Learning and Cognitive Principles
in Multimedia Learning Design

Module 4 Multimedia Authoring: Flash Technology and


Development

Unit 1 Overview of Flash Technology


Unit 2 Flash Animation
Unit 3 Introduction Dreamweaver and Cascading Style Sheets
Unit 4 Flash Development: Dynamic HTML and AJAX

Online Materials

Feel free to refer to the websites provided for all the online reference
materials required in this course. The website is designed to integrate
with the print-based course materials. The structure follows the structure
of the units and all the reading and activity numbers are the same in both
media.

vi
CIT 735 COURSE GUIDE

Equipment

In order to get the most from this course, it is essential that you make
use of a computer system which has internet access.

Recommended System Specifications:


Processor
2.0 GHZ Intel compatible processor
1GB RAM
80 GB hard drive with 5 GB free disk
CD-RW drive
3.5” Floppy Disk Drive
TCP/IP (installed)
Internet Ready

Operating System
Windows XP Professional (Service Pack)
Microsoft Office 2007
Java Programming Language
Norton Antivirus

Monitor*
19-inch
1024 X 768 resolution
16-bit high color
*Non Standard resolutions (for example, some laptops) are not
supported.

Hardware
Open Serial Port (for scanner)
120W Speakers
Mouse + pad
Windows keyboard
Microphone
Digital Camera
Scanner Laser Printer
Multimedia Projector

Hardware is constantly changing and improving, causing older


technology to become obsolete. An investment in newer, more efficient
technology will more than pay for itself in improved performance results.

If your system does not meet the recommended specifications, you may
experience considerably slower processing when working in the
application. Systems that exceed the recommended specifications will

vii
CIT 735 COURSE GUIDE

provide better handling of database files and faster processing time,


thereby significantly increasing your productivity.

Software

Some of the software you will need to complete this course are available
online as GNU Licence (open source).

Audacity (Audio Editing)


Windows Movie Maker (Video Editing)
Adobe Flash
Macromedia Dreamweaver
Ms-Powerpoint

ASSESSMENT

The course, Application Software Design and Multimedia entails


attending a three-hour final examination which contributes 50% to your
final grading. The final examination covers materials from all parts of
the course with a style similar to the Tutor-marked assignments.

The examination aims at testing your ability to apply the knowledge you
have gain throughout the course, rather than your ability to memorise
the materials. In preparing for the examination, it is essential that you
receive the activities and Tutor-marked assignments you have completed
in each unit. The other 50% will account for all the TMAs at the end of
each unit.

COURSE OVERVIEW

This section proposes the number of weeks that you are expected to
spend on the three modules comprising 19 units and the assignments
that follow each of the units. We recommend that each unit with its
associated TMA is completed in one week and that you revised the
whole materials in additional two weeks, bringing your study period to a
maximum of 21 weeks.

HOW TO GET THE MOST FROM THIS COURSE

Your course materials have important dates for the early and timely
completion and submission of your TMAs and attending tutorials. You
should remember that you are required to submit all your assignments
by the stipulated time date. You should guard against falling behind in
your work.

viii
CIT 735 COURSE GUIDE

In order for you to learn various concepts in this course, it is essential to


practice. Independent activities and case activities which are based on a
particular scenario are presented in the units. The activities include open
questions to promote discussion on the relevant topics, questions with
standard answers and programme demonstrations on the concepts. You
may try to delve into each unit adopting the following steps:

o Read the study unit


o Read the textbook, printed or online references
o Perform the activities
o Participate in group discussions
o Complete the tutor-marked assignments
o Participate in online discussions.

This course makes intensive use of materials on the world-wide web.


Specific web address will be given for your reference. There are also
optional readings in the units. You may wish to read these to extend
your knowledge beyond the required materials. They will not be
assessed.

FACILITATORS/TUTORS AND TUTORIALS

About 20 hours of tutorials will be provided in support of this course.


You will be notified of the dates, time and location for these tutorials,
together with the name and phone number of your tutor as soon as you
are allotted a tutorial group. Your tutor will mark and comment on your
assignments, keep a close watch on your progress and on any difficulties
you might encounter and provide assistance to you during the course.
You must mail your TMAs to your tutor well before the due date (at
least two working days are required). They will be marked by your tutor
and returned to you as soon as possible.

Do not hesitate to contact your tutor by phone or e-mail, if you need


help. The following might be circumstances in which you would find
help necessary. You can also contact your tutor if:

i. You do not understand any part of the study units or the


assigned readings.
ii. You have difficulty with the TMAs.
iii. You have a question or problem with your tutor’s comments
on an assignment or with the grading of an assignment.

You should try your best to attend tutorials, since it is the only
opportunity to have an interaction with your tutor and to ask questions
which are answered instantly. You can raise any problem encountered in
the course of your study. To gain maximum benefit from the course

ix
CIT 735 COURSE GUIDE

tutorials, you are advised to prepare a list of questions before attending


the tutorial. You will learn a lot from participating in discussions
actively.

SUMMARY

The course, Application Software Design and Multimedia, is intended to


develop your understanding of the basic concepts of multimedia
software application design. This course also provides you with practical
knowledge and hands-on experience in designing and implementing
effective multimedia applications. We hope that you will find the course
enlightening and that you will find it both interesting and useful. In the
longer term, we hope you will get acquainted with the National Open
University of Nigeria and we wish you every success in your future.

x
MAIN
COURSE

CONTENTS PAGE

Module 1 Basic Concepts in Multimedia…………. 1

Unit 1 Introduction to Multimedia………………. 1


Unit 2 Hypermedia………………………………. 17
Unit 3 Interactive Multimedia and Metamedia…. 23
Unit 4 Issues in Multimedia Systems……………. 27
Unit 5 Multimedia Tools: Hardware…………….. 33
Unit 6 Multimedia Tools: Software……………… 43

Module 2 Properties of Multimedia Element…….. 55

Unit 1 Text………………………………………. 55
Unit 2 Graphics, Pictures and Images…………… 70
Unit 3 Sound and Audio…………………………. 87
Unit 4 Video and Animation…………………….. 99

Module 3 Multimedia Design and Development


Strategies………………………………… 120

Unit 1 Multimedia Systems Development


Life Cycle………………………………… 120
Unit 2 Human Computer Interaction and
User-Centered Design……………………. 139
Unit 3 Structure and Tools……………………….. 176
Unit 4 Assembling a Multimedia Development
Team……………………………………….. 189
Unit 5 e-Learning, Multimedia Learning and
Cognitive Principles in Multimedia
Learning Design…………………………… 203

Module 4 Multimedia Authoring: Flash Technology


and Development………………………….. 211

Unit 1 Overview of Flash Technology…………….. 211


Unit 2 Flash Animation…………………………….. 230
Unit 3 Introduction Dreamweaver and Cascading
Style Sheets…………………………………. 235
Unit 4 Flash Development: Dynamic HTML
and AJAX…………………………………… 259
CIT 735 MODULE 1

MODULE 1 BASIC CONCEPTS IN MULTIMEDIA

Unit 1 Introduction to Multimedia


Unit 2 Hypermedia
Unit 3 Interactive Multimedia and Metamedia
Unit 4 Issues in Multimedia Systems
Unit 5 Multimedia Tools: Hardware
Unit 6 Multimedia Tools: Software

UNIT 1 INTRODUCTION TO MULTIMEDIA

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Definitions
3.1 Benefits of Multimedia
3.2.1 Applications of Multimedia
3.3 Classification of Multimedia
3.4 Multimedia Data Element
3.4.1 Text
3.4.2 Facsimile (or Fax)
3.4.3 Document Images
3.4.4 Photographic Images
3.4.5 Geographic Information Systems Maps
3.4.6 Voice Commands and Synthesis
3.4.7 Audio Messages
3.4.8 Music
3.4.9 Graphics
3.4.10 Full-Motion and Video
3.4.11 Holographic Images
3.4.12 Fractals
3.5 Categorization of multimedia data
3.6 History of Multimedia
3.7 Multimedia Societies
3.8 Multimedia as a Discipline
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

1.0 INTRODUCTION

Multimedia simply means numerous or multiple medium. The term


medium implies the existence of a channel through which messages or
information pass through. Multimedia therefore refers to multiple
channels through which we can send, receive, present, store or perceive
message or information.

When a teacher uses some sets of instructional materials such as the


chalkboard, flash card, textbook, flannel board, graph paper,
audiocassettes and videocassettes etc. What he simply does is to ensure
effective teaching and learning of the subject matter.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• define the multimedia concept


• explain the benefits of multimedia applications
• describe the various areas where multimedia systems can be
applied
• classify multimedia systems
• outline the various multimedia data elements
• carry out an exposition on the historical landmarks in relation to
multimedia.

3.0 DEFINITIONS

Multimedia has been defined variously by different scholars based on


the technology available as per time dictum. We will examine some of
these definitions:

Multimedia is media that uses multiple forms of information content and


information processing (for instance audio, graphics, and video) to
inform, entertain or educate the user (Access Developer Network).

Multimedia is a combination of text, animated graphics, video, and


sound delivered to an audience which can be learners, listeners or
viewers through electronic means (Batch elder).

In the words of Xie (1997), multimedia involed the computer-controlled


integration of text, graphics, still and moving images, animation, sounds
and any other medium where every type of information can be
represented, stored, transmitted, and processed digitally.

2
CIT 735 MODULE 1

Mayer (2001) defined Multimedia as presenting words (such as printed


text or spoken text) and pictures (such as illustrations, photos,
animation, or video). Multimedia refers to the combination of multiple
media to effectively convey a message (Dorin & McCormack, 2000).

According to Marshall (2001), multimedia is concerned with the


computer-controlled integration of text, graphics, drawings, still and
moving images (Video), animation, audio, and any other media where
every type of information can be represented, stored, transmitted and
processed digitally.

Ayo (2001) defined multimedia as the delivery of information in


intuitive, multi-sensory ways, through integration of distinct media such
as texts, graphics, computer animation, motion video, and sound in a
single presentation which is computer controlled.

Multimedia is the combination of a variety of communication channels


for presenting text, graphics, audio and video with links and tools that
allow users to interact, create, navigate and communicate (Elsom-Cook,
2001)

Multimedia refers to computer-based materials designed to be used on a


computer that can display and print text and high-quality graphics, play
pre-recorded audio and video material, and create new audio and video
recordings (ICT4LT).

The concept of multimedia as observed from the various definitions


above connotes three facts, namely:

1. Presence of a message or information (content). The


information could be a learning material, news, business
presentation, awareness creation on some health, political, social
issues, or entertainment etc.;
2. Source and destination, speaker and listeners, teacher and
students, government and her citizens, business and its customers
etc.;
3. Communication channels (media) through which the
information is passed. These channels could be traditional
means such as symbol, text, scrolls, spoken words, graphics
drawing, pictures, illustrations and images, or they could be in
electronic forms such as audiocassettes and radio presentations
(audio), videocassettes and television presentations (videos),
slides, computer PowerPoint, YouTube, graphics animation.

Therefore, multimedia is a medium with multiple content forms


(combination of different media) having multiple content forms
(combination of different content forms). In contemporary terms, it
3
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

refers to electronic (digital and computer) representations of information


(text, voice, still images, pictures and illustrations) and their interactive
electronic presentations (text, audio, video, animation, and interactive
content forms).

3.1 Benefits of Multimedia

Multimedia is used based on the following reasons amongst others:

i. it enhances effective presentations;


ii. it is an effective and flexible communication tool;
iii. it is conducive to cooperative work environment;
iv. it facilitates high retention rate, hence high recall of knowledge
content;
v. its supports large audience;
vi. it encourages participatory learning through interactivity;
vii. it stimulates audience or learners interest in the subject; and
viii. it is easy to use, learn and understand.

3.2 Applications of Multimedia

A multimedia application is an application which uses a collection of


multiple media sources e.g. text, graphics, images, sound/audio,
animation and/or video.

Applications and delivery platforms of multimedia are virtually


limitless. Multimedia finds its application in various areas including, but
not limited to, e-commerce (advertisements, home shopping), education
(hypermedia courseware), art and entertainment (video-on-demand,
interactive TV, games, digital video editing and production systems),
engineering, medicine, mmultimedia database systems, mathematics,
business, scientific research, spatial temporal applications (World Wide
Web, Video conferencing, Groupware, Virtual reality). Several
examples are as follows:

1. Simulations: computer-based models of real-life situations or


environments;
2. Business Presentations: used to sell products or ideas, can also
serve to illustrate data analysis or trends;
3. Computer Based Training: type of education in which students
learn by using and completing exercises with instructional
software (also called Computer Aided Instruction CAI).
CBTsoftware are generally flexible, time-wise, location-wise and
customized teaching programs with instant feedback. They are
self-paced study and one-on-one instruction;

4
CIT 735 MODULE 1

4. Courseware: the name given to interactive CBT software which


can be used to teach new skills, teach quicker and at a lower cost,
and train for situations;
5. Web Based Training (WBT)/Distance Learning: same basic
principle as CBT but delivery is via the web;
6. Classroom and special education;
7. Electronic Books: a digital text that uses links to five the user
access to information. E-book is a small book-sized computer
that can hold up to 4,000 pages (10 books) worth of text and
images. Electronic Reference (e-text) – a digital version of a
reference book which uses multimedia to provide additional
information;
8. Multimedia Newspaper/ Electronic Magazine: electronic
version of a newspaper distributed via CD-ROM or the Web. E.g.
The Punch etc;
9. Virtual Reality (VR): the use of a computer to create an artificial
environment that appears and feels like a real environment and
allows you to explore a space and manipulate the environment;
10. Kiosks: a computerized information or reference center that
allows you to select various options to browse through or find
specific information (usually uses touch screen). E.g. Target’s
gift registry, Information centers at malls, hospitals, museums,
airports etc.

3.2.1 Commerce

Electronic commerce which is the process of buying, selling products


and services and information on computer networks dominate most
commercial platforms today. Advertising has gone through some
laudable changes with the influence of multimedia. Sales presentations
are being conducting with catchy and stimulating PowerPoint
presentations which combine different forms of media content.
Creative and advanced multimedia presentations are being combined
with a variety of online methods (matching services, web services and
advertising services of exchange) to reach business customers in
business to business (B2B) marketing.

3.2.2 Education

In Education, multimedia is used to produce computer-based training


courses (popularly called CBTs) and reference books and websites like
encyclopedia, wikipedia and almanacs. A CBT lets the user go through a
series of presentations, text about a particular topic, and associated
illustrations in various information formats. Edutainment is an informal
term used to describe combining education with entertainment,
especially multimedia entertainment.

5
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.2.3 Arts and Entertainment

Multimedia is heavily used in the entertainment industry, especially to


develop special effects in movies and animations. Multimedia games are
a popular pastime and are software programs available either as CD-
ROMs or online. Some video games also use multimedia features.
Multimedia applications that allow users to actively participate instead
of just sitting by as passive recipients of information are called
Interactive Multimedia.

3.2.4 Engineering and Industry

Software engineers may use multimedia in Computer Simulations for


anything from entertainment to training such as military or industrial
training. Multimedia for software interfaces are often done as a
collaboration between creative professionals and software engineers.

In the Industrial sector, multimedia is used as a way to help present


information to shareholders, superiors and coworkers. Multimedia is
also helpful for providing employee training, advertising and selling
products all over the world via virtually unlimited web-based
technologies. Creative industries unse multimedia for a variety of
purposes ranging from fine arts, to entertainment, to commercial art, to
journalism, to media and software services provided for any of the
industries listed below. An individual multimedia designer may cover
the spectrum throughout their career.

3.2.5 Mathematical and scientific research

In mathematical and scientific research, multimedia are mainly used for


modelling and simulation. For example, a scientist can look at a
molecular model of a particular substance and manipulate it to arrive at
a new substance. Representative research can be found in journals such
as the Journal of Multimedia.

3.2.6 Medicine

In Medicine, doctors can get trained by looking at a virtual surgery or


they can simulate how the human body is affected by diseases spread by
viruses and bacteria and then develop techniques to prevent it.

3.2.7 Document Imaging, Digital Publishing and Library

Document Imaging is a technique that takes hard copy of an


image/document and converts it into a digital format

6
CIT 735 MODULE 1

3.2.8 Spatial Temporal Applications

Video conferencing (web conferencing) is a virtual meeting in which


participants in one location can see and interacts with participants at
other locations separated by geographical distance but which is
facilitated by digital technology capable of linking various types of
computers across different networks.

Groupware are software products that support collaboration over


networks among groups of people who share a common task or goal.

Virtual reality is a system that delivers interactive computer-generated


3D graphics to a user through a head-mounted display.

SELF-ASSESSMENT EXERCISE

i. Define the term “Multimedia”.


ii. Explain how a particular human field of endeavour would
benefits from the application of multimedia systems.

3.3 Classification of Multimedia

Multimedia may be broadly divided into linear and non-linear


categories. Linear active content progresses without any navigation
control for the viewer such as a cinema presentation. Non-linear content
offers user interactivity to control progress as used with a computer
game or used in self-paced computer based training. Hypermedia is an
example of non-linear content.

Multimedia presentations can be live or recorded. A recorded


presentation may allow interactivity via a navigation system. A live
multimedia presentation may allow interactivity via an interaction with
the presenter or performer.

Multimedia presentations can be in electronic forms and in printed form.

3.4 Multimedia Data Element

The following multimedia data elements and their various forms are
described below:

3.4.1 Text

This is any of the signs or symbols that are used in writing or printing
and which represent a speech sound. Text mode refers to alphanumeric

7
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

or character operation mode which computer uses in displaying letters,


numbers and other text characters.

3.4.2 Facsimile (or Fax)

A letter or a message that is sent in electronic form down a telephone


line and then printed using a special machine called Fax Machine.

3.4.3 Document Images

These are electronic versions of printed images which are captured and
converted through electro photographic process.

3.4.4 Photographic Images

This refers to the production of permanent images by means of the


action of light on sensitized surfaces.

3.4.5 Geographic Information Systems Maps

A geographical information system (GIS) is a computer system that


synthesizes, analyses and displays many different types of geographical
data in an easily understandable form. Geographical maps are now
being made from computer databases. Such digital maps combine and
clearly display different kinds of information (e.g. census, pollutions,
minerals, political affinities, residential patterns etc) for a given
geographical area.

3.4.6 Voice Commands and Synthesis

Voice is the sound (phonation) produced in the voice box (larynx) by the
expiration of air through vibrating vocal cords. It is defined in terms of
pitch, quality, and intensity or loudness. Voice command is the use of
words and syntax of spoken language to operate or control the computer.
Voice synthesis refers to the ability of a computer to produce spoken
words.

3.4.7 Audio Messages

These are sounds which are recorded and probably broadcasted. Sound
is physical phenomenon that stimulates the sense of hearing; and in
human beings, hearing takes place whenever vibrations of frequencies
between about 15 and 20,000 hertz reach the inner ear.

Electronic circuits provide different functions to process audio signals


into from analogue to digital form and verse versa. Digital functions
8
CIT 735 MODULE 1

include the coding, storage an d transmission of information-bearing in


binary form, and the logic operations and numerical processing
performed in computers.

3.4.8 Music

This is the organized arrangement and movement of sounds made by


instruments or voices through a continuum of time in a pleasant or
exciting way.

3.4.9 Graphics

This describes the process of information (objects, images, people, data


distributions, statistics etc) representations through drawing, pictorial
illustrations, tables, charts. The computer screen is divided into pixels
which made it possible for lines and characters to be drawn pixel by
pixel on the computer screen. A pixel (picture element) is the smallest
unit (1 1000 th) tiny spots of an image in a grid display on a computer
screen.

Animated graphics produces the illusions of movement in graphic


images using some. In a computer, it is the simulation of movement
produced by displaying series of successive images on the screen.

3.4.10 Full-Motion and Video

This is the art of making motion-picture films (telling a story using


sound and moving pictures) and projecting such films onto a screen for a
large audience. Video is the process of recording and showing pictures
along with sounds on television.

3.4.11 Holographic Images

These are 3D photographic images obtained using a lensless


photography technique called Hologram. Holograms are made by
exposing a piece of film to laser light, which is scattered by the object
being holographed.

3.4.12 Fractals

These are geometric shapes that are complex and detailed in structure at
any level of magnification.

9
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.5 Categorization of multimedia data

Multimedia data element can be categorized as presented in the table


below

Category Description

1. Nature /Media Captured from real world

Synthesized by computers

2. Spatial-temporal properties Discrete:


space-based only

Continuous
Space-based and time based
E.g. animation, motion, video etc.

Source: Winter 1997

3.6 History of Multimedia

This section presents an overview of the pioneering works through to the


contemporary contributions of people that have over many centuries
labour to bridge the divide between the arts, science and technological
disciplines. We shall study the work and ideas of artists who have
explored new interactive and interdisciplinary forms, as well as
engineers and mathematicians who have developed information
technologies and influential scientific and philosophical ideologies that
have influenced the arts.

This broad historical analysis will help illuminate an understanding of


the emerging digital arts and its aesthetics, strategies, trends, and socio-
cultural aspirations. Central to this analysis will be an understanding of
key concepts for the interpretation of evolving multimedia forms:
including integration, interactivity, hypermedia, immersion, and
narratives.

10
CIT 735 MODULE 1

Some of the important events in relation to Multimedia in Computing


include:

Dates Events
15,000 - Prehistoric humans paint images on the walls of their caves
13,000BC

1895 Gugliemo Marconi sent his first wireless radio transmission


at Pontecchio, Italy
1901 Gugliemo Marconi detected radio waves beamed across the
Atlantic. Initially invented for telegraph, radio is now a
major medium for audio broadcasting. Television was the
new media for the 20th century. It brings the video and has
since changed the world of mass communications.
1906 Color photography became practicable concept.
1914 Silent movies incorporated multiple media by using film
and text captions together
1928 Walt Disney debuts the second short starring a mouse
named Mickey, and the first cartoon to use synchronized
sound.
1928 – Movies with sound replace silent movies
1931
1930s Technicolor is introduced in film and most movies are
filmed in colour after
1937 Bell Laboratories had a breakthrough in creating dual sound
tracks on film.
1940 Fantasia was the first commercial movie with a complete
surround soundtrack in movies.
1945 Vannevar Bush wrote about Memex “As We May Think”
1960s Ted Nelson, created Xanadu, “a universal instantaneous
hypertext publishing network”.
1967 Nicholas Negroponte formed MIT Architecture Machine
Group (later in 1985 MIT Media Lab opens).
1969 Nelson & Van Dam hypertext editor at Brown.

Birth of Arpanet (Internet) by US Military. DARPA


1971 The first E-mail was sent and received successfully,
1976 Negroponte’s Architecture Machine Group proposed
Multiple Media to DARPA.
1977 Apple starts to gain control of the PC market with its
Macintosh Computers.
1980 Lippman & Mohl: Aspen Movie Map.
1981 IBM PC announced and captures market share in 18
months..
1983 Backer’s Electronic Book was launched.
1985 Negroponte & Wiesner opened MIT Media Lab.
11
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

1987 RCA’s David Sarnoff Labs’ announce Digital Video


Interactive.
1988 Apple “Knowledge Navigator” vision
1989 Tim Berners-Lee proposed the World Wide Web to CERN
(European Council for Nuclear Research).
1990 K. Hooper Woolsey, Apple Multimedia Lab opened.
1991 Motion Picture Experts Group.

World Wide Web debuts thanks to Tim Berners-Lee.

Apple Multimedia Lab launched Visual Almanac,


Classroom MM Kiosk.
1992 MS Windows 3.1 is released

HTML debuts

The first M-bone audio multicast on the Net also debuts.


1993 The first graphical browser called MOSAIC which allows
us to view web pages containing IMAGES was launched by
Marc Andreessen, Erin Brina &Tim Clark at University of
Illinois National Center for Supercomputing Applications
(NCSA).
1994 Jim Clark and Marc Andreesen launched Netscape

Creation of World Wide Web Consortium (W3C)

The Rolling Stones become the first major band to


broadcast a live performance over the Internet.
1995 Disney releases Toy Story, the first feature length computer
generated movie (77 minutes long, 4 years to make, 800,000
machine hours to render).

JAVA for platform-independent application development


launched.
1996 Portable Network Graphics (PNG) was launched.

Microsoft, Internet Explorer was launched.

Affordable digital cameras widely available.


1997 HTML 4.0

1998 XML 1.0

Google Search Engine operates by Larry Page & Sergey


Brin was launched.

12
CIT 735 MODULE 1

1999 XSLT 1.0 and Xpath 1.0

Napster debuts, allowing users to download and share


MP3s.
2000s Integration of computer, memory storage, digital
datacamcorders, MP3 players, IPods, speakers, telephones,
HD TV and other technologies explodes.
2001 MPEG-7, JPEG 2000, SVG.
2002 Intellectual property and JPEG 2000

The multimedia computer (MPC) was the next major landmark in the
history of multimedia, appearing in the early 1990s. The MPC was a
breakthrough in terms of its compactness, price and user-friendliness.
Most PCs that are currently available can be classified as multimedia
computers. These following components are essential features of an
MPC:

• a soundcard
• twin loudspeakers or a set of headphones
• a microphone
• a CD-ROM drive - but modern MPCs are likely to be equipped
with a combination CD-ROM / DVD drive as standard.

There were earlier computers that qualified as multimedia computers,


e.g. the Apple Mac and the Acorn Archimedes in the UK, but the
dominant multimedia computer is the MPC. Apple computers appear to
have a commanding position in the print and graphic design industries,
while Acorn computers only ever gained a foothold in the UK schools
sector and finally lost their market share to the MPC.

Now we have multimedia on the Web. It's a growing area but has not
yet completely supplanted CD-ROM or DVD technology. Web-based
multimedia may offer more in terms of presentation rather than
interactivity, and broadband access is essential in order to avoid
hiccups in delivering sound and video.

3.7 Multimedia Societies

In Europe, the reference organization for Multimedia industry is the


European Multimedia Associations Convention (EMMAC).

• ACM Multimedia;
• International Conference on Multimedia & Expo (IEEE ICME).

13
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.8 Multimedia as a Discipline

Multimedia is an inter-disciplinary subject because it involves a variety


of different theories and skills:

• these include computer technology, hardware and software;


• arts and design, literature, presentation skills;
• application domain knowledge.

SELF-ASSESSMENT EXERCISE

i. Highlight the various multimedia elements.


ii. Trace the historical development of multimedia systems.

4.0 CONCLUSION

Multimedia refers to the combination of multiple media to effectively


convey a message or information.

5.0 SUMMARY

In this unit, we have learnt that:

• Multimedia is a combination of text, animated graphics, video,


and sound delivered to an audience (learners, listeners or
viewers) through electronic means.
• Multimedia finds its application in various areas including, but
not limited to, e-commerce, education, art and entertainment,
engineering, medicine, multimedia database systems,
mathematics, business, scientific research, spatial temporal
applications.
• Multimedia may be broadly divided into linear and non-linear
categories.
• Multimedia data elements include text, facsimile, document
images, photographic images, GIS maps, voice commands and
synthesis, audio messages, music, graphics, full-motion or video,
holographic images and fractals.
• The work and ideas of artists who have explored new interactive
and interdisciplinary forms, as well as engineers and
mathematicians who have developed information technologies,
and influential scientific and philosophical ideologies that have
influenced the arts

14
CIT 735 MODULE 1

6.0 TUTOR-MARKED ASSIGNMENT

i. Multimedia is a medium with multiple content forms having


multiple content forms. Discuss fully.
ii. Describe the various types of information that are represented in
multimedia applications.

7.0 REFERENCES/FURTHER READING

Ayo, C. K. (2001). Information Technology: Trends and applications in


science and business. Concept Publications, Lagos, Nigeria.

Access Developer Network (2009). Introduction to Multimedia.


ACCESS Developer Network "A Complete Mobile Application
Development Environment". ACCESS Global Website © 2009
http://www.access-company.com/.

Batchelder, M. (2006). Multimedia: Audio and Project Planning.


BorkWeb.

http://borkweb.com/story/multimedia-audio-and-project-planningDavies
G. (2009). Introduction to multimedia CALL. Module 2.2 in
Davies G. (ed.) Information and Communications Technology for
Language Teachers (ICT4LT), Slough, Thames Valley University
[Online]. Available from: http://www.ict4lt.org/en/en_mod2-
2.htm [Accessed 21/08/2009]. © ICT4LT Project 2009 under a
Creative Commons Attribution-Noncommercial-No Derivative
Works, UK, England & Wales Licence.

Department of Science and Mathematics Education (2001). Introduction


to Multimedia in the classroom. Information Technology in the
Classroom, The University of Melbourne.
warnerj@unimelb.edu.au Copyright: ©1997-2001

http://online.edfac.unimelb.edu.au/485113/approaches/week_6a/sld001.
htm
Dorin, A & McCormack, J. (2000). FIT5900 : Introduction to
Multimedia Programming. FIT5900 courseware,
Semester 1, Caulfield Campus, 2000
http://www.csse.monash.edu.au/%7Ecema/courses/FIT5900/inde
x.html

Elsom-Cook, M. (2001). Principles of Interactive Multimedia. New


York; London : McGraw-Hill.

Marshall, D. (2008), Multimedia. Module CM0340.


http://www.cs.cf.ac.uk/Dave/Multimedia/

15
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Mayer, R. E. (2001). Multimedia Learning. New York: Cambridge


University Press

Xie, G. (1997). CS 3202: Introduction to Multimedia. CS3202 Lecture


Notes. Winter 1997.

16
CIT 735 MODULE 1

UNIT 2 HYPERMEDIA

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Definitions
3.1 Hypermedia
3.2 Hypermedia development tools
3.3 Hypertext
3.4 Document Structure
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Multimedia components are used in combination with the interactive


and hyperlink features.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• define the hypermedia, hypertext and hyperlinks concepts


• describe the available tools that can be used to develop
hypermedia
• explain what relationship exists between multimedia and
hypermedia
• distinguish between hypertext and hypermedia
• describe how multimedia documents are organised.

3.0 DEFINITIONS

Hyperlinking is an index which allows for jumping around to different


sections of electronic documents such as e-books, webpages, etc.

Hyper Text Mark-up Language (HTML) has features that allow a


person to build hyperlinks to other webpages or location on the same
page.

Hypertext is a text which contains links to other texts and is therefore


usually non-linear. It is the general term applied to ‘clickable’ text. Once
a user click on a word or words, he is then taken to a different document
or another area of the current document.
17
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1 Hypermedia

Hypermedia refers to multimedia systems that include nonlinear


structure of information units, events, and discrete media. Hypermedia
can be considered as one of the multimedia applications which
combined materials in many media—text, graphic art, sound, video and
animation; are delivered via digital computer or other electronic means,
and provides a linked structure through which a user can navigate
through elements.

Hypermedia is a general term applied to ‘clickable’ media. Once a user


click on a particular word or graphic, he is then taken to other text,
graphics, sound files, animation or moving video. The World Wide Web
is a classic example of hypermedia, whereas a non-interactive cinema
presentation is an example of standard multimedia due to the absence of
hyperlinks.

Most modern hypermedia is delivered via electronic pages from a


variety of systems including Media players, web browsers, and stand-
alone applications. Audio hypermedia is emerging with voice command
devices and voice browsing.

3.2 Hypermedia development tools

Hypermedia may be developed in a number of ways. Any programming


tool can be used to write programs that link data from internal variables
and nodes for external data files. Multimedia development software such
as Adobe Flash, Adobe Director, Macromedia Authorware, and
MatchWare Mediator may be used to create stand-alone hypermedia
applications, with emphasis on entertainment content. Some database
software such as Visual FoxPro and FileMaker Developer may be used
to develop stand-alone hypermedia applications, with emphasis on
educational and business content management.

Hypermedia applications may be developed on embedded devices for


the mobile and the Digital signage industries using the Scalable Vector
Graphics (SVG) specification from W3C (World Wide Web
Consortium). Software applications such as Ikivio Animator and
Inkscape simplify the development of Hypermedia content based on
SVG. Embedded devices such as iPhone natively support SVG
specifications and may be used to create mobile and distributed
Hypermedia applications.

Hyperlinks may also be added to data files using most business software
via the limited scripting and hyperlinking features built in.
Documentation software such as the Microsoft Office Suite allows for

18
CIT 735 MODULE 1

hypertext links to other content within the same file, other external files,
and URL links to files on external file servers. For more emphasis on
graphics and page layout, hyperlinks may be added using most modern
desktop publishing tools. This includes presentation programs, such as
Microsoft Powerpoint, add-ons to print layout programs such as Quark
Immedia, and tools to include hyperlinks in PDF documents such as
Adobe InDesign for creating and Adobe Acrobat for editing. Hyper
Publish is a tool specifically designed and optimized for hypermedia and
hypertext management. Any HTML Editor may be used to build HTML
files, accessible by any web browser. CD/DVD authoring tools such as
DVD Studio Pro may be used to hyperlink the content of DVDs for
DVD players or web links when the disc is played on a personal
computer connected to the internet.

SELF-ASSESSMENT EXERCISE

i. What do you understand by the term “hypermedia”?


ii. Itemize five environments that could serve as platform for
hypermedia applications.

3.3 Hypertext

In contrast to traditional document, hypertext and hypermedia have as


their major property, a non-linear information link. A hypertext structure
is a graph, consisting of nodes and edges. The nodes are the actual
information units. The edges provide links to other information units.
One can navigate through a document by clicking the edges (arrows or
links). The root of the arrows are known as anchors. The links serve as a
navigation aid allowing users to access information quickly and to
navigate from one topic to another in a nonlinear manner.

Hypertext refers to a document containing purely text, or sometime


some images but no continuous media, with non-linear links, while there

19
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

have been a number of hypertext systems before the recent bloom of


World Wide Web, e.g., Apple’s Hypercard.

3.4 Document Structure

Document structure is the logical organization of the information, i.e.,


the contents. Traditional documents, such as a book, may contain only
text and still images. They can be organized linearly. The logical
structure will be, for example, chapters, sections, subsections,
paragraphs. When documents are exchanged, everything about the
document has to be transferred. These include the contents, the structure
and the presentation. Therefore, it requires some way of describing the
structure and the presentation of the document along with the contents.

3.5 Document Markups

When exchanging hypertext documents, we need to transfer the contents


as well as the structure and the presentation of the documents.
Document markups allow us to specify the document structure and how
it is presented by inserting commands into the document. These are
known as markups. There are in general two kinds of markups: a)
logical and b) visual.

The logical markups marks the document elements according to their


functions and relations with other elements, e.g., chapter, section,
paragraph. It does not tell how the elements looks. The advantages of
logical markups are:

o The document structure is explicit, thus the organisation of


information is clear.
o It is easy to maintain the consistent look of the document.
o It requires a more powerful process to render the document.

The visual markups defines how the elements are rendered, for example,
a chapter title is formatted in Helvetica Bold 24 point, while a section
heading is formatted in Times Roman Bold 20 point. With visual
markup, the logical structure is lost. The visual effects of the elements
are explicit.

o It is easier to keep the fidelity.


o It is easier to render the document.
20
CIT 735 MODULE 1

o It is hard to maintain the consistent look of the document.

A document can be viewed in these two aspects at the same time. In the
diagram on the right, if we start from the top, we will see the logical
structure of a document. If we start from the bottom, we will see the
presentation aspect of the document.

SELF-ASSESSMENT EXERCISE

Explain the importance of document markups in hypermedia


applications.

4.0 CONCLUSION

Hypermedia can be thought of as one of the multimedia applications


which combined materials in different media—text, graphic art, sound,
video and animation. Hypermedia applications are delivered via digital
computer or other electronic means, and provides a linked structure
through which a user can navigate through elements.

21
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

5.0 SUMMARY

In this unit, we have learnt that:

• Multimedia components involve interactivity and hyperlink


features.
• Such components include hypermedia, hyperlink and hypertext.
• Hypermedia refers to multimedia systems that include nonlinear
structure of information units, events, and discrete media.
• Hypermedia may be developed using programming tools,
database software, multimedia development software, on
embedded devices for the mobile, and Scalable Vector Graphics.
• Document structure is the logical organisation of the information
• When exchanging hypermedia and multimedia documents, we
need to transfer the contents as well as the structure and the
presentation of the documents.

6.0 TUTOR-MARKED ASSIGNMENT

i. Why are hypermedia and hypertext documents refer to as non-


liner information links.
ii. Compare and Contrast between Document structure and
Document markup.

7.0 REFERENCES/FURTHER READING

Buford, J.F.K. (1994) Multimedia Systems. ACM Press ISBN 0-201-


53258-1 Pp. 285-303.
COMP3600/SCI2600 Multimedia Systems, Department of Computer
Science, Hong Kong Baptist University
Dorin, A & McCormack, J. (2000). FIT5900: Introduction to
Multimedia Programming. FIT5900 courseware, Semester 1,
Caulfield Campus, 2000
http://www.csse.monash.edu.au/%7Ecema/courses/FIT5900/index.html
Lan Anh Tran and Shoba Tegginmath (2002). Applications of
Multimedia in Library and Information Services: Principles of
Multimedia and Electronic Resources. Information Networks for
the Future. Workshop, Victoria University of Wellington, Hanoi
2 – 6 December 2002
Marshall, D. (2008), Multimedia. Module CM0340.
http://www.cs.cf.ac.uk/Dave/Multimedia/

Mike Christel and Alex Hauptmann (2002). Introduction to Multimedia


and MSEC 20-791 http://www.cs.cmu.edu/~christel/MM2002/

22
CIT 735 MODULE 1

UNIT 3 INTERACTIVE MULTIMEDIA AND


METAMEDIA

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Definitions
3.1 Interactive multimedia
3.2 Components of Interactive Multimedia
3,3 Metamedia
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Interactive multimedia implies allowing an end user some control over


what elements to present and when. Thus, it allows user-response to
alter the way the presentation proceeds. For someone to truly learn how
to use a program or a product, it's essential that they actually use it.
Interactivity allows each user to actively participate in the viewing
process, instead of passively watching the material presented. The nature
of your material determines the amount of interactivity you should use.
The desktop computer is currently a popular vehicle for interactive
multimedia presentation.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• define interactive multimedia and metamedia


• explain the benefits of interactivity to multimedia applications
• describe the various components of interactive multimedia.

23
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.0 DEFINITIONS
Interactive Multimedia can be defined as an integration of relationship
between multimedia and interaction. It is a multimedia system in which
related items of information are connected and can be presented
together. It involves combination of the followings:

• knowledge and information


• a collection of technologies
• a collection of multimedia components (modality, channels of
communication, medium)
• a set of collaborative systems
• virtual environments

3.1 Interactive multimedia

Interactive multimedia is a type of collaborative media and refers to


media that allows for active participation by the recipient, hence
interactivity. Traditional information theory would describe interactive
media as those media that establish two-way communication. In media
theory, interactive media are discussed along their cultural implications.
The field of human–computer interaction deals with aspects of
interactivity and design in digital media. Other areas that deal with
interactive media are new media art, interactive advertising and video
game production.

While much traditional analog electronic media and print media


qualifies as interactive media, the term is sometimes misunderstood as
exclusive to digital media. The significant increase in possibilities for
interactivity (especially over vast distances) brought by the internet
boosted the availability of digital interactive media. Still, e.g. language
in face-to-face communication would formally belong to the category of
interactive media.

Interactive media are often designed by information designers. As all


media they rely on communication. In the case of e.g. computer games
this is visual, acoustic, and haptic communication between the user
(player) and the game. In mobile telephony, the communication happens
between two people and is purely acoustic at the first glance. Yet,
according to media theory the cultural implications of the medium have
to be taken into account. Thus, aspects like constant availability,
customization of the mobile phone and Short Message Service are also
part of the interactive medium called mobile telephony. Media restrain
from being translated to technological entities.

24
CIT 735 MODULE 1

3.2 Components of Interactive Multimedia


The components of interactive multimedia include the followings:

o Asset – an object which encapsulates a single piece of ‘media’


(e.g. video, sound clip, graphic)
o Information – the collection of data by a particular encoding
o Knowledge – the interpretation and understanding of information

3.3 Metamedia

Metamedia refers to new relationships between form and content in the


development of new technologies and new media. Metamedia utilizes
new media and focuses on collaboration across traditional fields of
study, melding everything from improvisational theatre and performance
art, to agile, adaptive software development and smart mobs. Succinctly,
it refers to the theoretical effects of mass media and focus on provision
of flexible online environment for creating and sharing rich media
documents for learning on core humanities subjects.

SELF-ASSESSMENT EXERCISE

i. What are the benefits of interactivity to multimedia applications?


ii. Differentiate between metamedia and hypermedia.

4.0 CONCLUSION

Interactivity allows each user to actively participate in the viewing


process, instead of passively watching the material presented.

5.0 SUMMARY

In this unit, we have learnt that:

• Interactive Multimedia refers to related items of information


which are connected and presented together.
• Interactive media is a type of collaborative media and refers to
media that allows for active participation by the recipient, hence
interactivity.
• The components of interactive multimedia include asset,
information and knowledge.
• Metamedia referred to new relationships between form and
content in the development of new technologies and new media.

25
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

6.0 TUTOR-MARKED ASSIGNMENT

i. Describe the various components of interactive multimedia.


ii. Discuss Metamedia as a subject discipline.

7.0 REFERENCES/FURTHER READING

Lan Anh Tran and Shoba Tegginmath (2002). Applications of


Multimedia in Library and Information Services: Principles of
Multimedia and Electronic Resources. Information Networks for
the Future. Workshop, Victoria University of Wellington, Hanoi
2 – 6 December 2002

Metamedia. Retrieved from "http://en.wikipedia.org/wiki/Metamedia"


19-09-2009.

"metamedia.stanford.edu". Metamedia: a collaboratory at Stanford


University. Affiliated with Stanford Humanities Lab.
http://metamedia.stanford.edu/.

"metamedia.mit.edu". Metamedia: transforming humanities education at


MIT. MIT. http://metamedia.mit.edu/.

"What is Metamedia?". metamedia.mit.edu. MIT.


http://metamedia.mit.edu/overview.html.

Vandre, Megan. "Humanities Go Digital: Innovative multimedia


programs give students new ways to study languages, literature,
and the arts.". Technology Review.
http://www.technologyreview.com/Infotech/13380/.

"humanitieslab.stanford.edu". Mission statement. Metamedia at


Stanford. http://humanitieslab.stanford.edu/Metamedia/463.

26
CIT 735 MODULE 1

UNIT 4 ISSUES IN MULTIMEDIA SYSTEMS

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Characteristics of a Multimedia System
3.1 Challenges for Multimedia Systems
3.2 Challenges of Multimedia System Design
3.3 Desirable Features for a Multimedia System
3.4 Components of a Multimedia System
3.5 Trends in Multimedia
3.6 Multimedia Delivery
3.7 Delivery of Multimedia Applications
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

A Multimedia System is a system capable of processing multimedia data


and applications. It is characterised by the processing, storage,
generation, manipulation and rendition of Multimedia information.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• state the basic characteristics of a multimedia system


• describe the challenges confronting multimedia systems
• highlight and describe the desirable features of multimedia
systems
• outline what hardware and software resources are required to
develop multimedia systems
• explain the current trends in multimedia applications
• describe how multimedia contents can be accessed or delivered.

3.0 Characteristics of a Multimedia System

A Multimedia system has four basic characteristics:

• Multimedia systems must be computer controlled.


• Multimedia systems are integrated. Multimedia = multi X
separate medium.

27
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• The information they handle must be represented digitally. All


information is ONLY in the images or video.
• The interface to the final presentation of media is usually
interactive. Query by example is best access method. Editing of
media is almost always off-line.

3.1 Challenges for Multimedia Systems

Supporting multimedia applications over a computer network renders


the application distributed. This will involve many special computing
techniques -- discussed later.

Multimedia systems may have to render a variety of media at the same


instant -- a distinction from normal applications. There is a temporal
relationship between many forms of media (e.g. Video and Audio. There
2 are forms of problems here

• Sequencing within the media -- playing frames in correct


order/time frame in video
• Synchronisation -- inter-media scheduling (e.g. Video and
Audio). Lip synchronisation is clearly important for humans to
watch playback of video and audio and even animation and
audio. Ever tried watching an out of (lip) sync film for a long
time?

The key issues multimedia systems need to deal with here are:

• How to represent and store temporal information.


• How to strictly maintain the temporal relationships on play
back/retrieval
• What process are involved in the above.

Data has to represented digitally so many initial source of data needs to


be digitise -- translated from analog source to digital representation. The
will involve scanning (graphics, still images), sampling (audio/video)
although digital cameras now exist for direct scene to digital capture of
images and video.

The data is large several Mb easily for audio and video -- therefore
storage, transfer (bandwidth) and processing overheads are high. Data
compression techniques very common.

3.2 Challenges of Multimedia System Design

• Host computing power requirement


• Data Storage and Management requirements

28
CIT 735 MODULE 1

• Human Interface Usability requirements


• Network latency and throughput requirements

3.3 Desirable Features for a Multimedia System

Given the above challenges the following features are desirable (if not a
prerequisite) for a Multimedia System:

3.3.1 Very High Processing Power: needed to deal with large data
processing and real time delivery of media.
3.3.2 Multimedia Capable File System: needed to deliver real-time
media -- e.g. Video/Audio Streaming. Special Hardware/Software
needed e.g RAID technology.
3.3.3 Data Representations/File Formats that support multimedia:
Data representations/file formats should be easy to handle yet
allow for compression/decompression in real-time.
3.3.4 Efficient and High I/O: input and output to the file subsystem
needs to be efficient and fast. This needs to allow for real-time
recording as well as playback of data. e.g. Direct to Disk
recording systems.
3.3.5 Special Operating System: to allow access to file system and
process data efficiently and quickly. This needs to support direct
transfers to disk, real-time scheduling, fast interrupt processing,
I/O streaming etc.
3.3.6 Storage and Memory: large storage units (of the order of 50 -
100 Gb or more) and large memory (50 -100 Mb or more). Large
Caches also required and frequently of Level 2 and 3 hierarchy
for efficient management.
3.3.7 Network Support: Client-server systems common as distributed
systems common.
3.3.8 Software Tools: user friendly tools needed to handle media,
design and develop applications, deliver media.

SELF-ASSESSMENT EXERCISE

i. State four characteristics of multimedia systems.


ii. Describe the desirable features of multimedia systems.

3.4 Components of a Multimedia System

Now let us consider the Components (Hardware and Software) required


for a multimedia system:

3.4.1 Capture devices include Video Camera, Video Recorder, Audio


Microphone, Keyboards, mice, graphics tablets, 3D input
devices, tactile sensors, VR devices. Digitising/Sampling
Hardware
29
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.4.2 Storage Devices include Hard disks, CD-ROMs, Jaz/Zip drives,


DVD, etc
3.4.3 Communication Networks include Ethernet, Token Ring, FDDI,
ATM, Intranets, Internets.
3.4.4 Computer Systems include Multimedia Desktop machines,
Workstations, MPEG/VIDEO/DSP Hardware
3.4.5 Display Devices include CD-quality speakers, HDTV,SVGA, Hi-
Res monitors, Colour printers etc.

3.5 Trends in Multimedia

Current big applications areas in Multimedia include:

3.5.1 World Wide Web: Hypermedia systems -- embrace nearly all


multimedia technologies and application areas. Ever increasing
popularity.
3.5.2 MBone: Multicast Backbone: Equivalent of conventional TV and
Radio on the Internet.
3.5.3 Enabling Technologies: developing at a rapid rate to support
ever increasing need for Multimedia. Carrier, Switching,
Protocol, Application, Coding/Compression, Database,
Processing, and System Integration Technologies at the forefront
of this.

3.6 Multimedia Delivery

Multimedia contents can be accessed or delivered via videotape, hard-


disk, CD-ROM or over a distributed network such as the World Wide
Web. Also it can be non-interactive or interactive, or printed
multimedia. Multimedia and the Internet require a completely new
approach to writing. The style of writing that is appropriate for the 'on-
line world' is highly optimized and designed to be able to be quickly
scanned by readers.

A good site must be made with a specific purpose in mind and a site
with good interactivity and new technology can also be useful for
attracting visitors. The site must be attractive and innovative in its
design, function in terms of its purpose, easy to navigate, frequently
updated and fast to download. When users view a page, they can only
view one page at a time. As a result, multimedia users must create a
‘mental model of information structure’.

Patrick Lynch, author of the Yale University Web Style Manual, states
that users need predictability and structure, with clear functional and
graphical continuity between the various components and subsections of
the multimedia production. In this way, the home page of any

30
CIT 735 MODULE 1

multimedia production should always be a landmark, able to be accessed


from anywhere within a multimedia piece.

3.7 Delivery of Multimedia Applications

Multimedia applications can be delivered via the World Wide Web or on


CD-ROMs/DVD.

World Wide Web CD-ROM/DVD


Access Time Can experience slow Content are viewed
connection speeds. immediately the
CD/DVD is inserted
Access time depends into the CD-
on internet bandwidth ROM/DVD drive
and available
resources on the local
computer.
Ability to change It is easy to update Content cannot be
content material on web. changed but can be
recreated and
New updates can be redistribute to
instantly accessed off audience.
the web

Computer based delivery of delivery multimedia applications include


Video Games, Interactive Web Applications, CD ROM discs and
Informational kiosks. Computer-based multimedia applications integrate
the various media components and allow interactivity and hyperlinking.

Web-based multimedia applications are faced with two major


challenges, namely link fossilization, and server and network overload.
Link fossilization challenges include when the host server has changed,
the applications is no longer residents at the host, or when a host contain
only an outdated version of the applications. The challenges related to
network and server overload include when large size of multimedia
applications, users are not informed of their network capabilities in
relation to application file sizes, when users and authors are not
conscious of network implications, and sub-optimally designed servers
and protocols (same applications being transferred many times between
a server and a client size).

SELF-ASSESSMENT EXERCISE

i. State the hardware components required for a multimedia


systems.
ii. Compare and contrast two common multimedia delivery modes.

31
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

4.0 CONCLUSION
Effective applications of multimedia systems require that the
issues and challenges confronting it be paid attention to.

5.0 SUMMARY

In this unit, we have learnt that:

• Multimedia systems must be computer controlled; are integrated;


be represented digitally; and are usually interactive.
• The key issues multimedia systems that need to be deal with
include how to represent and store temporal information; how to
strictly maintain the temporal relationships on play back/retrieval;
and what processes are involved in the above.
• Multimedia systems have desirable features which are necessary
for their effective deployment and utilization.
• Multimedia applications can be accessed and deliver via
CD/DVD and the Web.

6.0 TUTOR-MARKED ASSIGNMENT

i. Explain why multimedia systems need to be computer controlled.


ii. Taken into account the trends of multimedia applications, discuss
the future direction of multimedia applications.
iii. Justify with sufficient reasons why multimedia applications must
be attractive and innovative in its design, function in terms of its
purpose, easy to navigate, frequently updated and fast to
download.

7.0 REFERENCES/FURTHER READING

J. F. Koegel Buford (1994). Multimedia Systems. Addison Wesley.

Li Z. N. & Drew M. S. (2004). Fundamentals of Multimedia. Prentice


Hall
Marshall, D. (2008), Multimedia Module CM0340.
http://www.cs.cf.ac.uk/Dave/Multimedia/

Rao K. R. Bojkovic Z. S. & Milanovic D. A. (2002). Multimedia


Communication Systems: Techniques, Standards and Networks.
Prentice Hall.
Steinmettz R. & Nahrstedt K., (1995). Multimedia: Computing,
Communications and Applications. Prentice Hall.
Steinmettz R. & Nahrstedt K. (2002). Multimedia Fundamentals: Media
Coding and Content Processing. Pentice Hall.

32
CIT 735 MODULE 1

UNIT 5 MULTIMEDIA TOOLS: HARDWARE

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Multimedia Hardware
3.1 Soundcard
3.2 Loudspeakers / Headphones
3.3 Microphone
3.4 Video card / Graphics card
3.5 CD-ROM drive
3.6 DVD drives
3.7 Scanners
3.8 Other Hardware Tools
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

This unit describes the various hardware equipment necessary to design,


develop and deploy multimedia applications. Multimedia Personal
Computer (MPC) is a working group that define the minimum hardware
and software specifications for running multimedia software.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• outline the minimum hardware required to run multimedia


applications
• describe fully each of these hardware devices.

3.0 Multimedia Hardware

Certain minimum hardware specifications are desirable for a use to run


multimedia applications on a computer. Modern computers are normally
equipped with all the essential components as standard, but the variety is
huge and careful choices have to be made. These are typical minimum
hardware specifications:

• A fast multimedia PC running at 500MHz or higher.


• At least 512MB of RAM (memory). The more RAM the better!
• Hard disk drive with at least 40GB storage capacity.

33
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• Monitor. Buy the best-quality monitor you can afford.


• Soundcard (an expansion card that provides both input and
output).
• Loudspeakers or headphones.
• Microphone.
• Video card / graphics card.
• CD-ROM drive.
• DVD drive.

3.1 Soundcard

An adequate soundcard is essential for multimedia. Modern multimedia


computers are fitted with soundcards as standard, so the choice of
soundcard may already have been made for you. A user should be
familiar with soundcard controls under the Windows operating system in
other to be able to adjust the output volume of the soundcard and the
input sensitivity of the microphone.

3.2 Loudspeakers/Headphones

Speakers or headphones are essential for listening to sound recordings.


When purchasing speakers it is worthwhile checking that they have their
own inbuilt amplification system. The sound level of all speakers or
headphones can be controlled under the Windows operating system, but
good speakers have a volume control knob that also enables the user to
adjust the volume manually. Headphones can be integrated with a
microphone - the so-called pilot's headset that is used in language
laboratories. Stereo speakers or headphones are advisable for most
multimedia applications.

3.3 Microphone

The importance of selecting the right kind of microphone is often not


appreciated by ICT technicians. For good quality sound recordings the
language teacher needs a high-quality microphone. A dynamic
microphone (also known as a karaoke microphone) is satisfactory but
provides a softer signal than a condenser microphone (also known as a
powered microphone).

The level of the input signal to the microphone can be controlled under
the Windows operating system. A common mistake made by newcomers
to multimedia applications is a failure to set the input signal control
properly so that very faint sound - or no sound at all - is emitted when
playing back recordings made by the user. It is advisable to purchase a
microphone that has its own on/off switch.

34
CIT 735 MODULE 1

3.4 Video card/Graphics card

The terms video card and graphics card are used to mean much the same
thing. The term card in this context is jargon for an electronic circuit
board. You will not be able to see the video card from outside the
computer. All that is visible is the rear of the card is the socket into
which you plug the monitor. It is important to know what kind of video
card your computer is equipped with, as this affects what the monitor
can display. When you purchase software make sure that your computer
has a video card that is compatible with the software you wish to use.
Some software will only work on computers equipped with video cards
with high specifications.

SELF-ASSESSMENT EXERCISE

i. List the minimum hardware specifications required to run


multimedia applications.
ii. Differentiate between sound card, video card and graphics card.
iii. Why do multimedia specialists need the microphone?

3.5 CD-ROM drive

CD-ROM stands for Compact Disc Read Only Memory. A CD-ROM


is an optical disk onto which data has been written via a laser - a process
often referred to as "burning a CD". A CD-ROM looks much the same
as an audio CD but can contain text, sound, pictures and motion video.

A CD-ROM drive - which is standard on modern multimedia computers


- is essential for running multimedia applications. CD-ROMs are the
commonest storage media for multimedia applications.

Modern computers are now usually equipped with a combination drive


that enables both CD-ROMs and DVDs to be played and recorded - as
well as playing and creating audio CDs and movies. A CD-ROM drive
can also play standard audio CDs, so you can listen to your favourite
music while you work or follow a language course supplied on audio
CD - but most computer technicians keep quiet about this as they don't
want their computer lab turning into a discotheque or language lab! It is
possible to extract or copy tracks from an audio CD and save them to
your computer's hard disk as audio files, which can then be played,
edited, written back to another CD, or saved to an iPod or similar mobile
player. This process is often referred to as "ripping a CD".

CD-ROM drives are available in a variety of different speeds, the speed


being described thus: 12x (12-times), 24x (24-times), etc. This indicates
the speed at which data can be pulled off the CD-ROM drive - the so-

35
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

called spin-rate - 150 kilobytes per second being the notional original
1x spin-rate - long since superseded. A high spin-rate helps speed up
data transfer, which is crucial when playing sound or video. A low spin-
rate may cause hiccups when audio and video recordings are played.
CD-ROMs work fine on stand-alone computers but networking CD-
ROMs containing large amounts of sound and video can be problematic.
Although it is technically possible for a limited number of network users
to access data on the same CD-ROM, the success of this depends on a
number of technical factors that are too complex to discuss here, and
you are therefore advised to consult your network manager.

CD-ROMs can store at least 650 megabytes of data. Compared to other


storage media, the CD-ROM's storage capacity is impressive. A single
CD-ROM can comfortably accommodate 500 medium-length novels, a
12-volume encyclopaedia, the complete works of Shakespeare, or a
whole year's edition of a newspaper. It is this enormous storage capacity
that makes CD-ROMs attractive. When graphics and audio and video
recordings are stored in computer-readable format they take up much
more space than text, and they can only be made available to consumers
in reasonable quantities if they are stored on CD-ROM or DVD.

Once written, the data on a CD-ROM can be fixed and rendered


unalterable, hence the term Read Only - but modern computers are
usually equipped with a CD read/write drive that enables new material
to be stored on a special kind of CD-ROM: CD-R (recordable) or CD-
RW (rewriteable). A CD-read/write drive is useful for making backups
and storing your own multimedia materials. Blank CD-Rs or CD-RWs
can be bought from computer media suppliers at a relatively low cost.
You can store data on CD-Rs using a read/write drive, adding to it until
it is full, and then you can format the CD-ROM so that it is fixed and
can be read by a standard CD-ROM drive. You can also store data on
CD-RWs in the same way, but these disks can only be read by a CD
read/write drive. The advantage of CD-RWs is that they can be erased
and used over and over again, but now that the cost of blank CD-Rs has
fallen to such a low level it is questionable how useful CD-RWs are. It is
also possible to create or copy audio CDs on a CD read/write drive.

Multimedia CD-ROMs are designed mainly for use on stand-alone


computers. This is because the main target of CD-ROM manufacturers
is the home user.

3.6 DVD drives

Most modern PCs come equipped with a DVD drive. DVDs (Digital
Video Discs) - or, more accurately, Digital Versatile Discs - are relative
newcomers to the multimedia scene. They look just the same as CD-

36
CIT 735 MODULE 1

ROMs and audio CDs, but they are much more versatile and can store
much more data. They are already in widespread use to store movies that
can be played back on domestic TV sets. DVDs can also be used to store
computer data, which can be read by a computer equipped with a DVD
drive.

Modern multimedia computers usually come equipped with a DVD


read/write drive or a combination drive that can read and write to CD-
ROMs too, as well as playing and creating audio CDs.

First, an important distinction:

i. A DVD-player is the name given to the device used in home


entertainment systems to play back video and audio. A DVD-
player can play:
o DVD-Video discs - also referred to as DVD-Movie discs:
e.g. containing, full-length feature films, videos of concert
performances, etc;.
o audio CDs.
ii. A DVD drive, as fitted in a multimedia computer, can play:
o DVD-ROM discs, which consist of combinations of
computer programs and high-quality motion video;
o DVD-Video discs - also referred to as DVD-Movie discs:
e.g. containing, full-length feature films, videos of concert
performances, etc;
o CD-ROMs ;
o audio CDs.

A DVD-player cannot normally be used to play DVD-ROM discs - but


bear in mind that this technology is in the process of coverging and
moving towards fully integrated systems, including DVD read/write
players that can be linked to TV sets.

The main advantage of all types of DVDs is that they offer very high
quality video and sound. In this respect they have finally caught up with
- and surpassed - the video quality offered by older 12-inch laserdiscs.
Their capacity is impressive - up to 25 times the storage capacity of a
CD-ROM, which means that a DVD can comfortably hold a full-length
movie. Most modern computers can play DVD-Video discs and DVD-
ROM discs.

1. DVD-Video discs

Standards for DVD-Video are still in the process of settling down. An


annoying aspect of DVD-Video is that the world is carved up into six
regions, also called locales, each of which has its own DVD standard.
DVD-Video discs are regionally coded - look for a small standardised

37
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

globe icon on the packaging with the region number superimposed on it.
If a disc plays in more than one region it will have more than one
number on the globe. The current six regions are:

1. USA, Canada
2. Western Europe, Japan, South Africa
3. South East Asia
4. Australia, Spanish America
5. Russia, Eastern Europe, Africa
6. China

A DVD-Video disc coded for Region 1 (USA, Canada) will not play on
a DVD player sold in Region 2 (Western Europe, Japan, South Africa).
When you buy a computer equipped with a DVD drive, the region will
have been pre-set, but you can change it via Windows. The problem is
that you cannot keep doing this: you normally only have five chances
(more on some systems) to change regions! There are various reasons
for this non-standardisation, one of them being that movie producers
release movies at different times in different regions and in different
variations. There are various ways of getting round the problem of non-
standardisation - but this is beyond the scope of this introduction and
you are advised to consult someone who is technically competent in this
area.

DVD-Video discs have impressive advantages. You can play back a full
movie with 8-channel surround-sound cinema effects. You can easily
jump to a particular sequence (a scene or chapter), and DVD-Video
discs often offer alternative soundtracks in different languages, subtitles
(i.e. subtitles in a language other than the one in which the film was
recorded), closed captions (i.e. subtitles in the same language as the one
in which the film was recorded), and information about the director and
cast, as well as the possibility of previewing and playing your favourite
scenes over and over again.

2. DVD-ROM discs

DVD-ROM discs are not subject to the same geographical restrictions


as DVD-Video discs. They only run on computers equipped with a DVD
drive and cannot be played on a domestic DVD player - but, having said
that, DVD technology is in the process of settling down and moving
towards fully integrated systems. DVD-ROM discs combine computer
programs and movies and are becoming increasingly flexible as an
instructional medium, especially for Modern Foreign Languages.

38
CIT 735 MODULE 1

Each DVD is divided into six sections:

i. Video & Script: The whole movie can be viewed in full-screen


mode without subtitles or in small-screen mode with subtitles and
an optional rolling script. If the learner wishes to view a
particular scene and play it over and over again, it can be selected
from a menu.
ii. Movie Quiz: The learner takes part in a quiz on the movie,
pitting his/her wits against a "virtual" competitor - a character
who has already appeared in another EuroTalk series.
iii. Record Yourself: The learner can choose a character in a short
clip from the movie and record his/her own voice, which is then
substituted for the character's voice.
iv. Dictionary: The learner can look up a word, which is then
spoken aloud and illustrated with a still picture from the movie.
v. Word Search: The learner can look for an example of a word in
use. A short clip containing the word will then play.
vi. Activities: These consist of a four types of interactive exercises:

o Vocabulary: The learner attempts to match a spoken word


with a still picture
o Missing Word: A gap-filling/multiple-choice drag-and-
drop exercise in which the learner attempts to match a
blanked-out word in the movie subtitle with a selection of
possible words that appear below the subtitle.
o Spelling: An activity which is similar to Missing Word,
except that the learner has to drag the word letter-by-letter
into the gap in the subtitle.
o What's the next line? A multiple-choice exercise in
which a short clip from the movie is played and the learner
has to anticipate the next line.

3.7 Scanners

A scanner is a device that copies hard copy information (printed page,


graphic image, photograph etc) into digital data, translating the
information into a form a computer can store as a file. Thus it is possible
to make a digitised copy of a printed page, graphic image or photograph.
Simple graphic images are usually stored in a format known as GIF.
Photographs are usually stored in a file format known as JPEG or JPG
and they can then be printed on a colour printer, sent as an email
attachment to a friend or colleague, or incorporated into a website.

Scanners do not distinguish text from graphic images and photographs,


so you cannot use a word-processor to edit directly a printed page that
has been scanned. To edit text read by an optical scanner, you need

39
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

optical character recognition (OCR) software to translate the image


into 'real text', i.e. a format that can be read by a word-processor. An
OCR machine scans individual characters, isolates salient features, and
then some decision is made as to what letter or other character lies
below the reader. When the characters actually occur as part of natural-
language text, it has long been recognized that contextual information
can be used to assist the reader in resolving ambiguities. Most optical
scanners today come bundled with OCR software.

The most popular type of scanner is known as a flatbed scanner. This


looks a bit like a photocopier and works in a similar way. You lay the
picture or page containing the text to be scanned on a glass plate, start
the scanning software and watch the digitised image appear on screen.
The image can then be saved as a file on your hard disk. Text saved as
an image can then be converted into "real text" with the aid of OCR
software. OCR software does not work 100%, as broken characters and
faded characters are liable to be misread, but surprisingly good results
can be achieved - and it certainly beats typing!

Some scanners are small hand-held devices that you slide across the
paper containing the text or image to be copied. Hand-held scanners are
fine for small pictures and photos, but they are difficult to use if you
need to scan an entire page of text or larger images.

3.8 Other Hardware Tools

These include the followings:


a. Audio digitizer – pair of A-D and D-A converters
b. Wavetable synthesis – has the capability of producing sound
c. Mixer – combines the above 2 signals with mixing audio from
a CD-ROM or DVD-ROM
d. 3 jacks: - Microphone input, Line in from stereo, tv, radio,
etc. and Speaker output
e. PC Camera (Webcam) – allows a user to see people at the
same time they communicate on the Internet as well as edit
videos from a video camera or a VCR, create a move from
still photographs and videos, and take digital photographs
automatically at preset times or when the camera detects
motion. Typically a video in plug is present on the camera
while some models will attach to USB ports.
Digital Cameras – like a regular camera except images are
stored to a floppy disk, PC Card or internal memory
f. Display Device – (monitor and video card) allow for the
display of visual multimedia components

40
CIT 735 MODULE 1

g. Televisions – must have an NTSC converter to change


computer’s digital output to the television’s analog input.
HDTV’s don’t require the converter.
h. Multimedia (Data) Projector – a device which connects
directly to the computer with a cable and uses its own light
source to display a multimedia app or presentation
i. Video Capture Card – enables you to connect a video
camera or VCR to a computer and manipulate the video input.

SELF-ASSESSMENT EXERCISE

i. Explain the following terms:


a. Burning a CD
b. Ripping a CD
ii. Differentiate between the following terms:
a. Optical Character Reader b. Magnetic Ink Character
Reader
c. Optical Mark Reader
iii. Itemize and describe the six sections of DVD-ROM discs.

4.0 CONCLUSION

The minimum hardware specifications desirable to run multimedia


applications on a computer include a processor of. 500MHz or higher,
at least 512MB of RAM, 40GB Hard disk drive, high resolution SVGA
(Monitor), Soundcard, Loudspeakers or headphones, Microphone, Video
card / graphics card, CD-ROM and DVD drives. Most modern
computers come with all these essential components as standard, but the
variety is huge and careful choices have to be made.

5.0 SUMMARY

In this unit, we have learnt that:

• the various hardware requirement for running multimedia


systems include a processor of. 500MHz or higher, at least
512MB of RAM, 40GB Hard disk drive, high resolution SVGA
(Monitor), Soundcard, Loudspeakers or headphones,
Microphone, Video card / graphics card, CD-ROM and DVD
drives
• a user should be familiar with soundcard controls under the
Windows operating system.
• the sound level of all speakers or headphones can be controlled
under the Windows operating system.
• selecting the right kind of microphone is important for good
quality sound recordings.
41
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• a video card must be compatible with the software you wish to


use. Some software will only work on computers equipped with
video cards with high specifications.
• modern computers are now usually equipped with a combination
drive that enables both CD-ROMs and DVDs to be played and
recorded - as well as playing and creating audio CDs and movies.
• it is possible to make a digitized copy of a printed page, graphic
image or photograph using a scanner.

6.0 TUTOR-MARKED ASSIGNMENT

i. State the reason why a multimedia users need to be familiar with


the operating system on his computer.
ii. Distinguish between a DVD player and a DVD drive.
iii. What are the reasons for non-standardisation of DVD
technology?
iv. Describe three different kinds of scanner you are familiar with.

7.0 REFERENCES/FURTHER READING

Godwin-Jones R. (1998) "New developments in digital video",


Language Learning and Technology 2, 1: 11-13: Available at:
http://llt.msu.edu/vol2num1/emerging/index.html

James Khazar (2009). Arts 21: Introduction to Computer for Arts.


Licensed under a Creative Commons Attribution-
Noncommercial-No Derivative Works 3.0 Licences.
http://www.khazar.com/academics/portal/ucsc/2008fall/art21/

Marshall, D. (2008), Multimedia. Module CM0340.


http://www.cs.cf.ac.uk/Dave/Multimedia/

Multimedia and Digital Commentary Online, a website maintained


by Mike Bush at Brigham Young University:
http://moliere.byu.edu/digital/ - contains lots of useful
information and many links to other sources.

Text Recognition
http://www.cim.mcgill.ca/~latorres/Viterbi/va_application

42
CIT 735 MODULE 1

UNIT 6 MULTIMEDIA TOOLS: SOFTWARE

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Media players
3.1 CODECs
3.2 Digital Language Labs
3.3 DVD media players
3.4 Multimedia Editing Software
3.5 Scanning and OCR software
3.6 Sound recording and editing software
3.7 Video editing software
3.8 Software Format
3.9 Plug-ins
3.10 Podcasting
3.11 Saving and converting streaming media for use offline
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

This unit describes some of the software which is required for


developing and deploying multimedia application. A basic knowledge of
this software is required for a multimedia developer to create
multimedia applications.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• outline the various software required to run multimedia


applications
• describe fully each of these multimedia software applications
• create, edit and play movie and sound plays using these
multimedia software applications.

3.0 Media players

Software that you require for running multimedia applications will


probably be supplied with your multimedia computer. A media player
should automatically spring into action when your computer needs to
play an audio or video clip. A media player is in effect a "virtual"

43
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

playback machine, complete with Play, Stop, Pause, Fast Forward, Fast
Reverse and Volume Control buttons. Media players installed on your
computer can also act as a plug-in when an audio or video clip is
accessed onthe Web.. Examples of media players include:

• iTunes is used for playing and organising multimedia files and


transferring them to an iPod or similar mobile devices. iTunes
also offers an extensive online library of music recordings and
video recordings. The Open University in the UK has made some
of its language-learning materials available via iTunes.
http://www.apple.com/itunes/
• VLC Media Player: A cross-platform (PC and Mac) media
player that plays virtually any type of media file:
http://www.videolan.org/vlc/
• QuickTime: http://www.apple.com/quicktime/ - for playing
audio and video files.
• RealPlayer: http://uk.real.com/realplayer/ - for playing audio and
video files.
• Windows Media Player: Normally bundled with the Windows
operating system.

3.1 Procedure for Loading Windows Media Player

Windows Media Player provides an intuitive, easy-to-use interface


for you to play digital media files, organize your digital media
collection, burn CDs of your favorite music, rip music from CDs,
sync digital media files to a portable music player, and shop for
digital media content from online stores. Load Windows Media
Player

a. Start -> All Programs ->Windows Media Player


b. Media Guide -> Help with Stores -> Contents
c. Read through the Help Contents
d. Load and play an audio CD, video CD, or DVD
e. Rip music from an audio CD to the Library
f. Burn music to CD.
g. Synchronize a video, music to a memory card.
h. Change how videos that you play look by adjusting hue,
brightness, and contrast.
i. Change how Windows Media Player looks using skins

3.2 CODECs

CODEC is short for COmpressor / DECompressor or COder /


DECoder. A CODEC is software that is used to compress or
decompress a digital audio or video file. CODECs are additional pieces

44
CIT 735 MODULE 1

of software that operate in conjunction with different media players, and


certain types of audio and video recordings will only play back if the
relevant CODEC is running in conjunction with the media player that
you are using.

A CODEC can consist of two components, an encoder and a decoder.


The encoder compresses the file during creation, and the decoder
decompresses the file when it is played back. Some CODECs include
both components, while other CODECs include only one. CODECs are
used because a compressed file takes up less storage space on your
computer or on the Web.

When users play an audio or video file in media player, the media player
will use a CODEC to decompress the file. The extension WAV, MP3,
AVI, WMA, WMV or MPEG is not a guarantee that an audio or video
file can be played in the media player, as the file may have been
compressed using a CODEC that is different from those already
installed on your computer.

3.2.1 Digital Language Labs

Digital language labs incorporate a media player/recorder, but go one


step further insofar as they offer, in digital format, the same kind of
audio-interactive facilities found in a traditional language lab, including
teacher monitoring facilities and video playback. The following
businesses supply digital language labs:

• CAN-8 VirtuaLab: http://www.can8.com


• Keylink Computers: http://ds.dial.pipex.com/keylink
• Melissi Multimedia: http://www.melissi.co.uk
• Robotel: http://www.robotel.com
• Sanako: http://www.sanako.com
• SANS (Software And Network Solutions), Sony Licensor:
http://www.sansinc.com
• Sun-Tech: http://www.suntechgroup.com
• Televic Education (Artec): http://www.televic.com

3.3 DVD media players

If a computer is equipped with a DVD drive it will need a media player


that enables DVDs to be played. It is likely that your computer will have
a DVD-compatible media player pre-installed if you have purchased a
computer with a DVD drive. But many other media players will also
play DVDs.

45
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.4 Multimedia Editing Software

A user that intends to develop multimedia applications, there is need for


additional editing software to create and edit images, audio files and
sound files - collectively known as assets. A selection of packages for
creating and editing images, sound and video is described below.

• Adobe Photoshop and Adobe Illustrator:


http://www.adobe.com/uk/
• Corel Paint Shop Pro and Corel Painter: http://www.corel.com
• LView Pro: http://www.lview.com

When using the above packages, it is important that to be aware of the


different formats in which images can be stored on a computer. Most
image editing packages allow you to save images in different formats
and to convert from one format to another. The commonest formats are:

• BMP: Bitmap format. This is the standard format used by


Windows Paint. Images stored in this format tend to be rather
large, however.
• EPS: Encapsulated Postscript format. An image file format that
is used mainly for printing images on Postscript printers.
• GIF: Graphic Interchange Format. This format is commonly used
for storing simple graphics on the World Wide Web, e.g. line
drawings and maps. GIF files use a palette of 256 colours, which
makes them practical for almost all graphics except photographs.
Generally, GIF files should be used for logos, line drawings,
icons, etc, i.e. images that don't contain a rich range of colours. A
GIF file containing a small number of colours tends to be small,
but it will be big if the image has a wide range of colours, e.g. a
photograph. GIF files are commonly used for storing images on
the Web. GIF files are also suitable for storing animated images.
• JPG (or JPEG): Joint Photographic Expert Group format. The
JPEG/JPG format uses a palette of millions of colours and is
primarily intended for photographic images. The internal
compression algorithm of the JPEG/JPG format, unlike the GIF
format, actually throws out superfluous information, which is
why JPEG/JPG files containing photographic images end up
smaller than GIF files containing photographic images. If you
store an image, say, of a flag containing just three colours in
JPEG/JPG format it may end up bigger than a GIF file containing
the same image, but not necessarily a lot bigger - it depends on
the type and range of colours it contains. JPEG/JPG files
containing photographic images are normally smaller than GIF
files containing photographic images. JPEG/JPG files are
commonly used for storing images on the Web.

46
CIT 735 MODULE 1

• TIFF or TIF: Tag Image File Format. Files stored in this format
give a high-quality image but they are huge.

3.5 Scanning and OCR software

Most image editing packages also include software for acquiring images
from scanners above. When you buy a flatbed scanner it is normally
supplied with software for scanning images from photographs or other
printed media, and with optical character recognition (OCR) software
for scanning in texts and converting them into a format that can be read
with a word-processor and then edited.

SELF-ASSESSMENT EXERCISE

i. State and describe the two components of CODEC.


ii. The extension WAV, MP3, AVI, WMA, WMV or MPEG is not a
guarantee that an audio or video file can be played in the media
player. Why? What are the meanings of these extensions?

3.6 Sound recording and editing software

Making and editing sound recordings and turning them into podcasts are
not difficult. These are some of the tools available for making sound
recordings:

• Adobe Audition: The "industry standard", the successor to Cool


Edit: http://www.adobe.com/uk/
• Audacity (freeware): Allows for all the basic features of editing,
but you need to download addtional software in order to create
MP3 files: http://audacity.sourceforge.net. There is a tutorial on
the Audacity site on how to use the software. Joe Dale's Blog
contains many references to audio recording using Audacity:
http://joedale.typepad.com. Joe has also set up a comprehensive
set of links to tutorials on Audacity:
http://delicious.com/joedale/audacity
• GoldWave: http://www.goldwave.com
• NCH Swift Sound: A wide range of useful tools, including some
downloadable freeware: http://nch.com.au
• Sound Recorder - supplied with Windows. Rather primitive,
with only basic operations. Suitable only for introducing
language teachers to audio recording and editing.

It's easy to make recordings directly onto the hard disk of a computer,
but it is preferable to make them first on a portable recorder (analogue or
digital) and then upload them to the computer using a connection lead.
See the range of audio recording devices offered by Olympus and
iRiver:
47
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• Olympus: http://www.olympus.co.uk/voice/
• iRiver: http://www.iriver.com

When using the above editing packages, it is important that you are
aware of the different formats in which sound can be stored on a
computer. Most sound editing packages allow a user to save images in
different formats and to convert from one format to another. The
commonest formats are:

• MP3: The standard format for storing sound files, especially


music, on the Web. MP3 is the form favoured for podcasting.
The advantage of this format is that it compresses the sound -
therefore saving space - without a significant loss in quality. MP3
is a variant of MPEG .
• MP4 AAC: Abbreviation for MPEG-4 Advanced Audio
Coding. The MP4 AAC file format is used to store audio files in
a more manageable size without affecting the quality. MP4
AAC's best known use is as the default audio format of Apple's
iPhone, iPod and iTunes media player. See also the reference to
MPEG-4 Advanced Video Encoding.
• WAV: Until recently, the commonest format. Produces high-
quality sound but takes up quite a lot of space.
• WMA: Windows Media Audio is Microsoft's own audio
encoding format that is starting to gain popularity due to its high-
quality output at lower file sizes.

Use Audacity rather than Windows Recorder to make the recordings and
then save them in MP3 format. You can then copy the recordings into
iTunes and onto your iPod, and you can burn selected recordings onto
CD-ROM or audio CD.

3.7 Video editing software

Pre-recorded video on a camcorder these can be uploaded to the


computer by means of a cable connecting the camcorder to the firewire
port (firewire socket) on the computer.

A firewire is in essence a device that allows you to transfer video


recordings very quickly from your camcorder to your computer. Many
modern computers already have a firewire port built in. If your computer
does not have a firewire port then you have to buy a firewire card and
slot it in - and here you need a bit of technical knowledge. Most modern
computers systems that are designed for audio and video applications
have firewire ports built into them. If you are not sure that you have a
firewire port, have a look at the sockets for connecting to external

48
CIT 735 MODULE 1

devices on your computer. A firewire port is smaller than a USB port,


but it will probably be located near the USB port(s).

Firewire cable USB cable

Firewire port Firewire port (left)

49
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

There is a good range of products offered by Hauppauge for the efficient


digitisation of video materials from a variety of sources
http://www.hauppauge.com

• Adobe Premiere: http://www.adobe.com


• Ulead VideoStudio: http://www.ulead.com
• Pinnacle Studio: http://www.pinnaclesys.com
• Final Cut Pro (Mac): http://www.apple.com/finalcutpro
• Matrox offer a wide range of products: http://www.matrox.com
o Movie Maker is bundled with Windows.
• NCH Software offers a wide range of packages:
http://www.nchsoftware.com
• VideoSpin by Pinnacle: A free video editing package:
http://www.videospin.com/Redesign/

3.8 Software Format

• ASF: Advanced Streaming Format. This is a Microsoft's own file


format that stores both audio and video information and is
specially designed to run over the Internet. ASF enables content
to be delivered as a continuous stream of data (streaming audio
or streaming video) with little wait time before playback begins.
This means that you no longer have to wait for your audio and
video files to fully download before starting to view them. Cf. the
WMV format (below).
• AVI: Audio Video Interleave format. Still very popular, but
giving way to MPEG, which takes up less storage space.
• FLV: Abbreviation for Flash Video, a proprietary file format
used to deliver video over the Web using the Adobe Flash
Player plug-in.
• MOV: The standard format for storing video files on the Apple
Macintosh to be played in the QuickTime media player - which
is also available for the multimedia PC. Economical in terms of
storage space. http://www.apple.com/quicktime
• MPG or MPEG: Motion Picture Expert Group. Probably the
commonest format for storing video, especially on the Web.
Economical in terms of storage space.
• MP4 AVC: Abbreviation for MPEG-4 Advanced Video
Coding. The MP4 AVC file format is used to store video files in
a more manageable size wihout affecting the quality. It is also
increasingly being used for storing video on iPods and similar
portable devices. See also MPEG-4 Advanced Audio Encoding.
• RM (RealPlayer): Used for playing streaming audio and
streaming video. RM enables content to be delivered as a
continuous flow of data with little wait time before playback
begins. This means that you do not have to wait for your audio

50
CIT 735 MODULE 1

and video files to fully download before starting to view them:


http://uk.real.com/realplayer/. RealPlayer enables you to
download streaming files (e.g. YouTube videos) from the Web.
• WMV: Windows Media File. This is Microsoft's own file format.
WMV is the same as ASF (see above) except that it can be
downloaded instead of streamed from a server located at a
distance.

3.9 Plug-ins

A plug-in is an extra piece of software that a Web browser needs to run


certain elements of a Web page, e.g. animated sequences and audio or
video clips. You will find that when you click on an icon that signifies
the availability of streaming audio or video material, your browser will
link with a plug-in. If the plug-in is not already installed on your
computer then you will be able to download it free of charge. Web pages
incorporating multimedia often need plug-ins such as Flash Player,
QuickTime, Shockwave Player or RealPlayer. Plug-ins are usually
quick and easy to install, normally free of charge and open up a wealth
of new material. Sites that require a plug-in usually provide a link to a
site from which the essential plug-in can be downloaded. These are the
sites from which Flash Player, Shockwave and RealPlayer can be
downloaded:

• Flash Player: http://www.adobe.com/products/flashplayer/


• QuickTime: http://www.apple.com/quicktime
• RealPlayer: http://uk.real.com/realplayer/
• Shockwave Player:
http://www.adobe.com/products/shockwaveplayer

3.10 Podcasting

A podcast is a broadcast digital audio recording, usually in MP3 format,


made available via the Web in a way that allows the recording to be
downloaded automatically for listening at the user's convenience. The
term vodcast is used to describe a broadcast digital video recording,
usually in MPG format, also made available via the Web. The term
podcast takes its name from a combination of iPod (Apple's portable
digital media player) and broadcasting, but podcasts and vodcasts do
not necessarily require the use of an iPod or similar device. Podcasts and
vodcasts can simply be downloaded to a computer and played using a
standard media player program.

51
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.11 Saving and converting streaming media for use offline

It is possible to save streaming audio or streaming video clips to your


hard disk so that they can be used offline. RealPlayer enables you to
play and save video clips from popular websites such as YouTube and
Metacafe (http://www.metacafe.com), record live streams, and play a
wide range of popular audio and video formats. There are many
software tools available that enable you to capture streaming media and
convert it from one form into another, e.g.

• ConvertTube: An online service for converting YouTube video


clips to a variety of other formats: http://www.converttube.com
• DVDVideoSoft: Offers a range of different converters:
http://www.dvdvideosoft.com
• FlashLynx: http://www.nchsoftware.com/streamvcr/index.html
• HiDownload: http://www.hidownload.com
• How to Capture Streaming Media: http://www.stream-
capture.com
• Keepvid: http://keepvid.com
• Orbit: http://www.orbitdownloader.com
• Net Transport: http://www.xi-soft.com
• Replay Converter: A tool for converting audio and video files
http://applian.com/replay-converter
• YouConvertIt: Free online media conversion.
http://www.youconvertit.com
• YouTube Tutorials: See these tutorials on embedding YouTube
video clips into PowerPoint:
http://www.youtube.com/watch?v=Zwqyg5uNClY
http://www.youtube.com/watch?v=hChq5drjQl4
• Zamzar: Free online file conversion. Convert images, audio
files, video files and document files from one format to another
without having to download software. http://www.zamzar.com

3.12 Audacity

Audacity is a free, easy-to-use audio editor and recorder for Windows,


Mac OS X, and GNU/Linux. You can use Audacity to Record live
audio; Cut, Copy and Paste, Delete, Duplicate, and Split audio files;
Change the speed, pitch or volume of a recording; Apply effects to any
part of the sound; and Align audio segments.

Audacity is a popular Open Source tool for creating and editing


podcasts; it is freely available to download, install and modify, and is
relatively easy to use. You can download a copy of Audacity for Mac,
Linux, or Windows from http://audacity.sourceforge.net/. For an

52
CIT 735 MODULE 1

overview of downloading and installing Audacity including the LAME


MP3 encoder, see:http://www.youtube.com/

a. Download and Install Audacity from


http://audacity.sourceforge.net/
b. Read through the Audacity tutorial in
www.wikieducator.org/Using_Audacity/
c. Load Audacity and record audio into Audacity using a
microphone.
d. Import audio files into the Track Window from your computers
hard-drive.
e. Edit audio files by selecting, cutting, pasting, silencing, and
deleting track, zoom-in, fade-out, fade-in etc.
f. Name, sort and label tracks.
g. Compress an audio file.

SELF-ASSESSMENT EXERCISE

i. What do you understand by the concept “streaming”?


ii. Briefly describe the components of a multimedia editing software.

4.0 CONCLUSION

Software applications required to run multimedia applications have been


discussed in this unit. The various files formats of audio, video and
multimedia applications have also been described.

5.0 SUMMARY

In this unit, we have learnt that:

• A media player is a "virtual" playback machine which can be use


to play an audio or video clip. It has Play, Stop, Pause, Fast
Forward, Fast Reverse and Volume Control buttons.
• The encoder compresses the file during creation, and the decoder
decompresses the file when it is played back.
• Most image editing software application packages allow you to
save images in different formats and to convert from one format
to another.
• it is preferable to make them first on a portable recorder
(analogue or digital) and then upload them to the computer using
a connection lead.
• A plug-in is an extra piece of software that a Web browser needs
to run certain elements of a Web page.
• It is possible to save streaming audio or streaming video clips to
your hard disk so that they can be used offline.

53
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

6.0 TUTOR-MARKED ASSIGNMENT

i. State the various File Formats you can work with in Windows
Media Player, Windows Movie Maker and Audacity.
ii. What is a firewire and what is it used for?
iii. Differentiate between a podcast and vodcast.

7.0 REFERENCES/FURTHER READING

Steve Holden. Audacity 101.


http://creativecommons.org/licenses/by/2.5/

MPEG: a reference site for, with explanations of different MPEG


formats and links to sources of media players http://www.mpeg.org.

Digital Video for Teachers: resources for teachers in video capture and
editing. http://www.digitalvideoforteachers.co.uk.

Movie Maker Tutorials can be found at:

o Atomic Learning:
http://www.atomiclearning.com/moviemaker2

o Doug Belshaw's
site:http://www.mrbelshaw.co.uk/extras/documentary/index.htm

How to transfer cassette tape to computer:


http://www.wikihow.com/Transfer-Cassette-Tape-to-Computer
How to change your (vinyl) records into CDs:

http://www.wikihow.com/Change-Your-Records-Into-CDs
Digital audio Languages ICT: What are MP3 files for MFL?

http://www.languages-ict.org.uk/technology/technology.htm

MediaWiki. Using Audacity: http://www.mediawiki.org/ Content is


available under Creative Commons Attribution Share-Alike
License.
http://creativecommons.org/licenses/by-sa/3.0/

Dan Elliot. Audacity 1.2 Tutorial


http://www.lifelonglearner.us/other/audacity
www.cs.pitt.edu/~mehmud/cs134-2084/links.html

54
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

MODULE 2 PROPERTIES OF MULTIMEDIA


ELEMENT

Unit 1 Text
Unit 2 Graphics, Pictures and Images
Unit 3 Sound and Audio
Unit 4 Video and Animation

UNIT 1 TEXT

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Character Sets
3.1 Digitisation of Text
3.2 Text Attributes
3.2.1 Font Type
3.2.2 Font Style
3.2.3 Font Size
3.2.4 Font Colour
3.2.5 Special Effects
3.2.6 Font Layout
3.2.6.1 Kerning
3.2.6.2 Leading
3.2.6.3 Tracking
3.2.7 Classification of Font face
3.2.8 Font Formats
3.3 Criteria for Choosing Text in multimedia
3.3.1 Readability and Legibility
3.3.2 Visual Appeal
3.3.3 Text Layout
3.3.4 Mood Creation
3.4 Cross platform issues
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

55
CIT 735 MODULE 2

1.0 INTRODUCTION

Text plays vital role in multimedia delivery and is composed of


combinations signs or symbols that are used in writing or printing and
which represent a speech sound. Texts are used in effective
communication of ideas, thoughts, plans, feelings and emotions
precisely and without any loss of form. Text mode refers to
alphanumeric or character operation mode which computer uses in
displaying letters, numbers and other text characters. In actual fact, texts
are numeric codes stored in computer systems.

Succinctly, text suitability is an important consideration when designing


multimedia applications. This is due to the fact that text has some form
of graphical element in its texture and like all graphics; it must appeals
to the eyes without leaving sour taste in the mouth of the reader. The
choice of appropriate text attributes to be used in multimedia
applications must be based on the nature of the audience (formal,
informal, children, adult etc) and the essence of the multimedia
presentations (education, business, news, information or entertainment
etc).

In this unit, we shall study a subject called Typography. Typography


deals with the appearance of text in multimedia presentations, its
attributes and design considerations.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• explain the role of texts in multimedia applications


• describe how text are converted into their equivalent digital
representations
• describe how text can be created and presented in most appealing
ways using attributes such as Font Type, Font Style, Font Size,
Font Colour etc
• explain the criteria for choosing text in multimedia applications.

3.0 CHARACTER SETS

The visual appearance of a text come in variety of forms without


altering the information it conveys. Basically, alphabets, digits,
punctuations and other symbols forms the simple character set called
abstract characters of a text. Abstract characters in a particular language
are grouped into alphabets. E.g. the alphabet of English contains the

56
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

upper case letters A to Z, the lower case letters a to z, the digits and a
number of punctuations.

Digital representation of text involves defining a mapping (called


character set) between the abstract characters and the values (called
code points) that are stored in a computer system. The domain (abstract
characters) of this mapping is called character repertoire.

3.1 Digitization of Text

Text is the common and most acceptable communication means among


many computer systems which are heterogeneous in nature. A common
character set is therefore desirable and essential. The American Standard
Code for Information Interchange (ASCII) character set has been
extensively adopted across many computing platforms to code plain text
in binary forms.

ASCII has a 7-bit code range which infers that the code points can be
store in 7 bits, and 127 codeable characters. Its domain only comprises
95 printable characters (A-Z, a-z, 0-9, !, @, ?, ^, &, *, (, ), +, =, /, \, |, ;,
:, , , #, $, %, etc). The values 0 to 31 and 127 are assigned to control
characters.

In 19 _ ISO 646 adopted ASCII as its standard and later came out
with an improved standard ISO 8859 with 8-bit characters to address the
inadequacy of the 7-bit ASCII character set. However, ISO 8859 have
limited code points available due to its 8-bit nature and having 7-bits
ASCII identical characters in all its parts. To address this shortcoming,
ISO produced another standard called ISO/IEC 10646-1: Universal
Multi-Octet Coded Character Set in 1993. ISO/IEC 10646-1 uses four
hierarchical bytes (group (g), plane (p), row (r), column (c)) to encode a
character, and can therefore have at most 232 code points.

Another standard is The Unicode Standard, Version1.0 in 1991 (version


3.0 came out in year 2000). The Unicode character system uses 2 bytes
(16-bit character set) to encode each character. Unicode 32-bits system
is now available in some computing platforms. Unicode attempts to
specify a character set to embrace all languages of the world. The
Unicode transmission format 8 (UTF-8) protocols provides for support
of extended ASCII characters and translation of Unicode. A UTF-8
enables a far greater range of names than can be achieved using ASCII
or extended ASCII encoding for character data.

57
CIT 735 MODULE 2

3.2 Text Attributes

Text can be created and presented in most appealing ways using


combinations of the following attributes.

3.2.1 Font Type

Each character may be represented in different sizes, shapes, and shades,


and a character’ visual representation is refer to as font face or typeface.
A font face is a family of graphic characters with a coherent design,
similar look and feel while a font is a set of graphic characters with a
specific design in a specific size and style. Here are some of the
common families: Times, Helvetica, Courier, Garamond, and Universe.
Some examples of the available font face are shown in figure 3.1 below.

Arial Arial Black Arial Rounded MT Bold


Bookman Old Style Copperplate gothic bold
Elephant Franklin Gothic Medium Cond Imprint MT Shadow
Tahoma Times New Roman

Figure 3.1 Sample Font Types

In some other terms weight which is a measures of characters’ darkness,


or the thickness of the strokes is used. The names used to distinguish
weight are not uniform between type suppliers. The commonly used
names are: ultra light, extra light, light, semi light, medium, semi bold,
bold, extra bold, etc.

3.2.2 Font Style

Font style or shape refers to the different appearance within a family.


Example include regular or normal (upright), bold, sloped (oblique),
italic, SMALL CAP

Font Style Normal Style


Font Style Bold Style
Font Style Italic Style
FONT STYLE Small CAP Style

Figure 3.2 Sample Font Styles

58
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.2.3 Font Size

When putting characters on to a page, we need to know some basic


measurement of the types we use. Each character has a bounding box.
This is the rectangle enclosing the entire character. Each character has
an origin. It is usually place on the baseline. The width of the character
determine where the origin of the next character will be. The distance
between the origin and the left side of the bounding box is called left
side bearing.

Figure 3.3 Font measurement


(Source: COMP3600/SCI2600 Multimedia Systems, Department of
Computer Science, Hong Kong Baptist University)

As we all know, some of the lower case letters extend upward, like b
and h, while others extend downward, like g, p and q. The height of the
lower case letter without ascender and descender is called the xheight.
The height of the upper case letters is called the cap-height.

Figure 3.4 Font Size


(Source: COMP3600/SCI2600 Multimedia Systems, Department of
Computer Science, Hong Kong Baptist University)

Font size can be measure using any of the following two measurement
criteria: point and pixel. The point measurement criterion uses dot per
inch (dpi) which is the standard used in measuring computer monitor
and printer resolution. It is expressed as the number of dots that a device
can display or print per linear inch and the greater the number of dots
per inch, the better the resolution.

59
CIT 735 MODULE 2

A picture element (pixel) is the smallest element that computer screen,


printer and software can manipulate to create letters, numbers, or
graphics. The pixel measure one spot in a rectilinear grid of thousands of
such spots that form an image produced on the screen by a computer or
on paper by a printer. The resolution of the computer monitor is
measured in term of pixels per inch (ppi) of monitor display and
determines the amount of information that appears on the computer
monitor.. A monitor setting of 1280 x 1024 has 1.3 million dpi while
800 x 600 monitor setting has 480,000 dpi. On a Macintosh monitor, the
standard resolution is 72 dpi while on a Windows monitor, the standard
resolution is 96 dpi. Low resolution, such as 640 x 480, makes items on
the screen appear large, although the screen area is small. High
resolution, such as 1024 x 768, makes the overall screen area large,
although individual items appear small

Comparison table of points and pixels on


windows computer
Points Pixels Points Pixels
6pt 8px 16pt 22px
7pt 9px 17pt 23px
7.5pt 10px 18pt 24px
8pt 11px 20pt 26px
9pt 12px 22pt 29px
10pt 13px 24pt 32px
10.5pt 14px 26pt 35px
11pt 15px 27pt 36px
12pt 16px 28pt 37px
13pt 17px 29pt 38px
13.5pt 18px 30pt 40px
14pt 19px 32pt 42px
14.5pt 20px 34pt 45px
15pt 21px 36pt 48px
Table 1: Font Size: Points vs. Pixels
(Source: L. Reid & V. Tryphonopoulos (2009). Computer Science
CS1033: Multimedia and Communication,
www.csd.uwo.ca/courses/CS1033)
Font Width: the amount of expansion or contraction with respect to the
normal or medium in the family.

60
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Size: 1 inch = 72.27 point in printing industry and 1 inch = 72 point in


PostScript systems.
Font Size 8points Font
Size 9 points
Font Size 10 points
Font Size 11 points
Font Size 12 points
Font Size 14 points Font
Size 16 points Font
Size 18 points
Font Size 20 points
Font Size 22 points
Font Size 24 points
Font Size 26 points
Font Size 28 points Font
Size 36 points
Font Size 48 points
Font 72 points
Figure 3.5 Different Font Sizes

3.2.4 Font Colour

Colours add some flavour to the general appearance and visual appeals
of texts when used in the right manner and context. Over time, colours
have been used to describe interesting and exciting personal, group,
event, or location’s details or qualities. Colours have a way somehow of
reflecting our characters, attitudes, beliefs and opinions. There are some
guidelines (colour scheme) concerning the appropriate choice and use of
colours when working with texts. The colour scheme is a combination of
colours (primary and secondary) choosen to add esthetics’ values to the
document while ensuring the content is preserved.

61
CIT 735 MODULE 2

Primary colour is one of three colours, red, yellow and blue which can
mix together to obtain secondary colours. The multidimensional color
space consisting of the cyan, magenta, yellow, and black intensities that
make up a given color. Commercial color printing devices generally use
this system of four-color process inks on hardcopies (papers) while the
three-colour (red, green and blue) process is usually used on monitors,
scanners, digital cameras, and computer printers. The following colour
properties are worth considering when choosing colours for texts and
background.

Properties of Color

• Colour management: The process of producing accurate,


consistent color among a variety of input and output devices. A
color management system (CMS) maps colors between devices
such as scanners, monitors, and printers; transforms colors from
one color space to another (for example, RGB to CMYK); and
provides accurate on-screen or print previews.
• Colour profile: A profile contains the data needed for translating
the values of a color gamut. This data includes information about
color, hue, saturation, and brightness.
• Hue: The "colour"of the color (or the wavelength of light) is the
position of a color along the color spectrum. For example, green
is between yellow and blue.
• Saturation: The intensity of the color, the purity of a color's hue
moving from gray to the pure color.
• Brightness/Value: This is the relative lightness or darkness of the
color
• Colour space: A set of three values that defines how a color can
be represented on computer devices such as monitors, scanners,
and printers. For example, in the LAB color space, the terms
luminance or whiteness (L), redness-greenness (A), and
yellowness-blueness (B) are used; in the HVC system, the terms
are hue (H), value (V), and chroma (C). Color space refers to the
three-dimensional space that is defined by the respective values,
such as L, A, and B.
• Running the gamut: The gamut is the particular range of colors
that a device is able to produce. A device such as a scanner,
monitor, or printer can produce a unique colour spectrum, which
is determined by the characteristics of the device itself. The
relative saturation of colors is maintained from gamut to gamut.
Colors outside the gamut are changed to colors of the same
saturation, but different degrees of brightness at the edge of the
gamut.
• Colour depth: The number of colors per pixel the monitor and
graphics adapter support.

62
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Font Colour Red Font Colour Cyan


Font Colour Green Font Colour Yellow
Font Colour Blue Font Colour Magenta
Font Colour Black
Figure 3.6 Different Font Colours

3.2.5 Special Effects

The examples below are some special effects that can be apply to texts
within a multimedia presentation for emphasis, clarity, visual appeal
reasons.

Underline UNDERLINED FONT


Strikethrough STRIKETHROUGH FONT e.g. N
Double Strikethrough DOUBLE STRIKETHROUGH FONT e.g.N
Shadow SHADOW FONT
Superscript SUPERSCRIPT FONT
Subscript SUBSCRIPT FONT
Outline
Emboss EMBOSSED FONT
Engrave ENGRAVED FONT

3.2.6 Font Layout

3.2.6.1 Kerning

Kerning is the extra adjustment between two specific characters and


specifies the distance between adjacent individual letters and the
measurement is expressed in “em” (negative, 0, positive values).
Normally, characters are placed one next to the other, i.e., the distance
between the origins of the adjacent characters is equal to the character
width. But due to the shape of the characters, the space between certain
characters may look uneven, e.g., the A and v in the figure. Therefore,
we need to kern the characters
KERNING Normal with no kerning
KE RN I NG Expa nd ed spa ci ng w ith 1pt ke r ni ng
KERNING Condensed spacing with 1pt kerning
KERNING Normal spacing with 1.5pts kerning
KERNING Normal spacing with 2pts kerning
KERNING Normal spacing with 4pts
kerning
63
CIT 735 MODULE 2

Figure 3.8 Characters Spacing with Kerning

3.2.6.2 Leading

Leading is the distance between the baselines of two adjacent lines


which specifies the amount of vertical space between lines of text. It is
usually measured in either positive, negative or zero points. Two
commonly used leadings are 14 points for 12 points text and 12 points
for 10 points text.

It is usually It is usually It is usually measured in


measured in either measured in either
positive, negative either positive, negative
positive, negative or zero points.
or zero points. or zero points.

14pt Lowered Leading Normal Leading 14pt Raised Leading

Figure 3.9 Examples of Text Lines Leading

3.2.6.3 Tracking

Tracking is the spacing between characters in text lines. Loose tracking


means the space between characters are wider and fewer words can be
put in a line of text.

3.2.7 Classification of Font face

Generally font faces can be classified as either serif or sans serif. Serif is
the little flag or decoration at the end of a stroke. On printed pages, serif
fonts are used for body text while sans serif fonts are used for headline
because the serifs help guide the reader’s eye along the line of text.
Multimedia presentations are displayed on low resolution screen where
sans serif fonts will be far more legible.

64
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Figure 3.7 Font Faces


(Source: L. Reid & V. Tryphonopoulos (2009 ). Computer Science
CS1033: Multimedia and Communication,
www.csd.uwo.ca/courses/CS1033)

3.2.8 Font Formats

Font formats can be divided into two main categories: bitmap fonts and
outline fonts.

Bitmap fonts come in specific sizes and resolutions. Because the font
contain the bitmaps of the character shapes. The result will be very poor
if they are scaled to different sizes. Outline fonts contain the outline of
the characters. They can be scaled to a large range of different sizes and
still have reasonable look. They need a rasterizing process to display on
screen. Nowadays, outline fonts are much more common than bitmap
fonts. There are two kinds of outline fonts: PostScript and TrueType.

All version of Windows support TrueType fonts. Windows3.1 and


Windows95 require Adobe Type Manager (ATM) to display PostScript
fonts. PostScript printers have a number of resident PostScript fonts.

SELF-ASSESSMENT EXERCISE

i. Write the ASCII equivalents of the 95 printable characters A-Z,


a-z, 0-9, !, @, ?, ^, &, *, (, ), +, =, /, \, |, ;, :, , , #, $, %, etc.

ii. Colours have a way somehow of reflecting our characters,


attitudes, beliefs and opinions. Why?
iii. Load Ms-Word or Ms-Powerpoint

65
CIT 735 MODULE 2

b. Type “Introduction to Multimedia Systems”


c. Highlight the typed words
d. create and present this typed words in most appealing ways by
selecting different text attributes such as Font Type, Font Style,
Font Size, Font Colour etc;
e. Click Format -> Font -> Font
f. Click Format -> Font -> Character Spacing
g. Click Format -> Font -> Text Effects

3.3 Criteria for Choosing Text in multimedia

Choosing the combination of fonts to use in a multimedia presentation


does not come quite easy and cheap. It requires careful planning and
consideration of some text design criteria which may enhance the
esthetics of the presentation and thus makes it more exciting, appealing
and stimulating for the audience to watch, view or listen to. We outline
some of these criteria as follows:

3.3.5 Readability and Legibility

Legibility which means that fonts must be written or printed clearly for
easy reading is a basic requirement when designing multimedia
presentations. The font face, its shape and sizes must be appropriate to
allow for easy reading by the intended audience. In most cases for
instance, adult audience require large font size while young or children
would make do with small font size. Here are some tips:

a. Use right contrasting and avoid dark text against dark


background;
b. For small type, use the most legible font available, decorative
fonts are useless;
c. Use as few different faces as possible in the same work, but vary
the weight and the size and using italic or bold styles;
d. Vary the size of a font in proportion to the importance of the
message;
e. Never underline a text in a webpage;
f. In large size headline, do proper kerning so that the spacing feels
right; and
g. Use maximum of between 2 and 3 different font faces in a
multimedia presentation.

3.3.6 Visual Appeal

Use the following tips to ensure that the fonts chosen make visual appeal
to the audience eyes:

66
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

a. Make sure that both the font and graphic complement each other;
b. Choose font that coordinates with the graphics being used;
c. Explore the effects of different colours and of placing the text on
various backgrounds;
d. Carefully position the font to achieve good balance with the other
multimedia elements;
e. Avoid using exotic fonts in other to ensure font consistency on
different computing platforms; and
f. Use maximum of 2 to 3 colours in a multimedia document or
website.

3.3.7 Text Layout

The layout is very important when developing multimedia presentations.


It provides detailed overview of how the document would look like after
it must have been prepared. Font and other multimedia elements should
be spread over the multimedia presentations to ensure readability and
visual appealing. Thus the chosen font must be simple, clear and must
make use of white spaces between characters, words and lines
appropriately. In text block, adjust the leading for the most pleasing line
spacing. Lines too tightly packed are difficult to read.

3.3.8 Mood Creation

a. Set the mood using appropriate font attributes and text layout;
and
b. Use San Serif for headings and Serif for body. Sans Serif
headings create better visual appeal while Serif body looks better.

3.4 Cross platform issues

When you build your multimedia project on Windows platform, and


play it back on a Macintosh platform, there will be some differences.
Fonts are perhaps the greatest cross-platform concern. If a specified font
does not exist in the target machine, a substitute must be provided. Some
cross-platform applications, e.g., Director, allow the developer to
specify the mapping of fonts.

Different encodings on different platform is also a big problem. Special


characters may need to be converted to bitmaps in order to be display
correctly on different platforms. Different systems and font
manufacturers encode different symbols in the extended character set.

67
CIT 735 MODULE 2

SELF-ASSESSMENT EXERCISE

i. State the major criteria for choosing texts in multimedia


applications.
ii. Why is it important to consider these factors when creating
multimedia applications?

4.0 CONCLUSION

Text suitability is an important consideration when designing


multimedia applications. This is due to the fact that text has some form
of graphical element in its texture and like all graphics; it must appeals
to the eyes without leaving sour taste in the mouth of the reader.

5.0 SUMMARY

In this unit, we have learnt that:

• Text is the common and most acceptable communication means


among many computer systems which are heterogeneous in
nature.
• Each character may be represented in different sizes, shapes, and
shades, and a character’ visual representation is refer to as font
face or typeface.
• A font face is a family of graphic characters with a coherent
design, similar look and feel while a font is a set of graphic
characters with a specific design in a specific size and style.
• Font style or shape refers to the different appearance within a
family.
• Font size can be measure using any of the following two
measurement criteria: point and pixel.
• Colours add some flavour to the general appearance and visual
appeals of texts when used in the right manner and context.
• Some text design criteria may enhance the esthetics of the
presentation and thus makes it more exciting, appealing and
stimulating for the audience to watch, view or listen to, include
• Readability and Legibility
• Visual Appeal
• Text Layout
• Mood Creation

68
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

6.0 TUTOR-MARKED ASSIGNMENT

i. What do you understand by the term “Character Set”


ii. Distinguish between a point and a pixel.
iii. Describe the following character sets fully
iv. The American Standard Code for Information Interchange
(ASCII) character set;
v. Universal Multi-Octet Coded Character Set;
vi. The Unicode Standard, Version1.0; and
Unicode transmission format 8 (UTF-8).
vii. Why are different encodings on different platform big problems?

7.0 REFERENCES/FURTHER READING


COMP3600/SCI2600 Multimedia Systems, Department of Computer
Science, Hong Kong Baptist University

James Khazar (2009). Arts 21: Introduction to Computer for Arts.


Licensed under a Creative Commons Attribution-
Noncommercial-No Derivative Works 3.0 Licences.
http://www.khazar.com/academics/portal/ucsc/2008fall/art21/

L. Reid & V. Tryphonopoulos (2009 ). Computer Science CS1033:


Multimedia and Communication,
www.csd.uwo.ca/courses/CS1033

Marshall, D. (2008), Multimedia. Module CM0340.


http://www.cs.cf.ac.uk/Dave/Multimedia/

69
CIT 735 MODULE 2

UNIT 2 GRAPHICS, PICTURES AND IMAGES

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 The Nature of Digital Images
3.1.1 Basic Concepts
3.1.2 Pixel (Bitmap)
3.1.2 Digitization
3.1.3 Depth
3.1.4 Resolution
3.1.5 Sources of Digital Images
3.2 Vector Graphics
3.3 Comparison of Bitmap Graphics against Vector Graphics
3.4 Colour Coding Systems
3.4.1 RGB Colour Code
3.4.1.1 Conversion from Hexadecimal to Decimal
3.4.2 CMYK Colour Code
3.4.3 HSB Colour Code
3.4.4 YUV Colour Model
3.5 Gamut
3.6 Colour Palette
3.7 Dithering and Aliasing
3.7.1 Dithering
3.7.2 Anti-aliasing
3.8 Image and Graphics File Formats
3.9 Compression Algorithms
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Graphic is concerned with drawing, printing or designing pictorial


illustration of places, events, people etc. and gives a vivid description of
what it is being represented. Graphics refers to drawings or images that
represent objects or fact in computer software. It is a digital
representation of images and non-text information (i.e drawing, chart,
table, and photograph). Graphics are used to illustrate certain concepts
more clearly than text can.

Graphics play an important role in teaching since many people are visual
learners – think about car icons or road signs. There is no movement or

70
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

animation in a graphic and as navigation aids in many software


packages.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• distinguish between the following terms “graphic”, “images”,


“objects” and pictures;
• describe graphic design as it relates to the Internet and motion
graphics, including graphics for web design and computer
animation;
• explain how graphics are converted into their equivalent digital
representations;
• create effective visual communications for online use and time-
based applications;

3.0 The Nature of Digital Images

An image is a spatial representation of an object, a two-dimensional or


three-dimensional scene or another image. Often the images reflect the
intensity of lights. Most photographs are called continuous-tone images
because the method used to develop the photograph creates the illusion
of perfect continuous tone throughout the image. Images stored and
processed by computers, displayed on computer screens, are called
digital images although they often look like continuous-tone. This is
because they are represented by a matrix of numeric values each
represents a quantized intensity values.

3.1 Basic Concepts

3.1.1 Pixel (Bitmap)

A digital image is represented by a grid (array, matrix) of squared


picture element known as a pixel. The pixel reveals the minutest details
in a digital image. Each pixel is a numerical value corresponding to a
graphical object. A 640-by-480 screen is capable of displaying 640
distinct dots on each of its 480 (rows) lines, or about 300,000 pixels. A
800-by-600 screen is capable of displaying 480,000 pixels.

3.1.2 Digitization

Digitization refers to the process of translating a piece of information


(text, images, sound recording, or video) into binary digits (BITS).

71
CIT 735 MODULE 2

A bit is an electrical pulse or signal that represents the state at which it


can be in a given moment of time. Usually, electrical pulse is either in
“ON” or “OFF” state at any given time. In the computer, these pulses
are represented in the binary digital form of “1” and “0” for “ON” state
and “OFF” state respectively. Words and images are represented in bits
or bytes where a byte is a collection of 8bits (i.e. 0000 0000). So with 8
bits there are: (28)= 256 possible combinations of 0s and 1s.

Binary Power of 2 Decimal Hexadecimal


1 2 to the power of 0 1 1
10 2 to the power of 1 2 2
100 2 to the power of 2 4 4
1000 2 to the power of 3 8 8
10000 2 to the power of 4 16 10
100000 2 to the power of 5 32 20
1000000 2 to the power of 6 64 40
10000000 2 to the power of 7 128 80
100000000 2 to the power of 8 256 100

Binary Decimal Hexadecimal


0000 0000 0000
0001 0001 0001
0010 0002 0002
0011 0003 0003
0100 0004 0004
0101 0005 0005
0110 0006 0006
0111 0007 0007
1000 0008 0008
1001 0009 0009
1010 0010 000A
1011 0011 000B
1100 0012 000C
1101 0013 000D
1110 0014 0000E
1111 0015 000F

72
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1.3 Depth

The depth of an image is measured in the number of bits used to


represent each pixel.

• 1-bit black-and-white image (with no gray), also called bitmap


image.

• 4-bit can represent 16 colours, used in low resolution


screens(EGA/VGA)

• 8-bit can have 256 colours. The 256 colour images are often
known as indexed colour images. The values are actually indexes to a
table of many more different colours. For example, Colour 3 is mapped
to (200, 10, 10).

• 8-bit grey 256 grey-levels. The image contains only


brightness/intensity data without colour information.

73
CIT 735 MODULE 2

(Source: L.
Reid & V.
Tryphonopoulos (2009 ). Computer Science CS1033: Multimedia and
Communication, www.csd.uwo.ca/courses/CS1033)

• 16-bit can have 65536 colours, also known as hi-colour in


Windows systems. The 16 bits are divided into 5 bits for RED, 6 bits for
GREEN and 5 bits for BLUE.
• 24-bit 224 = 16,777,216 colours, true colour. Each byte is used to
represent the intensity of a primary colour, RED, GREEN and BLUE.
Each colour can have 256 different levels.

COLOUR RED GREE BLUE


N
Red 255 0 0
Green 0 255 0
Blue 0 0 255
Yellow 255 255 0
Magenta 255 0 255
Cyan 0 255 255
Light gray 127 127 127
White 255 255 255
Black 0 0 0

• 32-bit 232 = 4,294,967,296 (4G). Usually, 3 bytes are used to


represent the three primary colours and the fourth byte is used as the
alpha channel.

3.1.4 Resolution

Resolution measures how much detail an image can have as previously


mentioned in Module 3 Unit 1 Section 3.2.3. There are several
resolutions relating to images; some of which are the followings:

a. Image resolution is the number of pixels in an image. 193 x 145


= 27,985 pixels, 3088 x 2320 = 7,1641,60 pixels.
b. Display (Monitor) resolution — refers to number of dots per inch
(dpi) on a monitor. Windows systems usually have 96dpi
resolution. Some high resolution video adapters/monitors support
120dpi. For example, a 288 x 216 image displayed on a monitor
with 96dpi will be 3” x 2 ¼”.
c. Output resolution — refers to number of dots per inch (dpi) on a
(hard copy) output device. Many printers have 300dpi or 600 dpi

74
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

resolution. High-quality image setters can print at a range


between 1200dpi and 2400dpi, or higher.

3.1.5 Sources of Digital Images

There are many sources from which digital images may be acquired or
created. Notably among them are:

a. Draw/Paint Programs

Make an image from scratch with a paint program. A good program will
allow you to choose the depth, resolution and size.

b. Clip Art Packages

Grab an image of a screen. The depth, resolution and size is determined


by the screen.

c. Digital Cameras and Camcorder

Capture an image from a digital camera or a camcorder. The depth,


resolution and size are determined by the camera or the camcorder. The
popular depth is 24-bit. The commonly used resolution is 320 x 240, 640
x 480 and 800 x 600.

d. Scanners and Digitizers

• Scan or print a photograph using a scanner. You can select from a


range of different depths and resolution. The choice should be
determined by the type of original and the final output form.

• Convert from existing digital media— e.g., photoCD. The


attribute is determined by the original image.
e. Synthesize an image from numerical data i.e. using MATLAB
Software.
f. Stock photograph agencies

3.2 Vector Graphics

In mathematical and scientific applications, images are seen as vector


objects or graphics. They are thus represented by such attributes as size,
colour, spatial location, dimension etc rather than pixels. This is an
abstract representation of a 2-dimensional or 3-dimensional scene. A
vector graphics file contains graphics primitives, for example,
rectangles, circles, lines. There are many languages for describing vector
graphics; some of which are:

75
CIT 735 MODULE 2

a. PostScript was developed by Adobe as a page description


language.
b. Virtual Reality Markup Language (VRML) use for describing a
scene in a virtual world.
c. Scalable Vector Graphic (SVG) user for describing two-
dimensional graphics in XML. It allows three types of graphic
objects: vector graphic shapes, images and text.

3.3 Comparison of Bitmap Graphics against Vector


Graphics

Comparison Bitmap Vector graphic


Factor
1. Processing A bitmap image is easier Displaying a vector graphic
to render. usually involves a large
amount of processing.
2. Attributes A bitmap contains an A vector graphic contains
exact pixel-by-pixel mathematical description of
value of an image. objects. Vectors are bound
Bitmaps are bound to the to mathematical formulas
individual pixels that that describe them.
describe them.
3. Resolution A bitmap file is fixed in A vector graphic is
resolution. Changing size resolution independent.
means losing information Changing size does not
and they tend to fall apart really affect them and they
when you make them tend not to be as detailed as
bigger. bitmaps.
4. Memory The file size of a bitmap The file size of a vector
Usage is completely determined graphic depends on the
by the image resolution number of graphic elements
and its depth. it contains. They are
smaller in file size.

SELF-ASSESSMENT EXERCISE

1. Examine the two objects below

76
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

a. Load Ms-Powerpoint
b. Draw these objects with the following information

Object1 Object2 Object3 Object4 Object5 Object6


Height 0.5” 1.5” 0.25” 0.94” 0.31” 1.00”
Width 0.75” 1.63” 0.5” 0.95” 0.42” 1.50”
Rotation 0o 0o 63 o 318 o 219 o 120 o
Scale: 100% 50% 100% 50% 100% 75%
Height
Scale: 100% 75% 100% 50% 100% 75%
Width

c. Print your work and copy it into a CD, and show it to your
facilitator.
Hint: Select the object, right click and click on Format Object

2. Represent this information in 1(b) above in pixel. Hint: Load


Paint and work on the objects.

3.4 Colour Coding Systems

The choice of appropriate colour combination to use in multimedia


presentations can be cloudy and cumbersome at times. This is due to the
fact that careful choice of colour involves technical and subjective
competencies. We need to understand the technical compositions of
colour and how it is perceived by human beings.

Colour is the frequency or wave-length of a light wave within the


narrow band of the electromagnetic spectrum (380 – 760nm) to which
the human eye responds. Its perception is human physiological activities
which thus involve choosing a right colour or colour combination on
trial basis, and on aesthetic judgment. In true colour, each pixel
represents some color shades.

3.4.1 RGB Colour Code

The RGB colour code is the most widely colour model used in computer
graphics and websites. RGB is an additive coding system in which
varying amount of the three primary colours (Red, Green and Blue) are
added to black to produce new colours. Iimagine three light sources of
the primary colours shining on a black surface. Different secondary
colours can be produce by varying the intensity of the lights on the black
surface as illustrated in the diagram below.

77
CIT 735 MODULE 2

Red
Magenta

Yellow
White

Blue
Green

Cyan

Figure …. RGB Colour Coding System

RGB code can be expressed in decimal (binary interpretation) and


Hexadecimal codes. A pixel in RGB is represented by three decimal
values <red, green, blue>, where each value ranges from 0 to 255 and
therefore provide 256 different color shades. For example Red has a
value of <255, 0, 0>, Green <0, 255, 0> and Blue <0, 0, 255>.
Combination of the varying values produces different color e.g <0, 255,
255> give Turquoise, <255,255,255> gives White, <255, 0, 255 > gives
Pink etc. A given colour is therefore certain mixture of red, green and
blue.

The hexadecimal representation is based on the hexadecimal numbering


system which comprises of numbers (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C,
D, E, and F). Each RGB colour can be uniquely represented by 6digits
hexadecimal number preceded by “#”. E.g. #00AEED Light Blue.
There are sixteen predefined hexadecimal numbers in the RGB spectrum
as illustrated in the figure below:

78
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Black (#000000) Silver (#C0C0C0) Gray (#808080) White (#FFFFFF)

Maroon (#800000) Red (#FF0000) Purple (#800080) Fuchsia (#FF00FF)

Green (#008000) Lime (#00FF00) Olive (#808000) Yellow (#FFFF00)

Navy (#0000128) Blue (#0000FF) Teal (#008080) Aqua (#00FFFF)

Figure. Predefined Hexadecimal Colours

3.4.1.1 Conversion from Hexadecimal to Decimal

The RGB decimal code (i.e. <255, 0, 0> for Red) is a 3-byte binary
number which means <11111111, 00000000, 00000000>.

To convert this number to its hexadecimal equivalent, simply divide


each binary number into two 4-bits number, e.g. <1111 | 1111, 0000 |
0000, 0000 | 0000> and then convert each 4-bits number to its decimal
equivalent, and then finally to its hexadecimal equivalent. In this
instance,

<255, 0, 0> Given Decimal


Color Code
<11111111, 00000000, 00000000> Step 1.
<1111 | 1111, 0000 | 0000, 0000 | 0000> Step 2.
< 15 | 15, 0 | 0, 0 | 0> Step3.
#FF0000 Desired
Hexadecimal Code

Can you try these: #B7B7B7 = <183, 183, 183>?


#0469B3 = <4, 103,179>?
#4A2885 = <74, 40, 133>?
To convert from hexadecimal to decimal, follow the outline steps above
in reverse order.

79
CIT 735 MODULE 2

3.4.2 CMYK Colour Code

The CMYK code uses three primary colour pigments, cyan, magenta
and yellow and is based on the light absorbing quality of inks printed on
paper. CMYK is a subtractive model. The value of each primary colour
is assigned a percentage from the lightest (0%) to the darkest (100%).
Because all inks contain some impurities, three inks actually produce a
muddy brown and a black colour is added in printing process as a result
of combination of the three colours.

Black

Cyan

Purple
Green

Magenta Yellow

Red

Figure The CMYK Colour Code

Some secondary colours from the CMYK as shown in the diagram


above include:

a. Purple = Cyan + Magenta


b. Green = Cyan + Yellow
c. Red = Magenta + Yellow
d. Black = Cyan + Magenta + Yellow

3.4.3 HSB Colour Code

The HSB colour code is based on the human perception of colour and
has three fundamental characteristics.

i. Hue
Hue is the wavelength of the light and Hue is often identified by the
name of the colour it represents. Hue is measured as a location on the
standard colour wheel as a degree between 0o to 360 o .

80
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

ii. Saturation
Saturation is the strength or purity of a given colour. It represents the
amount of gray in proportion to the hue and is measured as a percentage
from 0%(gray) to 100%(fully saturated).

iii. Brightness
Brightness is the relative lightness or darkness of a given colour. It is
measured as a percentage from 0%(black) to 100%(white).

3.4.4 YUV Colour Model

The YUV color code is widely used in encoding colour for use in
television and video. The theory behind this model is that human
perception is more sensitive to brightness than any chrominance
information, so a more suitable coding distinguishes between luminance
and chrominance. This also produces a system that is compatible with
black-and-white TV systems.
The Y-signal encodes the brightness information which is used by the
black-and-white television system while the U and V channels encode
the chromatic information. The resolution of the U and V channels is
often less than the Y channel for the reason of reducing the size.

3.5 Gamut

The gamut of a colour code is the range of colours that can be displayed
on computer monitors or printed on papers. The colour spectrum that
can be viewed by human eye is wider than any method of reproducing
colour. Different colour models have different gamut. The RGB code
has a larger gamut than that of the CMYK code.

Figure ….. Colour Gamut


Source: Arts 21- Introduction to Computer for Art

81
CIT 735 MODULE 2

3.6 Colour Palette

A colour palette is an indexed table of available colours spectrum in a


given colour code. When working in 8-bit mode, a system can display
only 256 colours out of a total of 16 million colours (<256, 256, 256>).
The system keeps a default palette of available colours.

One major challenge in multimedia presentations is refer to palette


flashing. Palette flashing is an unpleasant flash of unwanted colours that
occurs on the computer monitor when working with digital images. It
occurs because each graphic application has its own colour palette and
may replace the computer monitor’s palette with its own for the period it
is active.

3.7 Dithering and Aliasing

3.7.1 Dithering

Dithering is a technique to increase the number of colours to be


perceived in an image. It is based on human eye’s capability for spatial
integration (i.e. if you look at a number of closely placed small objects
from a distance, they will look like merged together). Dithering
technique groups a number of pixels together to form a cluster. When
viewed from sufficient distance, the individual pixel will not be
distiguishable. The cluster will look like a single block of a colour
different from the individual pixel.

Figure Dithering
(Source: COMP3600/SCI2600 Multimedia Systems, Department of
Computer Science, Hong Kong Baptist University)

3.7.2 Anti-aliasing

Aliasing is what happens when solid colors don't conform to vertical and
horizontal edges. It is caused by the limited resolution of an output
device that makes edges seen as staircases.

Anti-aliasing is a technique to soften the staircase effect of aliasing


through color interpolation. It works by filling in pixels which should be
half filled with different levels of gray or matching colours. The result is
sharper edges, not blurring or smoothing them.

82
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Figure ….. Colour Gamut


Source: Arts 21- Introduction to Computer for Art

3.8 Image and Graphics File Formats

A digital image stored in a computer file must conform to specific


standard or format. In addition to the pixel data, the file contains some
information (such as the file format, image size, image depth, colour
palette and compression technique) to identify and decode the data.

Some formats are defined to work only in certain platform while other
can be used for all platforms. Some formats are specific for an
application. Some formats are for images, others are for vector graphics.
Some formats allow compression, others contain only raw data.

Image Formats With Web Browser Support

• GIF: Graphics Interchange Format


• JPEG: Joint Photographic Experts Group
• PNG: Portable Network Graphics

Image Format Attributes


GIF87a GIF89a JPEG Progressive
PNG
JPEG
Lossless X X - - X
Compression
Transparent - X - - X
Backgrounds
Interlacing X X - X X
Animation - X - - -
Maximum 256 256 16.7MILL 16.7MILL 16.7MILL
colours

3.9 Compression Algorithms

Compression algorithms can reduce file size by about an order of


magnitude.

83
CIT 735 MODULE 2

Lossy schemes Lossless schemes


Discard pixel information Do not discard pixel information
(Very high compression rates)
Reconstruction by approximation Reconstruction by calculation
(exact)
Range of quality / compression Often suitable for digitally
trade offs synthesized images (compresses
(The better the compression, the well)
worse the quality. Compression
usually specified within JPEG
images as a percentage from 0%
(low quality) to 100% (high
quality))
Often suitable for images captured Often unsuitable for images
from conventional camera / video captured from conventional
(Compresses well, artefacts camera / video
invisible) (compresses poorly)
Often unsuitable for digitally
synthesized images (Artefacts /
degradation visible)

SELF-ASSESSMENT EXERCISE

i. State the RGB decimal codes for these objects and converts their
RGC decimal codes into their hexadecimal equivalents.

ii. State the colour palette of the RAINBOW colours in RGB


decimal code and hexadecimal code.
iii. What do you understand by the terms “colour” and “palette
flashing”? How can palette flashing be handled in multimedia
applications?

4.0 CONCLUSION

Graphic design is the art of combining pictures, images, objects, shapes,


colours, texts, and decoration in the production of a multimedia
presentations, electronic books, newspapers, journals or magazines, etc.

84
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

5.0 SUMMARY

In this unit, we have learnt that:

• An image is a spatial representation of an object, a two-


dimensional or three-dimensional scene or another image.
• A digital image is a numerical value corresponding to a graphical
object that is represented by a grid (array, matrix) of squared
picture element.
• Resolution measures how much detail an image can have.
• Vector images are objects or graphics that are described by
attributes such as size, colour, spatial location, and dimension.
• The choice of appropriate colour combination to use in
multimedia presentations involves technical and subjective
competencies.
• The RGB colour code is the most widely colour model used in
computer graphics and websites.
• The CMYK code uses three primary colour pigments, cyan,
magenta and yellow and is based on the light absorbing quality of
inks printed on paper.
• The gamut of a colour code is the range of colours that can be
displayed on computer monitors or printed on papers.
• A colour palette is an indexed table of available colours spectrum
in a given colour code.
• Dithering is a technique to increase the number of colours to be
perceived in an image while aliasing is what happens when solid
colors don't conform to vertical and horizontal edges.
• A digital image stored in a computer file must conform to
specific standard or format such as GIF, JPEG, PNG etc.

6.0 TUTOR-MARKED ASSIGNMENT

Why is the resolution of the U and V channels often less than the Y
channel?

85
CIT 735 MODULE 2

7.0 REFERENCES/FURTHER READING

COMP3600/SCI2600 Multimedia Systems, Department of Computer


Science, Hong Kong Baptist University

Dorin, A & McCormack, J. (2000). FIT5900 : Introduction to


Multimedia Programming. FIT5900 courseware,
Semester 1, Caulfield Campus, 2000
http://www.csse.monash.edu.au/%7Ecema/courses/FIT5900/inde
x.html

James Khazar (2009). Arts 21: Introduction to Computer for Arts.


Licensed under a Creative Commons Attribution-
Noncommercial-No Derivative Works 3.0 Licences.
http://www.khazar.com/academics/portal/ucsc/2008fall/art21/
L. Reid & V. Tryphonopoulos (2009 ). Computer Science CS1033:
Multimedia and Communication,
www.csd.uwo.ca/courses/CS1033
Marshall, D. (2008), Multimedia. Module CM0340.
http://www.cs.cf.ac.uk/Dave/Multimedia/

86
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 3 SOUND AND AUDIO

1.0 Introduction
2.0 Objectives
3.0 Basic Concepts
3.0.1 Sound Waves
3.0.2 Sound Effect
3.0.3 Sound Energy
3.0.4 Sound pressure
3.1 Properties of Sound Waves
3.2 Computer Representation of Sound
3.2.1 Quality versus File Size
3.2.2 Audio File Formats
3.2.3 Audio Hardware Devices
3.2.4 Audio Software
3.3 Digital Music
3.3.1 MIDI Hardware
3.3.2 MIDI Data
3.3.3 MIDI Channels and Modes
3.3.4 Instrument Patch
3.3.5 MIDI Data Files
3.3.6 Synthesizing MIDI Sounds
3.4 MIDI Sound Attributes
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Sound is a physical continuous analog audio signals phenomenon


produced by the vibration of matter and transmitted as waves. They are
first captured by a microphone, digitized and store in the computer in
compressed form. Sound is perceived by human beings in three ways,
namely the source which emits sound; the medium through which the
sound propagates; and the detector which receives and interprets the
sound.

2.0 OBJECTIVES

At the end of the unit you will be able to:

• define sound and its related concepts


• list and describe the properties of sound
• explain how sound are converted into their equivalent digital
representations

87
CIT 735 MODULE 2

• distinguish between analogue music and digital music


• adjust and control the sound properties on computers using the
adds-on sound software available in but Microsoft Windows
• record, edit and play sound with Audacity and Microsoft
Windows.

3.0 Basic Concepts

3.0.1 Sound Waves

Sound waves are forms that sound takes as it travels across medium and
it comprised of many different frequencies and shapes (e.g. sine wave).
The sine wave is a function that occurs often in mathematics, music,
physics, signal processing, audition, electrical engineering, and many
other fields. Its most basic form describes a wavelike function of time:

y(t) = A• sin(ωt + θ )
30
20
10
0
-10
-20
-30
Sine Wave

where A (the amplitude ) is the peak deviation from center, ω is the


angular frequency measured in radians per second and θ is the phase.
When the phase is non-zero, the entire waveform appears to be shifted in
time by the amount θ/ω seconds. A negative value represents a delay,
and a positive value represents a "head-start".
Another example is the longitudinal harmonic waves which can be
described with the formula below
x
y ( x , t ) = y 0 sin ω t −
c
where:
• y is the displacement of the point on the traveling sound wave;
• x is the distance the point has traveled from the wave's source;
• t is the time elapsed;
• y0 is the amplitude of the oscillations,
• c is the speed of the wave; and
• ω is the angular frequency of the wave.

88
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

The quantity x/c is the time that the wave takes to travel the distance x.
The ordinary frequency f, in hertz, of the wave can be found using
ω
f =

Longitudinal waves are waves that have the same direction of
oscillations or vibrations along or parallel to their direction of travel,
which means that the oscillations of the medium (particle) is in the same
direction or opposite direction as the motion of the wave. Mechanical
longitudinal waves have been also referred to as compression waves or
compression waves.

3.0.2 Sound Effect

Sound effects are artificially created or enhanced sounds, or sound


processes used to emphasize artistic or other content of films, television
shows, live performance, animation, video games, music, or other media

3.0.3 Sound Energy

Sound is generally known as vibrational transmission of mechanical


energy that propagates through matter as a wave (through fluids as a
compression wave, and through solids as both compression and shear
waves) that can be audibly perceived by a living organism through its
sense of hearing.

3.0.4 Sound pressure

Sound pressure is defined as the difference between the average local


pressure of the medium outside of the sound wave in which it is
traveling through (at a given point and a given time) and the pressure
found within the sound wave itself within that same medium.

3.1 Properties of Sound Waves


Sound waves are described using the following parameters:

a. Period, Pitch and Frequency


Period is the interval (cycle) at which a periodic signal repeats
regularly.

Pitch is a perception of sound by human beings It measures how ‘high’ a


sound signal is as perceived by a listener.

Frequency measures a physical property of a wave and it is the number


of occurrences of a repeating audio signal event per unit time. It is the
reciprocal value of period f = 1/P and the unit of measurement is Herts
(Hz) or kiloHertz (kHz).

89
CIT 735 MODULE 2

b. Loudness and Amplitude

Amplitude is the measure of sound levels as the oscillating magnitude


varies, with each oscillation, within an oscillating system.. For a digital
sound, amplitude is the sample value. The reason that sounds have
different loudness is that they carry different amount of power. The unit
of power is watt.

The intensity of sound is the amount of power transmitted through an


area of 1m2 oriented perpendiculars to the propagation direction of the
sound.

The threshold of feeling: if the intensity of a sound is 1 watt/m2, we


may start feeling the sound and the ear may be damaged.

The threshold of hearing: if the intensity is 10-12 watt/m2, we may just


be able to hear it.

The relative intensity of two different sounds is measured using the


unit deciBel (dB). It is defined by relative intensity in
I2
dB = 10 log
I1
c. Dynamic and Bandwidth

Dynamic range means the change in sound levels.

Bandwidth is the range of frequencies a device can produce or a human


can hear.

3.2 Computer Representation of Sound

Sound waves are analog signals and are therefore continuous in nature.
Digital computers are good at handling discrete numbers, so in order to
store a sound wave in a computer, the analog signal must be digitized.
Digitization of analog signal uses the pulse code modulation technique
by converting a sample each of the received analog signal into discrete
number form.

Sampling of sound waves is done using some sampling technique (i.e.


Nyquist sampling theorem) in order to capture all audible frequency
components of a sound which is followed by digitization. The resolution
(i.e. the number of bits used to represent a sample) of a given sample
sound waveform is an important factor in detertmining the sound
quality. 16 bits resolution which produces 96dB is commonly used for
each sample in high quality sound.

90
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.2.1 Quality versus File Size

These are two important but often contradictory factors in management


of sound. High quality sound files are usualll very large but can be
compressed. The size of a digital recording depends on the sampling
rate, resolution and number of channels. Higher sampling rate, higher
resolution gives higher quality but bigger file size.

b
S = R× ×C × D
8
where
S is the file size bytes
R is sampling rate samples per second
b resolution bits
C the channels (1 for Mono, 2 for Stereo)
D recording duration seconds

3.2.2 Audio File Formats


The most commonly used digital sound format in Windows systems is
.wav files. Sound is stored in .wav as digital samples known as Pulse
Code Modulation(PCM). Each .wav file has a header containing
information of the file.

Format Data File Channel Sample Bytes per Compressi


Type Size per Second Sample on
Algorithm

Figure Audio File (*.wav) header contents

3.2.3 Audio Hardware Devices

Audio hardware devices can be generally group into two major


categories; namely those that are use in recording and converting the
analog signal into discrete form, and those that are used for playing
(converting it back into analog to suite the speaker).

a. Recording and Digitizing sound

i. An analog-to-digital converter (ADC) converts the analog sound


signal into digital samples.
ii. A digital signal processor (DSP) processes (filters, modulates,
compresses etc.) the sample.

91
CIT 735 MODULE 2

b. Play back sound

i. A digital signal processor processes (decompress, demodulate


etc) the sample.
ii. An digital-to-analog converter (DAC) converts the digital
samples into sound signal.

Audio hardware devices are integrated into small silicon chips and
mounted on the sound card. Sound card comes with different digital
sounds processing capability. When buying a sound card, you should
look at maximum sampling rate, stereo or mono and duplex or simplex

ADC DAC

DSP DSP

Figure ,,, Analog to Digital to Analog Sound Conversion

3.2.4 Audio Software

There is quite a number of software available for audio processing but


Microsoft Windows has an adds-on device driver that controls the audio
hardware device. In case where a user need to install sound card into the
computer hardware, such cards would be automatically installed by
Microsoft Windows since most modern cards/devices are Plug ‘n’ Play.
In any case, sound cards always come with their drivers from the
manufacturer, this can be used for installation where Plug ‘n’ Play could
not automatically recognized and install the sound card.

92
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Figure MS-Windows Sound and Audio Device properties

You can adjust such settings the interrupt, DMA channels if the need
arises through Windows Device Manager or Control Panel-Sound,
Speech and Audio Devices. Device manager is the Windows interface
to the hardware for configuring the devices, choosing desire audio
device and setting the audio volume. The figure below shows some
functions that are available through the Windows Sound and Audio
Device driver.

Figure Audio Facilities in Windows Device Driver


93
CIT 735 MODULE 2

Some of these functions include Sound playback, Mixer (combine sound


from different sources, adjust the play back volume of sound sources
and the recording volume of sound sources), Sound recording and
Editing. The Windows Sound Recorder has a limiting editing function,
such as changing volume and speed, deleting part of the sound. There
are many open source GPL freeware and shareware programs for sound
recording, editing and processing.

SELF-ASSESSMENT EXERCISE

i. Discuss extensively the information contained in each .wav audio


file header.
ii. Using Sound Recorder, you can record, mix, play, and edit
sounds.
a. Write a documentary note about your experience so far in
this course;
b. Click Start -> All Programs -> Accessories ->
Entertainment -> Sound Recorder;
c. Read and Record the documentary note you have written
in 2a.
d. Play and edit the sound you have recorded until you are
satisfied with your recording. Time Duration for the Play:
5mins
e. Save your work.

3.3 Digital Music

Recording sound (complex by nature) is relatively easy and relatively


straight forward when using digital sound equipment. But synthesizing
complex sound is not quite easy. The Musical Instrument Digital
Interface (MIDI) offers a better way of synthesizing high quality music
via computer and digital sound devices. MIDI is a communication
standard developed in the early 1980s for electronic instruments and
computers, and specifies the hardware connection between equipments
as well as the format in which the data are transferred between the
equipments. Common MIDI devices include electronic music
synthesizers, modules, and MIDI devices in common sound cards.
General MIDI is a standard specified by MIDI Manufacturers
Association. To be GM compatible, a sound generating device must
meet the General MIDI system level 1 performance requirement outline
as follows:

a. minimum of 24 fully voices;


b. 16 channels, percussion on channel 10;
c. minimum 16 simultaneous and different timbre instruments;

94
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

d. minimum 128 preset instruments; and


e. Support generic device drivers.

Computer and electronic music system that meet the hardware interface
and the data format requirements is refer to as a MIDI device.

3.3.1 MIDI Hardware

Computers and other electronic musical devices that have MIDI


interface come with one or more MIDI ports. The MIDI ports on
musical instruments are usually labelled as:

IN — for receiving MIDI data;


OUT — for outputting MIDI data that are generated by the instrument;
and
THRU — for passing MIDI data to the next instrument.

3.3.2 MIDI Data

MIDI data does not encode individual samples but data encode musical
events and a command to control instruments unlike it is done with
digital sound. MIDI data are grouped into MIDI messages where each
MIDI message represents a musical event, e.g., pressing a key, setting a
switch or adjusting foot pedals. A track contain group of sequence of
MIDI messages.

3.3.3 MIDI Channels and Modes

Communication among MIDI devices takes via the 16 standard


channels. Each instrument can be mapped to a single channel (Omni
OFF), or it can use all 16 channels (Omni ON). Some instruments (e.g.
piano) are polyphonic and are capable of playing more than one note at
the same time while others are monophonic and can only play one note
at a time. For effective data transfer, all the communicating MIDI
devices must be the appropriate mode.

3.3.4 Instrument Patch

Each MIDI device is usually capable of producing sound resembling


several real instruments and/or noise effects (e.g., animal, train). This
noise effect is referred to as a patch, or preset. The general MIDI
standard specifies 128 (0 to 127) patches.

95
CIT 735 MODULE 2

3.5 MIDI Data Files

MIDI data are stored in MIDI files and each MIDI files contains a
number of chunks. There are two types of chunks:
a. Header chunk — contains information about the entire file: the
type of MIDI file, number of tracks and the timing.
b. Track chunk — the actual data of MIDI track. Multiple tracks can
be played at the same time. Tracks can be assigned to a different
channel while each channel can accept more than one track. A
channel is assigned a patch and therefore generates sound of a
particular instrument

MIDI data files are categorized as:

0 single multichannel track


1 one or more simultaneous track of a sequence
2 one or more sequentially independent single-track patterns

3.3.6 Synthesizing MIDI Sounds

MIDI sounds can be synthesized using:

i. Frequency Modulation (FM) Synthesis

FM uses a sine wave to modulate another sine wave, thus generating a


new wave which is rich in timbre (the two original waves, their sum and
difference and harmonics). The limitations of FM synthesis include
artificial generated sound; generating a particular sound does not follow
any laid down principles and is thus done haphazardly.

ii. Wave-Table synthesis

Wave-Table stores and manipulates representative digital sound samples


by changing the pitch, to create the complete range of notes.

3.4 MIDI Sound Attributes

The shape of the amplitude envelop has great influence on the resulting
character of MIDI sound and there are two different types of amplitude
envelop, namely:

i. Diminishing sound which phase out gradually; and


ii. Continuing sound that is sustained until turned it is turn “OFF”.

96
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

SELF-ASSESSMENT EXERCISE

i. What is DirectX?
ii. Why synthesized sounds?

4.0 CONCLUSION

Sound is a physical continuous analog audio signals phenomenon


produced by the vibration of matter and transmitted as waves.

5.0 SUMMARY

In this unit, we have learnt that:

• Sound is a physical continuous analog audio signals phenomenon


produced by the vibration of matter and is transmitted as waves.
• Digital Audio is digital representation of physical sound waves.
• Digitization of analog signal uses the pulse code modulation
technique by converting a sample each of the received analog
signal into discrete number form.
• The Musical Instrument Digital Interface (MIDI) offers a better
way of synthesizing high quality music via computer and digital
sound devices.
• Proper setting of sound attributes determines the quality of audio
output. Much better sound if the sound source is of high quality

6.0 TUTOR-MARKED ASSIGNMENT

i. Load Audacity and open the file you created and saved in SAE1
previously.
a. Edit this file by adding background music to it.
b. Save your work and export it to MP3 device.
c. Play your work on the MP3 device.
ii. Your hard disk has 512Mbytes of free space. You are going to
record a speech with a sampling rate of 11KHz, 8-bit resolution
and a single channel. What is the length of the recording that can
be stored in the hard disk? (Answer in seconds)
iii. A multimedia presentation has 30 minutes of CD-quality digital
audio in .wav files. What is the storage required for these files?

97
CIT 735 MODULE 2

7.0 REFERENCES/FURTHER READING

A programmer's Guide to Sound, T. Kientzle, Addison Wesley, 1997


(ISBN 0-201-41972-6)

COMP3600/SCI2600 Multimedia Systems, Department of Computer


Science, Hong Kong Baptist University

Digital Broadcasting Systems for Television, Sound, and Data Services,


Specification for Service Information (SI) in Digital Video
Broadcasting (DVB) Systems, ETSI publications dept., Sophia
Antipolis, France, 1997, ETSI 300 468 2d ed., http://www.etsi.fr.

Digital Audio Visual Council --- www.davic.org


Fikret Gurgen, (2008). Introduction to Multimedia Systems. CmpE 468
Multimedia Computing. Fall 2008

Information Technology‹Generic Coding of Moving Pictures and


Associated Audio Informa-tion, Part 6: Digital Storage Media
Command and Control, Int'l Org. for Standardization/Int'l
Electronics Comm., Geneva, 1996. ISO 13818-6.
Multimedia Tutorial : Web Multimedia Tutorial
w3schools.com/media/default.asp

Vaughan, T. (1998) Multimedia: Making it Work 4th edition. Osborne


McGrawhill

Writing For Multimedia 101: Overview


writing.atomicmartinis.com/overview

98
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 4 VIDEO AND ANIMATION

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Basic Concepts
3.0.1 Modelling
3.0.2 Animating
3.0.3 Rendering
3.0.4 Motion
3.0.5 Persistence of vision
3.0.6 Visual Representation
3.0.7 Frame
3.1 Video
3.1.1 Broadcast Video Standards
3.1.2 Video resolution
3.1.3 Digital Representation of Video
3.1.4 Hardware Requirements
3.1.5 Video Capture Cards
3.2 Video Standard Formats
3.2.1 Microsoft’s AVI Standard
3.2.2 Motion Picture Expert Group Standard
3.2.2.1 MPEG - 1
3.2.2.2 MPEG - 2
3.2.2.3 MPEG - 7
3.2.3 Apple’s QuickTime Standard
3.2.4 ITU-TS H.261 Standard
3.3 Video Compression
3.4 Video Streaming and Buffering Concepts
3.5 Shooting and Editing Video
3.6 Animation
3.7 Animation Process
3.7.1 Input Process
3.7.2 In-between Process
3.7.3 Controlling Process
3.7.4 Displaying Process
3.8 Types of Animation
3.9 Animation File Formats
3.10 Major Areas of Interest in Animation Production
3.11 Animation tools
3.11.1 Macromedia Director and Flash
3.11.2 MetaCreations Poser
3.11.3 Discreet 3D Studio Max
3.11.4 Virtual Reality Markup Language
3.11.5 QuickTime Virtual Reality (QTVR)

99
CIT 735 MODULE 2

4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Video and animation adds virtual reality to the way images and graphics
are viewed and perceived in multimedia applications. Video are
prerecorded images (graphics) that are played back at speeds between 15
to 30 frames per second and which provide the appearance of full
motion. The integration of video in multimedia has major effect on the
user’s experience.

Animations on the other hand involve simulation of motion to images


and graphics object in multimedia applications. It aims to make images
(non-living things) as having characteristics of living thing (LT) by
adding the illusions of motion, emotion, and personality etc to a
sequence of still images. It is a time-based script of composite images
(the images changes over time).

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• define video and animation, and their related concepts;


• explain how video are converted into their equivalent digital
representations;
• list and describe the various broadcast video standards and video
formats standards;
• describe how video data files are compressed using lossy or
lossless compression schemes;
• explain video streaming and buffering concepts;
• describe the animation process and the tools used in animation
process;
• outline the area of interest in animation production and the
different animation file formats;
• explain the various types of animation;

3.0 Basic Concepts

To enhance our understanding of how video and animation can be


effectively used in multimedia applications, we need to review the
following related basic terms:

100
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.0.1 Modelling

Modelling is the process of specifying the geometric attributes of an


image or graphical object. Image modelling is carried using graphical
user interface (GUI) software which allows the user to select basic
primitive shapes (e.g. ovals, cubes, can, bevel etc.) and modify their
attributes, decorate them with textures and connect them hierarchically.

3.0.2 Animating

Animating refer to the process of specifying the time varying properties


of a model. Usually performed by a key framing process where the
model is posed at various times and the computer mathematically
determines where the model ought to be positioned between these key
frames.

3.0.3 Rendering

Rendering refer to the process of synthesizing images of a model by


exposing it to synthetic lights. It is a computationally expensive process
whereby imaginary light rays bounced off the imaginary model at each
time an image is required and for each pixel in the image to determine
the colour visible to a viewer at a particular point in time and space.

3.0.4 Motion

Movement is a powerful medium through which to convey a message.


Both video and animation give us a sense of motion as they exploit
some properties of human eye’s ability of viewing pictures. Motion
video is the element of multimedia that can hold the interest of viewers
in a presentation.

3.0.5 Persistence of vision

Persistence of vision is the blending together by the eye/brain of rapidly


displayed sequential images, giving the illusion of movement.

3.0.6 Visual Representation

The visual effect of motion is due to the notion of persistence of vision.


An image seen by the human eye remains mapped on the eye’s retina for
a brief time (approximately 25 ms) after viewing the image.

The phi notion also contributes to the visual effect of motion; when two
closely light sources are illuminated in quick succession, one single light
moving between the two points is perceived instead of two light sources.

101
CIT 735 MODULE 2

A discrete sequence of individual pictures can be perceived as a


continuous sequence as a result of these two notions.

The visual effect (or Temporal Illumination) of motion takes place


when:

a. The rate of image repetition exposure to light sources is


satisfactorily large to guarantee smooth motion from frame to
frame; this rate is refer to as fusion frequency. Fusion frequency
is positively skewed towards the brightness of the light sources,
the brighter the light sources the higher the fusion frequency.
Human beings perceive continuous motion at a frame rate above
15 frames/s. Video systems have standard frame rate (e.g. PAL
25 frames/s), any rate shorter or longer than this standard rate
produces rough movement of image with many starts and stops in
between the movements. The periodic changes (flicker) in
perception of brightness can be corrected by a the interleaving
technique; and

b. The persistence of vision extends over the interval between


flashes.

3.0.7 Frame

Individual images forming an animation are called frames. Frames may


be shot in real-time using a cine or video camera to make a film or
video. In order to ensure the reliability of persistence of vision,
animation (film) frames are stored for rapid, sequential retrieval and
display. The interleaving technique divides a frame into two
(alternative scan lines) fields and displaying each field at twice the
frames rate.

3.1 Video

Video is the process of recording and replaying still or moving images


using electronic system (e.g. Video Recorder, Television, and Video
Player). Video must be captured with a video camera (VCR), digitized
and edited before it can be used in multimedia applications. The video
adapter located on the computer motherboard generate a video signal
that is sent to the computer monitor via a data cable. Video digitizer on
its part enables a video camera to capture an image, display and store it
in digital form in the computer memory.

102
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1.1 Broadcast Video Standards

There are three major conventional broadcast analog video standards,


namely

i. National Television Systems Committee (NTSC) developed in


the U.S. and used in North and South America, and Japan. The
NTSC produces 30 images of 525 lines per second and transmits
at a frame rate that is approximately 30Hz. NTSC is based on the
interleaved technique and therefore produces lesser rough
movements than scanning the entire image at a go. NTSC
produces 60 half images per second based on the US standard
powerline frequency of 60Hz;

ii. SEquential Couleur Avec Memoire (SECAM) is a standard


used in France and Eastern Europe. A picture consists of 625
lines and frame rate is 25Hz;

iii. Phase Alternating Line (PAL) was developed in Germany and is


widely used in Western Europe, most part of Asia (including
China and Hong Kong) and other countries. A picture consists of
625 lines and frame rate is 25Hz. SECAM and PAL were
designed based on the European standard of 50Hz powerline
frequency.

3.1.2 Video resolution

As previously noted, pixel is the smallest detail of an image that can be


reproduced. In practice, the frames are interleaved because some of the
scenes inevitably fall between scanning lines which require two lines for
the pixels in the image. However, the scanning lines only capture about
70% of the vertical detail.

Conventional television systems use an Aspect Ratio of 1.33: 1 (4:3).


The aspect ratio (also refer to as “Academy Ratio”) is the ratio of the
picture width to height of the screen. For the three conventional video
standards, the picture width, horizontal resolution and the total detail
content of the image can be determined as illustrated in the table below.

System Total Active Vertical Horizontal Total


Lines Lines Resolution Resolution Pixels
1. NTSC 525 484 242 330 106,000
2. SECAM 625 575 290 425 165,000
3. PAL 625 575 290 465 180,000
Table: Analysis of Video Data

103
CIT 735 MODULE 2

Conventional video systems have relative low resolution when compare


with that of computer monitors. This resultant effect of this low
resolution is that video played on computer screens are usually
displayed in small windows and require large amount of storage. Hence,
video data are usually compressed for economics of storage sake. For
example, consider a SCAM video system that transmits at 25 frames/s,
if we take a sample at 360 x 240 resolution at 16 bits per pixel, the raw
video size is

360 × 240 × 25 ×16 = 34.56 Mbit / s ≅ 4 Mbytes


Compare this with a typical Ethernet bandwidth of 10Mbit/s or a double
speed CD-ROM drive of 300Kbyte/s.

3.1.3 Digital Representation of Video

Digitization of still or moving images (video) involves the use of video


camera to capture video for playing back on computers and/or
integrating the video into multimedia applications. Recall that images,
pictures, and graphical images are represented by sequence of frames,
and that each frame is a digital form of the captured image. Also there
is constant delay between the appearances off two successive frames
which result in flicker.

In digitalizing a video, several samples of the image are captured.


Suppose for an NTSC system that transmit at 30 frames/s, then each
frame would require 130 = 33.33ms . Each scan line contains

525 = 57.14 µs since a SECAM systems have 525 scanning lines in its
30
frame. The sampling time at a horizontal resolution of 330 pixels would
be 57.14µs = 0.17µs yielding a sampling rate of about 6 MHz which
330
re requires very fast hardware.

3.1.4 Hardware Requirements

The hardware required to capture video images include the following:

a. Video sources: TV, VCR, LaserDisc player, Camcorder;


b. Video capture card; and
c. Storage space: large hard disk

3.1.5 Video Capture Cards

There are many different video capture cards on the market but they all
follow the same standard illustrated in the figure below

104
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Figure …… Architecture of Video Capture Card


(Source: COMP3600/SCI2600 Multimedia Systems, Department of
Computer Science, Hong Kong Baptist University)

The architecture in figure … above highlights the common features in


video capture card, vis-à-vis:

i. Video Inputs: accept composite video (in NTSC or PAL); high-


end capture cards can accept digital video (DV);

ii. Video Input Mixer (ADC) which is used to select/combine


video sources, to convert analog video signal to digital samples;

iii. Video Frame Buffer used for temporary storage of video frame;

iv. Video Processor: filters or enhance the video frame by reducing


noise, adjust brightness, contrast and colour;

v. Compressor/Encoder— to compress and encode the digital


video into a required format; and

vi. Interface to the system PCI bus.

3.2 Video Standard Formats

There quite a number of standards used in video capturing, editing,


storage, retrieval and display. Among them are:

105
CIT 735 MODULE 2

i. Microsoft’s AVI standard;


ii. Motion Picture Expect Group (MPEG) standard;
iii. Apple’s Quicktime standard; and
iv. ITU-TS H.261 standard.

These formats are used to compress many different types of frame


sequences, sets browser display using plug-ins or helper applications,
play soundtracks synchronized to animation and assembled videos.

3.2.1 Microsoft’s AVI Standard

The Audio Video Interleaved (AVI) format is a software-only system


that was defined by Microsoft for its Video for its Windows based
systems. AVI supports video playback at a frame rate of about 30
frames/s in a small window; about 300 x 200 with 8 or 16 bit colour). It
and supports a number of compression algorithms

3.2.5 Motion Picture Expert Group Standard

The Motion Picture Expect Group (MPEG) is a working group within


the International Standard Organization (ISO) targeted at entertainment
video. MPEG standard has several versions and we shall discuss three
of the se versions.

3.2.5.1 MPEG - 1

MPEG – 1 has a maximum data rate is 1.5Megabit/sec and requires


hardware support for encoding and decoding on slow systems.

3.2.5.2 MPEG - 2

MPEG - 2 was developed ton improves the data rate of MPEG – 1 by


increasing the maximum data rate to 15Mbit/sec and can interleave
audio and video.

MP3 (MPEG II, layer 3) is a popular format for storing music and other
audio. A typical MP3 file is one tenth the size of the original WAV or
AIFF file, but it sounds very similar. MP3 encoders make use of
psychoacoustic models to, in effect, "throw away" the parts of the sound
that are very hard to hear, while leaving the loudest and most important
parts alone.

3.2.5.3 MPEG - 7

MPEG-7 (Multimedia Content Description Interface) is a standard


developed by ISO/IEC for media archiving, searching, browsing,

106
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

filtering, managing media delivery to diverse users, and controlling


copyright and classification issues. MPEG-7 is different from its earlier
versions by defining the schemes used to describe media data while
MPEG-1, 2 and 4 defines coding schemes to represent the media itself.
MPEG-7 is another layer on top of multimedia data. MPEG-7 presents a
standard interface for media description which includes:

• The system: storing and transmitting mpeg-7 bit streams.


• Description Definition Language: XML.
• Visual – the Description Tools dealing with (only) Visual
descriptions.
• Audio – the Description Tools dealing with (only) Audio
descriptions.
• Multimedia Description Schemes.
• Reference software, conformance testing, profiles and levels, and
schema definition.

3.2.6 Apple’s QuickTime Standard

QuickTime was originally developed by Apple for storing audio and


video in Macintosh systems. It supports video playback at up to 30
frames per second on a small window (typical size 300_200 with 8 or 16
bit colour). It is a software-only system and supports a number of
compression algorithms

3.2.7 ITU-TS H.261 Standard

ITU-TS H.261 target at low resolution video conferencing, bit rates ~


0.1 Mbps

3.3 Video Compression

Compressing video data files decreases their size and reduces the
amount of space they use on your drives or removable storage devices.
Compression schemes can be classify as either lossy or lossless. The
table below gives an overview of similarity and the dissimilarity
between these two compression schemes.

107
CIT 735 MODULE 2

Lossy Compression Schemes Lossless Compression Schemes

Discard pixel information and Do not discard pixel information.


removed some information in the The data is not altered nor lost in
data. (Very high compression the process of compression.
rates)
Removes redundancy Removes redundancy
Reconstruction by approximation Reconstruction by calculation
(exact)
Range of quality / compression Quality is a critical factor.
trade offs Originality is considered.
(The better the compression, the
worse the quality. Compression
usually specified within JPEG
images as a percentage from 0%
(low quality) to 100% (high
quality))
Often suitable for images captured Often unsuitable for images
from conventional camera / video captured from conventional
(Compresses well, artefacts camera / video (compresses
invisible) poorly)
Often unsuitable for digitally Often suitable for digitally
synthesized images (Artefacts / synthesized images (compresses
degradation visible) well)
Good for video and image Good for computer data file
compression compression
The efficiency of compression can be determining through the
followings:

Compressio n Ratio =
original data size
compressed data size { + ve ; Compressio n ratio ≥ 1
− ve ; otherwise
i. Compression Ratio

ii. Figure of Merit: this is reciprocal of the compression ratio.


compressed data size
Figure Merit =
original data size
Compression algorithms use either of these two encoding styles, vis-à-
vis;

a. Source encoding: can be used in either lossy or lossless


compression algorithms. It makes use of transformations which
depend on the type of the original data (e.g. suppression of audio
silence, exploring motion redundancies etc.); and

108
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

b. Entropy encoding: used for only lossless compression


algorithms. It treats all data as sequence of bits and do not
consider the nature of the original data.

3.4 Video Streaming and Buffering Concepts

Streaming is a method of delivering audio and video files across the


computer network or the Internet without downloading an entire file
before it plays. When a streamed file finishes playing, it is not stored on
your computer. When you play a streaming media file, the file is
partially downloaded and stored in a buffer before it begins to play; this
process is called buffering. As more information in the file is streamed
to the computer video player (e.g. Windows Media Player), the Player
continues to buffer the information. If traffic on the Internet interrupts
the flow of information, buffering may enable the file to play back with
fewer breaks or interference.

All streaming media files buffer before playing. Buffering is the process
of sending a certain amount of information to the computer before the
content actually plays. When streaming a file, the Player monitors
network conditions and automatically makes adjustments to ensure the
best reception and playback. If network traffic interrupts a stream, the
Player fills those gaps with information from the buffer. If network
traffic is particularly heavy, the user may notice interruptions in the
stream when playing the file because the buffer is empty and more
information has not been sent. If the information in the buffer runs out,
there will be a break in playback. The status bar at the bottom of the
Player window alerts you when information is buffering.

The amount of time that content is buffered before it is played can be


adjusted by the user. If the user notices several interruptions during
playback, the number of seconds that content is buffered should be
increased. However, in general it is recommended to allow the Player
adjust the buffering automatically.

3.5 Shooting and Editing Video

Download video from a digital or analog video camera to edit your film.
You can also add sound files and even combine still digital pictures
using the Windows editing software.

With Windows Movie Maker, you can transfer recorded video and audio
from a source, such as an analog camcorder or digital video camera, to
your computer. In addition to using your own recorded content, you can
also import existing audio and video files to use in the movies you
create.

109
CIT 735 MODULE 2

To open Windows Movie Maker, click Start, point to All Programs,


and then click Windows Movie Maker.

The following can be done with Windows Movie Maker:

a. Monitor window
b. Display a Video Clip
c. Using Monitor window controllers to
• customize the monitor window view
• play the Source or Program view
• view a different frame
• joggle or shuttle through frames
d. Use and move around the Timeline window to:
• move the edit line in the Timeline
• display the timeline in more detail
• display more of the program in the timeline

SELF-ASSESSMENT EXERCISE

i. Explain the concept of persistence of vision as it relates to


movement of objects.
ii. What is the role standards used in video capturing, editing,
storage, retrieval and display?
iii. Discuss the reasons for compressing video data.

3.6 Animation

Animation brings life to still images by displaying the images in rapid


succession to create a visual effect of motion. Animation is
variety of motion pictures that produces the illusion of movement in
hand-drawn still images, pictures or graphical objects by photographing
them on a single frame, then substituting the next drawing or object in
the series, which shows the subject in a slightly different position, then
photographing that on the next frame, and so on. It adds motion
(transition effect e.g. fade, dissolve or zoom) to an image, or as
elaborate and expensive as a full cartoon animation or even 3D
animation. Visual effect can be of two major kinds, namely:

i. Motion Dynamic: which is time varying positions; and


ii. Update Dynamic: which is the time varying shape, colour,
texture, or even lighting, camera position, etc.

The visual effect is the result of exploiting the properties of human


vision system as described earlier in section 3.0.6 of this unit. Animation
may be used for instructional/learning purposes, forensic activities,

110
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

advertisement, storytelling, visualization, computer graphics and arts


etc. Note however, the essence of multimedia presentations is to pass
across messages to the users (audience, viewers, learners etc.), it is thus
advisable for the multimedia designer not to lose sight of this fact.

3.7 Animation Process


The following diagram illustrates the various processes involved in
animation of images:

Input In-between Controlling Display


Process Process Process Process

Movement Composite Process

Figure …. The Animation Processes

3.7.1 Input Process

The input process is the first step required in producing computer


animation. Key frames (the frames in which the objects being animated
are at extreme or characteristic positions) are created and input into the
computer. The frames are drawn using traditional artistic tools, such as
pen and brush, and then digitized and clean up, or they can be created
with computer graphics tools. In composition stage, the foreground and
background figures are combined to generate the individual frames.

3.7.2 In-between Process

The animation of movement from one position to another needs a


composition of frames with intermediate positions in between the key
frames. The in-between process is performed in computer animation
through interpolation. The system is given the starting and ending
positions, and then calculates the positions in between. Two major
interpolation methods namely linear and spline can be used to effect the
in-between process. The linear interpolation is more simpler than the
spline interpolation but its object looks unreal and does not move
smoothly. Spline interpolation involves interpolating the objects’ shapes
and makes the object movement to be smoothly.

Some animation involves changing the colour of objects by done using


colour look-up table (CLUT). By cycling through the colours in the

111
CIT 735 MODULE 2

CLUT, the objects’colour will change. One common effect in which one
image transforms into another is refer to as Morphing.

Key Frame Linear Spline


Interpolation Interpolation

Figure …. Interpolations

3.7.3 Controlling Process

The controlling process is a scheme or algorithms of everything that


occurs in the animation. It specify simple changes, such as scaling,
transformation effects, the key frames size to be used in the animation,
and the procedural control (geometrical computations) on the objects.

In physical systems, the position of one object may influence the motion
of another. Whereas in constraint-based systems, the movement of
objects that are in contact with each other is constraint by physical laws.
An animation can be specified by these two constraints. Tracking live
action requires

a. People or animals act out the parts of the characters in the


animation
b. The animator trace out the characters

The controlling process also focuses on kinematics (the position and


velocity of points) of the objects. Suppose an image at t=0 moves with a
constant acceleration using the dimensional vector quantity [1, 1.5], the
final result of an animation is the sum of all the steps. If it does not fit,
the animator has to try again. This is known as forward kinematics.
Inverse kinematics (IK) on the other hand is concerned with moving a
skeleton from one pose to another. The required position of the end
effectors is specified and the IK algorithm will compute the joint
geometrical position, angle, etc.

3.7.4 Displaying Process

The rules governing the showing of video apply to animation as well.


The frame rate should be at least 10 fps, preferably 15fps to 20fps, to

112
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

give a reasonably smooth effect Acceptable multimedia animation can


make do with fewer frames per second.

3.8 Types of Animation

1. Hand Drawn Animation

In hand drawn animation, multiple images are drawn on paper, canvas,


acetate 'cels' and photograph one at a time onto film. Moving images
were drawn on separate sheets of celluloid laid over a fixed background,
drawn on paper. The positional registration between successive
drawings must be taken into significant, and this can be done by having
holes punched in the drawings that fitted on to pins fixed to the
animation table under the camera.

2. Glass Sheet Animation

A sheet of glass is used as a board for depositing paint. Each frame of


the animation is painted, and then photographed, and then the next frame
is constructed by pushing the paint around on the glass, and so on. Each
time the animator makes a new frame, the image for the previous frame
is destroyed. The same process can be carried out by drawing images in
a bed of sand.

3. Stop-Motion Animation

A figurine, ball of clay or other solid model is 'posed', photographed,


moved a little and re-photographed ad-infinitum. If clay models are
used, the process may also be called 'claymation'. If models resting on a
table are used, the process may be called table-top animation.

4. Cartoon Animation

Scratch or draw an images directly onto a strip of cinefilm with pencil


(pens) and other implements and play the images 'as is' through a cine-
camera. Make an outline of the moving images to serve as a guide for
the animation drawings.

5. Puppet or Model Animation

Puppet or model animation is an important element within feature-film


production supplying part of the action in some fantasy films. Single
frame animation of model creatures are combined with sequences of
action filmed on a continuously running camera. These use models
moved by internal rods actuated by hand (“muppets”) or by hydraulic or
electrical remote control (“animatronics”), and also include sequences

113
CIT 735 MODULE 2

using animated computer graphics. The flexibility of modeling materials


such as plastics and clay produces a flow that is well-timed to the
motion as well as adding colourful characters and scripts.

6. Computer Animation

Computer animation is the simulation of movement produced by


displaying a series of successive images on the computer monitor. The
animation is effected on a computer using graphical tools to provide
visual effects. The computer is used to model objects and manipulate
them in a 'virtual' space, producing images of the objects as they are
manipulated.

Computer animation can be accomplished in several ways, depending on


the available hardware and software tools, and the working environment.
One way of animating images involve drawing images on the computer
monitor and then erased, redrawn on the monitor in slightly different
location to makes the eyes believe that there was a movement. One other
way makes use of the creation of entire monitor frames, which are
drawn in memory and displayed in sequence on the screen. Another
approach uses built-in screen-management tools that enable the
programmer to specify an object, a starting point, and a destination
while allowing the software to handle the process of movement.

Animation can be generated either in real time, in which each frame is


created as the viewer watches, or in simulated time. In the latter, the
computer generates still frames, which are then printed and
photographed or are sent to a film or video animation camera. In this
way, a computer can spend seconds, minutes, or hours generating each
frame, but on replay the tape or film displays each frame in a fraction of
a second. For successful animation sequences, images must replace one
another rapidly enough to fool the eye into seeing continuous
movement—at least 14 frames per second (fps). Broadcast-quality
animation typically ranges from 14 to 30 fps. Television sets run at a
constant rate of 25 or 30 fps. Film animation displays at 24 fps.
Animation of cartoons for film, for example, usually runs at 14 fps, but
each frame is printed twice.

7. Live Action

The live-action animation involves the direct recording of real-life


events, performance, teachings, drama etc. Inter-titles formed by cut-out
letters that move randomly about the screen until they get into line in the
right order to spell out the required message were used in the first frame-
by-frame animation of objects on film. This technique required an
adaptation of the ordinary motion-picture camera so that it only exposed

114
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

one frame of film, and then stopped with the shutter closed, rather than
the usual continuous running at 16 frames per second.

3.9 Animation File Formats

There are a number of standard file formats used in animation, amongst


which are the AVI, MPEG, QuickTime Video Formats previously
mentioned in section 3.2 of this unit, DIR for Director Movies, FLI and
FLC for Autodesk and AnimatorPro, MAX for Studio Max and the
Animated GIF89a files. The Animated GIF89a is commonly used in
animation due to the following reasons:

i. It works best for frames which GIF compresses well


ii. The GIF file is linked into a web page as a normal image
iii. The GIF file contains animated frames assembled using freely
available software
iv. The browser loads the GIF file and cycles through the frames to
playback your animation automatically.

3.10 Major Areas of Interest in Animation Production

1. Image, Space and Motion

Images to be animated need to be identify, designed and constructed.


The image is reproduced about 25 times per second of animation though
complex images may take a long time to animate. This is true whether
you are drawing them by hand or using a computer.

The screen space should be well set and established, the image
distinguishable from the background, appropriately sparse or dense and
well composed.

The image movement must keep to the production style, stimulates


users’ interest, display the intended message effectively, and is well
edited.

2. Timing and Lighting

The timing of the image movement should ensure exciting image


sequencing, do not strain the eyes, adequately dense and stimulates
exciting viewing moments.
Lighting sets the mood of a shot, the time of day, reveals or hides,
deepens or flattens images and make or mar animation.

115
CIT 735 MODULE 2

3.11 Animation tools

3.11.1 Macromedia Director and Flash: is one of the most popular


interactive animation tools for generating interactive multimedia
applications and are used to create animation. These may be
displayed in a web browser using plug-ins.

3.11.2 MetaCreations Poser: understands human motion and inverse


kinematics.

3.11.3 Discreet 3D Studio Max: very popular for creating 3D


animations.

3.11.4 Virtual Reality Markup Language

The Virtual Reality Markup Language (VRML) is a compact means of


describing three dimensional (3D) virtual worlds usable on the WWW.
Since 3D images are usually computationally intensive to display in a
web browser. It therefore requires a VRML plug-in such as
CosmoPlayer. Users can interact with the three-dimensional world or
model using the mouse. Objects in the world may be animated or linked
to other VRML scenes.

Virtual Reality (VR) aims to provide this experience synthetically by


fooling a viewer into experiencing a space where there is none.

3.11.4.1 Features of Virtual Reality

1. Consistency: to make a virtual world "inhabitable" consistency is


vital, objects’ attributes such as their location, behaviour and
interactions must be consistent. An inconsistent world is
impossible to inhabit comfortably.
2. Purpose: It is also beneficial if there is a purpose for one's visit
to a virtual world. A user might just explore, chat with others or
solve a puzzle.
3. Sophistication of Interactions: Complex and rewarding
interaction through the inclusion of other human inhabitants,
storytelling, and complex artificial agents are also becoming
viable inhabitants for interesting worlds.

3.11.5 QuickTime Virtual Reality (QTVR)

The QuickTime Virtual Reality (QTVR) provides a means of illustrating


the real or imaginary world using a panoramic photograph or rendering
'stitched' into a cylinder. QTVR Users interacts with the pseudo 3D
using the mouse and is not computationally expensive to display in a

116
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

browser. Image locations on the image may be linked to other QTVR


scenes.

SELF-ASSESSMENT EXERCISE

i. What do you understand by the term “animation”?


ii. Explain the animation process and describe how it is different
from the video production (if it is at all).

iii. What is the importance of virtual reality to animation?

4.0 CONCLUSION

Video is the process of recording and replaying still or moving images


using electronic system. Animation is very time consuming to make,
great fun to make, great fun to watch, and can be made in a diverse
range of ways. Animation is a very effective medium for conveying a
message, information or an idea.

5.0 SUMMARY

In this unit, we have learnt that:

• Video must be captured with a video camera, digitized and edited


before it can be used in multimedia applications.
• Digitization of still or moving images involves the use of video
camera to capture video for playing back on computers and/or
integrating the video into multimedia applications.
• Compressing video data files decreases their size and reduces the
amount of space they use on your drives or removable storage
devices.
• Streaming is a method of delivering audio and video files across
the computer network or the Internet without downloading an
entire file before it plays while buffering is the process of sending
a certain amount of information to the computer before the
content actually plays.
• Animation brings life to still images by displaying the images in
rapid succession to create a visual effect of motion.
• Computer animation is the simulation of movement produced by
displaying a series of successive images on the computer
monitor.
• There are a number of standard file formats used in animation,
amongst which are the AVI, MPEG, QuickTime Video, DIR for
Director Movies, FLI and FLC for Autodesk and AnimatorPro,
MAX for Studio Max and the Animated GIF89a files.

117
CIT 735 MODULE 2

• Animation tools include Macromedia Director and Flash,


MetaCreations Poser, and Discreet 3D Studio Max.
• Virtual Reality ensures viewers have experience of space and
motion where there is none.

6.0 TUTOR-MARKED ASSIGNMENT

i. The integration of video in multimedia has major effect on the


user’s experience. Why?
ii. Write a short drama of about 15 minutes duration on “Good
Parental Care”, select and audition your casts, shoot and direct
the drama using a digital camera or camcorder. Edit your
recording with Windows Movie Maker. Add soundtracks and
background music where possible to the movie. Package your
productions into different video formats.

7.0 REFERENCES/FURTHER READING

COMP3600/SCI2600 Multimedia Systems, Department of Computer


Science, Hong Kong Baptist University

Dorin, A & McCormack, J. (2000). FIT5900 : Introduction to


Multimedia Programming. FIT5900 courseware,
Semester 1, Caulfield Campus, 2000
http://www.csse.monash.edu.au/%7Ecema/courses/FIT5900/inde
x.html
Exporting MP3/OGG Files. http://audacity.sourceforge.net/manual-
1.2/exportmp3.html

Hao Jiang, (2007). MPEG-7: CS335-Principles of Multimedia Systems.


Computer Science Department, Boston College, Boston, USA.

James Khazar (2009). Arts 21: Introduction to Computer for Arts.


Licensed under a Creative Commons Attribution-
Noncommercial-No Derivative Works 3.0 Licences.
http://www.khazar.com/academics/portal/ucsc/2008fall/art21/

L. Reid & V. Tryphonopoulos (2009 ). Computer Science CS1033:


Multimedia and Communication,
www.csd.uwo.ca/courses/CS1033

Marshall, D. (2008),Multimedia. Module CM0340.


http://www.cs.cf.ac.uk/Dave/Multimedia/

118
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Mike Christel and Alex Hauptmann (2002). Introduction to Multimedia


and MSEC 20-791 http://www.cs.cmu.edu/~christel/MM2002/

MPEG-7 overview http://www.chiariglione.org/mpeg/standards/mpeg-


7/mpeg-7.htm

“Multimedia: From Wagner to Virtual Reality”,


http://www.artmuseum.net/w2vr/timeline/timeline.html

Scott D. James, Introduction to Multimedia


Video encoding (MPEG) http:.//faculty.nps.edu/xie/

119
CIT 735 MODULE 3

MODULE 3 MULTIMEDIA DESIGN AND


DEVELOPMENT STRATEGIES

Unit 1 Multimedia Systems Development Life Cycle


Unit 2 Human Computer Interaction and User-Centered Design
Unit 3 Structure and Tools
Unit 4 Assembling a Multimedia Development Team
Unit 5 e-Learning , Multimedia Learning and Cognitive
Principles in Multimedia Learning Design

UNIT 1 MULTIMEDIA SYSTEMS DEVELOPMENT


LIFE CYCLE

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Multimedia Software Life Cycle Models
3.1 Preliminary Needs Assessment
3.2 Analysis and Design
3.2.1 Design: User Interface
3.2.2 User interface techniques
3.2.2 User-friendliness
3.3 Development
3.3.1 Copyrights
3.4 Testing and Debugging
3.5 Deployment, Maintenance and Review
3.5.1 Deployment
3.5.1.1 Delivery Tools
3.5.1.2 Delivery Strategies
3.5.2 Maintenance
3.5.3 Review
3.6 Issues in Multimedia Applications Design
3.6.1 Content Design
3.6.1.1 Scripting (writing) the Message
3.6.1.2 Illustrating the Message (Graphics)
3.6.1.3 Wiggling the Message (Animation)
3.6.1.4 Hearing the Message (Audio)
3.6.1.5 Interacting with the Message (Interactivity)
3.7 Technical Design
3.8 Visual Design
4.0 Conclusion
5.0 Summary
6.0 Tutor -Marked Assignment
7.0 References/Further Reading

120
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

1.0 INTRODUCTION

Multimedia applications like every other system involve management of


financial, human resources, equipment and time etc. for its objective to
be achieved. The success or otherwise of multimedia application would
depend on the amount of knowledge put into it, the appropriateness of
equipment deployed, due to consideration to critical factors (e.g. users’
peculiarities, costs), and so on. Multimedia applications must be
designed, developed and deployed within a given budgetary provisions
and timing.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• describe the various types of software life cycle models that


applies to multimedia development
• outline and describe the phases various involved in multimedia
software life cycles
• write the specification which will be used to construct a design
for the multimedia application
• design storyboarding which describes a multimedia application in
exact detail using words and sketches for each screen images,
sound, and navigational choice
• explain how the content of multimedia applications can be
arranged to help the user find information more efficiently
• describe the delivery tools and deployment strategies required
for effective implementation of multimedia applications.

3.0 MULTIMEDIA SOFTWARE LIFE CYCLE MODELS

Multimedia applications development follows the system development


life cycle that has been adopted in the software engineering over the
years. A software life cycle is a process which is organized in some
order or sequence, structuring activities as a whole. It involves activities
(planning, design, development, testing, and deployment), constraints
(e.g. time, project size, budget estimates) and resources (e.g. manpower,
hardware, software) that produce an intended output. A process uses
resources subject to constraints and must have entry and exit criteria.
Multimedia designers must take into consideration for example, the
relationship between a multimedia application’s size and the time
required to design and develop it; the relationship between its size and
quantity and quality of manpower required.

Generally, multimedia system development life cycle can be broken


down to the following processes or phases:
121
CIT 735 MODULE 3

i. Preliminary Needs Assessment


ii. Analysis and Design
iii. Development
iv. Testing and Debugging
v. Deployment, Maintenance and Review

The various phases involve in development of multimedia applications


are collectively refer to as life cycle since the direction activity
establishes new objectives and goals this set the cycle turning through
the phases. Realignment of logical systems towards the set goals
considering the constraints and available new information is done when
necessary. There a number of models that have proposed and deployed
in specification and developments of software which are applicable to
multimedia system. Amongst are

1. Classic Waterfall Life Cycle: The designer starts from the initial
phase and move on to the subsequent one on completion of the
preceding phase. This model follows the principle of gravity and
therefore minimizes change and maximizes predictability of costs and
risks. Projects can be divided into sub-components and given to sub-
team to complete within a time frame (milestones) and with specific
output (deliverables). Its limitation includes the fact that software
requirements are susceptible to changes even during design and
development, and realistic model encourage cycles.

2. Rapid Prototyping Model: A prototype is a partially developed


product that enables customers and developers to examine some aspect
of a proposed system and decide if it is suitable for a finished product. It
is an abstraction of the real system which can be subjected to series of
tests in order to predict the behaviour of the proposed system in real life.
Potential users and domain experts reviewed the prototype by
summarizing findings and made recommendations. Multimedia
authoring tools facilitate prototyping. Prototyping is useful when the

i. workability of the proposed solution is in doubt; and


ii. objective is to minimize its impact during the system
implementation.

The throwaway prototyping is similar to rapid prototyping but when the


prototype has been used to produce a kind of animated specification, it is
thrown away, and the final system is designed from scratch. It is useful
for producing the requirements specification.

3. Iterative and Incremental Model: Incremental development of


functionality involves starting with small and functional subsystem, and
adding additional (secondary) functionality. Iterative development of

122
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

overall system delivers a full system in the first release, then changes the
functionality of each subsystem with each new release. It primitive
forms of all three functions in the various versions (Releases) and then
enhance (making them faster, improving the interface, etc.) in
subsequent releases.

4. Formal Methods: Formal methods rely on the use of


mathematical logic to achieve the software verification and validation to
prove that its meet the specification outlined in the preliminary phase.
The goal is to enhance the process of transiting from the initial phase
(agreed specification) to machine executable code (version) of the
system through provision of better error-checking mechanism and
avoidance of future errors.

3.1 Preliminary Needs Assessment

The multimedia designers in consultation with its client (project


owners), subject expert and the intended users establish the general tasks
which the proposed multimedia application is to performed, and the
constraints on its production. This may involve the preliminary study of
an existing system, be computerized or manual. The main concerns in
this phase include:

a. capturing the ideas and requirements of the clients


b. identifying the potential audience and users of the application
c. finding out the benefit that will gain from developing the
application
d. evaluating the feasibility and costs of the entire project, including
all tasks of production, testing and delivery

The most important thing to keep in mind during this stage is to strike a
balance between the benefit and the cost. A checklist when capturing
the ideas and requirements include the followings:

• Who will be the audience or end-users?


• What is the essence of the proposed multimedia application?
What is the purposed message?
• How can the multimedia application be organized?
• What multimedia elements (text, sounds, and visuals) will best
deliver the message?
• Would the available content material with leverage the
multimedia application, such as videotape, music, documents,
photographs, logos, advertisements, marketing packages, and
other artwork?
• Is the idea derivative from an existing theme which can be
enhanced with multimedia, or is it something totally new?

123
CIT 735 MODULE 3

• What hardware is available for the development of the


multimedia application? Is it enough?
• How much storage space do you have? How much do you need?
• What hardware will be available to the multimedia application
end users?
• What multimedia software is available to the multimedia
application designer?
• What are the multimedia application designer’s capabilities and
skills with both the software and the hardware?
• Can the multimedia application be design and develop alone by
one person or will it require team work?
• How much time is available to complete the work?
• How much money is available? Would it be sufficient for the
completion of the project?
• How will the final project be distributed?

The essentials are to capture the ideas and to quickly evaluate the
feasibility of these ideas. The most important considerations are

i. Hardware: is the most common limiting factor for both


development time and final users
• very poor sound output device or even no sound device
• limited amount of storage
• very narrow network bandwidth

ii. Software
• the cost of development software is fairly high
• the cost of software required in delivering to the end users
may add up to a large sum

iii. Contents: using existing material or producing from


scratch
• existing material may not match your requirement
• they are copyrighted, permission may not be granted
• producing new material is expensive and time-consuming

iv. Skill: Does it require very broad skill?


• computer skill
• artistic skill
• application domain skill

It is helpful to develop a pilot project or prototype before starting a full-


scale development

124
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

The deliverables should include the followings:

i. Terms of Reference;
ii. Analysis of the functional system;
iii. Summary of the software and hardware requirements;
iv. An outline description of the proposed multimedia system; and
v. Estimates of costs, benefits and timeline (milestones).

3.2 Analysis and Design

The requirements identified in the earlier phase are used as the basis for
constructing a more detailed description (software specification) of the
functionality of the proposed system. The analysis focuses on the flow
of data, and on the processes to be carried out on these data to achieve
the intended output. Tools require include flowcharts, data flow
diagrams, structured English etc. Succinctly, the phase can summarized
as follow:

• Overview - description of project goals, conceptual approach


• Storyboard - graphic outline of project interface, navigation, and
key visual components.
• Application Flow - textual outline of all project components,
timing, and navigation options.
• Content Description - detailed description of all content,
including: photography, computer graphics, text, video, voice-
over audio, music, sound effects, animations, etc.
• Content Acquisition Plan - assignment of interactive
multimedia, customer and third party responsibilities in
gathering, altering, and creating specific content components.
• Implementation Strategy - plan detailing all tasks, technologies,
and performance benchmarks required for remaining project
phases.
• Budget and Schedule - detail of costs, delivery dates, and
milestones associated with project deliverables.

Design involves the process of determining how the objectives outlined


in the software specification would be satisfied. The specification is
used to construct a design for the multimedia application including
program details, files, records etc. The focus at this stage is on the
logical and physical structures and the processes which access them.

Designing a multimedia application is a creative activity which requires


the knowledge and skill with computer, talent in graphics arts, video and
music, and knowledge of the subject area of the application.

125
CIT 735 MODULE 3

The design phase include the use of graphical outlines (Storyboarding)


which describes the project in exact detail using words and sketches for
each screen images, sound, and navigational choice. Storyboarding can
be very detail, sketching out every screen, right down to specific colour
and shade, text contents, attributes, etc or it may just a schematic guide.
It is used to help plan the general organisation or content of a
presentation by recording and organizing ideas on index cards, or placed
on board/wall. The storyboard evolves as the media are collected and
organised: new ideas and refinements to the presentation. Storyboards
can be drawn using traditional media, such paper and pencil or by using
a computer tool. The concept of storyboarding has been by animators
and their like for many years.

The design should follow some kind of arrangement (architecture) of the


multimedia information because a well-organised document will help
the user find information more efficiently and the architecture design
should start early.

Linear Architecture

Non-Linear Architecture

Composite Architecture
Hierarchical Architecture

Figure Types of Design Architecture

Different navigation structure may be supported by the same document


hierarchy.
For example, by subject and by time

3.2.1 Design: User Interface

The main emphasis in the design of multimedia user interface in


multimedia application centers on

126
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

i. Contents selection is the key to convey the information to the


user and the content can be influenced by constraints imposed by
the
• size and complexity of the presentation
• quality of information
• limitation of the display hardware
• need for presentation completeness and coherence

ii. Media must be chosen to be “adequate”


For example, to present a course on how to play tennis, graphics
and video are more suitable than text only.

iii. Coordination —composition of different media

3.2.2 User interface techniques

• Keyboard —fixed control commands are assigned to keys


• Buttons in a system with Graphical User Interface (GUI)
• Scroll bars—bars may be attached to the side of the application
window
• Special device —joystick may be a more natural way of
controlling the device
• Direct manipulation of the video window —clicking a point in
the application window, the device can be manipulated

Navigation —refers to the sequence in which the application progresses


• Direct navigation—completely predefined
• Free-form navigation— the user determines the sequence of
actions
• Browse navigation—the user is provided a large number of
choices

An important aspect of any multimedia system is to maintain a clear


perspective and the relationship between those objects

Designing user interface


• A good user interface is defined as one that is perceived to be
efficient and intuitive by most users
• A good user interface can be designed by following some
structured guidelines:
o Planning the overall structure of the application
o Planning the content of the application
o Planning the interactive behaviour
o Planning the look and feel of the application

127
CIT 735 MODULE 3

3.2.2 User-friendliness

User-friendliness is the primary goal of multimedia interface. The users


do not need a long period of time before they can use the system, the
learning phase should be quite simple. Users should find it easy to
remember instructions and the instructions for the user interface should
enable effective use of the application. Logically connected functions
should be presented together and in a similar way. Graphical symbols
are more effective than textual input and output. Different media should
be able to be exchanged and shared among different applications.
Prompt feedback after a user initiates an action is necessary.

3.2 Development

The development phase is when the multimedia project is actually


rendered. At this stage, the project plan (and storyboard) must be filled
with all details. The tasks to be performed in this phase are acquiring all
media elements and composing the elements according to the
storyboard. This is the phase when the designer’s artistic talent and
technical knowledge are in high demand. The methods of tracking media
elements and the progress of work, and also provision for solving any
technical problem that may arise are put in place.

3.3.1 Copyrights

If you acquire content from somewhere, it is very important to know


who has the right of the work. Some of the works protected by copyright
include computer software, technical innovation and design, literary
works, dramatic works, musical works, artistic works, sound recordings,
cinematograph films, television broadcast, sound broadcasts and
published editions of works etc.

It is necessary to license the rights to use copyrighted material before


using it in a multimedia project. This may be done by negotiating the
outright ownership of copyrighted material or procuring the rights to use
that material. The designers must consider what rights to require:

• How will the material be used and distributed


• Is the license for a fixed period
• Is the license exclusive or non-exclusive
• Where will your product be distributed
• Does the content owner have the authority to assign right to you
• Will the copyright owner receive remuneration for the license

128
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

In summary, the design may observe the following outline steps:

• Final Copy and Content Development


o Create, acquire and prepare all photographs, user interface
graphics, and other illustrations
o Model, animate and render all 3D animation components
o Record, digitize and composite all audio and video
components
o Edit and process all textual components
o Acquire and prepare all external components such as
install software, databases, linked websites, etc.
• Programming, Testing & Mastering
o Build authoring platform framework
o Import content
o Develop all programming components
o Test for proper function and performance targets
o Optimize performance for each platform
o Burn beta version for customer content review and
functional testing
o Burn gold master for replication
• Packaging and Support Literature Design
o Design and layout packaging and collateral materials
o Proof and revise as needed
• Produce make-ready films and/or digital files

3.3 Testing and Debugging

A multimedia application may be used by many different users, many of


who knows very little about computers, and on a variety of
heterogeneous platforms and configurations. Therefore, it is important to
test the product in a wide range of configurations. Like all other
software, testing and debugging is an important and time-consuming
phase. There are two types of testing namely

i. Alpha testing: an internal activity whereby the multimedia


application is tested by in-house team; and
ii. Beta testing involves a wider range of testers (real users) and
should not include persons who have been involved in the
production of the multimedia application.

129
CIT 735 MODULE 3

3.4 Deployment, Maintenance and Review

3.5.1 Deployment

There are two issues to be considered before a multimedia application is


deployed and they are

i. Delivery Tools; and


ii. Deployment Strategies.

3.5.1.1 Delivery Tools

The delivery tools should be planned for early in the development


process. CD-ROM and Internet are the two most popular means of
delivering multimedia applications. All necessary distribution elements
such as:

• media elements: e.g. movie clips, sound clips, external casts


• runtime libraries: e.g. Director runtime
• drivers: e.g. DirectX
• helper programs: e.g. QuickTime viewer, Acrobat Reader
• installation program, compression and decompression
programs

should be included in the final package. The following steps may be


following in the final packaging and distribution of the multimedia
application:

• Customization as required
o Prepare additional versions for specialized usage
• CD Replication, Printing when required
o Manufacture CD-ROMs
o Print and/or label CD-ROMs
• Packaging/Distribution
o Print CD-ROM packaging and collateral materials
o Assemble/stuff and prepare for distribution
o Distribute

3.5.1.2 Delivery Strategies

According to the means of delivery and the target audience, the designer
should plan how the application is to be installed and used. Delivery
strategies include direct changeover, parallel running and phased
changeover; however these strategies may also be combined.

130
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

1. Direct Changeover: This is a complete replacement of the old


system by the new system in one move. It assumes that the
multimedia application is well organized, well implemented, well
tested and the user has well trained to effectively use the
application.

Time

Figure Direct Changeover

2. Parallel Running: The old system and the new system are
deploy side by side and then cross checked to ascertain the
effectiveness of the new system. The old system is not discarded
until the new system has been proved to be okay. Its drawbacks
include the extra costs of running the two systems concurrently,
and the complexity of running two different systems alongside
each other.

Parallel Period
Old System

New System

Time

Figure …. Parallel Running

3. Phased Changeover: This involves a sequence of direct


changeover in small proportion; the new system being introduced
in piecemeal fashion. Thus, reducing the inherent risks in direct
changeover and allows both the designers and end-users to learn
from any mistakes that may occur during the deployment stage.

Old System

New System

Figure …… Phased Chnageover

131
CIT 735 MODULE 3

3.5.3 Maintenance

The ongoing development of a multimedia application to add new


products, functionality, and distribution channels requires adding and
revising content and functionality, and convert to additional media types
(e.g. video, web, DVD, etc.).

Maintenance involves making sure that the multimedia applications runs


in operational use and continues to do so for as long as it is required. It
includes correcting any errors which have remained undetected,
improving the implementation of system modules where necessary, and
enhancing the functionality of the application whenever desired by the
clients/end-users.

3.5.4 Review

The post-implementation review takes place only after the multimedia


application has been running error-free for a number of cycles. Some
specific aspects of the multimedia application are studied over a
reasonable period and the findings are documented. These aspects will
include the following:

i. Timing
The actual time taken to complete the various processes in the
multimedia application and the time it takes for enquiries to
be satisfied are studied. The aim is to obtain feedback when
compared with the term of reference.

ii. User Satisfaction


The usefulness of the multimedia application would depend
on how satisfied the end-user is with the system, especially
with error-recovery and training methods.

iii. Throughput
This would enable the designer to measure how many
transactions and enquiries the multimedia application is able
to process within a given timeframe.

iv. Error-rates
The number and level of errors that occur during process are
also considered.

v. Gray or Problem Areas


The designer must record any problem or gray area brought to
his attention by the end-user in his evaluation report.

132
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

vi. Actual Costs


The total actual costs incurred in running the multimedia
application are compared with the estimated running costs in
the feasibility study.

vii. Realized Benefits


The actual benefits realized from using the multimedia
application are compared with the expected benefits stated in
the feasibility study.

SELF-ASSESSMENT EXERCISE

i. What issues are addressed in design guidelines?


ii. How can a delivery tool be used to implement a well-designed
multimedia presentation and its subsequent deployment?

3.6 Issues in Multimedia Applications Design

Some additional issues involved in multimedia content and technical


design are discussed as follow:

3.6.1 Content Design

Content design deals with what to say and what media/tool to use. In
multimedia, there are five ways to format and deliver the message,
namely,

i. write the message;


ii. illustrate the message;
iii. wiggle the message;
iv. hear the message; and
v. interact with the message.

3.6.1.1 Scripting (writing) the Message

A well-scripted message would require that the multimedia application


designer

1. Understand the audience of the proposed multimedia application


and correctly address them.
2. Keep his writing as simple as possible. (e.g., write out the full
message(s) first, and then shorten it.)
3. Make sure technologies used complement each other.

133
CIT 735 MODULE 3

3.6.1.2 Illustrating the Message (Graphics)

The designer should make use of pictures and graphical illustrations to


effectively deliver the intended messages. Visual contents are retained in
the human memory longer than audio and writing message. The
graphical styles such as the fonts (typeface, size, colour, style etc.) and
colours (pastels, earth-colors, metallic, primary color and neon color)
should be considered.

3.6.1.3 Wiggling the Message (Animation)

Sometimes, the message is better illustrated with animated objects.


Objects are animated to achieve some purposes such as stressing a point,
improving information delivery, enhancing emotional impact, indicating
the passage of time, showing transition (motion, cut, fade, dissolve and
wipes). Various animation styles include character animation (revealing
emotion, stimulating movement, enhancing visual style), highlights and
sparkles), moving text, and live or digitized video.

3.6.1.4 Hearing the Message (Audio)

The following constitute the various ways audio message could be


created:

1. Music: set the mood of the presentation, enhance the emotion,


illustrate points;
2. Sound effects: make specific points, e.g., squeaky doors,
explosions, wind etc; and
3. Narration: most direct message, often effective.

3.6.1.5 Interacting with the Message (Interactivity)

Interacting with multimedia contents ensures that the multimedia user


come into contact with two learning domains, affective and
psychomotor. Interaction enhances content comprehension, retention
and recall. This due to the fact that human being remembered more than
70% of what they interacts with or put into practice. Thus, interactive
multimedia provides a convenient means of setting up some simulated
laboratory and practical exercises in the learning environments.

3.7 Technical Design

Technological factors may limit the effectiveness of the multimedia


presentation and such technical parameters that affect the design and
delivery of multimedia applications include:

134
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

1. Video Mode and Computer Platform

There are many "portable", "cross-platform" software and "run-


time modules", but many of them lose quality/performance
during the translation.

Video Mode Resolution Colors


---------- -------------- --------
CGA 320 x 200 4
MCGA 320 x 200 256
EGA 640 x 350 16
VGA 640 x 480 256
S-VGA 1,024 x 768 $>$= 256
S-VGA 1,280 x 1,024 $>$= 256
.
.
.
16-bit color --$>$ 65536 colors
24-bit color --$>$ 16.7 million colors

2. Memory and Disk Space Requirement

Rapid progress in hardware alleviates this problem, but software


requirements changes more rapidly, especially the multimedia
ones.

3. Delivery Mode

a. Live Presentation: short checking list for


hardware/software requirements:

• type of graphics card


• video memory (1 MB, 2 MB, 4 MB, etc.)
• access time of hard disk (important for real-time
video)
• type of sound card (support for General MIDI)
• audio-video software

b. Delivery by diskette: small in size, slow to install

c. Delivery by CD-ROM: large capacity, access time


of CD-ROM drives is longer than hard-disk drives.

d. Electronic Delivery (ftp, www, etc.): depends on


baud rate, network connection, bandwidth and
monthly bill.

135
CIT 735 MODULE 3

3.8 Visual Design

Here we summarize factors that should be considers in the visual design


of a multimedia presentation:

1. Themes and Styles: A multimedia presentation should have a


consistent theme or style, it should not be disjointed and cluttered
with multiple themes. The choice of theme the style depends on
the styles and emotions of the audience peculiarities the
multimedia presentation is addressing. Some possible themes
include:

a. Traditional theme: straightforward, simple, often


informative but not as interesting;
b. Cartoon theme: interesting or entertaining and
must be consistent with the character's personality;
c. Technical theme: include blueprints, 3D models of
the product, e.g., start with a drawing, then
transformed into a rendered image. Reveals
adequate technical information and gives
impression of solid design and construction; and
d. High Tech theme: contemporary computer art
work (morphing, texture mapping, metal texture,
explosions), attractive, and easy to animate.

Color schemes and art styles include:

a. Natural and Floral: getting back to nature


(outdoor scenes, e.g., mountains, lakes, ...); and
b. Oil paints, water colours, colored pencils,
pastels. the art styles can be combined with e.g.,
cartoon or high tech themes

2. Pace and Running Length Guidelines include:

a. Allow a block of text to be slowly read twice;


b. Transition time should be an indication of real-time.
• dissolve - time delay, scene change
• cut - two views of same scene at same time, or
abrupt scene change
c. Running length
• self running presentation: 2-3 minutes
• limited interaction: 5-6 minutes
• complete analytical, hands-on demo: < 15 minutes
• with questions, discussions: > 30 minutes

136
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

d. Interlude: build in breaks for long presentations

3. Basic Layout

(a) Title (b) Action area (c) Narration (d) Dialog (e)
Interactive controls

• make sure that the information delivery path in the layout


is smooth, not irregular/jumpy
• use headlines/subtitles, additional shapes, buttons, fonts,
backgrounds and textures to enhance the visual
appearance.

SELF-ASSESSMENT EXERCISE

i. Explain the following terms


a. Storyboard
b. Scripting
ii. What are the importance of good technical and visual designs?

4.0 CONCLUSION

Multimedia applications development follows the system development


life cycle that has been adopted in the software engineering over the
years. Multimedia applications must be designed, developed and
deployed within a given budgetary provisions and timing.

5.0 SUMMARY

In this unit, you have learnt that:

• Multimedia software life cycle is a process which involves


activities (planning, design, development, testing, and
deployment) that are structured and organized in some sequential
order, constraints (e.g. time, project size, budget estimates) and
resources (e.g. manpower, hardware, software) that produce an
intended output.
• Designing a multimedia application is a creative activity which
requires the knowledge and skill with computer, talent in
graphics arts, video and music, and knowledge of the subject area
of the application.
• Analysis focuses on the flow of data, and on the processes to be
carried out on these data to achieve the intended output.
• User-friendliness is the primary goal of multimedia interface.
Users should find it easy to remember instructions and the

137
CIT 735 MODULE 3

instructions for the user interface should enable effective use of


the application.
• A multimedia application may be used by many different users,
many of who knows very little about computers, and on a variety
of heterogeneous platforms and configurations. Therefore, it is
important to test the product in a wide range of configurations.
• There are two issues (delivery tools and deployment strategies) to
be considered before a multimedia application is deployed.
• Delivery strategies include direct changeover, parallel running
and phased changeover;
• Content design deals with what to say and what vehicle to use
while technical design relates with such technical parameters that
affect the design and delivery of multimedia applications.
• A multimedia presentation should have a consistent theme

6.0 TUTOR-MARKED ASSIGNMENT

i. Design involves the process of determining how the objectives


outlined in the software specification would be satisfied. Discuss
ii. If you were to describe your town using a multimedia
presentation, by following the guides in this unit:
a. Itemize the steps you will follow
b. design your presentations

7.0 REFERENCES/FURTHER READING

Salembier, P. & Smith, J.: "Overview of MPEG-7 multimedia


description schemes and schema tools". In Manjunath, B.S.;
Salembier, P. & Sikora, T. (ed.): "Introduction to MPEG-7:
Multimedia Content Description Interface". John Wiley & Sons,
Chichester, 2002

Schultz, D.J. & others: "IEEE Standard for Developing Software Life
Cycle Processes".
The Institute of Electrical and Electronics Engineers, New York,
USA, IEEE Std, No. 1074-1997, 1997 ISBN: 1-55937-993-6

Multimedia software life cycle

138
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 2 HUMAN COMPUTER INTERACTION AND


USER-CENTERED DESIGN

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Human–Computer Interface
3.0.1 Goals of Human-Computer Interaction
3.0.2 Comparison of HCI with related fields of study
3.1 Types of User Interfaces
3.1.1. Command-line Interface (CLI)
3.1.2 Graphical User Interface (GUI)
3.1.3 Zooming User Interface (ZUI)
3.2 Design Principles
3.2.1 Principles of User Interface Design
3.3 Design Methodologies
3.3.1 User-Centered Design
3.3.2 Bodystorming
3.3.3 Focus Group
3.3.4 Iterative Design
3.3.5 Participatory Design
3.3.6 Plastic Interface for Collaborative Technology
Initiative through Video Exploration
3.3.7 Task Analysis
3.3.8 Scenario
3.3.9 Wizard of Oz experiment
3.4 Principles of Display Design
3.5 Interaction design
3.6 Evaluations Methods in HCI
3.6.1 Usability Testing
3.6.3 Cognitive Walkthrough
3.7 HCI Models and Laws
3.7.1 Hick’s Law
3.7.2 Fitts’ Law
3.7.3 Steering Law
3.7.4 Goals, Operators, Methods and Selections Rules
3.7.5 Keystroke-Level Model
3.8 Future Developments
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

139
CIT 735 MODULE 3

1.0 INTRODUCTION

Human–computer interaction (HCI) is the field of study concerned with


the interface between humans and all forms of computer systems. It is
often regarded as the intersection of computer science, behavioral
sciences, design and several other fields of study. Interaction between
users and computers occurs at the user interface, which includes both
software and hardware. The Association for Computing Machinery
defines human-computer interaction as "a discipline concerned with the
design, evaluation and implementation of interactive computing systems
for human use and with the study of major phenomena surrounding
them."

Because human-computer interaction studies a human and a machine in


conjunction, it draws from supporting knowledge on both the machine
and the human side. On the machine side, techniques in computer
graphics, operating systems, programming languages, and development
environments are relevant. On the human side, communication theory,
graphic and industrial design disciplines, linguistics, social sciences,
cognitive psychology, and human factors are relevant. Engineering and
design methods are also relevant. Due to the multidisciplinary nature of
HCI, people with different backgrounds contribute to its success. HCI is
also sometimes referred to as man–machine interaction (MMI) or
computer–human interaction (CHI).

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• explain the basic knowledge involve in Human- computer


interaction and itemize List the basic goals of Human-Computer
Interaction
• explain information flow between human and computer
• eescribe why and how Human-Computer Interaction differ from
other field of related study
• discuss the best working position of operation
• explain the various types of user interface, the methods used the
user interface design, and their design principles
• evaluate the effectiveness of Human-Computer Interaction in the
design of multimedia applications
• explain the Human-Computer Interaction laws and rules.

3.0 HUMAN–COMPUTER INTERFACE

The human–computer interface can be described as the point of


communication between the human user and the computer. The flow of

140
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

information between the human and computer is defined as the loop of


interaction. The loop of interaction has several aspects to it including:

• Task Environment: The conditions and goals set upon the user.
• Machine Environment: The environment that the computer is
connected to, i.e a laptop in a college student's hostel room.
• Areas of the Interface: Non-overlapping areas involve processes
of the human and computer not pertaining to their interaction.
Meanwhile, the overlapping areas only concern themselves with
the processes pertaining to their interaction.
• Input Flow: Begins in the task environment as the user has some
task that requires using their computer.
• Output: The flow of information that originates in the machine
environment.
• Feedback: Loops through the interface that evaluate, moderate,
and confirm processes as they pass from the human through the
interface to the computer and back.

3.0.1 Goals of Human-Computer Interaction

A basic goal of HCI is to improve the interactions between users and


computers by making computers more usable and receptive to the user's
needs. Specifically, HCI is concerned with:

• methodologies and processes for designing interfaces (i.e., given


a task and a class of users, design the best possible interface
within given constraints, optimizing for a desired property such
as learning ability or efficiency of use)
• methods for implementing interfaces (e.g. software toolkits and
libraries; efficient algorithms)
• techniques for evaluating and comparing interfaces
• developing new interfaces and interaction techniques
• developing descriptive and predictive models and theories of
interaction

A long term goal of HCI is to design systems that minimize the barrier
between the human's cognitive model of what they want to accomplish
and the computer's understanding of the user's task.

3.0.2 Comparison of HCI with related fields of study

HCI differs from human factors because HCI focus more on users
working specifically with computers, rather than other kinds of
machines or designed artifacts. In HCI the focus is on how to implement
computer software on hardware platforms to facilitate effective human-
computer interaction.

141
CIT 735 MODULE 3

According to some experts, HCI also differs from ergonomics in that


there is less of a focus on repetitive work-oriented tasks and procedures,
and much less emphasis on physical stress and the physical form or
industrial design of the user interface, such as keyboards and mice.

Over the years HCI has substantially overlap with some other areas such
as:

a. Personal Information Management (PIM): human interactions


with the computer are placed in a larger informational context -
people may work with many forms of information, some
computer-based, many not (e.g., whiteboards, notebooks, sticky
notes, refrigerator magnets) in order to understand and effect
desired changes in their world;
b. Computer Supported Cooperative work (CSCW): the
emphasis of CSCW is on the use of computing systems in
support of the collaborative work of a group of people; and
c. Human Interaction Management (HIM): the underlying
principles in HIM extend the scope of CSCW to an
organizational level and can be implemented without use of
computer systems.

3.0.3 Good Working Positions

• Hands, wrists, and forearms are straight, in-line and roughly


parallel to the floor.
• Head is level, or bent slightly forward, forward facing, and
balanced. Generally it is in-line with the torso.
• Shoulders are relaxed and upper arms hang normally at the side
of the body.
• Elbows stay in close to the body and are bent between 90 and 120
degrees.
• Feet are fully supported by the floor or a footrest may be used if
the desk height is not adjustable.
• Back is fully supported with appropriate lumbar support when
sitting vertical or leaning back slightly.
• Thighs and hips are supported by a well-padded seat and
generally parallel to the floor.
• Knees are about the same height as the hips with the feet slightly
forward.

142
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1 Types of User Interfaces


3.1.1. Command-line Interface (CLI)

Command-line Interface (CLI) is a mechanism for interacting with a


computer operating system or software by typing commands to perform
specific tasks. This method of instructing a computer to perform a given
task is referred to as "entering" a command: the system waits for the
user to conclude the submitting of the text command by pressing the
"Enter" key (a descendant of the "carriage return" key of a typewriter
keyboard). A command-line interpreter then receives, analyses, and
executes the requested command.

CLIs are often used by programmers and system administrators, in


engineering and scientific environments, and by technically advanced
personal computer users. CLIs are also popular among people with
visual disability, since the commands and feedbacks can be displayed
using Refreshable Braille displays.

3.1.2 Graphical User Interface (GUI)

Graphical user interface (GUI) is a type of user interface which allows


people to interact with programs in more ways than typing such as
computers; hand-held devices such as MP3 Players, Portable Media
Players or Gaming devices; household appliances and office equipment
with images rather than text commands. A GUI offers graphical icons,
and visual indicators, as opposed to text-based interfaces, typed
command labels or text navigation to fully represent the information and
actions available to a user. The actions are usually performed through
direct manipulation of the graphical elements.

A GUI uses a combination of technologies and devices to provide a


platform the user can interact with, for the tasks of gathering and
producing information. A series of elements using a visual language
have evolved to represent information stored in computers. This makes
it easier for people with little computer skills to work with and use
computer software, especially in personal computers. The most common
combination of such elements in GUIs is the WIMP ("window, icon,
menu, pointing device") paradigm.

A GUI may be designed for the rigorous requirements of a vertical


market. Examples of an such GUIs are:

• Touchscreen point of sale software used by waitstaff in a busy


restaurant
• Self-service checkouts used in a retail store
• Automated teller machines (ATM)

143
CIT 735 MODULE 3

• Airline self-ticketing and check-in


• Information kiosks in a public space, like a train station or a
museum
• Monitors or control screens in an embedded industrial application
which employ a real time operating system (RTOS).
• cell phones and handheld game systems
• Automobiles’ navigational systems and touch screen multimedia
centers.

3.1.3 Zooming User Interface (ZUI)

The Zooming User Interface (ZUI) is a related technology that promises


to deliver the representation benefits of 3D environments without their
usability drawbacks of orientation problems and hidden objects. It is a
logical advancement on the GUI, blending some three-dimensional
movement with two-dimensional or "2.5D" vector objects.

3.2 Design Principles

When evaluating a current user interface or designing a new user


interface, it is important to keep in minds the following experimental
design principles:

• Focus on user(s) and task(s): Establish how many users are


needed to perform the task(s) and determine who the appropriate
users should be; someone that has never used the interface, and
will not use the interface in the future, is most likely not a valid
user. In addition, define the task(s) the users will be performing
and how often the task(s) need to be performed.
• Empirical measurement: Test the interface early on with real
users who come in contact with the interface on an everyday
basis, respectively. Keep in mind that results may be altered if the
performance level of the user is not an accurate depiction of the
real human-computer interaction. Establish quantitative usability
specifics such as: the number of users performing the task(s), the
time to complete the task(s), and the number of errors made
during the task(s).
• Iterative design: After determining the users, tasks, and
empirical measurements to include, perform the following
iterative design steps until a sensible, user-friendly interface is
created:

1. Design the user interface


2. Test
3. Analyze results
4. Repeat

144
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.2.1 Principles of User Interface Design

These are seven principles that may be considered at any time during the
design of a user interface and which may improve the quality of such
user interface design. These principles are:

i. The structure principle: Design should organize the user


interface purposefully, in meaningful and useful ways
based on clear, consistent models that are apparent and
recognizable to users, putting related things together and
separating unrelated things, differentiating dissimilar
things and making similar things resemble one another.
The structure principle is concerned with overall user
interface architecture.
ii. The simplicity principle: The design should make simple,
common tasks easy, communicating clearly and simply in
the user's own language, and providing good shortcuts that
are meaningfully related to longer procedures.
iii. The visibility principle: The design should make all
needed options and materials for a given task visible
without distracting the user with extraneous or redundant
information. Good designs don't overwhelm users with
alternatives or confuse with unneeded information.
iv. The feedback principle: The design should keep users
informed of actions or interpretations, changes of state or
condition, and errors or exceptions that are relevant and of
interest to the user through clear, concise, and
unambiguous language familiar to users.
v. The tolerance principle: The design should be flexible and
tolerant, reducing the cost of mistakes and misuse by
allowing undoing and redoing, while also preventing
errors wherever possible by tolerating varied inputs and
sequences and by interpreting all reasonable actions.
vi. The reuse principle: The design should reuse internal and
external components and behaviors, maintaining
consistency with purpose rather than merely arbitrary
consistency, thus reducing the need for users to rethink
and remember.
vii. The affordance principle:

Also, there are two critical points that must be considered when
designing a user interface namely;

i. A computer shall not harm user work or, through


inactivity, allow user work to come to harm;

145
CIT 735 MODULE 3

ii. A computer shall not waste user’s time or require users


to do more work than is strictly necessary

3.3 Design Methodologies

A design methodology describes how users, designers, and technical


systems interact. Some design methodologies treated users' cognitive
processes as predictable and quantifiable and therefore encouraged
design practitioners to apply cognitive science designing user interfaces.
While other design methodologies tend to focus on a constant feedback
and conversation between users, designers, and engineers and push for
technical systems to be wrapped around the types of experiences users
want to have, rather than wrapping user experience around a completed
system. We describe some important design methodologies as follows:

3.3.1.0 User-Centered Design

User-centered design (UCD) is a widely practiced design philosophy


based on the idea that users must take center-stage in the design of any
computer system. Users, designers and technical practitioners work
together to articulate the wants, needs and limitations of the user, and
create a system that addresses these elements. Often, user-centered
design projects are informed by ethnographic studies of the
environments in which users will be interacting with the system.

User-centered design can be characterized as a multi-stage problem


solving process that not only requires designers to analyze and foresee
how users are likely to use an interface, but also to test the validity of
their assumptions with regards to user behaviour in real world tests with
actual users. Such testing is necessary as it is often very difficult for the
designers of an interface to understand intuitively what a first-time user
of their design experiences, and what each user's learning curve may
look like.

User-centered design tries to optimize the user interface around how


people can, want, or need to work, rather than forcing the users to
change how they work to accommodate the software developers
approach. User-centered design involves simplifying the structure of
tasks, making things visible, getting the mapping right, exploiting the
powers of constraint, and designing for error.

Models of a user centered design process help software designers to


fulfill the goal of a product engineered for their users. In these models,
user requirements are considered right from the beginning and included
into the whole product cycle. Their major characteristics are the active
participation of real users, as well as an iteration of design solutions.

146
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• Cooperative design: involving designers and users on an equal


footing. This is the Scandinavian tradition of design of IT
artifacts and it has been evolving since 1970.
• Participatory design (PD): inspired by Cooperative Design and
focus on the participation of users.
• Contextual design: “customer centered design” in the actual
context, including some ideas from Participatory design.
Contextual Design (CD) is a user-centered design process
developed by Hugh Beyer and Karen Holtzblatt. It incorporates
ethnographic methods for gathering data relevant to the product,
field studies, rationalizing workflows, system and designing
human-computer interfaces. Contextual Design can be seen as an
alternative to engineering and feature driven models of creating
new systems. The Contextual Design process consists of the
following top-level steps: Contextual inquiry, Work modeling,
Consolidation, Work redesign, User Environment Design,
Prototyping and Implementation

i. Contextual Inquiry: Contextual inquiry is a technique


to capture detailed information about how users of a
product interact with the product in their normal work
environment. This information is captured by both
observations of user behavior and conversations with
the user while she or he works. A key aspect of the
technique is to let the user lead the sessions without
disruptions or guidance from the observer. Key
takeaways from the technique are to learn how
customers use features, why they use certain functions,
and why they may not use other functions.
ii. Work Modeling: Work practices are analyzed and
detailed work models are created in order to
understand the workflow. Contextual design consists of
five work models which are used to model the work
tasks and details of the working environment. These
work models are:

• Flow model - represents the coordination,


interaction and responsibilities of the people in a
certain work practice
• Sequence model - represents the required steps to
accomplish a certain activity
• Cultural model - represents the norms, influences,
and pressures that are present in the work
environment

147
CIT 735 MODULE 3

• Artifact model - represents the documents or other products that


are created while working. Artifacts often have a structure or
styling that could represent the user's way of structuring the work
• Physical model - represents the physical environment where the
work tasks are accomplished; often, there are multiple physical
models representing, e.g., office layout, network topology, or the
layout of tools on a computer display.

iii. Consolidation: Data from individual customer interviews are


analyzed in order to reveal patterns and the structure across
distinct interviews. Models of the same time can be consolidated
together (but not generalized--detail must be maintained).
Another method of processing the observations is making an
affinity diagram ("wall"), as described by Beyer & Holtzblatt:
• A single observation is written on each piece of paper
• Individual notes are grouped according the similarity of their
contents
• These groups are labeled with colored post-it notes, each color
representing a distinct level in the hierarchy
• Then the groups are combined with other groups to get the final
construct of observations in a hierarchy of up to three levels.

iv. Work redesign: Work redesign uses the consolidated data to


drive conversations about how to improve work by providing a
system that better supports the new work practice. The
redesigned work practice is captured in a vision, a story of how
customers will do their work in the new system that is being
designed [1]. A vision includes the system, its delivery, and
support structures to make the new work practice successful. The
team develops the vision in storyboards and sketches capturing
scenarios of how people will work with the new system.
Understanding the current way of working, its structure and the
complete workflow helps the design team address the problems
and design the new workflow.

v. The User Environment Design: The User Environment Design


captures the floor plan of the new system. It shows each part of
the system, how it supports the user's work, exactly what function
is available in that part, and how the user gets to and from other
parts of the system. CD uses the User Environment Design
(UED) diagram, which displays the focus areas, i.e., areas which
are visible to the user or which are relevant to the user. Focus
area can be defined further as functions in a system that supports
a certain type or part of the work. The UED also presents how the
focus areas relate to each other and shows the links between
focus areas.

148
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

vi. Test with customers: Testing the design ideas with paper
prototypes or even with more sophisticated demos before the
implementation phase helps the designers communicate with
customers about the new system and develop the design further.
Prototypes test the structure of a User Environment Design and
initial user interface ideas, as well as the understanding of the
work, before the implementation phase [2]. Depending on the
results of the prototype test, more iterations or alternative designs
may be needed.
vii. Implementations: Contextual design has primarily been used for
the design of computer information systems, including hardware
[3]
and software. [4]. Parts of contextual design have been adapted
for use as a usability evaluation method.[5] Contextual design has
also been applied to the design of digital libraries and other
learning technologies.[6][7]

All these approaches follow the ISO standard Human-centered design


processes for interactive systems (ISO 13407 Model, 1999).

UCD answers questions about users and their tasks and goals, then use
the findings to make decisions about development and design. UCD
seeks to answer the following questions:

• Who are the users of the document?


• What are the users’ tasks and goals?
• What are the users’ experience levels with the document, and
documents like it?
• What functions do the users need from the document?
• What information might the users need, and in what form do they
need it?
• How do users think the document should work?

3.3.1.1 Elements of User-Centered Design

1. Visibility: Visibility helps the user construct a mental model of


the document. Models help the user predict the effect(s) of their
actions while using the document. Important elements (such as
those that aid navigation) should be emphatic. Users should be
able to tell from a glance what they can and cannot do with the
document.

2. Accessibility: Users should be able to find information quickly


and easily throughout the document, whether it be long or short.
Users should be offered various ways to find information (such
navigational elements, search functions, table of contents, clearly
labeled sections, page numbers, color coding, etc). Navigational

149
CIT 735 MODULE 3

elements should be consistent with the genre of the document.


‘Chunking’ is a useful strategy that involves breaking
information into small pieces that can be organized into some
type meaningful order or hierarchy. The ability to skim the
document allows users to find their piece of information by
scanning rather than reading. Bold and italic words are often
used.
3. Legibility: Text should be easy to read: Through analysis
of the rhetorical situation the designer should be able to
determine a useful font style. Ornamental fonts and text in
all capital letters are hard to read, but italics and bolding
can be helpful when used correctly. Large or small body
text is also hard to read. (Screen size of 10-12 pixel sans-
serif and 12-16 pixel serif is recommended.) High figure-
ground contrast between text and background increases
legibility. Dark text against a light background is most
legible.
4. Language: Depending on the rhetorical situation certain
types of language are needed. Short sentences are helpful,
as well as short, well written texts used in explanations
and similar bulk-text situations. Unless the situation calls
for it don’t use jargon or technical terms. Many writers
will choose to use active voice, verbs (instead of noun
strings or nominal), and simple sentence structure.
5. Rhetorical Situation: A User Centered Design is focused
around the rhetorical situation. The rhetorical situation
shapes the design of an information medium. There are
three elements to consider in a rhetorical situation:
Audience, Purpose, and Context.
a. Audience: The audience is the people who will
be using the document. The designer must consider
their age, geographical location, ethnicity, gender,
education, etc.
b. Purpose: The purpose is how the document will
be used, and what the audience will be trying to
accomplish while using the document. The purpose
usually includes purchasing a product, selling ideas,
performing a task, instruction, and all types of
persuasion.
c. Context: The context is the circumstances
surrounding the situation. The context often
answers the question: What situation has prompted
the need for this document? Context also includes
any social or cultural issues that may surround the
situation.

150
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.3.2 Bodystorming

Bodystorming is a technique sometimes used in interaction design or as


a creativity technique. The idea is to imagine what it would be like if the
product existed, and act as though it exists, ideally in the place it would
be used.

3.3.3 Focus Group

A focus group is a form of qualitative research in which a group of


people are asked about their attitude towards a product, service, concept,
advertisement, idea, or packaging. Questions are asked in an interactive
group setting where participants are free to talk with other group
members.

Types of focus groups include:

• Two-way focus group - one focus group watches another focus


group and discusses the observed interactions and conclusion
• Dual moderator focus group - one moderator ensures the session
progresses smoothly, while another ensures that all the topics are
covered
• Dueling moderator focus group - two moderators deliberately
take opposite sides on the issue under discussion
• Respondent moderator focus group - one or more of the
respondents are asked to act as the moderator temporarily
• Client participant focus groups - one or more client
representatives participate in the discussion, either covertly or
overtly
• Mini focus groups - groups are composed of four or five
members rather than 6 to 12
• Teleconference focus groups - telephone network is used
• Online focus groups - computers connected via the internet are
used

3.3.4 Iterative Design

Iterative design is a design methodology based on a cyclic process of


prototyping, testing, analyzing, and refining a product or process. Based
on the results of testing the most recent iteration of a design, changes
and refinements are made. This process is intended to ultimately
improve the quality and functionality of a design. In iterative design,
interaction with the designed system is used as a form of research for

151
CIT 735 MODULE 3

informing and evolving a project, as successive versions, or iterations of


a design are implemented.

The iterative design process may be applied throughout the new product
development process. However, changes are easiest and less expensive
to implement in the earliest stages of development. The first step in the
iterative design process is to develop a prototype. The prototype should
be evaluated by a focus group or a group not associated with the product
in order to deliver non-biased opinions. Information from the focus
group should be synthesized and incorporated into the next iteration of
the design. The process should be repeated until user issues have been
reduced to an acceptable level.

The typical steps of iterative design in user interfaces are as follows:

1) Complete an initial interface design

2) Present the design to several test users

3) Note any problems had by the test user

4) Refine interface to account for/fix the problems

5) Repeat steps 2-4 until user interface problems are resolved

3.3.5 Participatory Design

Participatory design is a design approach that attempts to actively


involve the end users in the design process to help ensure that the
product designed meets their needs and is usable. In participatory
design, end-users are invited to cooperate with researchers and
developers during an innovation process.

3.3.6 Plastic Interface for Collaborative Technology Initiative


through Video Exploration

Plastic Interface for Collaborative Technology Initiative through Video


Exploration (PICTIVE) is a participatory design method used to develop
graphical user interfaces. PICTIVE is a paper mock-up technique that
allows users to participate in the development process. A PICTIVE is a
representation of a graphical user interface (GUI) or a Web page on
paper. A PICTIVE prototype gives a user a sense of what a system or a
piece of software will look like and how it will behave once it is
finished. PICTIVE enables a non-technical person to contribute ideas to
the development process.

152
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

A PICTIVE is usually made from simple office supplies like pens,


paper, Post-It stickers, and paper clips. The developer uses those
supplies to represent elements of the project, including drop-down
boxes, menu bars, and special icons. During a design session, users
manipulate the mock-up so it becomes easier for them to use. The
development team takes notes and incorporates user ideas into its work.
The development team also uses a video camera to record the physical
changes a user might make to the PICTIVE. The team then reviews the
ideas generated and incorporates them into the project. The ultimate goal
of a PICTIVE is to simplify the design process enough that non-
technical users are empowered to participate in it.

3.3.7 Task Analysis

Task analysis is the analysis of how a task is accomplished, including a


detailed description of both manual and mental activities, task and
element durations, task frequency, task allocation, task complexity,
environmental conditions, necessary clothing and equipment, and any
other unique factors involved in or required for one or more people to
perform a given task. Task analysis emerged from research in applied
behavior analysis and still has considerable research in that area.

Information from a task analysis can then be used for many purposes,
such as personnel selection and training, tool or equipment design,
procedure design (e.g., design of checklists or decision support systems)
and automation.

An interaction task is the entry of a unit of information using a hardware


or software device.

Four basic interaction tasks:

1. Position (input a position)

2. Text (input a text string)

3. Select (object identification)

4. Quantify (input a numeric value)

3.3.8 Scenario

In computing, a scenario is a narrative describing foreseeable


interactions of types of users (characters) and the system. Scenarios
include information about goals, expectations, motivations, actions and
reactions. Scenarios are neither predictions nor forecasts, but rather

153
CIT 735 MODULE 3

attempts to reflect on or portray the way in which a system is used in the


context of daily activity.

Scenarios are frequently used as part of the systems development


process. They are typically produced by usability or marketing
specialists, often working in concert with end users and developers.
Scenarios are written in plain language, with minimal technical details,
so that stakeholders (designers, usability specialists, programmers,
engineers, managers, marketing specialists, etc.) can have a common
example which can focus their discussions.

Increasingly, scenarios are used directly to define the wanted behaviour


of software: replacing or supplementing traditional Functional
requirements. In the Agile style of software development, scenarios are
written as brief User stories. In the more deliberate style of software
development, scenarios are written as structured Use cases.

Negative scenarios or misuse cases may be written to indicate likely


threats which should be countered to ensure that systems have sufficient
Security, Safety, and Reliability. These are categories of Non-functional
requirements.

Scenarios can also be used in a number of other ways:

• As vision pieces. Vision pieces provide a high level picture of an


envisioned system or product. One example is Apple's
Knowledge Navigator video.
• Scenarios may focus on the value offered by a system, showing
how it offers an advantage over the way things are. This type of
scenario may be used to 'sell' an idea within the organization that
is considering developing the system.

3.3.9 Wizard of Oz experiment

Wizard of Oz experiment is a research experiment in which subjects


interact with a computer system that subjects believe to be autonomous,
but which is actually being operated or partially operated by an unseen
human being.

The term Wizard of Oz (originally OZ Paradigm) has come into


common usage in the fields of experimental psychology, human factors,
ergonomics, linguistics, and usability engineering to describe a testing or
iterative design methodology wherein an experimenter (the “wizard”), in
a laboratory setting, simulates the behavior of a theoretical intelligent
computer application (often by going into another room and intercepting
all communications between participant and system). Sometimes this is
done with the participant’s a-priori knowledge and sometimes it is a
154
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

low-level deceit employed to manage the participant’s expectations and


encourage natural behaviors.

3.4 Display Design

Displays are human-made artifacts designed to support the perception of


relevant system variables and to facilitate further processing of that
information. Before a display is designed, the task that the display is
intended to support must be defined (e.g. navigating, controlling,
decision making, learning, entertaining, etc.). A user or operator must be
able to process whatever information that a system generates and
displays; therefore, the information must be displayed according to
principles in a manner that will support perception, situation awareness,
and understanding.

3.4.1 Thirteen Principles of Display Design

These principles of human perception and information processing can be


utilized to create an effective display design. A reduction in errors, a
reduction in required training time, an increase in efficiency, and an
increase in user satisfaction are a few of the many potential benefits that
can be achieved through utilization of these principles.

Certain principles may not be applicable to different displays or


situations. Some principles may seem to be conflicting, and there is no
simple solution to say that one principle is more important than another.
The principles may be tailored to a specific design or situation. Striking
a functional balance among the principles is critical for an effective
design.

a. Perceptual Principles

1. Make displays legible (or audible): A display’s legibility is critical


and necessary for designing a usable display. If the characters or objects
being displayed cannot be discernible, then the operator cannot
effectively make use of them.

2. Avoid absolute judgment limits: Do not ask the user to determine the
level of a variable on the basis of a single sensory variable (e.g. color,
size, loudness). These sensory variables can contain many possible
levels.

3. Top-down processing: Signals are likely perceived and interpreted in


accordance with what is expected based on a user’s past experience. If a
signal is presented contrary to the user’s expectation, more physical
evidence of that signal may need to be presented to assure that it is
understood correctly.
155
CIT 735 MODULE 3

4. Redundancy gain: If a signal is presented more than once, it is more


likely that it will be understood correctly. This can be done by
presenting the signal in alternative physical forms (e.g. color and shape,
voice and print, etc.), as redundancy does not imply repetition. A traffic
light is a good example of redundancy, as color and position are
redundant.

5. Similarity causes confusion: Use discriminable elements: Signals that


appear to be similar will likely be confused. The ratio of similar features
to different features causes signals to be similar. For example, A423B9
is more similar to A423B8 than 92 is to 93. Unnecessary similar features
should be removed and dissimilar features should be highlighted.

b. Mental Model Principles

6. Principle of pictorial realism: A display should look like the


variable that it represents (e.g. high temperature on a thermometer
shown as a higher vertical level). If there are multiple elements, they can
be configured in a manner that looks like it would in the represented
environment.

7. Principle of the moving part: Moving elements should move in a


pattern and direction compatible with the user’s mental model of how it
actually moves in the system. For example, the moving element on an
altimeter should move upward with increasing altitude.

c. Attention Based Principles

8. Minimizing information access cost: When the user’s attention is


averted from one location to another to access necessary information,
there is an associated cost in time or effort. A display design should
minimize this cost by allowing for frequently accessed sources to be
located at the nearest possible position. However, adequate legibility
should not be sacrificed to reduce this cost.

9. Proximity compatibility principle: Divided attention between two


information sources may be necessary for the completion of one task.
These sources must be mentally integrated and are defined to have close
mental proximity. Information access costs should be low, which can be
achieved in many ways (e.g. close proximity, linkage by common
colors, patterns, shapes, etc.). However, close display proximity can be
harmful by causing too much clutter.

10. Principle of multiple resources: A user can more easily process


information across different resources. For example, visual and auditory
information can be presented simultaneously rather than presenting all
visual or all auditory information.

156
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

d. Memory Principles

11. Replace memory with visual information: knowledge in the world:


A user should not need to retain important information solely in working
memory or to retrieve it from long-term memory. A menu, checklist, or
another display can aid the user by easing the use of their memory.
However, the use of memory may sometimes benefit the user rather than
the need for reference to some type of knowledge in the world (e.g. a
expert computer operator would rather use direct commands from their
memory rather than referring to a manual). The use of knowledge in a
user’s head and knowledge in the world must be balanced for an
effective design.

12. Principle of predictive aiding: Proactive actions are usually more


effective than reactive actions. A display should attempt to eliminate
resource-demanding cognitive tasks and replace them with simpler
perceptual tasks to reduce the use of the user’s mental resources. This
will allow the user to not only focus on current conditions, but also think
about possible future conditions. An example of a predictive aid is a
road sign displaying the distance from a certain destination.

13. Principle of consistency: Old habits from other displays will easily
transfer to support processing of new displays if they are designed in a
consistent manner. A user’s long-term memory will trigger actions that
are expected to be appropriate. A design must accept this fact and utilize
consistency among different displays.

SELF-ASSESSMENT EXERCISE

i. Define Human–computer interaction


ii. List and explain the types of user interface
iii. List the Human-Computer interaction Laws

3.5 Interaction design

Interaction Design (IxD) is the discipline of defining the behavior of


products and systems with which a user can interact. The practice
typically centers around "embedding information technology into the
ambient social complexities of the physical world. Interaction design
defines the behavior of an artifact or system in response to its users and
covers broad range of disciplines vis-à-vis:

i. Cognitive Psychology: Certain basic principles of cognitive


psychology provide grounding for interaction design. These

157
CIT 735 MODULE 3

include mental models, mapping, interface metaphors, and


affordances.

ii. Human Computer Interaction: Academic research in Human


Computer Interaction (HCI) includes methods for describing and
testing the usability of interacting with an interface, such as
cognitive dimensions and the cognitive walkthrough.
iii. Design Research: Interaction designers are typically informed
through iterative cycles of user research. They design with an
emphasis on user goals and experience, and evaluate designs in
terms of usability and affective influence.
iv. Architecture: As interaction designers increasingly deal with
ubiquitous computing and urban computing, the architects' ability
to make place and create context becomes a point of contact
between the disciplines.

There are six major steps in interaction design. Based on user feedback,
several iteration cycles of any set of steps may occur.

1. Design research: Using design research techniques


(observations, interviews, questionnaires, and related activities),
designers investigate users and their environment in order to learn
more about them and thus be better able to design for them.

2. Research analysis and concept generation: Drawing on a


combination of user research, technological possibilities, and
business opportunities, designers create concepts for new
software, products, services, or systems. This process may
involve multiple rounds of brainstorming, discussion, and
refinement. To help designers realize user requirements, they
may use tools such as personas or user profiles that are reflective
of their targeted user group. From these personae, and the
patterns of behavior observed in the research, designers create
scenarios (or user stories) or storyboards, which imagine a future
work flow the users will go through using the product or service.
After thorough analysis using various tools and models, designers
create a high level summary spanning across all levels of user
requirements. This includes a vision statement regarding the
current and future goals of a project.

3. Alternative design and evaluation: Once a clear view of the


problem space exists, designers develop alternative solutions with
crude prototypes to help convey concepts and ideas. Proposed
solutions are evaluated and, perhaps, merged. The end result
should be a design that solves as many of the user requirements
as possible. Among the tools that may be used for this process are
wireframing and flow diagrams. The features and functionality of

158
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

a product or service are often outlined in a document known as a


wireframe ("schematics" is an alternate term). Wireframes are a
page-by-page or screen-by-screen detail of the system, which
include notes ("annotations") describing how the system will
operate. Flow Diagrams outline the logic and steps of the system
or an individual feature.

4. Prototyping and usability testing: Interaction designers use a


variety of prototyping techniques to test aspects of design ideas.
These can be roughly divided into three classes: those that test the
role of an artifact, those that test its look and feel and those that
test its implementation. Sometimes, these are called experience
prototypes to emphasize their interactive nature. Prototypes can
be physical or digital, high- or low-fidelity.

5. Implementation: Interaction designers need to be involved


during the development of the product or service to ensure that
what was designed is implemented correctly. Often, changes need
to be made during the building process, and interaction designers
should be involved with any of the on-the-fly modifications to the
design.

6. System testing: Once the system is built, often another round of


testing, for both usability and errors ("bug catching") is
performed. Ideally, the designer will be involved here as well, to
make any modifications to the system that are required.

Interaction designers work in many areas, including software interfaces,


(business) information systems, internet, physical products,
environments, services, and systems which may combine many of these.
Each area requires its own skills and approaches, but there are aspects of
interaction design common to all.

Interaction designers often work in interdisciplinary teams as their work


requires expertise in many different domains, including graphic design,
programming, psychology, user testing, product design, etc (see below
for more related disciplines). Thus, they need to understand enough of
these fields to work effectively with specialists.

159
CIT 735 MODULE 3

3.6 Evaluations Methods in HCI

3.6.1 Usability Testing

Usability testing is a technique used to evaluate a product by testing it


on users. Usability testing focuses on measuring a human-made
product's capacity to meet its intended purpose. Examples of products
that commonly benefit from usability testing are web sites or web
applications, computer interfaces, documents, or devices. Usability
testing measures the usability, or ease of use, of a specific object or set
of objects, whereas general human-computer interaction studies attempt
to formulate universal principles.

Usability testing is a black-box testing technique. The aim is to observe


people using the product to discover errors and areas of improvement.
Usability testing generally involves measuring how well test subjects
respond in four areas: efficiency, accuracy, recall, and emotional
response. The results of the first test can be treated as a baseline or
control measurement; all subsequent tests can then be compared to the
baseline to indicate improvement.

• Performance -- How much time, and how many steps, are


required for users complete basic tasks?
• Accuracy -- How many mistakes did users make? (And were they
fatal or recoverable with the right information?)
• Recall -- How much does the user remember afterwards or after
periods of non-use?
• Emotional response -- How does the person feel about the tasks
completed? Is the person confident, stressed? Would the user
recommend this system to a user/client?

A Usability Lab is a place where Usability testing is done. It is an


environment where users are studied interacting with a system for the
sake of evaluating the system's usability. Typically, the user sits in front
of a personal computer, alongside a facilitator who gives the user tasks
to perform. Behind a one-way mirror, a number of observers watch the
interaction, make notes, and ensure the activity is recorded. Usually,
sessions will be filmed and the software will log interaction details.

Methods: Setting up a usability test involves carefully creating a


scenario, or realistic situation, wherein the person performs a list of
tasks using the product being tested while observers watch and take
notes. Several other test instruments such as scripted instructions, paper
prototypes, and pre- and post-test questionnaires are also used to gather
feedback on the product being tested. For example, to test the
attachment function of an e-mail program, a scenario would describe a

160
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

situation where a person needs to send an e-mail attachment, and ask


him or her to undertake this task. The aim is to observe how people
function in a realistic manner, so that developers can see problem areas,
and what people like. Techniques popularly used to gather data during a
usability test include think aloud protocol and eye tracking.

a. Hallway Testing: Hallway testing (or hallway usability testing)


is a specific methodology of software usability testing. Rather
than using an in-house, trained group of testers, just five to six
random people, indicative of a cross-section of end users, are
brought in to test the software (be it an application, web site,
etc.); the name of the technique refers to the fact that the testers
should be random people who pass by in the hallway. The theory,
as adopted from Jakob Nielsen's research, is that 95% of usability
problems can be discovered using this technique.

b. Remote Testing: Remote usability testing (also known as


unmoderated or asynchronous usability testing) involves the use
of a specially modified online survey, allowing the quantification
of user testing studies by providing the ability to generate large
sample sizes. Additionally, this style of user testing also provides
an opportunity to segment feedback by demographic, attitudinal
and behavioural type. The tests are carried out in the user’s own
environment (rather than labs) helping further simulate real-life
scenario testing. This approach also provides a vehicle to easily
solicit feedback from users in remote areas.

3.6.2 Heuristic Evaluation

A heuristic evaluation is a discount usability inspection method for


computer software that helps to identify usability problems in the user
interface (UI) design. It specifically involves evaluators examining the
interface and judging its compliance with recognized usability principles
(the "heuristics"). The main goal of heuristic evaluations is to identify
any problems associated with the design of user interfaces. Usability
consultant Jakob Nielsen developed this method on the basis of several
years of experience in teaching and consulting about usability
engineering. The heuristics as published in Nielsen's book Usability
Engineering are as follows

• Visibility of system status: The system should always keep users


informed about what is going on, through appropriate feedback
within reasonable time.

• Match between system and the real world: The system should
speak the users' language, with words, phrases and concepts

161
CIT 735 MODULE 3

familiar to the user, rather than system-oriented terms. Follow


real-world conventions, making information appear in a natural
and logical order.

• User control and freedom: Users often choose system functions


by mistake and will need a clearly marked "emergency exit" to
leave the unwanted state without having to go through an
extended dialogue. Support undo and redo.

• Consistency and standards: Users should not have to wonder


whether different words, situations, or actions mean the same
thing. Follow platform conventions.

• Error prevention: Even better than good error messages is a


careful design which prevents a problem from occurring in the
first place. Either eliminate error-prone conditions or check for
them and present users with a confirmation option before they
commit to the action.

• Recognition rather than recall: Minimize the user's memory load


by making objects, actions, and options visible. The user should
not have to remember information from one part of the dialogue
to another. Instructions for use of the system should be visible or
easily retrievable whenever appropriate.

• Flexibility and efficiency of use: Accelerators -- unseen by the


novice user -- may often speed up the interaction for the expert
user such that the system can cater to both inexperienced and
experienced users. Allow users to tailor frequent actions.

• Aesthetic and minimalist design: Dialogues should not contain


information which is irrelevant or rarely needed. Every extra unit
of information in a dialogue competes with the relevant units of
information and diminishes their relative visibility.

• Help users recognize, diagnose, and recover from errors: Error


messages should be expressed in plain language (no codes),
precisely indicate the problem, and constructively suggest a
solution.

• Help and documentation: Even though it is better if the system


can be used without documentation, it may be necessary to
provide help and documentation. Any such information should be
easy to search, focused on the user's task, list concrete steps to be
carried out, and not be too large.

162
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Jill Gerhardt-Powals also developed a set of cognitive principles for


enhancing computer performance listed below.

• Automate unwanted workload: free cognitive resources for high-


level tasks and eliminate mental calculations, estimations,
comparisons, and unnecessary thinking.

• Reduce uncertainty: display data in a manner that is clear and


obvious.

• Fuse data: reduce cognitive load by bringing together lower level


data into a higher-level summation.

• Present new information with meaningful aids to interpretation:


use a familiar framework, making it easier to absorb, and use
everyday terms, metaphors, etc.

• Use names that are conceptually related to function: Context-


dependent, attempt to improve recall and recognition and group
data in consistently meaningful ways to decrease search time.

• Limit data-driven tasks: Reduce the time spent assimilating raw


data and make appropriate use of color and graphics.

• Include in the displays only that information needed by the user


at a given time.
• Provide multiple coding of data when appropriate.
• Practice judicious redundancy.

3.6.3 Cognitive Walkthrough

The Cognitive walkthrough method is a usability inspection method


used to identify usability issues in a piece of software or web site,
focusing on how easy it is for new users to accomplish tasks with the
system. The method is rooted in the notion that users typically prefer to
learn a system by using it to accomplish tasks, rather than, for example,
studying a manual. The method is prized for its ability to generate
results quickly with low cost, especially when compared to usability
testing, as well as the ability to apply the method early in the design
phases, before coding has even begun. A cognitive walkthrough starts
with a task analysis that specifies the sequence of steps or actions
required by a user to accomplish a task, and the system responses to
those actions. The designers and developers of the software then
walkthrough the steps as a group, asking themselves a set of questions at
each step. Data is gathered during the walkthrough, and afterwards a
report of potential issues is compiled. Finally the software is redesigned
to address the issues identified.
163
CIT 735 MODULE 3

After the task analysis has been made the participants perform the
walkthrough by asking themselves a set of questions for each subtask.
Typically four questions are asked:

• Will the user try to achieve the effect that the subtask has? Does
the user understand that this subtask is needed to reach the user's
goal?
• Will the user notice that the correct action is available? E.g. is the
button visible?
• Will the user understand that the wanted subtask can be achieved
by the action? E.g. the right button is visible but the user does not
understand the text and will therefore not click on it.
• Does the user get feedback? Will the user know that they have
done the right thing after performing the action?

3.7 HCI Models and Laws

3.7.1 Hick’s Law

Hick's Law, named after British psychologist William Edmund Hick, or


the Hick–Hyman Law (for Ray Hyman), describes the time it takes for a
person to make a decision as a result of the possible choices he or she
has. The Hick-Hyman Law assesses cognitive information capacity in
choice reaction experiments. The amount of time taken to process a
certain amount of bits in the Hick-Hyman Law is known as the rate of
gain of information. Given n equally probable choices, the average
reaction time T required to choose among them is approximately

T = blog2(n + 1)

where b is a constant that can be determined empirically by fitting a line


to measured data; Basically log2 means that you perform binary search;
the +1 is "because there is uncertainty about whether to respond or not,
as well as about which response to make." The law can be generalized in
the case of choices with unequal probabilities pi of occurring, to

T = bH

where H is the information-theoretic entropy of the decision, defined as

where pi refers to the probability of the ith alternative yielding the


information-theoretic entropy.

164
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Hick's Law is sometimes cited to justify menu design decisions (for an


example, see [1]). However, applying the model to menus must be done
with care. For example, to find a given word (e.g. the name of a
command) in a randomly ordered word list (e.g. a menu), scanning of
each word in the list is required, consuming linear time, so Hick's law
does not apply. However, if the list is alphabetical and the user knows
the name of the command, he or she may be able to use a subdividing
strategy that works in logarithmic time.

The Hick-Hyman Law has been known to show a very obvious speed-
accuracy trade-off. If the participants are asked to move as quickly as
possible through the tasks, they will make more errors. Also if the
participants are asked to perform a task as accurately as possible, the
task will take much longer to complete.

3.7.2 Fitts’ Law

Fitts's law (often cited as Fitts' law since it was proposed by Paul Fitts in
1954) is a model of human movement in human-computer interaction
and ergonomics which predicts that the time required to rapidly move to
a target area is a function of the distance and the size of the target. Fitts's
law is used to model the act of pointing, either by physically touching an
object with a hand or finger, or virtually, by pointing to an object on a
computer display using a pointing device). Fitts's law has been
formulated mathematically in several different ways. One common form
is the Shannon formulation for movement along a single dimension:

where:

• T is the average time taken to complete the movement.


(Traditionally, researchers have used the symbol MT for this, to
mean movement time.)
• a represents the start/stop time of the device and b stands for the
inherent speed of the device. These constants can be determined
experimentally by fitting a straight line to measured data.
• D is the distance from the starting point to the center of the target.
(Traditionally, researchers have used the symbol A for this, to
mean the amplitude of the movement.)
• W is the width of the target measured along the axis of motion. W
can also be thought of as the allowed error tolerance in the final
position, since the final point of the motion must fall within ±W⁄2
of the target's center.

165
CIT 735 MODULE 3

From the equation, we see a speed-accuracy trade off associated with


pointing, whereby targets that are smaller and/or further away require
more time to acquire.

Fitts's law is an unusually successful and well-studied model.


Experiments that reproduce Fitts's results and/or that demonstrate the
applicability of Fitts's law in somewhat different situations are not
difficult to perform. The measured data in such experiments often fit a
straight line with a correlation coefficient of 0.95 or higher, a sign that
the model is very accurate.

Since the advent of graphical user interfaces, Fitts's law has been applied
to tasks where the user must position a mouse cursor over an on-screen
target, such as a button or other widget. Fitts's law models both point-
and-click and drag-and-drop actions. Dragging has a lower IP associated
with it, because the increased muscle tension makes pointing more
difficult.

In its original and strictest form:

• It applies only to movement in a single dimension and not to


movement in two dimensions (though it is successfully extended
to two dimensions in the Accot-Zhai steering law);
• It describes simple motor response of, say, the human hand,
failing to account for software acceleration usually implemented
for a mouse cursor;
• It describes untrained movements, not movements that are
executed after months or years of practice (though some argue
that Fitts's law models behaviour that is so low level that
extensive training doesn't make much difference).

If, as generally claimed, the law does hold true for pointing with the
mouse, some consequences for user-interface design include

• Buttons and other GUI controls should be a reasonable size; it is


relatively difficult to click on small ones.
• Edges and corners of the computer display (e.g., "Start" button in
the Luna theme of Windows XP and Apple & Spotlight menus of
Mac OS X) are particularly easy to acquire because the pointer
remains at the screen edge regardless of how much further the
mouse is moved, thus can be considered as having infinite width.
• Pop-up menus can usually be opened faster than pull-down
menus, since the user avoids travel.
• Pie menu items typically are selected faster and have a lower
error rate than linear menu items, for two reasons: because pie
menu items are all the same, small distance from the centre of the

166
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

menu; and because their wedge-shaped target areas (which


usually extend to the edge of the screen) are very large.

Fitts's law remains one of the few hard, reliable human-computer


interaction predictive models, joined more recently by the Accot-Zhai
steering law, which is derived from Fitts's law.

The logarithm in Fitts's law is called the index of difficulty ID for the
target, and has units of bits. We can rewrite the law as

where

Thus, the units for b are time/bit; e.g., ms/bit. The constant a can be
thought of as incorporating reaction time and/or the time required to
click a button.

The values for a and b change as the conditions under which pointing is
done are changed. For example, a mouse and stylus may both be used
for pointing, but have different constants a and b associated with them.

An index of performance IP (also called throughput TP), in bits/time,


can be defined to characterize how quickly pointing can be done,
independent of the particular targets involved. There are two
conventions for defining IP: one is IP = 1/b (which has the disadvantage
of ignoring the effect of a), the other is IP = IDaverage/MTa verage (which
has the disadvantage of depending on an arbitrarily chosen "average"
ID). For a discussion of these two conventions, see Zhai (2002).
Whatever definition is used, measuring the IP of different input devices
allows the devices to be compared with respect to their pointing
capability.

Slightly different from the Shannon formulation is the original


formulation by Fitts:

The factor of 2 here is not particularly important; this form of the ID can
be rewritten with the factor of 2 absorbed as changes in the constants a,
b. The "+1" in the Shannon form, however, does make it different from
Fitts's original form, especially for low values of the ratio D/W. The

167
CIT 735 MODULE 3

Shannon form has the advantage that the ID is always non-negative, and
has been shown to better fit measured data.

3.7.3 Steering Law

The steering law is a predictive model of how quickly one may navigate,
or steer, through a 2-dimensional tunnel. The tunnel can be thought of as
a path or trajectory on a plane that has an associated thickness or width,
where the width can vary along the tunnel. The goal of a steering task is
to navigate from one end of the tunnel to the other as quickly as
possible, without touching the boundaries of the tunnel. A real world
example that approximates this task is driving a car down a road that
may have twists and turns, where the car must navigate the road as
quickly as possible without touching the sides of the road. The steering
law predicts both the instantaneous speed at which we may navigate the
tunnel, and the total time required to navigate the entire tunnel.

The steering law is a predictive model of human movement, concerning


the speed and total time with which a user may steer a pointing device
(such as a mouse or stylus) through a 2D tunnel presented on a screen
(i.e. with a bird's eye view of the tunnel), where the user must travel
from one end of the path to the other as quickly as possible, while
staying within the confines of the path. One potential practical
application of this law is in modelling a user's performance in navigating
a hierarchical cascading menu.

In its general form, the steering law can be expressed as

where T is the average time to navigate through the path, C is the path
parameterized by s, W(s) is the width of the path at s, and a and b are
experimentally fitted constants. In general, the path may have a
complicated curvilinear shape (such as a spiral) with variable thickness
W(s).

3.7.4 Goals, Operators, Methods and Selections Rules


Goals, Operators, Methods, and Selection rules (GOMS), is a kind of
specialized human information processor model for human computer
interaction observation. GOMS reduces a user's interaction with a
computer to its elementary actions (these actions can be physical,
cognitive or perceptual). Using these elementary actions as a framework
an interface can be studied. There are several different GOMS variations

168
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

which allow for different aspects of an interface to be accurately studied


and predicted.

For all of the variants, the definitions of the major concepts are the
same.

Goals are what the user intends to accomplish.

Operators are actions that are performed to get to the goal.

Methods are sequences of operators that accomplish a goal. There can


be more than one method available to accomplish a single goal, if this is
the case then selection rules are used to describe when a user would
select a certain method over the others.

Selection rules are often ignored in typical GOMS analyses. There is


some flexibility for the designers/analysts definition of all of these
entities. For instance, one person's operator may be another’s goal. The
level of granularity is adjusted to capture what the particular evaluator is
examining.

A GOMS estimate of a particular interaction can be calculated with little


effort, at little cost, and in a short amount of time. The average Methods-
Time Measurement data for each specific task has been previously
measured experimentally to a high degree of accuracy. With a careful
investigation into all of the detailed steps necessary for a user to
successfully interact with an interface, the time measurement of how
long it will take a user to interact with that interface is a simple
calculation. Summing the times necessary to complete the detailed steps
provides an estimate for how long it will take a user to successfully
complete the desired task.

All of the GOMS techniques provide valuable information, but they all
also have certain drawbacks. None of the techniques address user
unpredictability - such as user behaviour being affected by fatigue,
social surroundings, or organizational factors. The techniques are very
explicit about basic movement operations, but are generally less rigid
with basic cognitive actions. It is a fact that slips cannot be prevented,
but none of the GOMS models allow for any type of error. Further, all of
the techniques work under the assumption that a user will know what to
do at any given point - so they apply only to expert users, not novices.

3.7.5 Keystroke-Level Model

Keystroke-Level Model (KLM or KLM-GOMS), is a hard science


approach to human–computer interaction (HCI). The Keystroke-Level
Model is an 11-step method that can be used by individuals or

169
CIT 735 MODULE 3

companies seeking ways to estimate the time it takes to complete simple


data input tasks using a computer and mouse. By using KLM-GOMS,
individuals often find more efficient or better ways to complete a task
simply by analyzing the steps required in the process and rearranging or
eliminating unneeded steps.

It is designed to be easier to use than other GOMS methods, such that


companies who cannot afford human–computer interaction specialists
can use it. KLM-GOMS is usually applied in situations that require
minimal amounts of work and interaction with a computer interface or
software design. The calculations and the number of steps required to
accurately compute the overall task time increase quickly as the number
of tasks involved increases. Thus, KLM-GOMS is best suited to
evaluate and time specific tasks that require, on average, less than 5
minutes to complete.

3.8 Future Developments

The means by which humans interact with computers continues to


evolve rapidly. Human–computer interaction is affected by the forces
shaping the nature of future computing. These forces include:

• Decreasing hardware costs leading to larger memories and faster


systems
• Miniaturization of hardware leading to portability
• Reduction in power requirements leading to portability
• New display technologies leading to the packaging of
computational devices in new forms
• Specialized hardware leading to new functions
• Increased development of network communication and
distributed computing
• Increasingly widespread use of computers, especially by people
who are outside of the computing profession
• Increasing innovation in input techniques (i.e., voice, gesture,
pen), combined with lowering cost, leading to rapid
computerization by people previously left out of the "computer
revolution."
• Wider social concerns leading to improved access to computers
by currently disadvantaged groups

The future for HCI is expected to include the following characteristics:

Ubiquitous communication: Computers will communicate through


high speed local networks, nationally over wide-area networks, and
portably via infrared, ultrasonic, cellular, and other technologies. Data

170
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

and computational services will be portably accessible from many if not


most locations to which a user travels.

High functionality systems: Systems will have large numbers of


functions associated with them. There will be so many systems that most
users, technical or non-technical, will not have time to learn them in the
traditional way (e.g., through thick manuals).

Mass availability of computer graphics: Computer graphics


capabilities such as image processing, graphics transformations,
rendering, and interactive animation will become widespread as
inexpensive chips become available for inclusion in general
workstations.

Mixed media: Systems will handle images, voice, sounds, video, text,
formatted data. These will be exchangeable over communication links
among users. The separate worlds of consumer electronics (e.g., stereo
sets, VCRs, televisions) and computers will partially merge. Computer
and print worlds will continue to cross assimilate each other.

High-bandwidth interaction: The rate at which humans and machines


interact will increase substantially due to the changes in speed, computer
graphics, new media, and new input/output devices. This will lead to
some qualitatively different interfaces, such as virtual reality or
computational video.

Large and thin displays: New display technologies will finally mature
enabling very large displays and also displays that are thin, light weight,
and have low power consumption. This will have large effects on
portability and will enable the development of paper-like, pen-based
computer interaction systems very different in feel from desktop
workstations of the present.

Embedded computation: Computation will pass beyond desktop


computers into every object for which uses can be found. The
environment will be alive with little computations from computerized
cooking appliances to lighting and plumbing fixtures to window blinds
to automobile braking systems to greeting cards. To some extent, this
development is already taking place. The difference in the future is the
addition of networked communications that will allow many of these
embedded computations to coordinate with each other and with the user.
Human interfaces to these embedded devices will in many cases be very
different from those appropriate to workstations.

Augmented reality: A common staple of science fiction, augmented


reality refers to the notion of layering relevant information into our
vision of the world. Existing projects show real-time statistics to users
171
CIT 735 MODULE 3

performing difficult tasks, such as manufacturing. Future work might


include augmenting our social interactions by providing additional
information about those we converse with.

Group interfaces: Interfaces to allow groups of people to coordinate


will be common (e.g., for meetings, for engineering projects, for
authoring joint documents). These will have major impacts on the nature
of organizations and on the division of labor. Models of the group
design process will be embedded in systems and will cause increased
rationalization of design.

User Tailorability: Ordinary users will routinely tailor applications to


their own use and will use this power to invent new applications based
on their understanding of their own domains. Users, with their deeper
knowledge of their own knowledge domains, will increasingly be
important sources of new applications at the expense of generic systems
programmers (with systems expertise but low domain expertise).

Information Utilities: Public information utilities (such as home


banking and shopping) and specialized industry services (e.g., weather
for pilots) will continue to proliferate. The rate of proliferation will
accelerate with the introduction of high-bandwidth interaction and the
improvement in quality of interfaces.

SELF-ASSESSMENT EXERCISE

i. What is the general function of a user interface, list and explain


the types of user interface?
ii. List and explain the principles of display design

4.0 CONCLUSION

Good design defuses the tension between functional and aesthetic goals.
In any real-life situation there are always competing pressures on cost,
quality and time. An understanding of cognitive design can assist in
creating high-quality, user-centered objects, interfaces and multimedia.

5.0 SUMMARY

In this unit, we have learnt that:

• the basis of Human-Computer Interaction is cognitive science


• various interfaces are used in Human-Computer Interaction
• there are some principles behind the user interface design
• the various design method used in the design of the user interface
design

172
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• human-Computer Interaction has some laws and rules guiding its


design and usages.

6.0 TUTOR-MARKED ASSIGNMENT

i. Explain the effect of the display design on Human-Computer


interaction
ii. Explain the effect of the Human-Computer interaction laws and
elements of user-centered design in the study.
iii. How does Human-Computer Interaction improve the interaction
between user and computer machine?

7.0 REFERENCES/FURTHER READING

Constantine Stephanidis (Ed.): Universal Access in Human-Computer


Interaction. Applications and Services, 5th International
Conference, UAHCI 2009, Held as Part of HCI International
2009, San Diego, CA, USA, July 19-24, 2009. Proceedings, Part
III. Lecture Notes in Computer Science 5616 Springer 2009,
ISBN978-3-642-02712-3

Constantine Stephanidis (Ed.): Universal Access in Human-Computer


Interaction. Addressing Diversity, 5th International Conference,
UAHCI 2009, Held as Part of HCI International 2009, San Diego,
CA, USA, July 19-24, 2009. Proceedings, Part I. Lecture Notes in
Computer Science 5614 Springer 2009, ISBN 978-3-642-02706-2

Constantine Stephanidis (Ed.): Universal Access in Human-Computer


Interaction. Intelligent and Ubiquitous Interaction Environments,
5th International Conference, UAHCI 2009, Held as Part of HCI
International 2009, San Diego, CA, USA, July 19-24, 2009.
Proceedings, Part II. Lecture Notes in Computer Science 5615
Springer 2009, ISBN 978-3-642-02709-3

Dorin, A & McCormack, J. (2000). FIT5900 : Introduction to


Multimedia Programming. FIT5900 courseware,
Semester 1, Caulfield Campus, 2000
http://www.csse.monash.edu.au/%7Ecema/courses/FIT5900/inde
x.html

Gavriel Salvendy, Michael J. Smith (Eds.): Human Interface and the


Management of Information. Information and Interaction,
Symposium on Human Interface 2009, Held as part of HCI
International 2009, San Diego, CA, USA, July 19-24, 2009,
Proceedings, Part II. Lecture Notes in Computer Science 5618
Springer 2009, ISBN 978-3-642-02558-7

173
CIT 735 MODULE 3

James Khazar (2009). Arts 21: Introduction to Computer for Arts.


Licensed under a Creative Commons Attribution-
Noncommercial-No Derivative Works 3.0 Licences.
http://www.khazar.com/academics/portal/ucsc/2008fall/art21/

Jones, M. G. & Okey, J. R. Interface Design for Computer-based


Learning Environments. Instructional Technology Research
Online

Julie A. Jacko (Ed.): Human-Computer Interaction. New Trends, 13th


International Conference, HCI International 2009, San Diego,
CA, USA, July 19-24, 2009, Proceedings, Part I. Lecture Notes in
Computer Science 5610 Springer 2009, ISBN 978-3-642-02573-0

Julie A. Jacko (Ed.): Human-Computer Interaction. Novel Interaction


Methods and Techniques, 13th International Conference, HCI
International 2009, San Diego, CA, USA, July 19-24, 2009,
Proceedings, Part II. Lecture Notes in Computer Science 5611
Springer 2009, ISBN 978-3-642-02576-1

Julie A. Jacko (Ed.): Human-Computer Interaction. Ambient,


Ubiquitous and Intelligent Interaction, 13th International
Conference, HCI International 2009, San Diego, CA, USA, July
19-24, 2009, Proceedings, Part III. Lecture Notes in Computer
Science 5612 Springer 2009, ISBN 978-3-642-02579-2

Julie A. Jacko (Ed.): Human-Computer Interaction. Interacting in


Various Application Domains, 13th International Conference,
HCI International 2009, San Diego, CA, USA, July 19-24, 2009,
Proceedings, Part IV. Lecture Notes in Computer Science 5613
Springer 2009, ISBN 978-3-642-02582-2

Lan Anh Tran and Shoba Tegginmath (2002). Applications of


Multimedia in Library and Information Services: Principles of
Multimedia and Electronic Resources. Information Networks for
the Future. Workshop, Victoria University of Wellington, Hanoi
2 – 6 December 2002

Marshall, D. (2008), Multimedia. Module CM0340.


http://www.cs.cf.ac.uk/Dave/Multimedia/

Masaaki Kurosu (Ed.): Human Centered Design, First International


Conference, HCD 2009, Held as Part of HCI International 2009,
San Diego, CA, USA, July 19-24, 2009, Proceedings. Lecture
Notes in Computer Science 5619 Springer 2009, ISBN 978-3-64

174
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Michael J. Smith, Gavriel Salvendy (Eds.): Human Interface and the


Management of Information. Designing Information
Environments, Symposium on Human Interface 2009, Held as
Part of HCI International 2009, San Diego, CA, USA, July 19-24,
2009, Procceedings, Part I. Lecture Notes in Computer Science
5617 Springer 2009, ISBN 978-3-642-02555-6

Mike Christel and Alex Hauptmann (2002). Introduction to Multimedia


and MSEC 20-791 http://www.cs.cmu.edu/~christel/MM2002/

Shneiderman, B. & Plaisant, C. (2004). Designing the User Interface :


Strategies for Effective Human-Computer Interaction, 4th Ed.
Addison-Wesley

Shneiderman, B., Plaisant, C., Cohen, M.& Jacobs, S. (2009). Designing


the User Interface : Strategies for Effective Human-Computer
Interaction, 5th Ed. Pearson Education, Inc Addison-Wesley

Introduction to Human/Computer Interaction CS 5540/6540 by Rich


Riesenfeld Fall 2009 www.eng.utah.edu/~cs5540/

CSE3325: Lecture 4 – Introduction to HCI


csse.monash.edu.au/~ce.../lect4

175
CIT 735 MODULE 3

UNIT 3 STRUCTURE AND TOOLS

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Multimedia Structures
3.1 Different Types of Multimedia Structure
3.1.1 Linear Structure
3.1.2 Hierarchical Structure
3.1.3 Multi-Track Structure
3.1.4 Interactive Stories Structure
3.1.5 Web Stories Structure
3.1.6 Virtual Space Structure
3.1.7 Modular Structure
3.1.8 Simulation
3.2 Authoring Tools
3.2.1 Features of Authoring Tools:
3.2.2 Categories of Authoring Tools
3.3 Authoring Metaphor
3.4 Types of Authoring Tools
3.5 Authoring Capabilities
3.6 Examples of Authoring Tools
3.7 Software Tools
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Multimedia presentations have structure, design layout or architecture


and there are numerous ways this can be done. The designer breaks the
multimedia contents into appropriately sub-sections and chooses a
design layout for arranging these contents. The appropriate organization
scheme and structure will depend on the user's expectations/needs and
the kind of information to be organized. There are various authoring
tools for implementing the chosen design layout.

176
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

2.0 OBJECTIVES

At the end of the unit, you should be able to

• identify the different ways multimedia presentations can be


broken down into appropriate structures
• organize multimedia contents using special tools that designer
uses for implementing the architecture
• explain how well-organized contents enable the multimedia
presentations to meet its goals & convey its message
• state and discuss the various options available for viewing or
searching the multimedia presentation’s contents
• describe how multimedia products are created and authored and
list what kinds of multimedia authoring tools to use in developing
the multimedia presentation
• explain how various multimedia authoring tools work.

3.0 MULTIMEDIA STRUCTURES

Multimedia presentations uses design structure for arranging the various


sub-sections of the contents of the multimedia presentation. There are
different schemes for determining how multimedia presentation can be
divided into appropriate sub-sections to enhance comprehension of the
inherent information, stimulates viewers’ interest, reduces eyes strain,
creates visual appeals and achieve some measure of effectiveness.

Navigational maps or flowcharts show overall structure of multimedia


presentations. Navigational structure determines how user can go
through the overall content while activity structure determines how
learner interacts within a local activity on a screen. E-learning designers
especially need to plan navigational and activity structures because
different models of structure exist and they lend themselves to different
multimedia authoring tools. Structure may be linear, hierarchical, multi-
linear, web graph, or composite.

3.1 Different Types of Multimedia Structure

3.1.1 Linear Structure

The Linear structure present multimedia content in a sequential order


and seem less interactive but under user’s control. Linear structures are
not limited by size when they are created which implies that they are
able to expand and contract dynamically. Contents are ordered by
position in form of an array and are not accessed directly but are
referenced by their position. Thus user’s can access content sequentially
which might requires visiting a site that he does not have interest in

177
CIT 735 MODULE 3

visiting. This consumes user’s time because to access a multimedia


content (site), the user will have to traverse through the whole
multimedia presentation sequentially until he gets to the desired content
(site).

Terminating
sequence

looping sequence
with a "digression"
Figure Linear Structure

3.1.2 Hierarchical Structure

The hierarchical structure is a kind of non-linear structure which group


multimedia contents into different levels in forms of a tree. The main
menu display is the root of the tree while the sub-menus form the
branches. Two common examples of trees are binary tree and heap tree.
Accessing multimedia contents in hierarchical structures provides a
more efficient means than the linear structure. Two major ways which
contents can be accessed are preorder and postorder algorithms.

In preorder algorithm, the root is listed first while the branches are listed
from left to right order of their roots. The branches are listed first and
finally the root in the postorder algorithm.

Deep style hierarchy Broad style hierarchy

Figure Hierarchical Structure

178
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1.3 Multi-Track Structure

Multi-track involves multiple streams of synchronous media. User can


switch between different channels in focus, or collage several together.
For instance, user can view a full-screen movie, or call up a sidebar with
text and/or control buttons.

3.1.4 Interactive Stories Structure

Interactive stories are stories which affect eye movements and also
influence users’ behaviour. User controls order of outcome of story. A
typical example is the branching story structure which starts with
common trunk and allows user to choose between different branches.
Branching structures are more expensive to produce since

3.1.5 Web Stories Structure

Web stories involve initial sequence, set the stage, introduce characters,
etc. User then explores a “web” of places to collect clues and meet more
characters. When user solve a key to puzzle, another cut scene advances
the story some more, opening the doors to new web of places.

Web Database
The database model
requires data to be
sectioned into strictly
defined records. It is
therefore most suitable
for homogeneous data.

This can then be


accessed via user queries
Figure Web Stories

3.1.6 Virtual Space Structure

A virtual space is a familiar multidimensional space, such as a room or a


book, which users know intuitively how to navigate through.

3.1.7 Modular Structure

Modular involve independent media objects which user can manipulate.


For example, Lego allows different characters, objects to be built
combining separate independent units together to make a whole. Each
unit has behaviors that combine to create unpredictable interactions. The
modular structure is a constructive approach which enables designers to

179
CIT 735 MODULE 3

build multimedia on top of one another. This approach is quite useful in


e-learning because it permits learners to learn at his space, and ensure
modularity of knowledge (i.e. from simple topics to complex topics).

3.1.8 Simulation

Simulation involves building a model of some slice of the real or


imaginary world and then run it. E-learning applications such as
immersive training or testing applications are especially suitable for
simulations.

3.2 Authoring Tools

Authoring tools (or authoring systems) are multimedia development


tools by which various media components are integrated into a structure
and flow. These are tools for making a complete multimedia
presentation where users usually have a lot of interactive controls. In
other words, they are software for transforming multimedia design into
multimedia presentations. Authoring tools match with different
architectural styles.

Authoring tools are computer programs which have pre-programmed


elements for the development of interactive multimedia software
presentations. They vary widely in orientation, capabilities, and learning
curve and there is no such thing as a completely point-and-click
automated authoring system; some knowledge of heuristic thinking and
algorithm design is necessary. It is a speeded-up form of programming
which require the understanding of how programs work.

It generally takes about 1/8th the time to develop an interactive


multimedia project, such as a Computer Based Training (CBT) program,
in an authoring system as opposed to programming it in compiled code.
This means 1/8 the cost of programmer time and likely increased re-use
of code (assuming that you pass this project's code to the next CBT
project, and they use a similar or identical authoring system). However,
the content creation (graphics, text, video, audio, animation, etc.) is not
generally affected by the choice of an authoring system; any production
time gains here result from accelerated prototyping, not from the choice
of an authoring system over a compiled language.

3.2.1 Features of Authoring Tools

Most Authoring tools have the following features in their development


interface:
1. A list of media events: Occurrences of scene, images, sound,
action in the end product.

180
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

2. Iconic flowchart / timeline: Controls event sequence.


3. Card stack: Easy viewing if there is too many item on
screen.
4. A series of figures: List of images or objects in the project
and information about objects

3.2.2 Categories of Authoring Tools

Authoring tools can be categorized into

1. Presentation software (e.g. Microsoft PowerPoint): This enables


users to create and deliver business presentations in the form of
the slide show. Each major heading forms the beginning of a new
slide while templates are used to determine how the heads and
subheads are formatted and displayed over backgrounds,
including position, size, font style and colour.
2. Tools for creating production (mTropolis / AppleMedia Tool /
MediaForge): Typically oriented toward producing content that
is more ambitious, interactive & dynamic than the slide-show
level. Usually integrate all types of' multimedia data into a multi-
track timeline that determines the evolution of events.
Interactivity takes the form of conditional branching that can
make navigation decisions based on user input and other
conditions. Production software creates dynamic content.
3. Interactive training and education (Macromedia Flash,
Authorware & Director): They are used to create education or
training content and were designed primarily to present
information in an Interactive book. Multimedia-oriented
programming languages such as Visual Basic represent another
authoring alternative which offers the higher flexibility,
performance speed and power.

Some authoring tools can fit into more than one category

3.3 Authoring Metaphor

The authoring metaphor is the methodology by which the authoring tool


accomplishes its task. Most media integration tools will take or use one
of the following metaphors:

1. Movie screen metaphor: Movie refers to the product of


the authoring which can be Linear or Interactive movie.
Also refers to authoring tools paradigm that contains
Cast/Score/Scripting. E.g. Macromedia Director

181
CIT 735 MODULE 3

2. Slide show metaphor: A linear presentation. E.g. Microsoft


PowerPoint.
3. Linked screens: A group of scene linked together.

SELF-ASSESSMENT EXERCISE

i. Briefly explain Multimedia presentation using their different


structures.
ii. List the different types of multimedia structure.
iii. Why simulation?

3.4 Types of Authoring Tools

1. Cards and Stacks


Cards are developed that have different elements associated with
them. Cards are arrange into an indexed-stacks of cards which
combined together to make up a book. The Card and Stacks
paradigm provides a great deal of power but suffers from the
index-card structure. It is excellently suited for Hypertext
applications, and supremely suited for navigation intensive game
applications and entertainment applications. Examples of
authoring tools in this group include HyperCard (Mac) and
ToolBook (Mac / Windows). Thus cards can link to other cards in
a stack structure, and stacks link to other stacks. Cards are good
for creating hierarchical and linear structures, simple interactive
stories and simulations.

2. Time-based Tools
Time-based tools are the most popular authoring tools and uses
“timeline” for organizing activities. They also use “framing”
which is timely adjusted depending on the frame size. Example:-
Macromedia Director / Flash (Mac/Windows). Metaphor is a
film director constructing a title out of scenes in a movie set.
Director assembles a cast of characters while the characters
(sprites) move on a stage with plots created as a score of frames.
Time-based tools are good for linear, multi-track or hierarchical
structures, especially with animation, and also strong at arranging
synchronization of sprite behaviors.

3. Icon-Based Tools
Icons are gathered along the line that provides visual
development and flow chart created to show the organisation of
icons or elements: including activity list, results and done with
dragging the icon/elements along the lines. Each Icon represents
a particular event e.g. button, graphics, text, video. Metaphor is a
flow line onto which developer drags elements.

182
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

This tends to be the fastest authoring tools in development time


and is best suited for rapid prototyping and short-development
time projects, linear structures and hierarchical structures
supported with “maps” and “frames”. Menu structures are
possible with user interactions while different elements can
execute concurrently; thus multi-tracking structures and
animations are possible. Many of these tools are also optimized
for developing Computer-Based Training (CBT).

The core of the paradigm is the Icon Palette, containing the


possible functions/interactions of a program, and the Flow Line,
which shows the actual links between the icons. These programs
tend to be the slowest runtimes, because each interaction carries
with it all of its possible permutations; the higher end packages,
such as Authorware (Mac/Windows) and IconAuthor (Windows).
Authorware and IconAuthor use visual programming by
combining media building blocks.

4. Object-Oriented Tools
Support environment based on object and their classes. Every
object is modified based on the attributes, properties, functions &
modifiers defined for it. Objects are arranged in hierarchical
fashion (parent-child relationship) which allows an object to
inherit properties of its parent object. Inheritance is a transitive
relationship which involves dynamic binding; objects determine
what behaviors mean at run-time. These tools are especially
suitable for modular or constructive models and simulations.
Examples of the tools include mTropolis (Mac/Windows),
AppleMedia Tool (Mac/Windows) and MediaForge (Windows).
Others are artifacts using self-contained units with well-defined
interfaces including Smalltalk, C++. Python, Java, ActionScript
3.0 and ScriptX.

5. Scripting Languages
The Scripting metaphor is the authoring tool similar in form to
the traditional programming style. The metaphor is that of a
programming language, which specifies multimedia elements by
filename, sequencing, hotspots, synchronization, etc. A powerful,
object-oriented scripting language is usually the centerpiece of
such a system; in-program editing of elements (still graphics,
video, audio, etc.) tends to be minimal or non-existent. Scripting
languages do vary; check out how much the language is object-
based or object-oriented. The scripting metaphor tends to be
longer in development time as earlier stated but is generally more
interactive powerful. Since most Scripting languages are
interpreted, instead of compiled, the runtime speed gains over

183
CIT 735 MODULE 3

other authoring methods are minimal. The media handling can


vary widely. The Apple's HyperTalk for HyperCard,
Assymetrix's OpenScript for ToolBook and Lingo scripting
language of Macromedia Director are examples of a Multimedia
scripting language. Authorware and Flash also have scripting
languages

6. General Programming Languages


Visual Basic and Java use an event-driven model: code attached
to objects waits for user- or system-triggered events, then springs
into action. Java comes with a rich library of classes, including
Swing and Java Media Objects library. C# (pronounces C-ash) is
Microsoft’s answer to Java and is good for simulations and may
improve performance.

3.5 Authoring Capabilities

Authoring tools should possess the following capabilities:

1. Interactivity
• Simple Branching: Ability to jump to any part of the
product. E.g:- by mouse click, keyboard input.
• Conditional Branching: Ability to jump to any part of
products if agreed to certain condition (statement IF-
THEN).
• Structured Language: complex programming to enable the
interactivity and navigation.
2. Playback
• Ability to see and to test the ongoing or the completed
project.
3. Editing
• generally, authoring tools are capable on text and image
editing;
• capable of doing other editing too, depending on the
software used
4. Programming / Scripting
• Programming used for flexibility.
• Authoring tools offers an easier and less time consuming
to develop:-
• Visual Programming - Using icon, button, drag & drop
graphic, audio. Eg: Authorware
• Scripting - programming language for authoring tools. Eg:
Director = LINGO, Flash = ActionScript
• Support basic programming language - C, BASIC
• to make it more flexible

184
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• Document Development Tools


• Authoring tools that able to merge documents,
indexing, search engine and linking
5. Cross Platform
• Ability to perform on all platforms including MAC and
Windows.
6. Internet Playability
• Ability to create the output for web enabled application.
Eg:- HTML
7. Delivery/Distribution
8. Able to create a ‘RUN TIME’ mode.
9. This will exclude the need of the authoring tools during
execution.
10. Project organization
• FLOWCHARTING and STORYBOARDING availability:
this will help on configuring interactivity

3.6 Examples of Authoring Tools

1. Macromedia Director

• Movie metaphor (the cast includes bitmapped sprites, scripts,


music, sounds, and palettes, etc.)
• Can accept almost any bitmapped file formats
• Lingo script language with own debugger allows more control
including external devices, e.g., VCRs and video disk players
• Ready for building more interactivities (buttons, etc.)
• Currently in version 7.0, this popular general market product
follows the cast/score/scripting paradigm, which makes it the tool
of choice for animation content. Its roots as a cel- and sprite-
animation program are unmistakable; and its inclusion of Lingo,
its object-based scripting language, has made it the animation-
capable program to beat. The AfterBurner compression Xtra
creates Shockwave files, allowing Web playback.

2. Authorware

• Professional multimedia authoring tool


• Supports interactive applications with hyperlinks, drag-and-drop
controls, and integrated animation
• Compatibility between files produced from PC version and MAC
version

185
CIT 735 MODULE 3

Other authoring tools include:

• Microcosm : Multicosm, Ltd. ; DOS, Windows Microcosm is a


Hypermedia Linkage authoring system.
• Question Mark : Question Mark Computing Ltd ; DOS, Mac,
Windows; WWW (via Perception) Question Mark is optimized
for Electronic Assessment production.
• Emblaze Creator : Geo International ; JavaScript, Mac,
Windows95, WWW.

Emblaze Creator 2.5 is a cast/score/scripting tool which is designed for


Web-based playback of interactive multimedia.

• Flash: Macromedia; Mac, Windows95, NT, WWW (via Flash


Player).

Flash 3.0 is a cast/score/scripting tool, which primarily uses vector


graphics (and can create vector graphics from imported bitmaps). It is
optimized for Web delivery, and is especially common for banner adds
and small interactive web deliverables.

• HyperCard: Apple Computer; Mac, WWW (via LiveCard!).

HyperCard is a card/scripting authoring system currently in version


2.4.1. It runs natively on both 68K and PowerMacintosh machines, and
is widely used because of its easy availability at a low price. Its largest
drawback is the lack of integrated color; current color implementation is
via the ColorTools XCMD set (included) or via third-party XCMDs.

• HyperGASP : Caliban Mindwear.

HyperGASP is a card/scripting authoring system currently in version


3.0; the newest version no longer requires HyperCard. Supports export
to HTML for Web authoring.

• HyperStudio ; Roger Wagner Publishing ; Mac, Windows,


WWW (via HyperStudio plug-in).

HyperStudio is a card/scripting paradigm authoring system, optimized


for and focussed on the educational market.

• IconAuthor: Asymetrix; Windows, NT, Solaris, UNIX, WWW


(via Windows).

IconAuthor follows the iconic/flow control paradigm. It is notable for its


SmartObject editor, which tags content files (still graphics, RTF text,
etc.) for interactivity. It has the option to either embed content files or

186
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

leave them external in specified directories. The biggest strength of this


program is its included data handling, which makes it unparalleled for
CBT data tracking. The latest version should also provide WWW
porting of existing content. Avoid its internal "Move Object" path
animation feature due to jerky response - use a .FLC or .AVI instead

3.7 Software Tools

a. Music Sequencing and Notation: Cakewalk, Cubase, acromedia


Sound Edit, etc;
b. Digital Audio: Cool Edit, Sound Forge, Pro Tools, etc;
c. Graphics and Image Editing: Adobe Illustrator, Adobe
Photoshop, Macromedia Fireworks, etc;
d. Video Editing: Adobe Premiere, Windows Movie Maker, iMovie,
etc;
e. Animation: 3D Studio Max, Maya, etc;
f. Multimedia Authoring: Macromedia Flash, Macromedia Director,
etc.

SELF-ASSESSMENT EXERCISE

i. What are authoring tools.


ii. List various types of authoring tools.
iii. State the features of developing interfaces in the authoring tools.

4.0 CONCLUSION

There are different types of authoring tools, and their subsequent


functions with authoring capabilities, as well as software tools for
multimedia presentation. A choosen authoring tool must be suited to the
multimedia structure and design choosen.

5.0 SUMMARY

In this unit, we have learnt that:

• Multimedia presentations have special structures, design layout


or architecture and their different ways through which they can
be done.
• Multimedia contents are broken into subsequent sub-section by
the designer in other to adequately choose the design layout for
arranging these contents.
• In all, the organization scheme and structure always relies on the
user’s expectation and need with the type of information to be
organized.

187
CIT 735 MODULE 3

• Authoring tools should be capable of these; interactivity,


playback, editing, programming/ scripting, cross platform,
internet playability etc.
• Some non-trivial examples of authoring tools were mentioned
like, macromedia director, authorware, etc.
• There are different software tools that can aid multimedia
presentation.

6.0 TUTOR-MARKED ASSIGNMENT

i. Differentiate between

a. Linear Structure and hierarchical Structures,


b. Interactive Stories Structures and Web Stories Structures

ii. List various types of authoring tools, and describe their functions
and features.

7.0 REFERENCES/FURTHER READING

Dorin, A & McCormack, J. (2000). FIT5900: Introduction to


Multimedia Programming. FIT5900 courseware,
Semester 1, Caulfield Campus, 2000
http://www.csse.monash.edu.au/%7Ecema/courses/FIT5900/index.html

Lan Anh Tran and Shoba Tegginmath (2002). Applications of


Multimedia in Library and Information Services: Principles of
Multimedia and Electronic Resources. Information Networks for
the Future. Workshop, Victoria University of Wellington, Hanoi
2 – 6 December 2002

Marshall, D. (2008), Multimedia. Module CM0340.


http://www.cs.cf.ac.uk/Dave/Multimedia/

Structure and Tools

Introduction to Multimedia: Authoring Tools (SMM 2005)

188
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 4 ASSEMBLING A MULTIMEDIA


DEVELOPMENT TEAM

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Project Manager
3.1 Graphic Designer and Art Director
3.2 Script / Content Writer / Science Communicator
3.3 Sound Designer and Sound Engineer
3.4 Videographer and Video Producer
3.5 Subject Matter Expert
3.6 Instructional Designer
3.7 Multimedia Programmers
3.8 Quality Assurance Engineer
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Multimedia design, development and deployment require a multi-


disciplinary approach since diverse subject areas are involved in single
multimedia applications. In actual fact real-life multimedia applications
require pooling together teams of many skilled and knowledgeable
people in different areas such as computer science, instructional
technology, physics, visual and graphical arts, measurement and
evaluations, science communication, voice and screen actors,
management, psychology, mathematics (logic, algebra & geometry),
digital content repository, film production and photography etc.

For instance, multimedia data elements such as sound require expertise


in sound engineering and management; image and objects would require
special skills in visual and graphics including 2D and 3D animation,
video and audio production, image design and manipulation, and
detailed web design; multimedia learning and e-learning systems would
require expertise in curriculum design and instructional technology
beside others; multimedia programming involve extensive knowledge in
all web-based programming languages and techniques; and so on.

In all management plays an important role in assembling all the needed


resources, and coordinating this array of personnel from diverse areas to
achieve the team overall goals and objectives. Also the multimedia life

189
CIT 735 MODULE 3

cycle (analysis, design, implementation, testing, delivery and


maintenance) must be effectively coordinated.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• explain the role of resource management in multimedia


application development
• identify who should be members of the multimedia production
team and describe what attributes, skills and knowledge they
possess
• describe the roles and responsibilities of each member of
multimedia team.

3.0 PROJECT MANAGER

Multimedia applications like every other project require someone with


human, material, machine, financial resources management skills. Such
a person refer to as project manager (or project consultant or producer or
team leader) coordinates the entire development of the multimedia
project and facilitate team-spirit, team-binding and unity among
members of his team. He is responsible for overseeing project timeline
and priorities, quality of the final product, allocation of funds, and the
time management of the project, communicating the team’s objectives
and achievement to team members, assists in personnel recruitment and
selection, delegating duties and supervision, maintaining conducive
work environment, and documentation. He has a clear understanding of
the team's roles and responsibilities, and sees to it that members remain
focus on their jobs especially in times of difficulties. He is a dynamic,
proactive and innovative individual with excellent team-working skills
and the ability to liaise with a wide range of users.

He keeps records such as budget estimates, schedules, creative sessions,


time sheets, illness, invoices, and team dynamics or personnel turnover.
He provides answers to questions such as:

• Why is important to have a project timeline and set priorities?


• Why is it important to schedule meetings?
• Why is it important to keep minutes of meetings?
• Why is it important to have a project librarian?
• Where would you keep documents for your project?

190
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Key activities of a multimedia project manager include:

• Coordinates initial start up meetings between all parties;


• Schedules additional meeting throughout the project;
• Clarify, publish, and communicate timelines and milestones
(establish deadlines);
• Breakdown the allocation of tasks and ensure all agencies are
aware of their schedule and responsibilities;
• Monitor the allocation of tasks and the use of resources;
• Monitor progress of work in development of the multimedia
presentation;
• Manage the allocation of financial resources;
• Ensure quality control throughout the project and sign off the
final deliverable;
• Evaluate the process and produce a project completion report;
and
• Market the final product; ensure the product reaches the target
audience.

3.1 Graphic Designer and Art Director

The graphic designer assembles together images, typography or motion


graphics to create a piece of design primarily for published, printed or
electronic media. He knows how to organize and communicate visual
information effectively in a way that is both accessible and memorable.
He is able to transform textual and mental information into
visual/graphical information effectively. He is responsible for creating
interactive and creative design that stimulates user’s interest in the
multimedia presentations and which leaves a lasting impression on their
minds. He design illustrations, user interfaces and web designs, and
determines how multimedia contents are presented to the users.

Some of the skills and attributes required in a graphic designer include:

• Proficiency in one or more graphic design software programs,


relevant to the job function. A web designer should understand
how to work with XML, HTML and basic web programming
scripts while a print designer should understand the processes
involved in printing to be able to produce press-ready artwork;
• Good in solving visual communication problems or challenges.
He should be able to identify the communications issue, gather
and analyze information related to the issue, and generate
potential approaches aimed at solving the problem;
• Good understanding of the social and cultural norms of that
audience in order to develop visual solutions that are perceived as
relevant, understandable and effective;

191
CIT 735 MODULE 3

• thorough understanding of production and rendering methods


such as colour, drawing, offset printing, photography, and time-
based and interactive media (film, video, computer multimedia);
• produce design solutions to communicate their clients' messages
with high visual impact using production medium such as
websites, advertising, books, magazines, posters, computer
games, product packaging, exhibitions and displays, corporate
communications and corporate identity;
• meet the end-users or client's objectives by developing creative
ideas and concepts, choosing appropriate media and style, and
ultimately working to an agreed brief with the end-users or
clients; and
• have creative flair, up-to-date knowledge of industry software
and a professional approach to time, costs and deadlines.

The graphic designer’s roles within a multimedia development team


include:

• meeting clients or account managers to discuss the business


objectives and requirements of the job;
• interpreting the client's business needs and developing a concept
to suit their purpose;
• estimating the time required to complete the work and providing
quotes for clients;
• developing design briefs by gathering information and data
through research to clarify design issues;
• thinking creatively to produce new ideas and concepts;
• using innovation to redefine a design brief within the constraints
of cost and time and client;
• presenting finalised ideas and concepts to clients or account
managers;
• working with a wide range of media, including photography and
computer-aided design (CAD);
• proofreading to produce accurate and high-quality work;
• contributing ideas and design artwork to the overall brief;
• demonstrating illustrative skills with rough sketches;
• keeping abreast of emerging technologies in new media,
particularly design programmes such as Quark Xpress, FreeHand,
Illustrator, Photoshop, 3D Studio, Acrobat, Director,
Dreamweaver and Flash, as most graphic design work is now
completed on a computer;
• working as part of a team with printers, copywriters,
photographers, other designers, account executives, web
developers and marketing specialists; and
• working to meet tight deadlines.

192
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

The art director is in charge of the overall visual appearance and how it
communicates visually, stimulates moods, contrasts features, and
psychologically appeals to a target audience. He makes decisions about
which visual elements to use, what artistic style to use, and when to use
motion.

He translates desired moods, messages, concepts, and underdeveloped


ideas into imagery by brainstorming with other team members. He is
ultimately responsible for solidifying the vision of the collective
imagination while resolving conflicting agendas and inconsistencies
between the various individual inputs.

3.2 Script / Content Writer / Science Communicator

A scriptwriter may refer to a person who writes screenplays for film and
television (Screenwriter), or a person who writes scripts for live-action
entertainment (Playwright) or a person who write scripts for comedy
sketches, political speeches, documentaries and other presentations. He
is versatile in communication and writing skills, and communicates
clearly through written text. He gleaned information from subject
matter experts, synthesize it, and then communicate it in a clear and
concise manner.

It is duty to adapt the script to the multimedia environment and make


sure that the words in the script counts by creating desire impression in
the mind of end-users (audience). Computer-based multimedia requires
that the scriptwriter to be knowledgeable about multimedia data
elements (audio, video, text, graphics, and animation) and should adapt
them appropriately for the purpose (which might be education, training,
promotion, reference, entertainment, and games) of the multimedia
presentation.

The scriptwriter ensures that the rules of the chosen language are
responsibly adapted to suite the demands and opportunities presented by
computer technology which is characterized by new media and non-
traditional methods. Here are some general guidelines when writing
scripts for multimedia presentations:

• keep the explanation of a concept or process concise, simpler and


easier to understand;
• keep scripts in the active voice which is more direct, and usually
shorter than a passive construction;
• present information in digestible chunks;
• make sure all text can be easily understood and read the scripts
out loud;

193
CIT 735 MODULE 3

• ensure the script and other multimedia data elements complement


one another to allow both the ears and the eyes receive and
synchronize the intended messages convey in the multimedia
presentation for easier comprehension by the mind; and
• allow users some measure of control over the presentation by
incorporating interactivity-led words in the script. Interactivity
allows each user to actively participate in the usage (viewing)
process, instead of passively watching the multimedia
presentation. The nature of the material in the multimedia
presentation determines the amount of interactivity that should be
permitted.

3.3 Sound Designer and Sound Engineer

The sound designer works with the project manager to shape an overall,
consistent soundtrack that exploits the expressive possibilities of the
sound medium. Sound designer can also refer to a person brought on to
create just one kind of sound effect. He has good ear for voice-overs
and sound effects, and knows the inherent qualities and constraints of a
medium which produces desire sound to the multimedia content. He
chooses an appropriate sound effect that accompanies a narration.
Specifically, he is responsible for designing acoustics for audio visual,
audio and video conferencing, and determines the noise impact in the
multimedia application.

Sound designers study the script and gather as much information as they
can about any sound or music required to create the appropriate sound
that would suit the theme of the multimedia presentation and as well as
its content. Sound designer meet with the project manager and the
design team at the very much beginning of the project in other to have
good and clear understanding of the content in the multimedia
presentation.

Sound designers create sound effects in multimedia presentations to:

• motivate actions during actual running of the multimedia


presentation and indicate events taking place after running it;
• establish the time of day, season and weather;
• locate the action in a specific place;
• create mood and changes in mood;
• stimulate audience expectations of what is to come;
• provide information about the characters;
• build transitions between scenes; and
• offer shortcuts that rapidly advance the plot or recall past events;

194
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

The sound designer combines and varies the five controllable properties
(pitch, quality, volume, direction and duration) of sound to create unique
effects or music required by the production of the multimedia
presentation. He makes use of planning tools such as

• Plot: A list of all the music and sound cues for each act/scene. It
indicates where the sound of music occurs, the page number of
the script where it appears, precisely when it begins and ends, and
the equipment that will be used to produce it.
• System layout: A system layout shows the type and location of
speakers on stage, on the set and in the auditorium. The system
layout may also include a layout of how all of the sound
equipment will be interconnected.
• Cue sheet: A version of the sound plot to be used by the sound
technicians who will run the equipment during the performance.

The sound engineer takes the sound design by the sound designer and
ensures that it can be created in a given space. This involves selecting
equipment to reproduce the various sound elements required, installing
and testing it, and usually running the actual multimedia presentation.

The sound engineer’s roles within a multimedia team include:

• has responsibility for some aspect of the sound at during


presentations;
• taking care of setting up amps, volume, equalizers, speakers;

3.4 Videographer and Video Producer

A videographer records moving images and sound on tape, disk, other


electro-mechanical device, broadcasting live, or even on actual celluloid
film in some cases. He has good eyes for video and makes every
megabyte count by recording important details which enhance the
understanding of the multimedia contents and stimulates viewers’
interest in the multimedia presentation. He is usually responsible for the
camera, sound, and lighting and sometimes work underneath a director.
In smaller productions (e.g. corporate and event videos), a videographer
often works alone or as part of a two or three person team of camera
operators and lighting and sound technicians.

Videographers are distinguished from cinematographers in that they


manage smaller, event scale productions (weddings, short
documentaries, short fiction pieces, simple commercials, simple training
videos). Due to reduced budget compared to full length feature
productions, videographers typically use electro-mechanical cameras

195
CIT 735 MODULE 3

while cinematographers record images on film. The advent of digital


cinematography, however, has blurred this distinction.

Videographers maintain and operate a variety of video equipment, edit


footage, and stay up to date with technological advances. The
videographer is responsible for the maintenance and operation of the
satellite, maintaining and repairing video walls, video tape editing in
various formats, creating graphics for the cruise events and information
channel, shooting and editing video tapes, programming the broadcast
room such as tuning in TV, radio and playing of movies.

On the other hand, video producer provides information about audio


and video production, DVD authoring and duplication, corporate
presentations and audio/visuals. Video producers work closely with all
members of the multimedia development team on video productions to
ensure that the process goes smoothly and is completed on time. The
video producer must have a good working knowledge of all aspects of
production from set design, lighting and audio through to editing,
filming and working with scripts.

The video producer liaises with the project manager in making sure that
all required supplies, equipment and staff are in the correct place at the
correct time. Coordinating these services may be a large part of the
video producer’s daily responsibilities prior to the commencement of
shooting. Once filming is in progress the video producer will work to
coordinate the actual filming, ensuring that all aspects of filming are
completed correctly.

A video producer must be creative and have an ability to work with


various people and various settings, and budgets to end up with just
what was wanted at the end of the project. Good communication skills
as well as patience and the ability to motivate others are needed in a
video producer.

The video producer’s roles within a multimedia team include:

• coordinating all aspects of the filming production and confirming


that all people, supplies and equipment will be available when
required;
• handling all logistics of the filming including making sure that
script writers, graphic designers, subject matter experts,
instruction designers etc. have completed all necessary
paperwork and meet all requirements in the design specification;
• editing and processing the video to produce exactly what the
project manager or end-user required;

196
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

• troubleshooting issues with filming, modifying or changing


scripts, or adding additional aspects to the filming to enhance the
production; and
• communicating with directors or clients to determine exactly
what they want and then producing that in the studio.

SELF ASSESSMENT EXERCISES 1

i. Explain the reasons for setting project timeline and set priorities
in development multimedia presentations.
ii. What is the importance of budget and budgetary control in
multimedia development?
iii. How does a graphic designer different from an art director?

3.5 Subject Matter Expert

The subject matter expert is someone skilled and knowledgeable in a


given topic area and has experience teaching the topic. He is versatile in
tutoring, mentoring and coaching the subject matter, and therefore
serves as the primary source of authoring for the multimedia content. He
identifies background resources for building the multimedia contents
and reviews content design for factual integrity, completeness and
educational effectiveness. He is not necessarily the multimedia a
designer or developer but serves a complementary role in the
multimedia development team. He knows the subject matter very well
and is able to use the right messaging and terminology when teaching
the subject matter.

The subject matter expert is critical to the validity of the content of


Multimedia presentations. Therefore, the use of subject matter experts
in providing content expertise advice toward the development of the
product should not be overlooked. Subject matter experts have a stake in
the multimedia project because it will reflect their degree of expertise
and knowledge. In most cases they don’t end up as the end-users, but
certainly are involved in providing the technical expertise to the content.
The quality of the content will only be as good as the expertise of the
contracted subject matter experts involved in the multimedia project.

Multimedia project manager must ensure that the subject matter experts
are available, understand their role, and most importantly be left to
provide subject matter expertise only. It is advisable to allow subject
matter expert to be focus on content, rather on the development of the
multimedia presentation.

197
CIT 735 MODULE 3

The following areas of general expertise are assumed as prerequisites


and provide a basis for the competencies expected of a subject matter
expert:

• a good all round knowledge of the subject-matter of the course;


• the background pedagogy that underpins the course;
• a good understanding of the limits and limitations of the
information and communications technology;
• a closer working and sharing relationship with the learner;
• provide learners with "positive" support and "positive"
encouragement; and
• a role of mentor/counselor as well as academic advisor

3.6 Instructional Designer

The instructional designer is a very critical key to success for effective


multimedia development since he can assess educational needs and
design and evaluate lessons. All multimedia presentations geared
towards creating a dynamic, effective learning environment must have
legitimate and sound instruction design and strategy built into the
presentations.

The instructional designer’s roles within a multimedia team include:

• providing advice on effective and efficient learning strategies;


• working with the subject matter experts to breakdown the content
and organize it into reasonable chunks;
• designing effective learning strategies and build them into the
multimedia project;
• conducting needs assessment and matching design to
instructional needs;
• organizing, managing, and delivering information in such a way
to create an effective learning environment;
• developing introductions, main content body, review, application,
an motivational segments of the multimedia presentation;
• identifying and studying the target audience and designs the level
of learning appropriate to their needs;
• identifying the key components of effective multimedia
development and delivery, and ensures this built into the project;
• conducting research without agencies to acquire additional
resources and references;
• designing a logical and structured format to the design decision
throughout the development of the project; and
• evaluating the final "pilot" product and make necessary
adjustments to fine-tune the educational effectiveness of the
multimedia.

198
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.7 Multimedia Programmers

Multimedia programmers translate the requirements of the end-users,


graphic designer, subject matter expert, instruction designer, and other
team members into the programming language, working out the logical
steps that must be taken by the computer to do a task so that the
multimedia presentation works as planned. A multimedia programmer is
a software engineer who integrates all of the multimedia elements into a
seamless whole using an authoring language or programming language.
Multimedia programmers make computer programs that use text, sound,
graphics and pictures, 2D/3D modeling and virtual reality.

The roles of a multimedia programmer within a multimedia team


include:

• meeting clients' (end-users) needs in the most effective way, and


ensuring that the end product is both attractive and user friendly;

• creating multimedia presentations that use more than one way to


communicate information. i.e. they may combine the different
media elements such as sound, text, graphics, animation and
video pictures to communicate an intended message, or
concept/idea;

• collaborating with other team members (e.g. script writers, artists,


graphic designers, animators and sound engineers) in developing
the content of the multimedia presentations;

• translating the design into a language that the computer can


understand by designing and writing computer codes, testing
these codes and fixing bugs;

• developing games, educational software, websites, film,


television and digital video productions;

• putting the different media in logically sequential order; making


animation happen at the right time; using sound effects
appropriately and generally implementing the instructions of the
creative designer; and

• designing and writing web pages, program the links to databases,


or create graphic effects for film studios.

Some of the relevant skills and attributes required to be a multimedia


programmer include:

199
CIT 735 MODULE 3

• the ability to mentally construct and communicate multimedia


ideas;
• presenting ideas and information in writing, and explaining these
ideas and information to end-users and team members;
• strong communication and interpersonal, skills to swap ideas, and
to explain your work clearly and concisely to people who may
not have much computer knowledge;
• have a clear understanding and appreciation of other members'
role in the multimedia development team;
• enjoy solving problems, exercising logical thinking and working
on a project from start to finish;
• have creative ideas about designs and styles, and the ability to
create an accessible computer / user interface;
• strong interest in information technology;
• knowledge of Internet programming languages and applications;
• the ability to incorporate elements of different media into a whole
presentation;
• good teamwork and co-operation with other team members;
• good organizational skills as well as ability to plan and meet tight
deadlines, and ability to work well under pressure;
• preciseness, persistence, analytic, accuracy open mind to future
possibilities and paying attention to minutest detail; and
• willingness to learn and improves, and be up-to-date with latest
developments in a constantly changing technology industry and
improving.

3.8 Quality Assurance Engineer

Quality assurance (QA) engineers are responsible for assuring that the
developed multimedia presentations are effective and free from errors
(defects) or operational problems by testing them to make sure they
works according to design specification and meet users’ need. The test is
carried out under various working conditions or for verifying the
information the correctness of the content in the multimedia
presentation. QA engineers verify and guarantee the accuracy or
performance of the multimedia presentation as well as troubleshoot the
correction of any problems or issues throughout the development of the
presentation through systematic quality auditing, proofing and
compliancy checks at key points in the project development cycle.

The QA engineer is the tester for the product and is required to use it
both as recommended and otherwise. His ability to think of how
consumers may use the product incorrectly is important in liability and
other legal issues for the multimedia team. The QA engineer is also
expected to provide feedback on the user-friendliness (or otherwise)

200
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

aspects of the product, and should suggest ideas for modifications and
improvements.

QA engineer should possess the following attributes:

• an understanding of the multimedia presentation;


• the goals of the multimedia development team for the multimedia
presentation;
• good background in multimedia design and development;
• experienced in data entry, accurate record keeping and attention
to detail; and
• effective communication skills and the ability to work as part of
the team in developing and testing products is key;
• they are problem-solvers who like a good puzzle;
• persistence, meticulous, thorough, detail-oriented, and enjoy
tinkering; and
• understand the problems that users can encounter and able to
build bridge between end-users and programmers, so they must.

The roles of a quality assurance engineer within a multimedia team


include:

• discussing the multimedia presentations to be tested with the


development team and the end-users;
• testing and assessing the effectiveness, accuracy or safety of
multimedia; presentations based on existing safety standards or
performance guidelines;
• entering data entry, recording of results and completion of
paperwork in a timely fashion;
• making sure that all the programs work properly and that
everything in a Web site functions according to plan;
• trying and making things not work so the programmer can catch
errors before they occur;
• troubleshooting inaccuracies or problems in the multimedia
presentations; and
• meeting with the multimedia development team to share results
and recommendations.

SELF-ASSESSMENT EXERCISE

i. What do you understand by the notion of quality? What values (if


any) does a subject matter expert add to the quality of Multimedia
presentations?
ii. Is there a need for Instructional Designers in all Multimedia
presentations? What are the distinguishable attributes of an
Instructional Designer?

201
CIT 735 MODULE 3

4.0 CONCLUSION

Multimedia design, development and deployment require a synergetic


efforts which can only be achieve by assembling and effective
coordination of the multimedia development process (pre-production,
base production and post-production schedules).

5.0 SUMMARY

In this unit, we have learnt that:

• Management plays an important role in assembling all the needed


resources, and coordinating this array of personnel from diverse
areas to achieve the team overall goals and objectives.
• Members of the multimedia production team have some
attributes, skills and knowledge which distinguish them form one
another, and from other professionals.
• The roles and responsibilities of each member of multimedia
team.

6.0 TUTOR-MARKED ASSIGNMENT

i. What effect does assembling high quality multimedia production


team have on the quality of a multimedia presentation?
ii. In a multimedia production team, who does what is determined
by who? How is that person selected? What kinds of attributes,
skills and knowledge are expected in such a person?
7.0 REFERENCES/FURTHER READING

Assembling a Multimedia e-Learning Development Team

Managing Multimedia by Elaine England and Andy Finney


www.atsf.co.uk/manmult_2e/
Project Management - Managing Multimedia Projects
www.acs.ucalgary.ca/~edtech/688/pm
Art director - Wikipedia, the free encyclopedia
www.wikipedia.org/wiki/Art_director
Scriptwriter - Wikipedia, the free encyclopedia
www.wikipedia.org/wiki/Scriptwriter
Writing For Multimedia: Script Guidelines
http://writing.atomicmartinis.com/scripts

Audio engineering - Wikipedia, the free encyclopedia


http://en.wikipedia.org/wiki/Audio_engineering

202
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 5 E-LEARNING, MULTIMEDIA LEARNING AND


COGNITIVE PRINCIPLES IN MULTIMEDIA
LEARNING DESIGN

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Definitions
3.1 Benefits of E-Learning
3.2 Limitations of E-Learning
3.3 Reasons For Failure of E-Learning Projects
3.4 Drivers of E-Learning
3.5 E-Learning Tools
3.6 Multimedia Learning
3.7 Rationale for Multimedia Learning
3.8 Principles of Multimedia Learning
3.8.1 Cognitive Tutor Principles
3.8.2 Media Element Principles of E-Learning
3.8.3 Complementary Principles to Principles of
Multimedia Learning
3.9 Clark & Mayer’s e-Learning and the Science of
Instruction Principles
3.9.1 Principles for Creating Online Practice Exercises
3.9.2 Principles for Leveraging Examples in e-Learning
3.9.3 Principles for Online Collaboration
3.9.4 Principles for Learner Control in e-Learning
3.9.5 Principles for Building Problem Solving Skills
through e-Learning
3.10 Scientific Evidence That Principles Really Work
3.11 Approaches to Multimedia Learning
3.11.1 Technology-Centered Approach
3.11.2 Learner-Centered Approach
3.12 Metaphors of Multimedia Learning:
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

203
CIT 735 MODULE 3

1.0 INTRODUCTION

Electronic learning (E-Learning) refers to a wide range of applications


and processes designed to deliver instruction through electronic means
which builds new knowledge and skills. Usually this means over the
Web, however it also can include CD-ROM or video-conferencing
through satellite transmission. E-learning is also believed to encompass
other learning environments like Computer-Based Training (CBT), on-
line learning and Web-based training which signals the paradigm shift in
education and training.

E-Learning though is technology-driven but its capability lies more in its


social dynamics of networking. The revolutionary impact of E-Learning
lies not simply in having a multimedia platform on a single desktop. It is
the combined power of a world-wide network of such computers that
connects authors, instructors and learners globally with the immediacy
of text, graphics, audio and video, as well as interactivity and
collaborative sharing.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• explain the concept of e-learning, state the inherent benefits and


highlights its limitation
• describe the factors which are facilitators of e-learning
• describe e-learning environment and the tools which are used in
e-learning environment
• explain the role of multimedia in e-learning and the reasons for
multimedia learning
• state and explain the principles which guides application of
multimedia in e-learning.

3.0 DEFINITIONS

E-Learning is the online delivery of information for purposes of


education, training or knowledge management. It is a web-based
systems built upon the internet platform and which provide knowledge
to those who need it, where and when they need it. E-learning can be
useful both as an environment for facilitating learning at schools, and as
an environment for efficient and effective corporate training.

204
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1 BENEFITS OF E-LEARNING

Among the numerous benefits of e-learning are:

1. Time Reduction: e-learning can reduce training time by as


much as 50%. E-Learning lessons are generally designed
to guide students through information or to help students
perform in specific tasks.

2. Large Volume and Increased Access: e-learning can


provide training to a large number of workers with diverse
cultural backgrounds and educational.

3. Cost Reduction: Cost of instruction by other methods


is high while the cost of providing a learning experience
through e-learning can be reduced by 50% to 70% when
classroom lessons are replaced by e-learning sessions.

4. Higher Content Retention: e-learning students are usually


self-initiated and self-paced. Such self-motivation results
in content retention and improved performance that could
be up to between 25% and 60% higher than that of
classroom-led learning.

5. Flexibility: e-learners are able to adjust the time,


location, content, and speed of learning to suite their
peculiar needs and capabilities.

6. Up-dated and Consistent Materials: e-learning offers


just-in-time access to timely and up-to-date information
unlike printed textbooks which might take between 3 and
5 years to update. E-learning has between 50% to 60%
better consistency of material than classroom learning.

7. Fear-Free Environment: e-learning facilitates learning


for students in distance learning or open education
programme, or those who may not wish to join a face-to-
face group discussion cum class participation. It provides
a fear-free and privacy-protected learning environment
where student can participate freely without any fear of
how right or logically sound his contribution might be.

205
CIT 735 MODULE 3

3.3 Limitations of E-Learning

1. Need for Instructor Retraining: Some instructors are not


competent to teach by electronic means and may require
additional training which may costs huge financial outlay.

2. Equipment Needs and Support Service: Additional funds are


needed to purchase multi-media tools to provide support services
for e-learning creation, use and maintenance.

3. Lack of Face-to-Face Interaction and Campus Life:


Intellectual simulation that takes place through instructor-
led classroom instruction cannot be fully replicated in e-learning
sessions.

4. Assessment: e-learning instructors may not be competent to


assess students’ work, and on the other hand, ascertaining the
identification of who actually completed an assignment or
examination might be difficult.

5. Maintenance or Updating: The cost and instructors’ time


required in ensuring e-learning materials are up-to-date might be
expensive for some institutions or organizations. The content of
e-learning material can be difficult to maintain due to lack of
ownership and accountability of website materials.

6. Protection of Intellectual Property: It is difficult to control


the transmission of copyrighted works downloaded fron the e-
learning platform.

7. Computer Literacy: e-learning cannot be extended to those


students who are not computer literate.

8. Student Retention: Without some human feedback, it may be


difficult to keep some students mentally engaged and enthusiastic
about e-learning over a long period of time.

3.3 Reasons for Failure of E-Learning Projects

The following issues need to be address critically, carefully and


systematically for e-learning projects to be successful.

a. E-learning can be very expensive because of the high


financial capital outlay and the running costs required,
especially if the student population is not sufficiently large
to compensate for this huge costs.

206
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

b. In many instances, the potentials and benefits of e-learning


are often over-estimated.
c. Self-study on its own has some drawbacks which are often
over-looked by e-learning designers.
d. Instructors in many cases do not consider the creation,
delivery and nature of the learning material in relation to
the objectives of a particular course.
e. Viewing content as a commodity causes lack of attention
to quality and delivery to individuals.
f. Ignoring technology tools for e-learning or on the other
hand, fixating too much on technology as a solution.
g. Assuming that learned knowledge will be applied.
h. Believing that because e-learning has been implemented,
employees and students will use it.

3.4 Drivers of E-Learning

1. Technological Change: Technological changes and


global network connectivity have increased the complexity
and speed of the work environment. Just-in-time (JIT)
training is therefore critical element to organizational
success.

2. Competition and Cost Pressures: Fierce competition in


most industries leads to increasing cost pressure. In
today’s competitive environment, organizations can no
longer afford to inflate training budgets with expensive
travel and lodging. Time spent away from the job,
traveling or sitting in a classroom tremendously reduces
per employee productivity and revenue.

3. Globalization: E-learning is an effective mechanism


for global delivery of training to geographically dispersed
workforce or students.

4. Continual Learning: Learning is a continual process and as


such e-learning provides training techniques and delivery
methods which enhance motivation, performance,
collaboration, innovation, and a commitment to life-long
learning.

5. Network Connectivity: The internet provides an ideal


delivery vehicle for education, and thus opened the door to
a global market where language and geographical barriers
have been eliminated for many training products. This is
made possible as a result of its simplicity of use and the

207
CIT 735 MODULE 3

increasing penetration to corporate offices, schools,


governments, hospitals and homes.

SELF-ASSESSMENT EXERCISE

i. What is e-learning? How can the limitations of e-learning be


overcome?
ii. Differentiate between e-learning and virtual worlds.

3.6 Multimedia Learning

According to Mayer (2005), “multimedia learning occurs when people


build mental representations from words (such as spoken text or printed
text) and pictures (such as illustrations, photos, animation, or video)”.
Mayer (2005) further posited that multimedia refers to the presentation
of words and pictures, whereas learning refers to the learner’s
construction of knowledge. Therefore, multimedia learning could be
said to be the process by which people build mental representations from
words and pictures. This process is the focus of Mayer’s cognitive
theory of multimedia learning, Sweller’s cognitive load theory, and
Schnotz’s integrative model of text and picture comprehension (Mayer
2005).

Multimedia instruction (or a multimedia learning environment) involves


presenting words and pictures that are intended to promote learning. In
short, multimedia instruction refers to designing multimedia
presentations in ways that help people build mental representations
(Mayer 2005). Multimedia presentations which facilitate multimedia
learning are designed based on the cognitive principles of multimedia
learning described in section 3.7 of this unit.

3.7 Rationale for Multimedia Learning

The major goal of multimedia learning is to assists learners towards


having better understanding of the subject matter presented in
multimedia presentations. The rationale behind this is that learners learn
more deeply from words and pictures than from words alone. It is
important to understand how best to incorporate pictures with words
since not all pictures are equally effective for a given learning process.
Instructors must also be known to have mastered how to effectively
adopt the multimedia learning technology to promote effective teaching
and learning. There is therefore the need for a research-based
understanding of how people learn from words and pictures and how to
design multimedia instruction that promotes learning (Mayer 2005).

208
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

According to Bransford, Brown, & Cocking (1999), the following


processes constitute how people learn:

1. Build on prior knowledge


2. Connect facts & procedures with concepts
3. Support meta-cognition

Koedinger (2002) opined that learners can best build on their prior
knowledge of a given subject by following the principles of instructional
bridging outline below:

1. Situation-Abstraction: Concrete situational <-> abstract


symbolic reps
2. Action-Generalization: Doing with instances <-> explaining with
generalizations
3. Visual-Verbal: Visual/pictorial <-> verbal/symbolic reps
4. Conceptual-Procedural: Conceptual <-> procedural

When words and pictures are presented together as in a narrated


animation, students perform well both on retention and transfer tests
(Mayer 2005). In particular, when we focus on tests of problem solving
transfer (which are designed to measure the student’s understanding of
the presented material) students perform much better with words and
pictures than from words alone (Mayer 2005).

3.8 Principles of Multimedia Learning

Multimedia learning is the common name used to describe the


cognitive theory of multimedia learning. This theory encompasses
several principles of learning with multimedia and underlies how to
design multimedia learning environments are discussed in this section.

3.8.1. Cognitive Tutor Principles

Cognitive processing of instructional materials described how


instructional materials are processed by the learners’ ears or eyes and
information perceived from such materials are stored in corresponding
working memory (WM) according to (Baddeley and Hitch, 1974). They
stated that this information must be integrated to develop an
understanding and stored in long term memory. The followings
guidelines are propounded in the cognitive tutor principles as stated by
Koedinger & Corbett (2006).

1. Represent student competence as a production set: The model


adopted in the design of multimedia learning environment must
be design in such a way that will:

209
CIT 735 MODULE 3

• guide curriculum design, scope & sequence, user-interface


design, error feedback & hints mechanism, problem selection &
promotion; and
• interpret student actions, identify the components of learning and
decomposed knowledge.

2. Communicate the goal structure underlying the problem


solving: Successful problem solving involves breaking a problem
down into sub-goals (decomposed the inherent knowledge). The
learning tasks (or user-actions) in each user-interface must be
explicitly displayed to ensure reification in the learning process.

3. Provide instruction in the problem-solving context:


Instructions must be provide in the context-specificity of learning
which describes how students learn the critical “if-part” of the
production rule. Instructions should be stated before introducing
the problem.

4. Promote an abstract understanding of the problem-solving


knowledge: Conceptualization of abstract topic must be
systematically observed to permit students to concretize abstract
concepts into “reality”. The language of instruction, hints and
feedbacks should reinforce generalization.

5. Minimize working memory load: Avoid information overload


by including relevant materials which relates to the current
problem-solving procedure. This is to ensure that the information
in the active memory would facilitate effective learning on the
student’s part. Learners’ should be able to build on previous
knowledge (i.e. from simple topic to complex topic). In this way
extraneous and intrinsic information loads are avoided and
important information load is optimized.

6. Provide immediate feedback on errors: Feedback from


previous problem solved helps students to identify and avoid their
mistakes thus making interpretations of the procedures in the
problem solving simpler. Correct solution and answer should
therefore be provided especially during quizzes, puzzles,
assignments, and tutorials etc. to reinforce students interest and
promote effective learning.

210
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.8.2 Media Element Principles of E-Learning

1. Multimedia Principle

People learn better from words and pictures than from words alone
therefore it is advisable to use both words and graphics in multimedia
presentations than words alone. It has been found out that well-designed
visuals and text can particularly benefit learners with less experience in
the lesson content (Mayer, 2005). Multimedia presentations can
encourage learners to engage in active learning by helping them to make
connections between pictures and text with mental representations.
Students can mentally build both a verbal and pictorial model, and then
make connections between learning from both words and pictures.

2. Contiguity Principle

People learn better when corresponding words and pictures are


presented near each other on the page or screen. This is due to the fact
that students do not have to use limited mental resources to visually
search the page. They are more likely to hold both corresponding words
and pictures in working memory, and process them at the same time to
make connections. Words (or text) should be placed nearer to the
corresponding graphics in an integrated fashion rather than the same
information in separate places. This reduces the amount of time your
learner will need to spend finding the information thus reducing
cognitive load. This aligning of text includes narration.

Spoken word and corresponding graphics should be presented close


together on the screen. Separating text, either written or audio increases
cognitive load of the learner and breaking text into smaller more
manageable parts with corresponding graphics. Animations and graphics
appearing on the screen at the same time rather than separated with one
following the other improve retention and decreases cognitive load.

Evidence suggests that people learn best when words describing an


element or event are spoken at the same time as the animation or
illustration depicts that element or event on the screen (Clark and
Mayor, 2003).

Spatial Contiguity Principle - Students learn better when


corresponding words and pictures are presented near rather than far from
each other on the page or screen.

Temporal Contiguity Principle- Students learn better when


corresponding words and pictures are presented simultaneously rather
than successively.

211
CIT 735 MODULE 3

3. Coherence Principle

People learn better when extraneous material is excluded rather than


included, when cues are added that highlight the organization of the
essential material, when corresponding words and pictures are presented
near rather than far from each other on the screen or page or in time, and
people learn better from graphics and narration than from graphics,
narration, and on-screen text (Mayer, 2005). Extraneous material
competes for cognitive resources in working memory and diverts
attention from the important material.

4. Modality Principle

People learn better from graphics and narration than graphics and
printed text. Thus words in spoken rather than graphic form should be
used when graphic or animation is in focus because people learn more
lessons with concurrent speech than just text alone. Presenting text and
animation at the same time can overload visual working memory, and
therefore leaves auditory working memory unused. When visual
information is being explained, it is better to present words as audio
narration than onscreen text. The cognitive theory of learning adduced
the following reasons for this:

a. Graphics and onscreen text compete for attention;


b. Separate information processing channels for visual and
auditory/verbal processing;
c. Capacity of each channel is limited;
d. Do not overloads visual channel rather use both auditory and
visual channels

When learning with multimedia the brain must simultaneously encode


two different types of information, an auditory stimulus and a visual
stimulus which enable the brain to simultaneously process information
coming from both ears and eyes. Thus a learner is not necessarily
overwhelmed or overloaded by multimodal instruction, and it can in fact
be beneficial.

5. Redundancy Principle

People learn better when the same information is not presented in more
than one format (Mayer, 2005). According to this principle, students
learn better from animation and narration than from animation,
narration, and on-screen text. Thus it’s better to eliminate redundant
material. This is because learners do not learn as well, when they both
hear and see the same verbal message during a presentation. This is a
special case of the Sweller and Chandler’s split attention effect.

212
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

We need to accommodate different learning styles, add text to the screen


for those who learn better from reading because some learns better with
visual style while others learn better with auditory style or both.
Therefore present both approaches to accommodate both learning styles
and aid learning by adding information to memory in step-wise manner.
Avoid presenting words as narration and identical text and slow pace of
presentation. Provide learning assistance to learners with disabilities or
non-native speakers and those who may not have access to speakers or
headsets.

6. Personalization Principles

People learn better when the words of a multimedia presentation are in


conversational style rather than formal style of instruction, and when the
words are spoken in a standard-accented human voice rather than a
machine voice or foreign-accented human voice (Mayer, 2005). Humans
strive to make sense of presented material by applying appropriate
processes. Conversational instruction better primes appropriate
processes because when people feel they are in a conversation they work
harder to understand material.

3.8.3 Complementary Principles to Principles of Multimedia


Learning

The following principles as outlined in Mayer (2005) serves as


complement to the principles described in sections 3.8.1 and 3.8.2.

1. Split-Attention Principle: People learn better when words and


pictures are physically and temporally integrated. This is similar
to spatial contiguity and temporal contiguity principles.

2. Segmenting, Pre-training, And Modality Principles: People


learn better when a multimedia message is presented in learned-
paced segments rather than as a continuous unit, people learn
better from a multimedia message when they know the names
and characteristics of the main concepts, and people learn better
from a multimedia message when the words are spoken rather
than written.

3. Guided-Discovery Principle: People learn better when guidance


is incorporated into discovery-based multimedia environments.

4. Worked-Out Example Principle: People learn better when they


receive worked out examples in initial skill learning.

213
CIT 735 MODULE 3

5. Collaboration Principle: People can learn better with


collaborative online learning activities.

6. Self-Explanation Principle: People learn better when they are


encouraged to generate self-explanations during learning.

7. Animation and Interactivity Principles: People do not


necessarily learn better from animation than from static diagrams.

8. Navigation Principles: People learn better in hypertext


environments when appropriate navigation aids are provided.
9. Site Map Principle: People can learn better in an online
environment when the interface includes a map showing where
the learner is in the lesson.

10. Prior Knowledge Principle: Instructional design principles that


enhance multimedia learning for novices may hinder multimedia
learning for more expert learners.

11. Cognitive Aging Principle: Instructional design principles that


effectively expand working memory capacity are especially
helpful for older learners.

3.9 Clark & Mayer’s e-Learning and the Science of


Instruction Principles

Clark & Mayer (2005), highlights the following principles in their book
“e-Learning and the Science of Instruction” as serving catalyst functions
in promoting effecting teaching / learning of sciences.

3.9.1 Principles for Creating Online Practice Exercises

1. Interactions should mirror the job.


2. Critical tasks require more practice.
3. Apply the Media Elements Principles to exercises.
4. Train learners to self-question during receptive e-lessons.

3.9.2 Principles for Leveraging Examples in e-Learning

1. Replace some practice problems with worked examples.


2. Apply the Media Elements Principles to examples.
3. Use job-realistic or varied worked examples.
4. Teach learners to self-explain examples.

214
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.9.3 Principles for Online Collaboration

1. Make assignments that require collaboration among learners.


2. Assign learners to groups in ways that optimize interaction.
3. Structure group assignments around products or processes.
4. Models for structured collaboration: jigsaw, structured
controversy, problem-based learning, peer tutoring.

3.9.4 Principles for Learner Control in e-Learning

1. Use learner control for learners with high prior knowledge or


high metacognitive skills.
2. Make important instructional events the default navigation
option.
3. Add advisement to learner control.

3.9.5 Principles for Building Problem Solving Skills through e-


Learning

1. Use job contexts to teach problem solving processes.


2. Focus training on thinking processes versus job knowledge.
3. Make learners aware of their problem-solving processes.
4. Incorporate job-specific problem-solving processes

3.10 Scientific Evidence That Principles Really Work

According to Lee, Gillan, Upchurch, Melton, & Harrison (1995),


recitation based lecture helped subjects scoring low on the pre-test more
than those scoring high on the pre-test whereas for those using the
computer, multimedia helped all subjects equally. Respondents who used
the computer listed more behaviors than those who listened to the
recitation.

215
CIT 735 MODULE 3

Table 1: Summary of Research Results from the Six Media Elements


Principles.
(From Mayer, 2001)
Principle Percent Gain Effect Size Number of Tests

Multimedia 89 1.50 9 of 9
Contiguity 68 1.20 5 of 5
Coherence 82 1.17 10 of 11
Modality 80 1.17 4 of 4
Redundancy 79 1.24 2 of 2
Personalization 67 1.24 5 of 5
* Used similar instructional materials in the same lab.

It is obvious from the table above and from the result obtained by Lee,
Gillan, Upchurch, Melton, & Harrison (1995), that it is quite worthwhile
to apply the various principles that have been mentioned in the
preceding sections of this unit.

3.11 Approaches to Multimedia Learning

Two approaches to multimedia learning have been identified, vis-à-vis,


technology centered and learner centered. Table 2 below summarized
the salient point concerning the two approaches.

Table 2: Approaches to the Design of Multimedia Instruction


Design Starting Point Goal Issues
Approach
Technology Capabilities of Provide How can we use cutting-
centered multimedia access to edge technology in
technology information designing multimedia
instruction?
Learner How the Aid human How can we adapt
centered human mind cognition multimedia technology to
works aid human cognition

3.11.1 Technology-Centered Approach

Technology-centered approaches begin with the functional capabilities


of multimedia and the focus is generally on cutting-edge advances in
multimedia technology. Technology centered designers might focus on
how to incorporate multimedia into emerging communications

216
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

technologies (e.g the World Wide Web) or the construction of


interactive multimedia representations in virtual reality. The kinds of
research issues often involve media research (i.e., determining which
technology is most effective in presenting information). For example, a
media research issue is whether students learn as well from an online
lecture – in which the student can see a lecturer in a window on the
computer screen – as they can from a live lecture – in which the student
is actually sitting in a classroom.

The technology-centered approach generally fails to lead to lasting


improvements in education (Cuban, 1986). Instead of adapting
technology to fit the needs of human learners, humans were forced to
adapt to the demands of cutting edge technologies. The driving force
behind the implementations was the power of the technology rather than
an interest in promoting human cognition. The focus was on giving
people access to the latest technology rather than helping people to learn
through the aid of technology.

3.11.2 Learner-Centered Approach

Learner-Centered Approaches
Learner-centered approaches offer an important alternative to
technology-centered approaches. Learner-centered approaches begin
with an understanding of how the human mind works and focus is on
using multimedia technology as an aid to human cognition. Research
questions focus on the relation between design features and the human
information processing system, such as, comparing multimedia designs
that place light or heavy loads on the learner’s visual information
processing channel. The premise underlying the learner-centered
approach is that multimedia designs that are consistent with the way the
human mind works are more effective in fostering learning than those
that are not. This premise is the central theme of part 1 of this handbook,
which lays out theories of multimedia learning.

Norman (1993) eloquently makes the case for a learner-centered


approach to technology design, which he refers to as human-centered
technology. Norman’s (1993) assessment is that “much of science and
technology takes a machine-centered view of the design of machines” so
that “the technology that is intended to aid human cognition . . . more
often interferes and confuses.” In contrast, Norman’s (1993) vision of a
learner centered approach to technology design is that “technology . . .
should complement human abilities, aid those activities for which we are
poorly suited, and enhance and help develop those for which we are
ideally suited.” The design of multimedia technology to promote human
cognition represents one exemplary component in the larger task of
creating what Norman (1993) calls “things that make us smart.”

217
CIT 735 MODULE 3

3.12 Metaphors of Multimedia Learning

In designing or selecting a multimedia learning environment, three


views of multimedia learning may influenced the designer, namely
multimedia learning as response strengthening, multimedia learning as
information acquisition and multimedia learning as knowledge
construction.

Multimedia Learning as Response Strengthening


If you view multimedia learning as response strengthening, then
multimedia is a feedback delivery system.

According to the response strengthening view, learning involves


increasing or decreasing
the connection between a stimulus and a response. The underlying
principle is that the connection is strengthened if a response is followed
by reward and is weakened if the response is followed by punishment.

Multimedia Learning as Information Acquisition


If you view multimedia learning as information acquisition, then
multimedia is an information delivery system.

Multimedia Learning as Knowledge Construction


If you view multimedia learning as knowledge construction, then
multimedia is a cognitive aid.

SELF-ASSESSMENT EXERCISE

i. What principles of cognitive e-Learning principles have you


learned so far?
ii. How can you apply at least one of them in your project design?

4.0 CONCLUSION

E-Learning though is technology-driven but its capability lies more in its


social dynamics of networking. It is the combined power of a world-
wide network of such computers that connects authors, instructors and
learners globally with the immediacy of text, graphics, audio and video,
as well as interactivity and collaborative sharing. Multimedia learning
could be said to be the process by which people build mental
representations from words and pictures.

218
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

5.0 SUMMARY

In this unit, we have learnt that:

• E-learning can be useful both as an environment for facilitating


learning at schools, and as an environment for efficient and
effective corporate training.
• There are some issues which need to be address critically,
carefully and systematically for e-learning projects to be
successful.
• Facilitators of e-learning include technological change,
competition and cost pressures, globalization, continual learning
and network connectivity.
• The major goal of multimedia learning is to assists learners
towards having better understanding of the subject matter
presented in multimedia presentations.
• Theory used in multimedia learning encompasses several
principles of learning which include the cognitive tutor
principles, media element principles and some other
complementary principles.
• Two approaches used multimedia learning are technology
centered and learner centered.

6.0 TUTOR-MARKED ASSIGNMENT

i. Distinguish between the cognitive tutor principle, the contiguity


principle and the coherence principle.
ii. Why should the view of multimedia influence a multimedia
designer in selecting multimedia learning environment?

7.0 REFERENCES/FURTHER READING

Anderson, J. R., Corbett, A. T., Koedinger, K. R., & Pelletier, R. (1995).


Cognitive tutors: Lessons learned. The Journal of the Learning
Sciences, 4 (2), 167-207.

Bransford, Brown, & Cocking (1999). How people learn: Brain, mind,
experience and school. D.C.: National Academy Press

Clark, R. C., & Mayer, R. E. (2003). E-learning and the Science


of Instruction. San Francisco: Jossey-Bass.

Clark, R. C., & Mayer, R. E. (2003). e-Learning and the Science of


Instruction: Proven Guidelines for Consumers and Designers of
Multimedia Learning. San Francisco: Jossey-Bass.

219
CIT 735 MODULE 3

Donovan, M. S., Bransford, J. D., & Pellegrino, J.W. (1999). How


people learn: Bridging research and practice. Washington,
D.C.: National Academy Press.

Koedinger, K. R. (2002). Toward evidence for instructional design


principles: Examples from Cognitive Tutor Math 6. Invited paper
in Proceedings of PME-NA.

Koedinger, K. R. & Corbett, A. T. (2006). Cognitive Tutors:


Technology bringing learning science to the classroom.
Handbook of the Learning Sciences.

Lee, Gillan, Upchurch, Melton, & Harrison (1995). Is multimedia-based


training effective? Yes and no. CHI’ 95 Proceedings.
http://www.sigchi.org/chi95/Electronic/ACMcopyright.html

Mathan, S. & Koedinger, K. R. (2003). Recasting the feedback


debate: Benefits of tutoring error detection and correction skills.
In Hoppe, Verdejo, & Kay (Eds.), Proceedings of Artificial
Intelligence in Education (pp. 13-18). Amsterdam, IOS Press.

Mayer, R. E. (2001). Multimedia Learning. New York: Cambridge


University Press.

Mayer, R. E. (Ed.). (2005). The Cambridge Hanbook of Multimedia


Learning. New York: Cambridge University Press.

220
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

MODULE 4 MULTIMEDIA AUTHORING: FLASH


TECHNOLOGY AND DEVELOPMENT

Unit 1 Overview of Flash Technology


Unit 2 Flash Animation
Unit 3 Introduction Dreamweaver and Cascading Style Sheets
Unit 4 Flash Development: Dynamic HTML and AJAX

UNIT 1 OVERVIEW OF FLASH TECHNOLOGY

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Definitions
3.1 The Flash MX 2004 Workspace
3.2 The Stage
3.3 Flash Drawing tools
3.4 Flash Tint Tweening and Animation
3.5 Flash Shape Tweening
3.6 Flash Button 1
3.7 Flash Button 2
3.8 Flash Timelines and Animation
3.9 The Panels
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Flash is a tool for creating interactive and animated Web sites. Adobe
Flash (formerly Macromedia Flash) is a multimedia platform
originally acquired by Macromedia and currently developed and
distributed by Adobe Systems.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• explain the concept of flash technology and its application to


multimedia presentations and e-learning
• describe the Flash workplace and the various tools and functions
available in the workplace
• tween single objects and tween groups of objects

221
CIT 735 MODULE 4

• use Flash to create interactive multimedia presentations.

3.0 DEFINITIONS

Flash is a multimedia graphics program especially for use on the Web


and which enables a user to create interactive "movies" on the Web. It
uses vector graphics, which means that the graphics can be scaled to any
size without losing clarity/quality and Flash does not require
programming skills and is easy to learn.

Since its introduction in 1996, Flash has become a popular method for
adding animation and interactivity to web pages. Flash is commonly
used to create animation, advertisements, and various web page Flash
components, to integrate video into web pages, and more recently, to
develop rich Internet applications.

Flash can manipulate vector and raster graphics, and supports


bidirectional streaming of audio and video. It contains a scripting
language called Action Script. Several software products, systems, and
devices are able to create or display Flash content, including Adobe
Flash Player, which is available free for most common web browsers,
some mobile phones and for other electronic devices (using Flash Lite).
The Adobe Flash Professional multimedia authoring program is used to
create content for the Adobe Engagement Platform, such as web
applications, games and movies, and content for mobile phones and
other embedded devices.

Files in the SWF format, traditionally called "ShockWave Flash"


movies, "Flash movies" or "Flash games", usually have a. swf file
extension and may be an object of a web page, strictly "played" in a
standalone Flash Player, or incorporated into a Projector, a self-
executing Flash movie (with the .exe extension in Microsoft Windows
or. hqx for Macintosh). Flash Video files have a. flv file extension and
are either used from within. swf files or played through a flv-aware
player, such as VLC, or QuickTime and Windows Media Player with
external codecs added.

Animated images and Java applets are often used to create dynamic
effects on Web pages. The advantages of Flash are:

• Flash loads much faster than animated images


• Flash allows interactivity, animated images do not
• Flash does not require programming skills, java applets do

212
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Flash Versions include

o Macromedia Flash, Flash MX … Flash 8


o Much better help
o New components
o Better video quality
o ActionScript 2.0
o Adobe Flash CS3, CS4
o Flash 8 is available on Lehigh LANs; trial version of Adobe
Flash CS4 on web

3.1 The Flash MX 2004 Workspace

Tools Timeline Stage Properties Panels


Inspector
Four
parts

Tools

View

Colors

Options

The main part of the workspace is the stage, or the visible part of your
project. Above the stage is the timeline which controls the animation
sequence. To the left is a toolbox containing selection, drawing, editing,
and viewing tools. Below the stage is the properties panel (default
onfiguration) which control the properties of certain tools or the
attributes of objects on the stage. Other panels are organized to the right
of the stage.

213
CIT 735 MODULE 4

3.2 The Stage

The size of the stage and background color are controlled with Modify >
Document… from the main menu or in the Properties Panel before
anything is added to the stage.

3.3 Flash Drawing tools

Flash provides a good interface for creating graphics from scratch beside
its usefulness for creating multimedia content. Graphics created in Flash
can be saved in gif, jpg, png or other formats. Its vector capabilities
allow for easy scaling without loss in quality or detail. Flash drawing is
a vector graphic format, similar to Illustrator or Freehand. Vector
drawings from other programs can be imported into Flash and edited or
illustrations can be created directly in Flash.

There are five drawing tools in Flash, the rest are used to modify various
aspects of the drawing. The drawing tools are found in Drawing
Toolbar, which should be docked at the left side of the screen when you
first start Flash. If you don't have this toolbar open, click on Window -
Toolbar..., check the box in front of Drawing and click OK.

214
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Line Tool Oval Tool


Rectangular Tool

Pencil Tool Text Tool

Flash also has two tools for selecting objects: the Arrow tool and the
Lasso Tool . However, in Flash, their usefulness has been increased
by modifiers. A user can select an object with the arrow tool by either
clicking on it directly or dragging a rectangular shape around the object
with the left-mouse button pressed. The Lasso tool on the other hand
provides a much more free form for selection. It is generally used to
select irregularly shaped objects.

SELF-ASSESSMENT EXERCISE

Activity 1 Draw Lines

a. Select
b. Place the pointer on the Stage
c. Drag the pointer to draw a line
of the length you need
d. Release the mouse

Activity 2 Draw Shapes

a. Create shapes by using the Line, Rectangle, Oval, Pen, or Pencil


Tools
b. Select shapes by using the Selection Tool and the Lasso Tool
c. Edit shapes by using Selection Tool and the Eraser Tool
d. View, move, copy, and delete shapes

Activity 3 Draw Rectangles and Squares

a. To draw a rectangle:
i. Select
ii. Place the insertion point on the Stage
iii. Drag diagonally
b. To draw a square:
i. Hold down the Shift key while dragging
Activity 4 Create Rounded Rectangles

a. Click
b. Click the Round Rectangle Radius modifier
c. Specify the Corner Radius and click OK
d. Place the insertion point and drag diagonally

215
CIT 735 MODULE 4

Activity 5 Draw an Ovals and Circles

a. To draw an oval:
i. Select
ii. Place the insertion point on the stage
iii. Drag diagonally
b. To draw a circle:
i. Hold down the Shift key while dragging

Activity 6 Using the Pen Tool

a. To create a straight line:


i. Select
ii. Click where you want the line to start
iii. Click at a point where you want to place the end point
iv. Drag the direction line
b. To create a closed path:
i. Click the first anchor point
ii. Drag to adjust the curve

Activity 7 Using the Pencil Tool

a. Select
b. Select an option from Pencil Mode list
c. Place the pointer and drag

Activity 8 Copying and deleting shapes

a. To copy a shape:
i. Select the shape
ii. Choose Edit, Copy
iii. Choose Edit, Paste
b. To delete a shape:
i. Select the shape
ii. Choose Edit, Clear

Activity 9 View Shapes


a. The Zoom tool
i. Zoom In to magnify a shape
ii. Zoom Out to reduce a shape
b. The Hand tool
iii. To move the Stage

216
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Activity 10 Brush Tool modifiers

Brush Mode
Brush
Brush Shape
Lock
Brush tool modifiers contain the Faucet modifier, the Eraser Shape
modifier, and the Eraser Mode modifier (Erase Normal, Erase Fills,
Erase Lines, Erase Selected Fills and Erase Inside).

3.4 Flash Tint Tweening and Animation

With tint tweening you can change the color of an object. Tweening
creates frames between keyframes. Keyframes are different cel created
for each action and which synchronize motion change from one stage to
another. Tweening is an action which requires calculating the number of
frames between keyframes and then sketching onto a cel the series of
different actions. Tint changes the color values of each keyframe and
with Tint Tweening you can change the color of an object.

Computer animation can imitate the classical technique, with keyframe,


tweening and layers. e.g., Macromedia Director and Flash both support
these concepts, letting the computer automate the tweening process
where possible. But computer animation introduces new techniques,
designed to conserve resources e..g, rather than reproduce an entire cel
for each frame, individual objects (called sprites in Director) move
across a background image. Authorware motions give this effect;
Director animations provide finer control of sprites. Morphing effect
can be achieved by dissolving from one image to another, e.g., from one
face to another – many specialized morphing software products
available.

Example: In this example you will learn how to change the color of an
object.

217
CIT 735 MODULE 4

Step 1

Load Adobe Flash.

Choose Insert > New Symbol.

Note: To add Tint effects the object must be a symbol.

Step 2

Name the symbol "changecolor" and select the Graphic option in


Behavior. Click OK.

Note: You will now be taken to the symbol generator in the Flash
program. Here you create symbols. Symbols can be dragged to the stage
of your movie after you have created them.

Step 3

Choose the Text tool in the left toolbox. Choose Text > Size > 36 from
the top menu to make the text big. Choose Text > Style > Bold to make
the text thick.

Step 4

Click in the work area and write "Color Changing Text".

Step 5

Jump back to the movie. Do this by choosing

3.5 Flash Shape Tweening

With Shape Tweening you can change one object into another. In this
example you will learn how to change one object into another.

Step 1

Choose the Text tool in the left toolbox. Choose Text > Size > 48 from
the top menu to make the text big. Choose Text > Style > Bold to make
the text thick.

Step 2

Click in the work area and write "Hello".

218
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Step 3

Right click on the text you just wrote and choose Panels > Align from
the pop-up menu.

Step 4

In the Align box select the "To Stage" button first. Then click on the
"Align Horizontal Center" button and the "Align Vertical Center"
button. Close the Align box.

Step 5

Select the Arrow Tool and click on the text. Choose Modify > Break
Apart from the top menu.

Step 6

Insert keyframes at Frame 24, 50 and 51.

3.6 Flash Button 1

In this example you will learn how to insert an image, convert it to a


button, and add a URL to it so it becomes a link.

Step 1

Choose File > Import to import an image that will become a button.
Locate the image and click Open. The image will be saved in the
Library.

Step 2

Select the image with the Arrow tool.

Step 3

Convert the image to a symbol. Choose Insert > Convert to Symbol


from the top menu. Name the symbol "button", choose Button from the
Behavior list and click OK.

Step 4

Right click on the image. Choose Actions from the pop-up menu.

219
CIT 735 MODULE 4

Step 5

In the Object Actions box click on the + sign. Choose Basic Actions >
Get URL.

Step 6

Enter a full URL in the URL field (like http://www.w3schools.com).

Step 7

Choose target in the Window field. Close the Object Actions box.

Step 8

Choose Control > Test Movie from the top menu

3.7 Flash Button 2

In this example you will learn how to create your own button and add a
URL to it so it becomes a link.

Step 1

Choose Insert > New Symbol from the top menu.

Step 2

Name the symbol "button", choose Button from the Behavior list and
click OK. In the Timeline area, you will now see the four states of a
button: up, over, down, hit.

Step 3

Select the Rectangle tool, pick a light red Fill Color and draw a
rectangle in the work area.

Step 4

Select the Text tool, pick a dark Fill Color and write "Click Me" over
the rectangle.

Step 5

Select the Arrow tool and place the text in the middle of the rectangle.

220
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Step 6

Add a keyframe to the Over State in the Timeline. The Over State
indicates what should happen when you mouse over the button.

Step 7

Select the Rectangle, change the Fill color to a light green.

Step 8

Choose Edit > Edit Movie to go back to the movie.

Step 9

Choose Window > Library to locate the button. Drag the button into the
work area.

Step 10

Right click on the image. Choose Actions from the pop-up menu.

Step 11

In the Object Actions box click on the + sign. Choose Basic Actions >
Get URL.

SELF-ASSESSMENT EXERCISE

Activity 11 Working with colors

a. Apply stroke and fill colors to a shape by using the Paint Bucket,
Ink Bottle, and Eyedropper tools
b. Create custom colors, swatches, and line styles

Hexadecimal Values
RGB Colors: 1st 2 – Red Value
2nd 2 – Green Value
3rd 2 – Blue Value
Each Value 00-FF (0-255)
Color Name Hexadecimal Value
Black #0000000
White #FFFFFF
Red #FF0000
Yellow #FFFF00
Green #00FF00
Blue #0000FF

221
CIT 735 MODULE 4

Activity 12 Colors section

Stroke
Fill
Swap Colors
No Color
Black and White
Activity 13 Using the Paint Bucket Tool
a. Click the Paint Bucket Tool
b. Select an option
c. Click the Fill Color box
d. Select a color
e. Click inside the shape

Activity 14 Using the Ink Bottle Tool


a. Click the Ink Bottle Tool
b. Click the Stroke Color box
c. Select a color
d. Click the shape

Activity 15 Using the Eyedropper Tool


a. To copy the stroke color:
i. Click the Eyedropper Tool
ii. Place the pointer on the outline of
shape whose stroke color you want to copy
iii. Click the stroke of the shape
iv. Click the outline of the shape to which you want to apply
the copied stroke color

b. To copy the fill color:


i. Click the Eyedropper Tool
ii. Place the pointer inside the shape whose fill color you
want to copy
iii. Click the fill of the shape
iv. Click inside the shape to which you want to apply the fill
color

222
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Activity 16 Creating a custom color

a. Select a color from Fill Color palette


in the Color Mixer panel
b. Click the triangle on the upper-right corner of the Color Mixer
panel
c. From the menu, choose a color mode
d. Edit values in R, G, B, and Alpha boxes
e. From Options menu, choose Add Swatch

Activity 17 Creating a custom gradient

a. From Fill style list, select gradient type


b. Adjust position of the various sliders
c. Display the Options menu and choose Add Swatch

Activity 18 Shape selection tools


a. Selection tool

i. Select an object by clicking on it with mouse


ii. Or select a group of objects by click-dragging to surround them
with a selection box

Making marquee selections

w. Select the Selection Tool or the Subselection Tool


x. Place the pointer at a position where you want the selection to
start
y. Drag the pointer to cover all the shapes
z. Release the mouse

c. Lasso tool

i. Select a group of objects by drawing a freehand or polygonal box


around them
ii. Or click, then click to draw polygonal shapes

Making freeform marquee selections

w. Select the Lasso Tool


x. Place the pointer at a position where you want the selection to
start
y. Drag the pointer to draw a line around the shapes you want to
select
z. Connect the starting and ending points of the line

223
CIT 735 MODULE 4

d. Subselection tool
i. Lets you manipulate control points in a vector drawing
e. Selection and Free Transform Tool modifiers

i. Smoothes out any sharp areas

ii. Straightens out any curves

iii. Helps rotate a shape

iv. Helps resize a shape

v. Helps distort a shape

vi. Helps warp and distort objects

Activity 19 Combining shapes

a. Select a shape
b. Move the selected shape over the other shape to place it in such a
way that it represents the shape that you need
c. Deselect the shape

Activity 20 Grouping shapes

a. To create a group:
i. Select the shapes
iii. Choose Modify, Group
c. To ungroup shapes:
i. Select the group
ii. Choose Modify, Ungroup
d. To modify the group:
i. Double-click the group
ii. Make modifications
e. To deselect the group:
i. Double-click anywhere on the Stage

Activity 21 Types of Text


a. Static text
i. Can be horizontal or vertical
b. Dynamic text
i. Can load text from a data file
ii. Can be scrollable

224
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

c. Input text
a. Can mask text as password text

d. Creating extending text block


i. Select
ii. Click where you want to insert text
iii. Type the text

e. Changing font and font size


i. To change the font:
x. In the Properties Inspector, from the Font list, select a font
-or-
y. Choose Text, Font, and then choose an option
ii. To change the font size:
x. In the Properties Inspector, drag the font size slider
-or-
y. Choose Text, Size, and then choose an option

f. Changing font style


x. In the Properties Inspector, click the Bold or the Italic
button
-or-
y. Choose Text, Style and then choose an option

g. Aligning text
x. Choose Text, Align, and choose an alignment option
-or-
y. Select the text block and click an alignment button
(Properties Inspector)

3.8 Flash Timelines and Animation

The timeline is broken into units called frames which are displayed in
the Flash project

225
CIT 735 MODULE 4

at a rate of a certain number of frames per second or fps. The location


of playhead along the timeline permits you to see how the stage appears
at that moment. Scrubbing the playhead along the timeline allows you to
see the animation. The action of objects on the stage is controlled by
setting keyframes at positions along the timeline when it is necessary to
make a change to the object (position, shape, color, etc.)

Smooth transitions between the shape of two objects or their motion can
be made by placing a tween between the keyframe at the beginning state
of the object and the keyframe at the end state of an object. The objects
on the stage are controlled by their independent timelines and organized
in layers. The layers can be thought of as a stack with the topmost layer
appearing at the front of the stage, on top of the other objects.

Layer Selected

Layers

Insert Layer Delete Layer


Renaming a layer
i. Choose Modify, Layer and specify the name
or
ii. Right-click a layer, choose Properties, and specify the name
or
iii. Double-click the layer, type the new name for the layer, and press
Enter

Deleting layers:
i. Click
or
ii. Drag the layer to the Delete Layer button
or
iv. Right-click the layer and choose Delete Layer

226
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Locking and unlocking layer


Lock/Unlock All Layers
button

Locked layer

Unlocked layer
Locking and hiding a layer

Show/Hide All
Visible layer
Layers button

Hidden layer

3.9 The Panels

Flash panels serve different purposes such as the positioning and


alignment of objects on the stage, the control and selection of color, a
library of the objects and symbols used in the project.

The most important panel to understand as you develop a project is the


Library Panel
Component images may be imported to the library or to the stage in their
native format.

Objects that you draw may also be added to the library.

As you convert the native objects to symbols for use in Flash, the
symbol also appears in the library. The symbol is only stored once, even
though it may appear several times in a project. Once you drag or copy a

227
CIT 735 MODULE 4

symbol to the stage, you are only viewing an instance of the same
symbol.

There are 3 types of symbols:

o Movie Clip
o Button
o Graphic

4.0 CONCLUSION

Flash is commonly used to create animation, advertisements, and


various web page Flash components, to integrate video into web pages,
and more recently, to develop rich Internet applications.

5.0 SUMMARY

In this unit, we have learnt that:

• Flash multimedia authoring is used to create content such as web


applications, games and movies, and content for mobile phones
and other embedded devices.
• Flash provides a good interface for creating graphics from scratch
beside its usefulness for creating multimedia content.
• The main part of the Flash workspace is the stage, or the visible
part of your project.
• Flash toolbox contains selection, drawing, editing, and viewing
tools.
• Flash timeline is broken into units called frames which are
displayed in the Flash project at a rate of a certain number of
frames per second or fps.
• Flash panels serve different purposes such as the positioning and
alignment of objects on the stage, the control and selection of
color, a library of the objects and symbols used in the project.

6.0 TUTOR-MARKED ASSIGNMENT

i. Download and Install Adobe Flash from www.adobe.com


ii. Use Flash to create interactive animated objects which can be
used in a given story line.

228
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

7.0 REFERENCES/FURTHER READING

Wininstall Macromedia Flash Animation effects

Flash — 1 Flash Workspace © 2008, Cascadia Graphics & Publishing,


LLC.

Mike Christel and Alex Hauptmann (2002). Introduction to Multimedia


and MSEC 20-791 http://www.cs.cmu.edu/~christel/MM2002/

229
CIT 735 MODULE 4

UNIT 2 FLASH ANIMATION

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Opening the sample file
3.1 Increasing the life span of the logo components
3.2 Tweening an object
3.3 Previewing the animation
3.4 Exporting a movie
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

This unit explore flash animation using Corel R.A.V.E.™, a powerful


object-based animation program designed for creating animated graphics.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• add animation effects to an object


• increase the life span of objects
• tween single objects and tween groups of objects
• preview animation effects
• export a project to the Macromedia Flash™ (SWF) format

3.0 OPENING THE SAMPLE FILE

You'll start by copying or creating the NOUN logo with


CORELDRAW©. If it has been previously created and saved, you can
follow the following processes to retrieve it.

1. Click File menu ► Open.


2. From the Look in list box, choose the folder that contains the
NOUN logo.
3. Double-click the filename NounLogo.cdr.

230
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

3.1 Increasing the life span of the logo components

Currently, the logo exists in one frame only. You'll make the logo
appear in 20 frames by extending the timelines of all its objects
simultaneously. To do this, you'll temporarily group all the objects in the
logo.

1. In the Timeline docker, click the plus (+) sign to view the logo
components. The coffee shop name and the steam coming out of
the cup are single curve objects; the cup and the background are
each a group of objects.

2. Double-click the Pick tool to select all the objects in the logo.
Click Arrange menu ► Group.
3. In the Timeline docker, a new group that contains the four logo
components displays.
4. Hold down Ctrl, and in the Timeline docker, drag the black dot
associated with the new group to frame 20. Holding down Ctrl
lets you simultaneously extend the timelines of all objects in a
group.
5. Click Arrange menu ► Ungroup.

The timelines of all logo components have been extended from frame 1
through to frame 20.

3.2 Tweening an object

Now you'll tween the steam to give it the animation effect of rising from
the cup. To accomplish this, you'll add keyframes to the steam's timeline
and resize the steam at the keyframes.

To add keyframes

1. In the Timeline docker, click the object name Steam to select the
steam.
2. Click frame 5 in the steam's timeline.
3. In the Timeline docker, click the Insert keyframe button .

A square that indicates a keyframe displays at frame 5 in the steam's


timeline. Also, keyframes are automatically inserted at the start and end
frames of the steam's timeline.

4. Repeat steps 2 and 3 to insert keyframes at frames 10 and 15.


This is how the steam's timeline should look:

231
CIT 735 MODULE 4

To resize the steam at the keyframes

1. Click the keyframe at frame 1 in the steam's timeline.

2. Hold down Shift, and on the stage, drag a corner selection handle
inward to resize the steam proportionally.

Holding down Shift keeps the center of the steam stationary.


The Scale factor stacked boxes on the property bar should display
values of about 20%.

3. Drag the steam down to the top of the cup.

4. Click frame 5 in the steam’s timeline.

5. Hold down Shift, and on the stage, drag a middle side selection
handle inward to reduce the width of the steam.

The upper Scale factor box on the property bar should display a value
of about 15%.

3.3 Previewing the animation


In the Timeline docker, drag the playhead from frame 1 to frame
20. The steam rises from the cup between frames 1 and 5 and spreads
out between frames 5 and 10. Do not edit the steam at frames 10, 15,
and 20, so for now, the steam does not change between these frames.

Tweening a group of objects

Tweening groups of objects lets you quickly add animation effects to


images consisting of multiple objects. Now you'll make the cup and the
steam appear to turn around between frames 10 and 20. Even though the
cup is a group of objects, you'll add keyframes to the group's timeline
and edit the group at some of the keyframes as if it were a single object.

232
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

To add keyframes to a group's timeline

1. In the Timeline docker, click the Cup group to select the cup.
2. Click frame 10 in the cup's timeline.
3. Click the Insert keyframe button to add a keyframe at frame 10.
4. Repeat steps 2 and 3 to add a keyframe at frame 15.
5. Expand the tree for the Cup group to view the timelines of the
individual objects within the group. This is how the cup's
timeline should look:

You are now ready to edit the cup at the keyframes. You are going to
resize the cup and the steam at frame 15.

To resize the cup

1. In the Timeline docker, click the keyframe at frame 15 in the


cup’s timeline.
2. Hold down Shift, and on the stage, drag a middle side selection
handle inward to reduce the width of the cup. Holding down
Shift keeps the center of the cup stationary.

The resized cup should be about 5 pixels wide. The width of the cup is
displayed in the upper Object(s) size box on the property bar.

To resize the steam

1. In the Timeline docker, click frame 15 in the steam’s timeline.


2. Hold down Shift, and on the stage, drag a middle side selection
handle inward to reduce the width of the steam. If necessary, drag
the steam to center it above the cup.

The resized steam should be about 5 pixels wide.

To preview the animation by using the movie control panel .

1. On the movie control panel, click the Play button .

233
CIT 735 MODULE 4

In the first part of the animation, the steam rises from the cup, while the
cup doesn’t change. In the second part of the animation, both cup and
steam appear to turn around.

2. To stop the preview, click the Stop button .

3.4 Exporting a movie

To use a Corel R.A.V.E. project on the World Wide Web, you must
export it. Now you’ll export the animated company logo to the
Macromedia Flash (SWF) format.

1. Click File menu 0 Export.


2. In the Save in list box, choose the folder where you want to save
the file.
3. From the Save as type list box, choose SWF - Macromedia
Flash.
4. Click Export.
5. Click OK.

4.0 CONCLUSION

Flash animation is the use of Flash technology to create interactive and


animated objects.

5.0 SUMMARY

In this unit, we have learnt how to:

• add animation effects to an object


• increase the life span of objects
• tween single objects and tween groups of objects by adding
keyframes, resizing the steams, cups etc
• preview animation effects
• export a project to the Macromedia Flash™ (SWF) format.

6.0 TUTOR-MARKED ASSIGNMENT

7.0 REFERENCES/FURTHER READING

Corel R.A.V.E. tutorial (2003). Tutorial: Creating an animated logo.


Copyright 2002 – 2003 Corel Corporation.

234
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 3 INTRODUCTION DREAMWEAVER AND


CASCADING STYLE SHEETS

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 HTML Basics
3.1 The Dreamweaver workspace layout
3.2 Insert an image placeholder
3.3 Create links
3.4 Formatting Your Page with CSS
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 Reference/Further Reading

1.0 INTRODUCTION

Dreamweaver is high level web editor that writes html,javascript and


styling attributes for you. However, it's interface is a bit more
complicated than a html coding web editor like Homesite. For this
reason Macromedia have provided quite a few tutorials to help learners
get familiar with Dreamweaver. Dreamweaver is a easy to use software
that allows you to create professional web Pages.

The design edition features of Dreamweaver allow users to quickly add


objects and functionality to your pages, without having to program the
HTML code manually. It's possible to create tables, edit frames, work
with layers, insert JavaScript behaviors, etc., in a very simple and visual
way. In addition, it includes complete FTP client software, allowing
among other things to work with visual maps of the Web sites, and
updating the Web site in the server without leaving the program.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• Learn about Dreamweaver and its difference from using the text
editor for writing html
• Be able to navigate around the Dreamweaver environment and
use it’s various components
• Be able to setup a Dreamweaver site
• Use the image placeholder component and insert tables flash
video

235
CIT 735 MODULE 4

• Recognize CSS scripts and be able to use for web page


formatting
• Publish a site to the web/internet and it’s settings on
Dreamweaver

3. 0 HTML BASICS

The Pages that we see in the Internet are written using HTML language
(HyperText Markup Language). This language is based on tags that
mark the beginning and end of each element of the web Page.

For example, the title of the web Page is written between the <TITLE>
and </TITLE> tags. As you see, both labels have a command between
the symbols "<" and ">". The first label indicates a beginning, and
second, which includes the symbol "/", indicates the end.

The tags have attributes that allow us to define the characteristics of the
element on which they act. For example, <TABLE border="1">
indicates that the table will have a border of width 1.

A basic HTML Page will be like this:

<HTML>

<HEAD>

<TITLE> My first web Page </TITLE>

<BODY>

<A href:"http://www.teacherclick.com"> Click here to go to


teacherClick</A>

rest of the web Page...

</BODY>

<HTML>

Tags that are introduced in an HTML document are not visible when the
document is in a browser (Explorer, Netscape, etc). When a user
requests to see a Page, the Web server sends the Page to the browser and
it interprets the tags to format the Page.

When we use Dreamweaver to create a web Page we don't have to worry


about HTML technicalities. Dreamweaver will automatically insert the

236
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

tags necessary to construct the Page with the defined appearance and
content in the graphical editor.

3.1 The Dreamweaver workspace layout

Dreamweaver provides an all-in one- window integrated layout. In the


integrated workspace, all windows and panels are integrated into a
single larger application window.

The main elements of Dreamweaver are:

• an object palette - this allows you to insert objects like images,


rollovers, tables, navigational bars, email links,flash movie etc.
With rollovers it writes the javascript for you.
• launcher palette - this allows you access to a site overview, a
library (where you can keep templates etc), css styles (select
these from a list after creating them, the source html code and a
history box that allows you to trace your path back and undo
things when you change your mind.
• properties palette - this shows you the various options associated
with a given tag.

1. Document window

237
CIT 735 MODULE 4

Design view is a design environment for visual page layout, visual


editing, and rapid application development. In this view, Dreamweaver
displays a fully editable, visual representation of the document, similar
to what you would see viewing the page in a browser.

Code view is a hand-coding environment for writing and editing HTML,


JavaScript, server-language code- -such as PHP or ColdFusion Markup
Language (CFML)--and any other kind of code.

Code and Design view lets you view both Code view and Design view
for the same document in a single window.

2. Document toolbar

Server Debug displays a report to help you debug the current


ColdFusion page. The report includes errors, if any, in your page.

Document Title allows you to enter a title for your document, to be


displayed in the browser's title bar. If your document already has a title,
it appears in this field

No Browser/Check Errors enables you to check cross-browser


compatibility

Validate Markup lets you validate the current document or a selected


tag.

File Management displays the File Management pop-up menu

Preview/Debug in Browser allows you to preview or debug your


document in a
browser. Select a browser from the pop-up menu.

Refresh Design View refreshes the document's Design view after you
make changes in Code view. Changes you make in Code view don't
automatically appear in Design view until you perform certain actions,
such as saving the file or clicking this button.

238
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

View Options allows you to set options for Code view and Design view,
including which view should appear above the other. Options in the
menu are for the current view: Design view, Code view, or both.

Visual Aids lets you use different visual aids to design your pages.

3. Status bar

The tag selector shows the hierarchy of tags surrounding the current
selection.

The Hand tool lets you click the document and drag it in the Document
window. Click the Select tool to disable the Hand tool.
The Zoom tool and Set Magnification pop-up menu let you set a
magnification level for
your document

The Window Size pop-up menu (visible in Design view only) lets you
resize the Document window to predetermined or custom dimensions.

4. Insert bar

The Common category enables you to create and insert the most
commonly used objects, such as images and tables

The Layout category enables you to insert tables, div tags, layers, and
frames

The Forms category contains buttons for creating forms and inserting
form elements

The Text category enables you to insert a variety of text- and list-
formatting tags, such

239
CIT 735 MODULE 4

as b, em, p, h1, and ul.

The HTML category enables you to insert HTML tags for horizontal
rules, head content, tables, frames, and scripts

Server-code categories are available only for pages that use a particular
server language, including ASP, ASP.NET, CFML Basic, CFML Flow,
CFML Advanced, JSP, and PHP.

The Application category enables you to insert dynamic elements such


as recordsets, repeated regions, and record insertion and update forms.

The Flash elements category enables you to insert Macromedia Flash


elements.

The Favorites category enables you to group and organize the Insert
bar buttons you
use the most in one common place.

5. Coding Toolbar

The Coding toolbar contains buttons that let you perform many standard
coding operations, such as collapsing and expanding code selections,
highlighting invalid code, applying and removing comments, indenting
code, and inserting recently used code snippets. The Coding toolbar is
visible only in Code view and appears vertically on the left side of the
Document window.

6. Property inspector

The Property inspector lets you examine and edit the most common
properties for the currently selected page element, such as text or an
inserted object. The contents of the Property inspector vary depending
on the element selected. For example, if you select an image on your
page, the Property inspector changes to show properties for the image.

7. Dreamweaver sites
In Dreamweaver, the term "site" can refer either to a website or to a
local storage location for the documents that belong to a website. A

240
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

Dreamweaver site consists of as many as three parts, depending on your


computing environment and the type of website you are developing.

Local folder is your working directory. Dreamweaver refers to this


folder as your local site. The local folder is usually a folder on your hard
disk.

Remote folder is where you store your files, depending on your


environment, for testing, production, collaboration, and publication.
Dreamweaver refers to this folder as your remote site. The remote folder
is a folder on the computer that's running your web server. The
computer running the web server is often (but not always) the computer
that makes your site publicly available on the web.

Folder for dynamic pages (Testing Server folder) is the folder where
Dreamweaver processes dynamic pages. This folder is often the same
folder as the remote folder. You do not need to worry about this folder
unless you are developing a web application.

Set up your project files

To create a new website, a Dreamweaver local folder must be defined


for each new website you create. The local folder is the folder that is use
to store working copies of site files on the hard disk. The local folder
must be defined for certain Dreamweaver features can work properly.

i. Create and name a new folder called new local folder on


the hard disk.
ii. Start Dreamweaver and select Site > Manage Sites. The
Manage Sites dialog box appears
iii. Click the New button and select Site. The Site Definition
dialog box appears.
iv. If the wizard (Basic tab) appears, click the Advanced tab
and select Local Info from the Category list (it should be
the default).
v. In the Site Name text box, enter the site name as the name
of the site.
vi. In the Local Root Folder text box, specify the new local
folder folder that was copied to the local_sites folder in the
previous section.
vii. In the Default Images Folder text box, specify the images
folder that already exists in the new local folder folder.
viii. Click OK.
ix. Click Done to close the Manage Sites dialog box

241
CIT 735 MODULE 4

To save Dreamweaver file

1. In Dreamweaver, select File > New.


2. On the General tab of the New Document dialog box, select
Basic Page from the Category list, select HTML from the Basic
Page list, and click Create.
3. Select File > Save As.
4. In the Save As dialog box, browse to and open the new local
folder folder that was defined as the site's local root folder.
5. Enter index.html in the File Name text box and click Save.
6. In the Document Title text box at the top of your new document,
type site name.
7. Select File > Save to save your page

8. Insert tables

a) First we're going to insert a table we click on the second icon


down on the left on the objects palette:

Pick a table with two columns and three rows thats 100% wide.

b) Merge the first row by selecting both cells and pressing 'm' (for
merge). Type in our first web page with Dreamweaver. Select
this text click on the Text menu, Format submenu and then H1.
Right click on now on the text and choose edit tag <h1>. Type in
align=center.

242
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

c) Styling can be approached from many different angles in


Dreamweaver. To keep to the methods we've learned to date we
will format this title using a style sheet.

Click on Text menu, CSS Styles submenu, Edit Style Sheet and then
New. Leave the selection at the default custom style sheet (class) and
type in a name i.e. title. Choose a font, a color and select underline. Note
before we go on that by clicking on the different cathegories that we get
access to the various styling features that we used using the TopLite
styling editor in Homesite.

Now select the text again choose Text, CSS Styles and then .title which
should now be listed.

To insert tables, following the steps below:

1. Click once on the page to place the insertion point in the upper-
left corner of the page.
2. Select Insert > Table.

3. In the Insert Table dialog box, do the following:

a. Enter 3 in the Rows text box.


b. Enter 1 in the Columns text box.
c. Enter 700 in the Table Width text box.
d. Select Pixels from the Table Width pop-up menu.
e. Enter 0 in the Border Thickness text box.

243
CIT 735 MODULE 4

f. Enter 0 in the Cell Padding text box.

4. Click OK.

A table with three rows and one column appears in your document. The
table is 700 pixels wide with no border, cell padding, or cell spacing.

5. Click once to the right of the table to deselect it.


6. Select Insert > Table to insert another table.
7. In the Insert Table dialog box, do the following for the second
table:
a. Enter 1 in the Rows text box.
b. Enter 3 in the Columns text box.
c. Enter 700 in the Table Width text box.
d. Select Pixels from the Table Width pop-up menu.
e. Enter 0 in the Border Thickness text box.
f. Enter 0 in the Cell Padding text box.
g. Enter 0 in the Cell Spacing text box.
8. Click OK.
A second table with one row and three columns appears below your
first table.

9. Click to the right of the table to deselect it.


10. Insert a third table by selecting Insert > Table and entering the
following values in the Insert Table dialog box:
a. Enter 1 in the Rows text box.
b. Enter 1 in the Columns text box.
c. Enter 700 in the Table Width text box.
d. Select Pixels from the Table Width pop-up menu.
e. Enter 0 in the Border Thickness text box.
f. Enter 0 in the Cell Padding text box.
g. Enter 0 in the Cell Spacing text box.

11. Click OK.

A third table, with one row and one column, appears below your second
table

8. Tables’ Properties

1. Set table properties


1. Select View > Table Mode > Expanded Table Mode.

244
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

2. Click once inside the first row of the first table.


3. In the Property inspector (Window > Properties), enter 90 in the
Cell Height (H) text box and press Enter

4. Click once inside the second row of the first table.


5. In the Property inspector, enter 166 in the Cell Height text box
and press Enter
6. Click once inside the third row of the first table
7. In the Property inspector, enter 24 in the Cell Height text box and
press Enter
8. Click once inside the first column of the second table.
9. In the Property inspector, enter 140 in the Cell Width (W) text
box and press Enter
10. Click once inside the second column of the second table.
11. In the Property inspector, enter 230 in the Cell Width text box
and press Enter
12. Set the width of the third column to 330 pixels.
13. Finally, click once inside the last table (the table with one row
and one column)
14. In the Property inspector, enter 24 in the Cell Height text box and
press Enter
15. Click the Exit Expanded Tables Mode link at the top of the
Document window to return to Standard mode.
16. Save your page

245
CIT 735 MODULE 4

SELF-ASSESSMENT EXERCISE

i. Create a site folder in Dreamweaver


ii. Draw a table with three columns and ten rows in use colspan to
give it a heading
iii. Use borders in the tables and make use of background colors for
the table use a different color for the column heading

3.2 Insert an image placeholder

An image placeholder is a graphic that you use until final artwork is


ready to be added to a web page. An image placeholder is useful when
you lay out web pages because it allows you to position an image on a
page before you actually create the image.

1. In the Document window, click once inside the first row of the
first table.
2. Select Insert > Image Objects > Image Placeholder.
3. In the Image Placeholder dialog box, do the following:

a. Type banner_graphic in the Name text box.


b. Enter 700 in the Width text box.
c. Enter 90 in the Height text box.
d. Click the color box and select a color from the color
picker. For this tutorial, select a reddish brown (#993300).
e. Leave the Alternate Text text box blank.

4. Click OK

1. Add color to the page

1. Click once inside the first cell of the three columned table
2. Click the <td> tag (cell tag) in the tag selector to select the cell.
3. In the Property inspector (Window > Properties), click once
inside the Background Color text box
4. In the Background Color text box, enter the hexadecimal value
#993300 and press Enter
5. Click once inside the second cell of the three columned table.
6. Click the <td> tag (cell tag) in the tag selector to select the cell.
7. In the Property inspector, click once inside the Background Color
text box, enter the hexadecimal value #F7EEDF, and press Enter
8. Repeat steps 5 through 7 to change the color of the third table cell
to light tan as well.

246
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

2. Page Properties

The Page Properties dialog box lets you set a number of page properties,
including the size and color of page fonts, the colors of visited links,
background color, page margins, etc.

1. Select Modify > Page Properties.


2. In the Appearance category of the Page Properties dialog box,
click the Background Color color box and select black (#000000)
from the color picker.
3. Click OK.

247
CIT 735 MODULE 4

3 Replacing Imageholder

1. In Dreamweaver, open the index.html


2. Double-click the image placeholder, banner_graphic, at the top of
the page.
3. In the Select Image Source dialog box, navigate to the images
folder inside the cafe_townsend folder that you defined as your
site root folder.

4. Select the banner_graphic.jpg file and click OK.


5. Click once outside the table to deselect the image.
6. Save the page.

4. Insert an image by using the Insert menu

1. Click once inside the third row of the first table (two rows below
the banner graphic you just inserted, just above the colored table
cells).
2. Select Insert > Image.
3. In the Select Image Source dialog box, navigate to the images
folder inside the new local folder folder, select the
body_main_header.gif file, and click OK.

5. Insert an image by dragging

1. Click once inside the last row of the last table on the page (just
below the colored table cells).
2. In the Files panel (Window > Files), locate the
body_main_footer.gif file (it's inside the images folder), and drag
it to the insertion point in the last table.
3. Click once outside the table and save the page (File > Save).

248
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

6. Insert an image from the Assets panel

1. Click once inside the center column of the three columned table
(the first table cell that is colored light tan).
2. In the Property inspector (Window > Properties), select Center
from the Horz pop-up menu, and select Top from the Vert pop-up
menu. This aligns the contents of the table cell in the middle of
the cell, and pushes the cell's contents to the top of the cell.
3. Click the Assets tab in the Files panel, or select Window > Assets.
Your site assets appear.

If Images view isn't selected, click Images to view the image assets.

7. Insert and play a Flash file

1. With the index.html page open in the Dreamweaver Document


window, click once inside the second row of the first table.
2. In the Property inspector (Window > Properties), select Center
from the Horz pop-up menu, and select Middle from the Vert
pop-up menu
3. Select Insert > Media > Flash.
4. In the Select File dialog box, browse to the flash_fma.swf file
(it's in the root folder), select the file, and click OK.
5. The Flash content placeholder should remain selected after you
insert the SWF file, as long as you don't click anywhere else on
the page.
6. In the Property inspector (Window > Properties), click Play.

8. Insert Flash Video

1. With the index.html page open in the Dreamweaver Document


window, click once above the graphic that you placed in the
center column of the three-columned table.

249
CIT 735 MODULE 4

2. Select Insert > Media > Flash Video.


3. In the Insert Flash Video dialog box, select Progressive
Download Video from the Video type pop-up menu
4. In the URL text box, specify a relative path to the
cafe_townsend_home.flv file by clicking Browse, navigating to
the new_ sites_home.flv file and selecting the FLV file.
5. Select Halo Skin 2 from the Skin pop-up menu.
6. In the Width and Height text boxes, do the following:
a. In the Width text box, type 180.
b. In the Height text box, type 135 and press Enter
7. Leave the default selections for the remaining options:
a. Constrain maintains the same aspect ratio between the
width and height of the Flash Video component. This
option is selected by default.
b. Auto play specifies whether to play the video when the
web page is opened. This option is deselected by default.
c. Auto rewind specifies whether the playback control
returns to starting position after the video finishes playing.
This option is deselected by default.
8. Click OK to close the dialog box and add the Flash Video content
to your web page.

9. Insert body text

1. In the Files panel, locate the sample_text.txt file (in the root
folder) and double-click the file's icon to open it in Dreamweaver.
2. In the sample_text.txt Document window, press Control+A
(Windows), and then select Edit > Copy to copy the text.
3. Close the sample_text.txt file by clicking the X in the top-right
corner of the document.
4. In the index.html Document window, click once inside the third
table cell of the three-columned table (the cell to the right of the
column that contains the graphic and the Flash video).
5. Select Edit > Paste.
6. Make sure the insertion point is still inside the table cell where
you just pasted the text.
If it isn't, click inside the table cell.
7. In the Property inspector (Window > Properties), select Top from
the Vert pop-up menu. This aligns the text you just pasted to the
top of the table cell. If you cannot see the Vert pop-up menu,
click the expander arrow in the lower-right corner of the
Property inspector.
8. Save the page.

250
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

10. Insert text for a navigation bar

1. Click once in the first column of the three columned table (the
column that is colored reddish-brown).
2. Type the word Open Learning
3. Press the Spacebar and type Noun
4. Repeat the previous step until you've entered the following words
with a space between each one: Course, Faculty, Study Centre,
Duration.
5. With the insertion point still in the first cell of the three-columned
table, click the <td> tag in the tag selector
6. In the Property inspector (Window > Properties), select Top from
the Vert pop-up menu. This aligns the text you just typed to the
top of the table cell.
7. Save your page.

3.3 Create links

1. With the index.html page open in the Document window, select


the word Open Learning that you typed in the first cell of the
three columned table. Be careful to select the word Open
Learning only, and not the space after it.
2. In the Property inspector (Window > Properties), click the folder
icon next to the Link text box.
3. In the Select File dialog box, browse to the menu.html file
4. Click once on the page to deselect the word Open Learning. The
Open Learning text is underlined and blue, indicating that it's
now a link.
5. Repeat the previous steps to link each word or set of words that
you typed for the navigation. You want to create five more links:
one for Noun, Course, Faculty, Study Centre, Duration.
6. Save your page.

3.4 Formatting Your Page with CSS

Cascading Style Sheets (CSS) are a collection of formatting rules that


control the appearance of content on a web page. When you use CSS to
format a page, you separate content from presentation. The content of
your page (the HTML code) resides in the HTML file itself, while the
CSS rules that define the presentation of the code reside in another file
(an external style sheet) or in another part of the HTML document
(usually the <head> section).

Cascading Style Sheets (CSS) refines HTML formatting and provides


better control over positioning and layering content. CSS lets you
control many properties that cannot be controlled with HTML alone. A

251
CIT 735 MODULE 4

style sheet is a text file that contains one or more rules that determines
how certain HTML elements in web pages should be displayed by
setting desire properties and values.. For example, you can specify
different font sizes and units (pixels, points, and so on) for selected text.
By using CSS to set font sizes in pixels, you can also ensure a more
consistent treatment of your page layout and appearance in multiple
browsers. A CSS formatting rule consists of two parts, namely the
selector and the declaration.

The selector is a term (such as P, H1, a class name, or an id) that


identifies the formatted element, and the declaration defines what the
style elements are. In the following example, H1 is the selector, and
everything that falls between the braces ({}) is the declaration
H1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight: bold;
}
The declaration consists of two parts, the property (such as font-family),
and the value (such as Helvetica). The preceding example creates a style
for H1 tags: The text for all H1 tags linked to this style is 16 pixels in
size, and uses Helvetica font and bold. A font-family declaration
specifies a specific font you want to use in your site:

<STYLE TYPE="text/css">
.E-LEARNING {
font-family:"Ahmadu Way", "NOUN", sans-serif; /* Try
these fonts, in order */
font-size: 24pt;
font-weight: bold;
text-transform: uppercase;
}
</STYLE>
<font class="E-LEARNING">Multimedia Learning</font>

The term cascading refers to your ability to apply multiple styles to the
same element or web page. For example, you can create one CSS rule to
apply color and another rule to apply margins, and apply them both to
the same text on a page. A major advantage of CSS is that it can be
updated easily; when you update a CSS rule in one place, the formatting
of all of the documents that use the defined style are automatically
updated to the new style.

252
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

The following types of rules can be defined in Dreamweaver:

1. Custom CSS rules, also called class styles, let you apply style
attributes to any range or block of text.
2. HTML tag rules redefine the formatting for a particular tag, such
as p or h1. When you create or change a CSS rule for the h1 tag,
all text formatted with the h1 tag is immediately updated.

CSS selector rules (advanced styles) redefine the formatting for a


particular combination of elements, or for other selector forms as
allowed by CSS (for example, the selector td h2 applies whenever an h2
header appears inside a table cell.) Advanced styles can also redefine the
formatting for tags that contain a specific id attribute (for example, the
styles defined by #myStyle apply to all tags that contain the attribute-
value pair id="myStyle").

1. Create a new style sheet

First, you'll create an external style sheet that contains a CSS rule that
defines a style for paragraph text. When you create styles in an external
style sheet, you can control the appearance of multiple web pages from a
central location, instead of setting styles on each individual web page.

1. Select File > New.


2. In the New Document dialog box, select Basic page in the
Category column, select CSS in the Basic Page column, and click
Create.
3. Save the page (File > Save) as new_folder.css.
4. Type the following code in the style sheet:
P
{
font-family: Verdana, sans-serif;
font-size: 11px; color: #000000;
line-height: 18px;
padding: 3px;
}

2. Attach a style sheet

When you attach a style sheet to a web page, the rules defined in the
style sheet are applied to the corresponding elements on the page. For
example, when you attach the new_folder.css style sheet to the
index.html page, all paragraph text (text formatted with the <p> tag in
the HTML code) is formatted according to the CSS rule you defined.

253
CIT 735 MODULE 4

1. In the Document window, open the index.html file.


2. Select the text of the first paragraph that you pasted into the page
3. Look in the Property inspector and make sure that the paragraph
is formatted with the paragraph tag.
4. Repeat step 3 for the second paragraph.
5. In the CSS Styles panel (Window > CSS Styles), click the Attach
Style Sheet button in the lower-right corner of the panel.
6. In the Attach External Style Sheet dialog box, click Browse and
browse to the new_folder.css file that you created in the previous
section.

3. Explore the CSS Styles panel

1. Make sure the index.html page is open in the Document window.


2. In the CSS Styles panel (Window > CSS Styles), click All at the
top of the panel and examine your CSS rules
3. Click plus (+) to expand the <style> tag category if it isn't already
expanded.
4. Click the body rule.
5. Click plus (+) to expand the new_folder.css category.
6. Click the p rule.
7. In the Document window, click once anywhere in either of the
two paragraphs that you just formatted.
8. In the CSS Styles panel, click Current at the top of the panel and
examine your CSS styles. In Current mode, the CSS panel shows
you a summary of properties for the current selection. The
properties shown correspond to the properties for the p rule in the
external style sheet.

4. Create a new CSS rule

1. In the CSS Styles panel, click New CSS Rule in the lower-right
corner of the panel
2. In the New CSS Rule dialog box, select Class from the Selector
Type options.
3. Enter .bold in the Name text box.
4. Select cafe_townsend.css from the Define In pop-up menu. It
should be selected by default.
5. In the CSS Rule Definition dialog box, do the following:
a. In the Font text box, enter Verdana, sans-serif.
b. In the Size text box, enter 11 and select pixels from the
pop-up menu immediately to the right.
c. In the Line Height text box, enter 18 and select pixels
from the pop-up menu immediately to the right.
d. Select bold from the Weight pop-up menu.
e. Enter #990000 in the Color text box

254
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

5. Apply a class style to text

1. In the Document window, select the first four words of text in the
first paragraph:
2. In the Property inspector (Window > Properties), select bold
from the Styles popup menu
3. Repeat step 2 to apply the bold class style to the first four words
of the second paragraph.

6. Create a new rule for the navigation

1. Open the new_folder.css file if it isn't already open, or click on its


tab to see it.
2. Define a new rule by typing the following code in the file, after
the .bold class style: navigation { }
3. Open the index.html file if it isn't already open.
4. In the CSS Styles panel, make sure All mode is selected, select
the new .navigation rule and click Edit Style in the lower-right
corner of the panel.
5. In the CSS Rule Definition dialog box, do the following:
a. Enter Verdana, sans-serif in the Font text box.
b. Select 16 from the Size pop-up menu, and select pixels
from the pop-up menu immediately to the right of the Size
pop-up menu.
c. Select Normal from the Style pop-up menu.
d. Select None from the Decoration list.
e. Select Bold from the Weight pop-up menu.
f. Enter #FFFFFF in the Color text box
6. In the CSS Styles panel, make sure the .navigation rule is selected
and click Show List View.
7. Click in the column to the right of the background color property.
8. Enter #993300 as the hexadecimal value and press Enter
9. Locate the display property (you might need to scroll down),
click once in the column to the right, and select block from the
pop-up menu.
10. Locate the padding property, click once in the column to the right,
enter 8px as the value, and press Enter
11. Locate the width property, click once in the column to the right,
enter 140 in the first text box, select pixels from the pop-up menu,
and press Enter
12. Click Show Set Properties so that only your set properties appear
in the Properties pane
13. Click on the cafe_townsend.css file to display it. You'll see that
Dreamweaver has added all of the properties you specified to the
file.

255
CIT 735 MODULE 4

7. Apply the rule

1. With the index.html page open in the Document window, click


the word Open Learning so that the insertion point is somewhere
in the word.
2. In the tag selector, click the rightmost <a> tag.
3. In the Property inspector (Window > Properties), select
navigation from the Style pop-up menu.

8. Add a rollover effect

1. Open the cafe_townsend.css file.


2. Select the entire .navigation rule.
3. Copy the text (Edit > Copy).
4. Click once at the end of the rule and press Enter
5. Paste (Edit > Paste) the copied text in the space you just created.
6. Add the:hover pseudo-class to the pasted .navigation selector, as
follows:
7. In the new .navigation:hover rule, replace the current background
color (#993300) with #D03D03.

9. Publishing Your Site

Now you'll set up a remote folder so that you can publish your web
pages. The remote folder often has the same name as the local folder
because your remote site. is usually an exact duplicate of your local site.
That is, the files and subfolders that you post to your remote folder are
copies of the files and subfolders that you create locally.

1. On your remote server, create an empty folder inside the web root
folder for the server
2. In Dreamweaver, select Site > Manage Sites.
3. In the Manage Sites dialog box, select the Site Name site.
4. Click Edit
5. In the Site Definition dialog box, click the Advanced tab if the
Advanced settings aren't showing.
6. Select Remote Info from the Category list on the left.
7. Select an Access option
8. If you selected FTP, enter the following options:
a. Enter the host name of the server (such as
ftp.macromedia.com).
b. In the Host directory text box, enter the path on the server
from the FTP root folder to the remote site's root folder.
c. Enter your user name and password in the appropriate text
boxes.

256
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

d. If your server supports SFTP, select the Use Secure FTP


(SFTP) option.
e. Click Test to test your connection.
f. If the connection is unsuccessful, consult your system
administrator. For more information, click Help in the
dialog box.

9. If you selected Local/Network, click the folder icon next to the


text box and browse to the remote site's root folder.

10. Click OK.

10. Upload your local files

1. In the Files panel (Window > Files), select the site's local root
folder.
2. Click the blue Put Files arrow icon in the Files panel toolbar
3. When Dreamweaver asks if you want to put the entire site, click
OK.

4.0 CONCLUSION

Dreamweaver is a easy to use software that allows you to create


professional web Pages, allow users to quickly add objects and
functionality to your pages, without having to program the HTML code
manually. It's possible to create tables, edit frames, work with layers,
insert JavaScript behaviors, etc., in a very simple and visual way.

5.0 SUMMARY

In this unit, we have learnt that:

• learn how to interact with the Dreamweaver application


• create tables use the image placeholder for inserting images,
rollover effects inserting banners and the correct layout of a
webpage.
• explain what CSS create CSS rules and to use it in a webpage
design
• how to publish a website to the internet.

6.0 TUTOR-MARKED ASSIGNMENT

Create a webpage for a fiction fashion company that wants to show case
it’s fashion collection online to numerous people ( design with the
following specifications in mind and remember that good design with
ease of modification would be rewarded)

257
CIT 735 MODULE 4

i. A page that shows all clothes in a season (fashion is in seasons)


different pages for each season( image placeholders should be
used for all images).
ii. A contact page for information on all the designers of the clothes
iii. The index page must make use of a flash banner and or video.
iv. Font, color, active and inactive links should be defined by CSS
rules.

7.0 REFERENCE/FURTHER READING

Castro, E. (2007). HTML, XHTML and CSS: Learn HTML, XHTML


and CSS the Quick and Easy Way. Peachpit Press, Berkley CA 94710,
USA.

258
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

UNIT 4 FLASH DEVELOPMENT: DYNAMIC HTML


AND AJAX

CONTENTS

1.0 Introduction
2.0 Objectives
3.0 Definitions
3.1 Dynamic HTML
3.2 Asynchronous JAvaScript And XML (AJAX)
4.0 Conclusion
5.0 Summary
6.0 Tutor-Marked Assignment
7.0 References/Further Reading

1.0 INTRODUCTION

Dynamic HTML is a term for a collection of HTML tags and options


that let you create Web pages more animated and more responsive to
user interaction than previous versions of HTML. DHTML is not a
specific technology or a particular scripting language (e.g., JavaScript),
but a browser enhancement that allows browsers to be dynamic. Another
way of defining DHTML is as HTML that can change even after a page
has been loaded into a browser.

2.0 OBJECTIVES

At the end of the unit, you should be able to:

• to create web pages that are more animated and responsive to


user interaction than previous version of HTML
• to produce browser enhancement that allows browsers to be more
dynamic
• to create (web) document that is treated as a series of components
such that every tag in the document (and its contents) becomes an
abstract object, as such, it can be manipulated by a programming
language.

3.0 DEFINITIONS

Dynamic HTML (DHTML) combines 3 technologies, viz-a-viz;

a. Cascading Style Sheets (CSS) refines HTML formatting and


provides better control over positioning and layering content.

259
CIT 735 MODULE 4

b. JavaScript (not Java), a scripting language for web browsers.


SCRIPT tag in HTML indicates language:
<SCRIPTLANGUAGE=“JavaScript”>.

c. Document Object Model (DOM) exposes all the attributes of


HTML and Style Sheets to JavaScript control. DOM lets
JavaScript programmers view and modify the properties of web
pages, dynamically. The Document Object Model (DOM) is a
platform-neutral application programming interface (API) and
describes the underlying framework of a document so that Web
builders can access and manipulate objects in a standard way.
The root of the DOM tree is the document itself; HTML elements
and attributes are branches. Dreamweaver includes
documentation of DOM Level 1 and Dreamweaver extensions.

Scripts are little programs that add interactivity to web pages and are
perfect for moving HTML elements around a web page. They form the
backbone of DHTML.

3.1 Dynamic HTML

Dynamic HTML introduces the idea of a (web) document that is treated


as a series of components, not a string of text. In DHTML, every tag in
the document (and its contents) becomes an abstract object, as such, it
can be manipulated by a programming language (moved, reformatted,
searched), or can send events to a programming language (like mouse
activity or time passing), and can be formatted by external style sheets
(css), and repeatedly re-formatted programmatically. To accomodate for
all this mutable content, the 4.0 browsers introduced the ability to layer
content on the page. In everyday web authoring terms, DHTML is
usually used for animation, advanced interactivity such as drag'n'drop,
autoscrolling, and reactions to mouse use.

DHTML supports animations and rollover effects and it is part of


HTML 4.0. Different browsers provide different support for HTML 4.0.
JavaScript programs support dynamic behaviors. JavaScript functions
manipulate DOM objects while Dreamweaver provides high level
interface generating JavaScript code for a few common dynamic
behaviors.

Rollover effect in DHTML


The rollover effect is achieved by swapping images from files into
memory
a. In Dreamweaver, choose Insert > Image & select
redlite.gif
b. In Property Inspector, enter: “redlight”

260
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

c. Set Border to 0 (no border around image)


d. Select image, then windows > Behaviors
e. Hold down + button and select the Swap image
f. Select grnlite.gif as swap image

Dreamweaver generates timeline functions which have similar interface


to Flash timelines.

Rollover effect in Javascript

a. Look at source code view in DW


b. function MM_preloadImages():

i. sets local variable d to document: why?


ii. creates new Array called d.MM_p
iii. MM_preloadImages.arguments
reads onLoad="MM_preloadImages('grnlite.gif')"

c. function MM_swapImage():
i. stores MM_swapImage.arguments
ii. findObj locates the other image

SELF ASSESSMENT EXERCISES 1

i. What is DHTML?
ii. Mention the 3 technology combined in DHTML
iii. According to JavaScript highlight the Rollover effect.

3.2 Asynchronous JAvaScript and XML (AJAX)

Asynchronous JavaScript And XML combines several existing


technologies (e.g. CSS and XHTML), create rich and dynamic web
pages and improves responsiveness of web based applications. AJAX
has the following features

261
CIT 735 MODULE 4

i. Dynamic display manipulation with DOM


ii. Data interchange and manipulation with XML
iii. Asynchronous data retrieval with XMLHttpRequest
iv. JavaScript functions to bind everything together

XMLHttpRequest can transfer and manipulate XML data between


a client and server. XMLHttpRequest was originally an ActiveX object
developed by Microsoft accessible by scripting languages (e.g. such as
VBScript). Mozilla 1.0 included a compatible native version,
XMLHttpRequest.

The classic web application model is largely static in nature and does
not allow user interaction while the information is being processed.
While a user interacting with the browser, the server is not processing
information for that user.

Classic Web Application Model (Synchronous)

The AJAX Engine is written in JavaScript and serves as an


intermediary layer between user and server. Rather than loading a
webpage, browser loads the AJAX Engine. AJAX is usually located
in a hidden frame, and is responsible for displaying the user interface
and communicating with the server. It also allows the user to interact
asynchronously – independent of communication with the server and
communicates with the server, usually with XML.

262
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

AJAX Web Application Model (Asynchronous)

Classic Web Application Model AJAX Web Application Model


The AJAX Web application model is more responsive than the
classic web application model. Any action that does not require the
information from the server is handled by the engine while user
interaction and data processing can occur concurrently. It is however
beguile by technical complexity and potential security issues.

263
CIT 735 MODULE 4

AJAX advantages vs. Flash

i. Searchablitity: text pages are more visible to search engines than


Flash
ii. Open source vs. Flash licensing
iii. AJAX does not require plug-ins
a. However, users must have JavaScript enabled browser.
iv. Cost: Adobe has driven up cost of Flash development
v. Accessibility
a. Font and color settings in AJAX default to those of the
environment
b. Flash applications use developer specified settings which
may be more difficult for disabled users
c. Screen readers or acceleration keys may not be available
in Flash
vi. Security--Flash sites may not be as trusted as an HTML site
a. Can be used to avoid pop-up blockers
b. Can be used to create immortal cookies

Flash pros vs. AJAX

i. Media Handling: Better handling of sound and graphics


ii. Vector Graphics
a. May take up less space than bitmaps and are easily
scalable
b. While available in most web browsers, either native or as a
plug-in, vector graphics are more commonly used in Flash
iii. Compatibility: No discrepancy between browsers
iv. Machine Access: Flash apps have better access to resources of
user’s computer

SELF-ASSESSMENT EXERCISE

i. Mention the 3 technology that combines to make up AJAX.


ii. Highlight the 4 features of AJAX.
iii. State 4 advantages of AJAX over Flash.

4.0 CONCLUSION

In a nutshell, DHTML and AJAX are more animated and responsive


than the classic web application model.

264
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA

5.0 SUMMARY

In this unit, we have learnt that:

• web pages created in DHTML and AJAX are more animated and
responsive to user interaction than previous version of HTML.
• DHTML and AJAX produce browser enhancement that allows
browsers to be more dynamic.
• They create (web) documents that are treated as a series of
components such that every tags in the document (and its
contents) becomes an abstract object, as such, it can be
manipulated by a programming language.

6.0 TUTOR-MARKED ASSIGNMENT

According to the 3 technologies explained in DHTML explain the (web)


document that is treated as a series of components such that every tag in
the document (and its contents) becomes an abstract object, as such, it
can be manipulated by a programming language.

7.0 REFERENCES/FURTHER READING

http://www.adaptivepath.com/publications/essays/archives/000385.php
http://tool-man.org/
http://www.knownow.com/products/docs/whitepapers/KN-Beyond-
AJAX.pdf
http://weblogs.macromedia.com/cantrell/archives/2006/01/flash_and_AJ
AX_1.cfm
http://radar.oreilly.com/archives/2005/05/flash_is_AJAX_o.html
http://www.designitsimple.de/wordpress/?p=23
http://searchwebservices.techtarget.com/originalContent/0,289142,sid26
_gci1150930,00.html

265

You might also like