1. Interactive Multimedia Design Chapter 1 – Introduction to Multimedia

2. Content Overview An overview of the Unit and a look at the role of authoring system in MM Elements of multimedia Characteristic of multimedia Types of multimedia navigation

3. What is Multimedia Multimedia is a combination of text, graphic, sound, animation, and video. It is delivered to the user by electronic or digitally manipulated means. A multimedia project development requires creative, technical, organizational, and business skills. Multimedia becomes interactive multimedia when a user is given the option of controlling the elements. Interactive multimedia is called hypermedia when a user is provided a structure of linked elements for navigation

4. What is Multimedia Multimedia is a combination of text, art, sound, animation, and video. It is delivered to the user by electronic or digitally manipulated means. A multimedia project development requires creative, technical, organizational, and business skills. Multimedia becomes interactive multimedia when a user is given the option of controlling the elements. Interactive multimedia is called hypermedia when a user is provided a structure of linked elements for navigation

5. Multimedia Authoring Multimedia authoring involves collating, structuring and presenting information in the form of a digital multimedia, which can incorporate text, audio, and still and moving images.

6. Multimedia Authoring Tools A program that helps you write hypertext or multimedia applications. Multimedia authoring tools provide the framework for organizing and editing the elements of a multimedia Authoring software provides an integrated environment for combining the content and functions of a project. It enable the developer to combine text, graphics, audio, video and animation into an interactive presentation or project. Authoring tools require less technical knowledge to master and are used exclusively for applications that present a mixture of textual, graphical, and audio data.

7. Authoring Tools - Basic Features Editing and organizing features. Programming features. Interactivity features. Performance tuning and playback features. Delivery, cross-platform and internet playability features.

8. Authoring Tools - Types There are three types of authoring tools, which are divided by the style in which the multimedia presentation is created: ▫Card-based ▫Time-based ▫Icon-based

9. Authoring Tools – Types – Card Based Using a card stack metaphor. Cards are developed that have different elements associated with them and are put in stacks. You can link the cards by allowing the user to click on buttons or other elements and jump to a different card in the stack. Example: Hypercard, ToolBook, HyperNext Studio, Hyper Studio, Phyton Card, Revolution.

11. Authoring Tools – Types – Time-Based Time Based Authoring Programs use a movie metaphor. Like a movie on videotape, you start the multimedia title and it plays until some action causes it to pause or stop. These programs also allow for branching to different parts of the movie, and any amount of user control and interactivity may be build in. Good for creating animations. Example: Director, Flash

13. Authoring Tools – Types – Icon-Based With icon-based programs, you use symbols in a flowchart scheme. Each icon represents a particular event. For example, the Wait icon stops the process until the user clicks the mouse button or presses a key or a specific amount of time passes. An advantage of icon-based programs is that you can easily see how a title is structured, that is, the flow of a program and especially the branching. Example: Macromedia Authorware

15. Multimedia Elements

16. Text Image/Graphic Audio Video Animation

17. Multimedia Elements - Text

18. Text in Multimedia Applications Of all multimedia elements, text is the easiest to manipulate General guidelines: ▫Be concise ▫Use appropriate fonts ▫Consider different type styles ▫Be consistent ▫Make the text readable ▫Use restraint

19. Working with Text Be concise – text fills < ½ screen Large amounts of text  Alternatives? - animation, video, narration.  Show a preview and allow user to request more Hyper linking Pop-up messages, scroll bars, drop-down menus

20. Use Appropriate Type Fonts Decorative ▫Hard to read ▫Used for emphasis Serif ▫Creates illusion of a line and guides the eye across the screen facilitating readability ▫Used on large blocks of text San serif ▫Clean, simple ▫Good for headings

21. Examples of: Serif, Sans Serif, and Other Fonts Scanned image: from Multimedia Concepts – James Shuman

22. Font Type Styles Type styles: bold, italic, underline ▫Used for emphasis ▫Use for links – hypertext Be consistent ▫Similar headings – typeface, size, style ▫Use same font for similar sections ▫Graphic image for headings Consistency vs. file size

23. Make Text Readable - Use Restraint Choose fonts found in most systems Avoid “ransom note” effect Choose only up to four variations of type styles, fonts and sizes

24. Creating and Editing Text Word Processor Corel Draw Adobe Illustrator Scanner OCR-Optical Character Recognition

25. Using Text on the Internet Microsoft IE and Netscape determine the fonts of your web page To ensure text is displayed in the desired way: ▫Use a font set ▫Use a Cascading Style Sheet ▫Embed it in your Web pages ▫Change the text into an image

26. Multimedia Element - Image

27. Graphics in Multimedia Applications Graphical images - used to add emphasis, direct attention, illustrate concepts, and provide background content Two types of graphics : 1)Draw-type graphics or vector graphics – represent an image as a geometric shape 2)Bitmap graphics – represents the image as an array of dots, called pixels

