1. SWE 423 – Multimedia System 1

2. 2

3. 1- Multimedia Authoring Multimedia authoring: creation of multimedia productions, sometimes called “movies” or “presentations”. In this lecture, we take a look at: Multimedia Authoring Metaphors Multimedia Production Multimedia Presentation Automatic Authoring 3

4. 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:  Scripting language metaphor  Slide show metaphor  Hierarchical metaphor  Iconic/flow-control metaphor  Frames metaphor  Card/scripting metaphor 4

5. 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

6. 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

7. Hierarchical Metaphor User-controllable elements are organized into a tree structure often used in menu-driven applications. 7

8. 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.file menus Menu-driven Within an open program, the user clicks the "File" option from the drop down menu bar and selects Quit. Non menu-driven User presses the "!" key and then presses the "q" key to quit the program. 8

9. Iconic/Flow-control Metaphor Graphical 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

10. 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

11. Card/Scripting Metaphor Uses 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. 12

13. 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. 14

15. 3- Developing Multimedia Presentations Phases for Multimedia presentations development: Storyboarding Flowcharting Prototyping User testing Media Production Programming Debugging Distribution 15

16. 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

17. Comparison of two screen projection 17

18.  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. serifs Verdana, Arial, Calibri 18

19. (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

20. Program to investigate colours and readability. Colour Wheel with opposite colours equal to (1-R, 1-G, 1-B) 20

21. 3-2 :Sprite Animation A 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

22.  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

23. 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

24. Cross Dissolve and Dither Dissolve Cross 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 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

25. 3-4 :Slide Transition 25

26. 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

27. 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 MX Flash 5 and MX Dreamweaver MX 27

28. 4-1-1 : Macromedia Director Director is a complete environment for creating interactive movies Uses 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

29. 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

30. 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 scenes Components that make up a movie are called symbols Included in movie by placing them on the stage The stage may have multiple layers The timeline window has one horizontal bar for each layer Composed of a number of keyframes Scripts can be attached to keyframes or symbols in a keyframe 30

31. 4-1-3 : Macromedia Dreamweaver Dreamweaver is used to build multimedia-enabled web sites as well as Internet applications in HTML, XML and other formats Supports WYSIWYG web page development as well as support for JavaScript, ASP, PHP, XML. Contains a number of prepackaged behaviors and is extensible 31