CIT735
CIT735
CIT735
COURSE
GUIDE
CIT 735
APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
CIT 735 COURSE GUIDE
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
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 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.
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.
COURSE AIMS
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.
iv
CIT 735 COURSE GUIDE
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
v
CIT 735 COURSE GUIDE
STUDY UNITS
Unit 1 Text
Unit 2 Graphics, Pictures and Images
Unit 3 Sound and Audio
Unit 4 Video and Animation
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.
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
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
Software
Some of the software you will need to complete this course are available
online as GNU Licence (open source).
ASSESSMENT
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.
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
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
SUMMARY
x
MAIN
COURSE
CONTENTS PAGE
Unit 1 Text………………………………………. 55
Unit 2 Graphics, Pictures and Images…………… 70
Unit 3 Sound and Audio…………………………. 87
Unit 4 Video and Animation…………………….. 99
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
2.0 OBJECTIVES
3.0 DEFINITIONS
2
CIT 735 MODULE 1
4
CIT 735 MODULE 1
3.2.1 Commerce
3.2.2 Education
5
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3.2.6 Medicine
6
CIT 735 MODULE 1
SELF-ASSESSMENT EXERCISE
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
These are electronic versions of printed images which are captured and
converted through electro photographic process.
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.
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.
3.4.8 Music
3.4.9 Graphics
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
Category Description
Synthesized by computers
Continuous
Space-based and time based
E.g. animation, motion, video etc.
10
CIT 735 MODULE 1
Dates Events
15,000 - Prehistoric humans paint images on the walls of their caves
13,000BC
HTML debuts
12
CIT 735 MODULE 1
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.
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.
• ACM Multimedia;
• International Conference on Multimedia & Expo (IEEE ICME).
13
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
14
CIT 735 MODULE 1
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.
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
15
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
3.0 DEFINITIONS
3.1 Hypermedia
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
3.3 Hypertext
19
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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
4.0 CONCLUSION
21
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
5.0 SUMMARY
22
CIT 735 MODULE 1
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
2.0 OBJECTIVES
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:
24
CIT 735 MODULE 1
3.3 Metamedia
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
25
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
26
CIT 735 MODULE 1
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
2.0 OBJECTIVES
27
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
The key issues multimedia systems need to deal with here are:
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.
28
CIT 735 MODULE 1
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
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
SELF-ASSESSMENT EXERCISE
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
32
CIT 735 MODULE 1
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
2.0 OBJECTIVES
33
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3.1 Soundcard
3.2 Loudspeakers/Headphones
3.3 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
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
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.
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.
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
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
38
CIT 735 MODULE 1
3.7 Scanners
39
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
40
CIT 735 MODULE 1
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
Text Recognition
http://www.cim.mcgill.ca/~latorres/Viterbi/va_application
42
CIT 735 MODULE 1
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
2.0 OBJECTIVES
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:
3.2 CODECs
44
CIT 735 MODULE 1
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.
45
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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
Making and editing sound recordings and turning them into podcasts are
not difficult. These are some of the tools available for making sound
recordings:
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:
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.
48
CIT 735 MODULE 1
49
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
50
CIT 735 MODULE 1
3.9 Plug-ins
3.10 Podcasting
51
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3.12 Audacity
52
CIT 735 MODULE 1
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
53
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
Digital Video for Teachers: resources for teachers in video capture and
editing. http://www.digitalvideoforteachers.co.uk.
o Atomic Learning:
http://www.atomiclearning.com/moviemaker2
o Doug Belshaw's
site:http://www.mrbelshaw.co.uk/extras/documentary/index.htm
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
54
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
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.
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.
57
CIT 735 MODULE 2
58
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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
60
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
62
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
The examples below are some special effects that can be apply to texts
within a multimedia presentation for emphasis, clarity, visual appeal
reasons.
3.2.6.1 Kerning
3.2.6.2 Leading
3.2.6.3 Tracking
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
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.
SELF-ASSESSMENT EXERCISE
65
CIT 735 MODULE 2
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:
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.
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.
67
CIT 735 MODULE 2
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
68
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
69
CIT 735 MODULE 2
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
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
2.0 OBJECTIVES
3.1.2 Digitization
71
CIT 735 MODULE 2
72
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3.1.3 Depth
• 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).
73
CIT 735 MODULE 2
(Source: L.
Reid & V.
Tryphonopoulos (2009 ). Computer Science CS1033: Multimedia and
Communication, www.csd.uwo.ca/courses/CS1033)
3.1.4 Resolution
74
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
75
CIT 735 MODULE 2
SELF-ASSESSMENT EXERCISE
76
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
a. Load Ms-Powerpoint
b. Draw these objects with the following information
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
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
78
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
The RGB decimal code (i.e. <255, 0, 0> for Red) is a 3-byte binary
number which means <11111111, 00000000, 00000000>.
79
CIT 735 MODULE 2
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
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).
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.
81
CIT 735 MODULE 2
3.7.1 Dithering
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.
82
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
83
CIT 735 MODULE 2
SELF-ASSESSMENT EXERCISE
i. State the RGB decimal codes for these objects and converts their
RGC decimal codes into their hexadecimal equivalents.
4.0 CONCLUSION
84
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
5.0 SUMMARY
Why is the resolution of the U and V channels often less than the Y
channel?
85
CIT 735 MODULE 2
86
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
87
CIT 735 MODULE 2
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
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 =
2π
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.
89
CIT 735 MODULE 2
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.
90
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
91
CIT 735 MODULE 2
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
92
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
SELF-ASSESSMENT EXERCISE
94
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
Computer and electronic music system that meet the hardware interface
and the data format requirements is refer to as a MIDI device.
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.
95
CIT 735 MODULE 2
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
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:
96
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
SELF-ASSESSMENT EXERCISE
i. What is DirectX?
ii. Why synthesized sounds?
4.0 CONCLUSION
5.0 SUMMARY
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
98
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
2.0 OBJECTIVES
100
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3.0.1 Modelling
3.0.2 Animating
3.0.3 Rendering
3.0.4 Motion
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
3.0.7 Frame
3.1 Video
102
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
103
CIT 735 MODULE 2
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.
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
iii. Video Frame Buffer used for temporary storage of video frame;
105
CIT 735 MODULE 2
3.2.5.1 MPEG - 1
3.2.5.2 MPEG - 2
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
106
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
Compressio n Ratio =
original data size
compressed data size { + ve ; Compressio n ratio ≥ 1
− ve ; otherwise
i. Compression Ratio
108
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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
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
3.6 Animation
110
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
Figure …. Interpolations
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
112
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3. Stop-Motion Animation
4. Cartoon Animation
113
CIT 735 MODULE 2
6. Computer Animation
7. Live Action
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.
The screen space should be well set and established, the image
distinguishable from the background, appropriately sparse or dense and
well composed.
115
CIT 735 MODULE 2
116
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
117
CIT 735 MODULE 2
118
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
119
CIT 735 MODULE 3
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
2.0 OBJECTIVES
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.
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.
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:
123
CIT 735 MODULE 3
The essentials are to capture the ideas and to quickly evaluate the
feasibility of these ideas. The most important considerations are
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
124
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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).
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:
125
CIT 735 MODULE 3
Linear Architecture
Non-Linear Architecture
Composite Architecture
Hierarchical Architecture
126
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
127
CIT 735 MODULE 3
3.2.2 User-friendliness
3.2 Development
3.3.1 Copyrights
128
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
129
CIT 735 MODULE 3
3.5.1 Deployment
• 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
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
Time
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
Old System
New System
131
CIT 735 MODULE 3
3.5.3 Maintenance
3.5.4 Review
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.
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.
132
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
SELF-ASSESSMENT EXERCISE
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,
133
CIT 735 MODULE 3
134
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3. Delivery Mode
135
CIT 735 MODULE 3
136
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3. Basic Layout
(a) Title (b) Action area (c) Narration (d) Dialog (e)
Interactive controls
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
137
CIT 735 MODULE 3
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
138
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
140
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
• 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.
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.
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
Over the years HCI has substantially overlap with some other areas such
as:
142
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
143
CIT 735 MODULE 3
144
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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:
Also, there are two critical points that must be considered when
designing a user interface namely;
145
CIT 735 MODULE 3
146
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
147
CIT 735 MODULE 3
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]
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:
149
CIT 735 MODULE 3
150
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
3.3.2 Bodystorming
151
CIT 735 MODULE 3
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.
152
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
3.3.8 Scenario
153
CIT 735 MODULE 3
a. Perceptual Principles
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.
156
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
d. Memory Principles
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
157
CIT 735 MODULE 3
There are six major steps in interaction design. Based on user feedback,
several iteration cycles of any set of steps may occur.
158
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
159
CIT 735 MODULE 3
160
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
• Match between system and the real world: The system should
speak the users' language, with words, phrases and concepts
161
CIT 735 MODULE 3
162
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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?
T = blog2(n + 1)
T = bH
164
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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:
165
CIT 735 MODULE 3
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.
If, as generally claimed, the law does hold true for pointing with the
mouse, some consequences for user-interface design include
166
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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.
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.
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).
168
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
For all of the variants, the definitions of the major concepts are the
same.
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.
169
CIT 735 MODULE 3
170
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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.
SELF-ASSESSMENT EXERCISE
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
172
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
173
CIT 735 MODULE 3
174
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
175
CIT 735 MODULE 3
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
176
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
2.0 OBJECTIVES
177
CIT 735 MODULE 3
Terminating
sequence
looping sequence
with a "digression"
Figure Linear Structure
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.
178
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
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.
179
CIT 735 MODULE 3
3.1.8 Simulation
180
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
Some authoring tools can fit into more than one category
181
CIT 735 MODULE 3
SELF-ASSESSMENT EXERCISE
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
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
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
1. Macromedia Director
2. Authorware
185
CIT 735 MODULE 3
186
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
5.0 SUMMARY
187
CIT 735 MODULE 3
i. Differentiate between
ii. List various types of authoring tools, and describe their functions
and features.
188
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
189
CIT 735 MODULE 3
2.0 OBJECTIVES
190
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
191
CIT 735 MODULE 3
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.
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.
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:
193
CIT 735 MODULE 3
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.
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.
195
CIT 735 MODULE 3
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.
196
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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?
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
198
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
199
CIT 735 MODULE 3
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.
SELF-ASSESSMENT EXERCISE
201
CIT 735 MODULE 3
4.0 CONCLUSION
5.0 SUMMARY
202
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
3.0 DEFINITIONS
204
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
205
CIT 735 MODULE 3
206
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
207
CIT 735 MODULE 3
SELF-ASSESSMENT EXERCISE
208
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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:
209
CIT 735 MODULE 3
210
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
211
CIT 735 MODULE 3
3. Coherence Principle
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:
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
6. Personalization Principles
213
CIT 735 MODULE 3
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.
214
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
215
CIT 735 MODULE 3
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.
216
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
217
CIT 735 MODULE 3
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
218
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
5.0 SUMMARY
Bransford, Brown, & Cocking (1999). How people learn: Brain, mind,
experience and school. D.C.: National Academy Press
219
CIT 735 MODULE 3
220
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
221
CIT 735 MODULE 4
3.0 DEFINITIONS
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.
Animated images and Java applets are often used to create dynamic
effects on Web pages. The advantages of Flash are:
212
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
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.
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
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
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
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
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
a. Select
b. Select an option from Pencil Mode list
c. Place the pointer and drag
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
216
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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).
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.
Example: In this example you will learn how to change the color of an
object.
217
CIT 735 MODULE 4
Step 1
Step 2
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
Step 5
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
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
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
Step 3
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
Step 7
Choose target in the Window field. Close the Object Actions box.
Step 8
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
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
Step 8
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
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
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
222
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
c. Lasso tool
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
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
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
224
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
c. Input text
a. Can mask text as password text
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)
The timeline is broken into units called frames which are displayed in
the Flash project
225
CIT 735 MODULE 4
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
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
Locked layer
Unlocked layer
Locking and hiding a layer
Show/Hide All
Visible layer
Layers button
Hidden layer
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.
o Movie Clip
o Button
o Graphic
4.0 CONCLUSION
5.0 SUMMARY
228
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
229
CIT 735 MODULE 4
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
2.0 OBJECTIVES
230
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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 .
231
CIT 735 MODULE 4
2. Hold down Shift, and on the stage, drag a corner selection handle
inward to resize the steam proportionally.
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%.
232
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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.
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.
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.
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.
4.0 CONCLUSION
5.0 SUMMARY
234
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
• 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
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.
<HTML>
<HEAD>
<BODY>
</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.
236
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
tags necessary to construct the Page with the defined appearance and
content in the graphical editor.
1. Document window
237
CIT 735 MODULE 4
Code and Design view lets you view both Code view and Design view
for the same document in a single window.
2. Document toolbar
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
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 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
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.
241
CIT 735 MODULE 4
8. Insert tables
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
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.
1. Click once on the page to place the insertion point in the upper-
left corner of the page.
2. Select Insert > Table.
243
CIT 735 MODULE 4
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.
A third table, with one row and one column, appears below your second
table
8. Tables’ Properties
244
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
245
CIT 735 MODULE 4
SELF-ASSESSMENT EXERCISE
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:
4. Click OK
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.
247
CIT 735 MODULE 4
3 Replacing Imageholder
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.
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
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.
249
CIT 735 MODULE 4
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
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.
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.
<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
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.
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.
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 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
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.
255
CIT 735 MODULE 4
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
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
5.0 SUMMARY
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
258
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
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
2.0 OBJECTIVES
3.0 DEFINITIONS
259
CIT 735 MODULE 4
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.
260
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
c. function MM_swapImage():
i. stores MM_swapImage.arguments
ii. findObj locates the other image
i. What is DHTML?
ii. Mention the 3 technology combined in DHTML
iii. According to JavaScript highlight the Rollover effect.
261
CIT 735 MODULE 4
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.
262
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
263
CIT 735 MODULE 4
SELF-ASSESSMENT EXERCISE
4.0 CONCLUSION
264
CIT 735 APPLICATION SOFTWARE DESIGN AND MULTIMEDIA
5.0 SUMMARY
• 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.
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