28. Draw Type Graphics Draw type or vector graphics ▫Geometric shape stored as set of instructions ▫Smaller than bitmap ▫Resize, rotate, no distortion ▫No photo quality

29. Draw-type Example Scanned image: from Multimedia Concepts – James Shuman

30. Bitmap Graphics Bitmaps – array of dots or pixels Color depth per pixel High quality pictures Photo realistic Larger than draw-type File size = pixels x color depth / 8

31. Graphic Image File Sizes Image file sizes can become large, you must balance the need for quality images with the need for small file sizes

32. Graphics Software Drawing programs – used to create draw- type graphics Paint programs – used to create bitmap images Image editing programs – useful in making changes, or applying textures or patterns to existing images

33. Graphics Software Programs Drawing programs – Adobe Illustrator Paint programs – Paint Shop Pro Image-editing programs – Photoshop (does the work of all 3)

34. Graphics Programs Features Graphics types Compatibility Graphics files – tiff, jpeg, bmp, gif … Layers Image enhancement Selection tools Color adjustments

35. Graphics Programs Features (Cont.) Image manipulation Filters Antialiasing ▫Smoothes edges by blending colors Text support Hardware support Open architecture

36. Using Graphics on the Internet Techniques to speed transfer times ▫File compression – reduces the file size of a graphic ▫Load images in stages ▫Use thumbnails ▫Use image editing programs

37. Graphic Image Sources Alternative image sources ▫Clip art ▫Stock photographs ▫Video images ▫Still images ▫Scanned images ▫Photo CD’s ▫Screen-capture programs

38. Multimedia Elements -Sound Multimedia Element - Sound

39. Sound Analog wave patterns – these wave patterns have two attributes ▫Volume – the height of each peak in the sound wave ▫Frequency – (sometimes referred to as pitch) the distance between the peaks. The greater the distance, the lower the sound. Image: scanned from Multimedia Concepts – James Schuman

40. Sampling To include sound in a multimedia application, the sound waves must be converted from analog to digital form This conversion is called sampling – every fraction of a second a sample the of sound is recorded in digital bits

41. Sampling Two factors affect the quality of digitized sound 1)Sample rate – the number of times the sample is taken  Most common sampling rates are: 11.025, 22.05, and 44.1 kHz 2)Sample size – the amount of information stored about the sample  Most common sampling sizes are: 8 and 16 bit

42. Sampling Image: scanned from Multimedia Concepts – James Schuman

43. Sound File Formats WAV format – filename.wav AIFF (Audio Interchange File Format) AIFFC (compressed) RealAudio – filename.ra MP3 (mpeg layer 3)

44. Sound on the Internet Your first consideration when using sound on the Internet is file size Uncompressed files can be very large ▫A 10 second recording of an audio CD can be as large as 2MB

45. Sound Tips for the Internet Appropriate UseConsider the appropriateness of using sound. Some sounds are content-related, such as hearing a foreign phrase pronounced. Other sounds are for effect, such as creating a mood or setting a scene. Avoid using sound when there is no compelling benefit. QualityStart with the highest-quality sound available and reduce the file size by converting the audio file to a compressed format. When possible, avoid using free sound clips available from the Internet. These are often of poor quality and overused. Cost considerations When recording audio files, it may be cost-prohibitive to contract with a recording studio and hire professional talent. Investing in reasonably high-end equipment (such as a sound card, microphone, and recording and editing software), however, will prove worthwhile.

46. Sound Tips for the Internet Alternative Methods Consider using sound and still images as an alternative to video to reduce file sizes. It may be just as effective to show a photograph of a speaker and play the sound file of the speech as it is to show a video of a “talking head.” StreamingConsider streaming the audio, especially for large files. User ControlIf appropriate, provide a way to give the user some control over the audio. Consider allowing the user to skip a sound clip or adjust the volume. This issue is especially important if a musical introduction is played when the user first enters a Web site. The second time visiting the site, the user may not want to hear the musical introduction.

47. Multimedia Elements -Animation Multimedia Element - Animation

48. Animation on the Internet Animation is an excellent way to provide appeal on a web site, choose from the following ▫Animated text ▫Animated GIF’s ▫Marcomedia Director applications ▫3-D environments

49. 2-D Animation Two types of animation exist ▫Cel animation – based on changes that occur form one frame to the next ▫Path animation – moves an object along a predetermined path on the screen

50. 3-D Animation 3-D Animation involves three steps 1)Modeling – creating the broad contours and structure of 3-D objects and scenes 2)Animation – defining the object’s motion 3)Rendering – giving objects attributes such as color, surface textures, and amounts of transparency

51. 3-D Animation Image: scanned from Multimedia Concepts – James Schuman

52. 3-D Animation Special Effects Morphing – blending together two images into a series of images Warping – distorts a single image Virtual Reality – creates an environment that surrounds the user so that he or she becomes part of the experience

