SWE 423 Multimedia System 1. 2 1- Multimedia Authoring Multimedia authoring: creation of multimedia productions, sometimes called movies or presentations.

SWE 423 – Multimedia System

1

2

1- Multimedia Authoring

Multimedia authoring: creation of multimedia productions, sometimes called “movies” or “presentations”.

In this lecture, we take a look at:Multimedia Authoring MetaphorsMultimedia ProductionMultimedia PresentationAutomatic Authoring

3

1-1 : Multimedia Authoring Metaphors

Authoring is a process of creating multimedia applications.

Most authoring programs use one of the several authoring metaphors, also known as authoring paradigms such as:

4

Scripting language metaphor

The idea here is to use a special language to enable interactivity (buttons, mouse, etc.) and allow conditionals, jumps, loops, functions/macros, and so on.

5

Slide Show Metaphor

A linear presentation by default which is a traditional form of instruction where material is presented to a learner in a predetermined sequence.

although tools exist to perform jumps in slide shows.Example: PowerPoint

6

Hierarchical MetaphorUser-controllable elements are organized into a

tree structure often used in menu-driven applications.

7

Menu Driven Term: used to describe a software program that is operated using file menus instead of using commands. Below is an example of how a user may quit a menu-driven program, as opposed to a non menu-driven program.

Menu-drivenWithin an open program, the user clicks the "File"

option from the drop down menu bar and selects Quit.Non menu-drivenUser presses the "!" key and then presses the "q" key

to quit the program.

8

Iconic/Flow-control MetaphorGraphical icons are available in a toolbox, and

authoring proceeds by creating a flowchart with icons attached.

Example: Authorware A leading visual

authoring tool for creating rich-media e-learning applications for delivery on corporate networks, CD/DVD, and the Web.

Drag and drop icons to create logical outline

Flow line metaphor

- Draw.io Authorware Flowchart

9

Frames Metaphor

Like Iconic/Flow-control Metaphor; however links between icons are more conceptual, rather than representing the actual flow of the program.

Quest Frame

10

Card/Scripting MetaphorUses a simple index-card structure - easy route to producing

applications that use hypertext or hypermedia; used in schools such as Hypercard, Supercard, FrontPage, Multimedia Toolbook.

11

12

2- Multimedia production

A multimedia project can involve a host of people with specialized skills. So a multimedia production can easily involve an art director, graphic designer, production artist, producer, project manager, writer, user interface designer, sound designer, videographer, and 3D and 2D animators, as well as programmers.

13

14

3- Developing Multimedia Presentations

Phases for Multimedia presentations development:StoryboardingFlowchartingPrototypingUser testingMedia ProductionProgrammingDebuggingDistribution

15

3-1 :Graphic Styles

Human visual dynamics impact how presentations must be constructed.

(a) Color principles and guidelines: Some color schemes and art styles are best combined with a certain theme or style. A general hint is to not use too many colors, as this can be distracting.

(b) Fonts: For effective visual communication in a presentation, it is best to use large fonts (i.e., 18 to 36 points), and no more than 6 to 8 lines per screen.

16

Comparison of two screen projection

17

Serifs fonts are semi-structural details on the ends of some of the strokes that make up letters and symbols Times New Roman, Baskerville, Cambria

Sans-serif fonts  is one that does not have the small projecting features called "serifs" at the end of strokes. Verdana, Arial, Calibri

18

(c) A Color Contrast Program : o The simplest approach to making readable colors on a

screen is to use the principal complementary colors as the background for text

o For example, If the text color is some triple (R,G,B), a legible color for the background is that color subtracted from the maximum (here assuming max=1):

(R,G,B) => (1 − R; 1 − G; 1 − B)

o That is, not only is the color “opposite” min some sense, but if the text is bright, the background is dark, and vice versa.

19

Program to investigate colours and readability. Colour Wheel with opposite colours

equal to (1-R, 1-G, 1-B)

20

3-2 :Sprite AnimationA two-dimensional image or animation that is integrated

into a larger scene. Initially used to describe graphical objects handled

separate from the memory bitmap of a video display, the term has since been applied more loosely to refer to various manner of graphical overlays.

Exemple :Suppose we have an animation figure, as in Fig.

2.7 (a). Now create a 1-bit mask M, as in Fig. 2.7 (b), black on white, and accompanying sprite S, as in Fig. 2.7 (c).

21

We can overlay the sprite on a colored background B, as in Fig. 2.8 (a) by first ANDing B and M, and then ORing the result with S, with final result as in Fig. 2.8 (e).

22

3-3 :Video Transitions

Video transitions can be used in multimedia presentations to signal scene changes

Many different types of transitions:1. Cut: an sudden change of image contents formed by

neighboring two video frames consecutively. This is the simplest and most frequently used video transition.

2. Wipe: a replacement of the pixels in a region of the viewport with those from another video. Wipes can be left-to-right, right-to-left, vertical, horizontal, swept out like the hands of a clock, etc.

3. Dissolve: replaces every pixel with a mixture over time of the two videos, gradually replacing the first by the second. Most dissolves can be classified as two types: cross dissolve and dither dissolve.

23

Cross Dissolve and Dither Dissolve

Cross Dissolve every pixel is affected gradually.blends the first clip into the second clip.Examples are fade-in and fade-out

Dither Dissolve Dissolves the first clip into the second by removing

random pixels from the first clip to reveal the second clip.

Wipe is an example.

24

3-4 :Slide Transition

25

4- Automatic Authoring

Hypermedia documents: Generally, three steps:1. Capture of media: From text or using an audio

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

2. Authoring: How best to structure the data in order to support multiple views of the available data, rather than a single, static view.

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

26

4-1 : Some Useful Authoring Tools

One needs real vehicles for showing understanding principles of and creating multimedia. And straight programming in C++ or Java is not always the best way of showing your knowledge and creativity.

Some popular authoring tools include the following:Macromedia Director 8 and MXFlash 5 and MXDreamweaver MX

27

4-1-1 : Macromedia Director

Director is a complete environment for creating interactive moviesUses the movie metaphor

Stage The main window, on which the action takes place.

Cast Consists of resources a movie may use, such as bitmaps, sounds,

vector-graphics shapes, flash movies, digital videos, and scripts. ( created directly or imported)

Each instance is called a sprite (objects that control where, when, and how the cast member appear on the stage and in the movie)

Sprites can have behaviors attached Score

28

Many predefined events (such as mouse events) Score has one horizontal line for each sprite and

vertical frames Behaviors (both predefined and user defined) are

written in the Director scripting language – Lingo

29

4-1-2 : Macromedia Flash

Flash is a simple authoring tool that facilitates the creation of interactive movies.

A movie is composed of one or more scenesComponents that make up a movie are called symbols

Included in movie by placing them on the stageThe stage may have multiple layersThe timeline window has one horizontal bar for each

layerComposed of a number of keyframesScripts can be attached to keyframes or symbols in a

keyframe

30

4-1-3 : Macromedia Dreamweaver

Dreamweaver is used to build multimedia-enabled web sites as well as Internet applications in HTML, XML and other formatsSupports WYSIWYG web page development as well

as support for JavaScript, ASP, PHP, XML.Contains a number of prepackaged behaviors and is

extensible

31