1. Business and Computing Deanery Multimedia Week 3 Design principles Introduction to computer graphics

2. Multimedia 2 Last week Enabling technologies Digital representations Hardware and software requirements Networks Standards

3. Multimedia 3 Today’s Contents Introduction to computer graphics Chapter 3 Design principles Chapter 13 Look at Flash

4. Multimedia 4 Computer Graphics Production and display of still images stored in digital form Digitize printed image with a scanner Capture image from digital camera Grab frame from video camera Create in digital form using graphics package Generate visual representation of data 64 Chapman N and Chapman J (2004).

5. Multimedia 5 Rendering Image is displayed on monitor etc as array of pixels Rectangular (usually square) dots of colour Program (e.g. Web browser) sets pixels to an appropriate colour to produce desired image Pixels merge optically to produce effect of continuous tone Program must maintain a model of the image May be stored in a file and read by program 66–67 Chapman N and Chapman J (2004).

6. Multimedia 6 Bitmapped and Vector Graphics Bitmapped graphics – image is modelled as an array of pixel values Render by direct mapping of logical pixels to physical pixels of screen May need scaling and clipping Vector graphics – image is modelled as mathematical description of curves, shapes Render by computing pixels from description 67–68 Chapman N and Chapman J (2004).

7. Multimedia 7 Memory Requirements Bitmapped – any picture of w x h pixels, using c bytes per pixel occupies whc bytes Vector – space required depends on complexity of picture (how many shapes, segments of path, etc) Usually vector graphics smaller than bitmapped 68–69 Chapman N and Chapman J (2004).

8. Multimedia 8 Memory Requirements 128 px square with 20px blue outline filled in red Bitmap using 24 bits per pixel, 128x128x3 = 48kbytes Vector specified in SVG: 86 bytes (plus 198 bytes SVG boilerplate) 68–69 Chapman N and Chapman J (2004).

9. Multimedia 9 Image Editing Vectors – drawing programs Select individual graphic objects (shapes, paths, &c) Transform size, position, angle, &c Change attributes: stroke and fill &c Bitmaps – painting programs Select areas of pixels Apply effects and filters 70–71 Chapman N and Chapman J (2004).

10. Multimedia 10 Scaling Vectors Scaling is a simple mathematical operation on stored description (before rendering) Curves and lines remain smooth at all sizes Bitmaps Interpolate pixel values More or less sophisticated algorithm Usually produces loss of quality, blurring, jaggedness &c 71 Chapman N and Chapman J (2004).

11. Multimedia 11 Combining Vectors & Bitmaps Rasterize vectors Lose all their vector properties Trace bitmaps Difficult and can only produce an approximation (parameterized) Import bitmaps into vector drawing programs Treated as indivisible objects Apply complex strokes to vectors to approximate bitmapped appearance 73–75 Chapman N and Chapman J (2004).

12. Multimedia 12 Layers Organizational device used in both sorts of graphics Permits separation and manipulation of different parts of a bitmapped image Digital version of clear sheets of acetate, stacked on top of each other Areas without coloured pixels/graphic objects are transparent so lower layers show through Compositing – combine layers using different blending modes (digital collage) 75–78 Chapman N and Chapman J (2004).

13. Multimedia 13 File Formats Many different graphics file formats in existence Different ways of encoding image data Different amounts/form of supplementary data (Bitmaps) Different compression methods Lossless – image can be reconstructed exactly from compressed version Lossy – some information discarded, image can only be reconstructed approximately 78–79 Chapman N and Chapman J (2004).

14. Multimedia 14 WWW Bitmapped Formats GIF (Compuserve Graphics Interchange Format) Lossless, 256 colours (indexed), transparency JPEG (Joint Photographic Experts Group) Lossy (variable quality), millions of colours PNG (Portable Network Graphics) Lossless, variable number of colours, W3C standard 79–80 Chapman N and Chapman J (2004).

15. Multimedia 15 Vector Formats SVG (Scalable Vector Graphics) W3C standard, not presently widely used SWF (Flash) Primarily for vector animation, but can be used for still vector graphics; de facto standard EPS (Encapsulated PostScript) Primarily print, use declining, superseded by PDF 81–82 Chapman N and Chapman J (2004).

16. Multimedia 16 Development Stages Information Gathering Prototyping Implementation Testing Distribution

17. Multimedia 17 Rules and Principles A rule says "You must do it this way". A principle says "This works…and has through all remembered time". […] Anxious, inexperienced writers obey rules. Rebellious, unschooled writers break rules. Artists master the form. Robert McKee, Story As with writers, so with multimedia… 412 Chapman N and Chapman J (2004).

18. Multimedia 18 Multimedia Structures Totally connected Hierarchical Sequential Hybrid 413–418 Chapman N and Chapman J (2004).