53. Animation Animated text – using the HTML command causes text to flash on and off Animated gif – using a software program to create a series of gif files such as GIF Builder Director movie – animation played using Shockwave plug-in 3-D environments – a computer language used to create 3-D images

54. Multimedia Elements -Video Multimedia Element - Video

55. Video Video, like sound, is recorded and played an as analog signal Analog video must be digitized in order for it to put into a multimedia file Digital video has many advantages, but file size is important

56. Video Several elements determine file size: ▫Frame rate ▫Image size ▫Color depth To determine file size use the following formula: ▫Frames per second X image size X color depth / 8 = file size

57. Video Compression and Editing There are two types of video compression ▫Lossless – preserves the exact image throughout the compression ▫Lossy – eliminates some of the data in the image (provides greater compression ratios than lossless) ▫Remember – there is always a trade off, file size versus image quality

58. Video on the Internet There are two types of video transfer over the Internet ▫HTTP (Hypertext Transfer Protocol) – downloads the entire video to the hard drive on the user’s computer ▫RTSP (Real-Time Streaming Protocol) – is a continuous-playing, streaming technology in which the user’s computer is in constant contact with the server playing the video

59. Video Tips Color depth Reducing the color depth to less than 256 colors gives a markedly poorer-quality image. Frame rateReducing the frame rate to less than 15 frames per second causes a noticeable and distracting jerkiness that is usually unacceptable. File sizeA technique for reducing file size is to minimize the use of video in the image that appears on the screen – that is, to create video only for the parts of an object that are changing, such as a flickering candle. The video could be played over and over to create the motion of a flickering candle.

60. Video Tips Display sizeIn most multimedia titles, you do not need to show full- screen video. The video can be played in a window that can be as small as one-fourth or even one- sixteenth the size of the screen. Conclusion: Changing the image size and compressing the file become the primary ways of reducing file size. In most cases, a one-quarter screen image (320 X 240), an 8-bit (256 colors) color depth, and a 15 frames per second frame rate are acceptable in a multimedia title.

61. Characteristic of Multimedia

62. Four Basic Characteristics Multimedia systems must be computer controlled. Multimedia systems are integrated. The information they handle must be represented digitally. The interface to the final presentation of media is usually interactive.

63. Characteristic #1 - Computer Controlled Producing the content of the information – e.g. by using the authoring tools, image editor, sound and video editor Storing the information – providing large and shared capacity for multimedia information. Transmitting the information – through the network. Presenting the information to the end user – make direct use of computer peripheral such as display device (monitor) or sound generator (speaker).

64. Characteristic #2 - Integrated All multimedia components (audio, video, text, graphics) used in the system must be somehow integrated. Every device, such as microphone and camera is connected to and controlled by a single computer. A single type of digital storage is used for all media type. Video sequences are shown on computer screen instead of TV monitor.

65. Characteristic #3 - Interactivity Level 1: Interactivity strictly on information delivery. Users select the time at which the presentation starts, the order, the speed and the form of the presentation itself. Level 2: Users can modify or enrich the content of the information, and this modification is recorded. Level 3: Actual processing of users input and the computer generate genuine result based on the users input.

66. Characteristic #4 - Digitally Represented Digitization: process involved in transforming an analog signal to digital signal. Multimedia product must be deliver through electronic or digital platform such as computer screen, television, phone and etc.

67. Multimedia Navigation Type of Multimedia Navigation

68. Two types of navigation Multimedia systems usually allow two types of navigation facilities 1)to control a presentation 2) to adjust the current time reference in a presentation playback or to follow a hyperlink.

69. 1) To control a presentation Example: the user can start, stop, pause, fast-forward or rewind a presentation playback may jump to a completely different section of the document.

70. 2) To adjust the current time reference in a presentation playback or to follow a hyperlink. A hyperlink can be easily inserted into a static object, as an example, the user easily recognizes the presence of an anchor in an underlined word in a text page, whereas in multimedia system, the association of links with e within components is considerably complex for continuous media, for which a common way of defining anchor is not already available. Consider, for example, the problem of inserting a hyperlink inside an audio file. A proposed solution is the use of hotspots, i. e. an icon which remains on the user screen for a determined time interval, on which the user may click to follow the link. the link can bring the user to a new document, which completely replaces the source, or both destination and source (or a part of) may coexist in the final presentation.

71. Finally, since interactivity in multimedia systems deals with creating experiences which allow the user to do or make something, a new form of interaction between users and multimedia systems is the content adaptation process. By content adaptation process we mean the set of actions performed to adapt a multimedia presentation to the user context, i. e., the device, the screen resolution, the network connection. From the synchronization point of view, a multimedia application may have different behaviour when a user follows a link, since multimedia systems do not clearly define a notion of how much information the reader leaves: the link can bring the user to a new document, which completely replaces the source, or both destination and source (or a part of) may coexist in the final presentation.

72. Example 1 To control a presentation PAUSE PLAY STOP PLAY

73. Example 2 Hyperlink