Multimedia

1. Multimedia Mr. Sanchez

2. Multimedia • Defined • Integration of text, still and moving images, and sound to communicate. • Issues • Time • Longer downloads • Bigger learning curve for designer • Search engine unfriendly • Balance choices for the purpose • Identify the Use • Ask • Who is your audience and what is your message? • How will the setting or interface look? • Which multimedia elements fit into the interface and compliment the message? • What is the outcome expected?

3. Words in Multimedia • Words can be: • Written • Spoken • Sung

4. Images in Multimedia • Images can be: • Drawings • Charts • Diagrams • Paintings • Photographs • Buttons • Animation or video Note: images will be discussed in depth further into this lecture.

5. Sound in Multimedia • Sound, also called audio, can be: • Voice-over or narration • Sound effects • Music

6. Audio and the Web • Delivery • Download file • Larger file=longer download time • Embedded • Does not allow download - BAD • Streaming • Users listen as the connection is made • Uses buffer • Livecasts • File Types • .wav, .mp3

7. Video in Multimedia • Video can be: • Live • Recorded

8. Video and the Web • Requires high bandwidth and player • Types • Download, streaming • Internet TV • File Types • .avi, .flv, .mov, .mpg,

9. Multimedia Productions • Defined: • Storytelling through the use of text, still and moving images, and sound. • Types of multimedia productions • Presentations • Tutorials • Games • Simulations • Web pages

10. Working with Images Understand image file formats and when to use an image file type.

11. Image Importance • Images… • illustrate content • are crucial for name recognition and branding • provide backdrops for other activities • offer a means of navigating a Web site • Good Images… • are aesthetically pleasing • communicate well • use minimal bandwidth • relevant to the page’s purpose • are small files

12. Digital Imaging Concepts • Pixels • short for “pixel element” • smallest unit displayed by a monitor • provide color information

13. Color Models • Color Models • handles image colors and display differently • chosen based on purpose • RGB - red, green, blue • used for electronic display mode • format: R, G, B in decimal and hexadecimal form • 255.0.0 or FF0000 • CMYK • Cyan, Magenta, Yellow, black (K) • used for print media • Note: never go from CMYK to RGB • Grayscale • 256 shades of gray • each pixel has a brightness value. • 0=black, 255=white

14. Resolution • Defined: • The number of pixels present in a monitor’s height and width or dots per inch (dpi) • The higher the resolution the more detail • Monitor Resolutions • 800x600, 72 or 96dpi • 1024x768, 72 or 96dpi • 1162x864, 72 or 96dpi • LCD Monitors have fixed resolutions • Output resolution • Dictated by the output device

15. Bitmap/Raster Image Vector Image

16. Original Distorted Graphic Formats • Bitmaps/Raster • Most common • Each color is an individual value • Composed of small squares • Large images = large file sizes • Use for photos, drop shadows, soft or blurry edges • Distorts when stretched • Sub-types • JPG, GIF, PNG • Vector • Color is a mathematical equation • Size changes force mathematical re-calculation • Increasing the image does not increase the file size • Use for line art, shapes and illustrations • Does not distort because color is recalculated • Sub-types • AI, WMF

17. File Types – Electronic Media Original • GIF • Raster • Platform independent • Limited to 256 colors • Use for broad expanses of color – no photos • Supports transparency • Lossless format • During compression, color info is not lost • GIF89a • Raster • Animated gif • Static images together in motion • Does not require a plug-in Distorted

18. Image File Formats – Part 2 • JPEG(Joint Photographic Experts Group) • Raster • Supports 16+ million colors • Compressed automatically • Results in image degradation • Lossy format • As compression increases, colors are dropped from the image • Will display differently on a MAC

19. Image File Formats – Part 3 • PNG (Portable Networks Graphic) • Combines the best of GIF and JPEG • Supports compression and high bit depth • 280 thousand billion colors • Page Description Languages (PDF) • Describes the layout of a printed page of graphics and text • Requires a Adobe Reader plugin to view online

20. Image File Formats – Part 4 • SVG (Scalable Vector Graphics) • Uses XML to describe shapes in 2D • Allows the image to become an object • Supports animation, fills, and gradients • Use for line art and shapes • Microsoft uses it to embed images in emailed document. <?xml version="1.0"?> <shape xmlns="http://www.daa.com.au/~james/dia-shape-ns" xmlns:svg="http://www.w3.org/2000/svg"> <name>Circuit - NPN Transistor</name> <icon>npn.xpm</icon> <connections> <point x="0" y="0"/> <point x="6" y="-4"/> <point x="6" y="4"/> </connections> <aspectratio type="fixed"/> <svg:svg width="3.0" height="3.0"> <svg:line x1="0" y1="0" x2="3" y2="0" /> <svg:line x1="3" y1="-3" x2="3" y2="3" /> <svg:line x1="3" y1="-2" x2="6" y2="-4" /> <svg:line x1="3" y1="2" x2="6" y2="4" /> <svg:polyline points="5,4 6,4 5.6154,3.0769" /> </svg:svg> </shape>

21. Image File Formats – Print Media • Print Media • Business cards, brochures, flyers, etc. • Formats • Eps • Encapsulated Postscript • Tif or tiff • Tagged Image File Format • Pct • Picture File Print Media files… cannot be used on the Internet are 150+ dpi in resolution

22. End