19. Multimedia 19 Totally Connected Every page has a link to every other page Even for a small movie, this structure requires a lot of links and is hard to make sense of May be appropriate for a movie where visitors may want to look at some or all of the pages in any order Provide a standard navigation bar (navbar) on each page, containing links to each of the others Indicate current location ("You are here") 413–415 Chapman N and Chapman J (2004).

20. Multimedia 20 414 Chapman N and Chapman J (2004).

21. Multimedia 21 Hierarchical Most popular organization for larger sites Home page contains pointers to a subset of other pages in the site Each page directly accessible from home page can be considered the home page of its own sub-site May contain links to home pages of sub-sub- sites, and so on Sub-sites devoted to sub-topics of main site 415 Chapman N and Chapman J (2004).

22. Multimedia 22 415 Chapman N and Chapman J (2004).

23. Multimedia 23 Hierarchical Navigation Essential structure is hierarchical, but there may be additional links (e.g. to each 2nd level page from every page) Use main navbar to access major sub- sites plus: 2nd level of navbar within each sub-site Hierarchical drop-down menus 415–416 Chapman N and Chapman J (2004).

24. Multimedia 24 Sequential May be appropriate when pages naturally form a linear sequence Sequence of images in a gallery Usual navigation consists of Next and Previous buttons, often augmented with links to every page in (short) sequence 417–418 Chapman N and Chapman J (2004).

25. Multimedia 25 417 Chapman N and Chapman J (2004).

26. Multimedia 26 Time-Based Structures Traditional time-based media esentially linear Digital media, linear order can be altered by scripts and in response to input from the user If script controls playback by computation, but without accepting input (e.g. counts frames), structure is deterministic To accept user input, there must be some controls to accept input May also exhibit parallelism 420 Chapman N and Chapman J (2004).

27. Multimedia 27 Loops Simple loop: script attached to final frame sends playback head back to first frame Introduction plus loop: script on final frame sends playback head to some earlier frame (not first) Counted loops: Script counts number of times round the loop, does something different after a certain number of loops (e.g. stop) 420–421 Chapman N and Chapman J (2004).

28. Multimedia 28 Branching Common case: set of selections on a menu Menu is a single stopped frame with buttons for each menu selection Movie is divided into sections, each of which jumps back to the menu frame at the end Script attached to each button causes a jump to the corresponding section when pressed General branching structures built by allowing users to choose from set of alternatives for next part of movie to play next (e.g. interactive narrative) 422–423 Chapman N and Chapman J (2004).

29. Multimedia 29 Parallelism Flash movie clips are self-contained movies within a movie that can play back in parallel Movie clips can be controlled by scripting Stopped, started, sent to a particular frame,… Permits essentially infinite variations on playback of a finite collection of elements Can respond to user input Interactive animation etc 423–425 Chapman N and Chapman J (2004).

30. Multimedia 30 Navigation Charts Should represent the movement through the site Can use multiple diagrams To identify movement through main sections To identify movement within sections Otherwise known as a structure chart

31. Multimedia 31 Your navigation chart Should be hand drawn Should use meaningful names Include arrows Should correspond with your storyboad

32. Multimedia 32 Breadth v Depth Wraps Drinks About us Contact Sandwiches White French Wholemeal Herbal Cold Hot Home Drinks About us Contact Sandwiches White Wraps French Wholemeal Herbal Cold Hot Home Order

33. Multimedia 33 Designing Navigation Ensure it is easy to learn Consistent Provide user feedback Provide alternative navigation Provide clear messages Should be in context

34. Multimedia 34 Structure and Navigation To help people with cognitive disabilities, use headings and sub-heading, bulleted and numbered lists; use one paragraph per idea Provide navigational overview of movie to help orient people who easily become confused and to allow assistive technology to isolate navigational elements Make link text meaningful, even in isolation Never use click here links 438–439 Chapman N and Chapman J (2004).

35. Multimedia 35 Navigation chart Start with a list of pages, organise into groups Groups become sections Remember project details Short meaningful names

36. Multimedia 36 Colour Roughly 5% of male population unable to distinguish between certain colours (usually red and green); very small number of people cannot see colours at all Old computers, some PDAs only have black and white displays Cannot rely on colour alone to convey information e.g. if you use colour to identify links, supplement it with some other styling Can distinguish between confusable colours using brightness 439–440 Chapman N and Chapman J (2004).

37. Multimedia 37 Animation Rapidly flashing elements can trigger epileptic attacks, so avoid blinking text &c Movement may be an unwelcome distraction, so always provide a way of turning off animated effects Flash: add controls to movie to stop or skip it 441 Chapman N and Chapman J (2004).

38. Multimedia 38 Content Most important thing about a piece of multimedia is its content Most beautifully designed movie will attract no visitors if the content is of no interest to anybody Compelling content can overcome poor design Good design practice can make compelling content more readable, navigable, welcoming,… 445–447 Chapman N and Chapman J (2004).

39. Multimedia 39 Guidelines Not cast-iron rules Mostly common sense and courtesy Treat as check list If not followed, know why not 452

40. Multimedia 40 Guidelines Put the user first Put the user in control Don't provide too much choice Don't make assumptions about users' behaviour Use technology judiciously Understand your site's context Keep up with change Don't neglect aesthetics Know your limitations 452–456 Chapman N and Chapman J (2004).

41. Multimedia 41 Designing your layout Your users’ computer - what is it? What to consider Colour, covered in later week Size of screen Prototyping Sketches and storyboards

42. Multimedia 42 Paper prototyping Main idea: Sketch out prototypes of the interface on paper Potential users “walk through” task scenarios using the paper interface A designer “plays computer” Change the design on-the-fly if helpful Widely practiced in industry Helps people work together on the design Hearst M. (2002)

43. Multimedia 43 Why Do We Prototype? Get feedback on our design faster saves money Experiment with alternative designs Fix problems before code is written Keep the design centered on the user Hearst M. (2002)

44. Multimedia 44 Advantages of prototyping Takes only a few hours no expensive equipment needed Can test multiple alternatives Can change the design as you test If users are trying to use the interface in a way you didn’t design it – go with what they think! Adapt! Allows designers to work together Hearst M. (2002)

45. Multimedia 45 Types of screen The display medium is important for your design Cathode ray tube LCD display Name some examples

46. Multimedia 46 Monitor screen size Like televisions, screen sizes are measured in diagonal inches the distance from one corner to the opposite corner diagonally. A typical size for small VGA monitors is 14 inches Monitors can be either portrait or landscape Or even widescreen The resolution of a monitor indicates how densely packed the pixels are. In general, the more pixels the sharper the image.

47. Multimedia 47 Graphics adapter A contemporary 3D graphics card with 32 M memory may not be on your machine AGP Accelerated Graphics Port, being replaced by PCIX Peripheral Component Interface Express Typical resolutions 800 x 600 1024 x 768 1280 x 1024 1600 x 1200

48. Multimedia 48 Producers Producers tend to have a significantly higher specification computer, why? To produce Flash 1024 x 768, 16-bit display (32-bit recommended) Macromedia (2005) 3ds max OpenGL® and Direct3D® hardware acceleration supported; 3D graphics accelerator 1280x1024x32-bit color with 256 MB RAM recommended Autodesk (2005) Use the module website to check what you are currently using

49. Multimedia 49 Users Consider what your user might be using to view your work Desktop PC with large high spec monitor? Small lightweight laptop? PDA? There is no right answer Up to you to decide what you are designing for and to justify it in your documentation

50. Multimedia 50 Prototyping - Sketches Doodles Initial ideas The more the better

51. Multimedia 51 Prototyping - Storyboards Used to indicate what users will see on a screen Screen size What size are you going to work to? They provide a feel for the interface Usually paper based Should compliment the navigation diagram Identify elements such as: Layout and colour schemes Font size and style The use of other media elements (sound, video)

52. Multimedia 52 Storyboards Paper Portrait layout Hand-drawn contents Screen proportions 4 x 3 (?) Project details Script Project Title:Date: Page Title: Filename: Script

53. Multimedia 53 Storyboard Example Project details Hand-drawn contents Script

54. Multimedia 54 Some questions Scenario: You have been asked by Hope to create an Library Induction for use by new students using Flash List and describe the stages in designing your production What screen size would you design for, justify your choice What screen size would you prefer to design on, justify your recommendation

55. Multimedia 55 Some questions continued What are the important criteria in designing navigation? Describe the difference between vector and bitmap graphics, which would you use to create a multimedia interface for delivery over the web? Describe prototyping and give reasons for using it

56. Multimedia 56 For Next Week Your presentation Directed Reading Digital Multimedia, Second Edition Chapter 4Vector graphics and Flash Chapter 6 Colour Independent study Work on your presentation Get to know Flash Help/How Do I Work with layers Create a user interface

57. Multimedia 57 What have we covered today? Introduction to computer graphics Bitmaps Vectors Design principles Rules Navigation Prototyping Any questions?

58. Multimedia 58 References Chapman N and Chapman J (2004). Digital Multimedia, Second Edition. London. Wiley Robert McKee, Story http://mckeestory.com/homepage.htm [accessed 5/10/2005] Hearst, M. (2002) http://www.sims.berkeley.edu/academics/courses/is21 3/s02/lectures/Lecture10.ppt [accessed 5/10/2005] Autodesk (2005) http://usa.autodesk.com/ [accessed 5/10/2005] Macromedia (2005) http://www.macromedia.com/software/flash/flashpro/p roductinfo/systemreqs/ [accessed 5/10/2005]