CO42002 MT4 Unit 3

1. CO42002 MT4 Unit 3 Vector Animation

2. Schedule • Tutorials – Flash MX • Vectors, Information and Standardisation • SVG v Flash • Quick overview of SMIL • Break • Document Object Model (DOM) • Review of MDM/ID concept • Coursework

3. Unit Overview – Learning Outcomes • By by the end, you should be able to: • Use vectors to communicate information • Use a tool such as Macromedia Flash to create scalable vector-based animations • Based on the history of the SVG standardisation effort, discuss the effectiveness & adoption patterns of tools to produce vector-based animation in SVG/SMIL v Flash, • Discuss the differences between Document Object Model (DOM) and Simple API for XML (SAX) • Use a design approach to educational multimedia • Which helps you • Analyse trends in architecture of WWW browsers and plug-ins. • Produce multimedia educational application and deliver through a browser.

4. Review ISD/MDM concepts Nature of Vectors Tutorial Browser Standardisation Flash Unit 3 A Philosophy Flash - Opportunistic? Flash v SVG A history SMIL What it is SVG MCIBTYC Application Areas Alternatives DOM Adobe Animation - SMIL DOM v SAX

5. Vectors Shape=Cuboid Width=20 pixels, Height=20pixels, Depth=15pixels, Location=20,10,5 transparency=50% colour=#97B8FF • What are they? • Numbers that communicate information • Since they exist in a conceptual space they can be represented in a way to suit the user and their context • They are both blueprint and final entity (cf class/object) • Compare to bitmaps, digital samples, which are partial representations of reality • Activity: discuss possible advantages of vector-based data See also http://en.wikipedia.org/wiki/Image:Spline01.gif (accessed 22/2/07)

6. Some advantages • Small data size – describe actions and motion in a space over time • Can be re-interpreted for those with impairments • Can be rescaled to suit circumstance • Can preserve the nature of information • Can be readily contrasted with other vector-based information • Trends are self-evident

7. Information needs parsing • Poole & Bradley p72 – parsing allows reconstruction • If you have the “recipe” you can recreate the end-product • If you can decode encryption, you get the opriginal content • But “plaintext” originals can be freely copied, adapted. • The problem that CDs afford “ripping” • If you have freely-available low-resolution bitmaps, or lossy compression, then perhaps not a problem • But if anyone can access the instructions/key/vectors you can recreate exactly • Therefore a desire to protect valuable data. Compiled assets (or proprietary formats) help, but the output mechanism might still allow access to reconstructed originals in “plaintext” • Control of the player outputs (eg audio out loopback to line-in) • Screen-scraping/diverting audio data

8. Review ISD/MDM concepts Nature of Vectors Tutorial Browser Standardisation Flash Unit 4 A Philosophy Flash - Opportunistic? Flash v SVG A history SMIL What it is SVG MCIBTYC Application Areas Alternatives DOM Adobe Animation - SMIL DOM v SAX

9. Browser-native technologies • Standards leverage and integrate with other standards • A progression from GIF to DHTML and then to SVG, SMIL, XHTML+SMIL etc • This implies a consistent outlook on the world (the Web Architecture values presented last week) • separating presentation from data, • support for accessibility, • data with public structure, • data with public interface (eg for search engines) • data protected if necessary by standard encryption – “good enough” encryption for current knowledge, protection of keys

10. Flash – innovation versus diversion • The objective shared by many people – to use vectors to represent content on the web. • More efficient, more accurate • But where does W3 SVG initiative need to avoid duplicating other groups’ work • Flash emerges - extends the capabilities of the web in the desired direction • function-rich • bandwidth-light • A market-driven solution or a prototype for evaluation • A pragmatic solution rather than a theory or an ideal • Hijacks the concept?

11. Poole & Bradley pp78-95 • It will be an iterative process to internalise the debate, and all the various arguments • Build up a picture of • who supplies what and why (part b) • How you can use (track/extend) this technology to meet the nights of your customers

12. Examples of Vectors in use • Flash usage has largely moved on from “gee-whiz” splash screens, but some examples of innovation with vectors remain • http://www.flashkit.com/movies/Animations/Vector_Animations/Vector_a-Matt_Hef-5905/index.php • Vector is not all Flash does • http://www.adobe.com/cfusion/showcase/index.cfm?event=finder&productid=1527&loc=en_us

13. Flash & SVG • 1999 – Macromedia closely involved in standards effort • 2001 – divergence – Adobe runs with SVG, Macromedia with Flash • Can you find authoritative literature, or does everyone have an opinion? • http://www.carto.net/papers/svg/comparison_flash_svg.html

14. Review ISD/MDM concepts Nature of Vectors Tutorial Browser Standardisation Flash Unit 4 A Philosophy Flash - Opportunistic? Flash v SVG A history SMIL What it is SVG MCIBTYC Application Areas Alternatives DOM Adobe Animation - SMIL DOM v SAX

15. SVG (from http://graphicssoft.about.com/cs/formatssvg/ ) • “fully scalable images for zooming and panning • pixel perfect positioning • high resolution gradients, drop shadows, and other filter effects • enhanced color control and color accuracy • highest possible printing resolution • better typographic control including kerning, text on a path, and unlimited fonts. • editable and searchable text” • “ability to search text elements within graphics • dynamic content, animation, and interactivity through scripting • compact download sizes • Cascading Style Sheet support enabling global Web site changes • multiple levels of transparency • support for other devices such as palmtops, GPS, cellphones” • Source: http://graphicssoft.about.com/library/weekly/aa121699b.htm (accessed 25/9/06)

16. MCIBTYC • In building your knowledge do you consult the standards (which are detailed and complex) or commentators, whose point of view is “situated”? • http://www.w3.org/TR/SVG/concepts.html • http://graphicssoft.about.com/gi/dynamic/offsite.htm?site=http%3A%2F%2Fwww.svgfaq.com%2F • Just for fun… • http://www.usenet.org.uk/uk.games.video.misc.html

17. An example of situated perspective! • http://digitalcraft.com.au/svg/blurbs/01/blurb001.aspx (available 2/2/2005 now unavailable) • Effectively: • “Much easier for website developers to hand-tool Javascript than learn a visual authoring tool” • Discussion point: • Visual environments afford no less technical solutions than hand-coded – the issues are creativity, productivity and standardised code

18. Flash – an open technology? • File format freely available (though check out the (free) licensing conditions • http://www.macromedia.com/licensing/developer/ • Only one company can change it, controls it • Used to require: “Made with Macromedia” and “Adobe Acrobat” logos on end-product • Do we ever see similar credits on TV or in magazines? • Through “white papers”, advocate or educate? • In fact no longer any White Papers on Flash Site • Instead http://www.macromedia.com/software/flash/flashpro/evaluation/

19. Usefulness of SVG and Flash for developers • SVG tutorials exists • Reminiscent of early Java UI tutorials and examples • Visually primitive • “Dog on its hind legs” • Flash authoring environments proliferate • Cheap tools to cope with a subset of functionality • Converters between Flash and SVG appear • And now! • http://www.adobe.com/svg/eol.html

20. Historical Parallel • Now, with office suites • Have consistent UI (arguably mainly from Microsoft’s investments in usability for real-world situations) • Harmonise on XML as the data format, • Microsoft dominating, but free OpenOffice solutions increasing popularity. (Are they cheaper – is the TCO (total cost of ownership) less?) • Fifteen years ago • WordPerfect dominated • Every tool had a unique UI – cross-training needed • Every tool had its own file format – even within suites! • Attempts at standardisation • OpenDoc, OpenDocument, Office Open XML (OOXML), PDF,

21. break • Back in 5

22. Review ISD/MDM concepts Nature of Vectors Tutorial Browser Standardisation Flash Unit 4 A Philosophy Flash - Opportunistic? Flash v SVG A history SMIL What it is SVG MCIBTYC Application Areas Alternatives DOM Adobe Animation - SMIL DOM v SAX

23. SMIL …and the world smiles with you… • Synchronized Multimedia Integration Language • “enables simple authoring of interactive audiovisual presentations” (w3.org) • 1996 – research papers/arguments • 1998 – v1.0 RealNetworks (without Microsoft and Macromedia) • 2001 – v2.0 All three involved – agree on a migration towards more “DOM-friendly” approaches

24. Jolly old DOM! • Document Object Model • Allows you to present documents as structured entities with which you can do whatever you want (assuming permissions have been granted) • “make it easy for programmers to access components and to delete, add, or edit their content, attributes and style” • Platform-, language-neutral • Tree of nodes (sound familiar?)

25. Has no SAX appeal • Alternative to DOM: SAX - Simple API for XML • Event-based rather than tree-based • Quick and dirty? • DOM’s more structured approach places heavy burden on resources • Microsoft and Macromedia prefer more DOM-centric approach • XHTML+TIME • implementation of a subset of SMIL

26. Adobe? • Not listed in participants for SMIL 2.0 or 2.1 • http://www.w3.org/2004/10/10/SMIL21-patent-disclosure.html • Supports SMIL through GoLive • http://www.adobe.com/web/wireless/mms.html • http://www.adobe.com/products/golive/newfeatures2.html • But the selling point is to produce MMS (which is based on SMIL) • 2000: Good intentions for Premiere: • http://www.adobe.com/aboutadobe/pressroom/pressreleases/200010/20001031realnetworks.html • But focuses less on SMIL, and more on the “ability to export RealNetworks compatible video”

27. Public posturing - what does it all mean? • Lots of excitement out there, both now and several years ago • http://64.49.222.225/webdesign/svg/articles/svg-vs-flash.html • http://www.alistapart.com/stories/smil/ • http://www.econtentmag.com/r19/2002/boeri10_02.html • http://weblogs.macromedia.com/jd/archives/flash_tech/index.cfm See Dec 1st 2005 posting • OpEd pieces – opinion masquerading as editorial? They start debates rolling. • http://www.oreillynet.com/cs/user/view/wlg/1197 • http://www.oreillynet.com/cs/weblog/view/cs_msg/6566?page=last&x-showcontent=text • http://www.oreillynet.com/cs/user/view/cs_msg/6825 • Back to MCIBTYC!

28. Alternatives continue to proliferate (and fade away) • http://galamo.com/sharpmotionart/player/player.html • SharpMotionART™ - didn’t last long!! • An alternative animation platform supplied for Sharp Zaurus but ported to others • allows the use of SVG images within the animation. • www.accuweather.com pilot project making a new graphical weather service available to Palm OS and PocketPC users. • Reminiscent of packages used to demonstrate the appeal of Flash • Still no Flash player for the Palm

29. Review ISD/MDM concepts Nature of Vectors Tutorial Browser Standardisation Flash Unit 3 A Philosophy Flash - Opportunistic? Flash v SVG A history SMIL What it is SVG MCIBTYC Application Areas Alternatives DOM Adobe Animation - SMIL DOM v SAX

30. Typical student view? • “The requirements are obvious” • “I don’t need to do design, I just need to get stuck into the work” • “My ideas are too new for anyone else to have ever done anything like it before” • “I want to do multimedia not documentation” • “The only benefit of using a methodology, is that it will tell me exactly what I have to do”

31. Quick Review of 3rd Year issues • For those who did, and those who did not do • CO32005 Interactive Systems Design and/or • CO32004 Multimedia Development Methods, • This is a summary of some methodologies that are commonly accepted in industry to tackle important usability issues • Scenarios, as an approach to gathering requirements • Other lifecycle approaches • The following slides from lectures in these modules, summarise some approaches

32. Traditional Multimedia Development Lifecycle • concept development • requirements specification • design • prototype • production • testing and evaluation • delivery

33. Interaction Design • There is an important tension, however, between • A creative approach to interaction design • An engineering approach • The approach described here aims to bridge this divide - by offering both a holistic view of design, and some more analytic techniques.

34. Scenarios in Design Abstract from experience Design Constraints Specify and code User Stories Conceptual scenarios Concrete scenarios Use cases What people want? What people do? What they know? Prototyping Design ideas evaluation Generating ideas Understanding requirements Implementation

35. Types of Scenario • User stories • Real or fictional accounts of people doing things • Conceptual scenarios • Generic, abstract descriptions • Concrete scenarios • Versions of conceptual scenarios with interaction details • Use cases • Generic interactions with the device/system

36. Scenarios in Task-Artefact Cycle Factors constraining design Reflections on designs Requirements Artefact Activity Scientific knowledge lags behind experience Possibilities Design moves have many effects Carroll 1990

37. Revised Task-Artefact Cycle Task Context Task Analysis Designed Artefact Evaluation/ Claims Analysis Design Artefact Theory Repository of HCI Knowledge Based on Carroll & Rosson 1992, Carroll 2002 Claims What Why How

38. Software engineering traditions: prototyping Prototyping Section Outline Specification Develop Prototype Evaluate Prototype No Acceptable ? Yes Adapted from Sommerville (1992, pp107-109), Dix et al (1993, pp173-7), and others. Sommerville, I (1992) Software Engineering, Addison Wesley Dix, A, Finlay, J., Abowd, G., Beale, R. (1993) Human-Computer Interaction, Prentice Hall. Specify System Design & Implement System

39. Sw. Eng. tradition (continued): Exploratory Programming Develop Outline Specification Write Software Evaluate Software Software Adequate ? No Adapted from Sommerville (1992, pp107-109), Dix et al (1993, pp173-7), and others. Sommerville, I (1992) Software Engineering, Addison Wesley Dix, A, Finlay, J., Abowd, G., Beale, R. (1993) Human-Computer Interaction, Prentice Hall. Yes Deliver Software

40. Requirements Specification Design Implement Review Evaluate Completion Rapid Application Development

41. ISO 13407: Human-Centred Design (HCD) 1. Plan the human-centred process Meets requirements 2. Specify the context of use 3. Specify user & organisational requirements 5. Evaluate designs against user requirements 4. Produce design solutions Based on http://www.usabilitynet.org/tools/13407stds.htm

42. Bonus feature! • Coursework • Creating prototype multimedia learning object • For school leavers, with PC knowledge but not having studied computing • On different 3D technologies • Consider the nature of e-learning • It is a good example of all the issues involved in new media development

43. Coursework Scenario • You have applied for the job of Interactive Media Developer, as part of a EU-funded project, by BHCIG - the British HCI Group (a specialist group of the British Computing Society (BCS)). The job specifies that the developer must be capable of creating work with exemplary usability and accessibility • According to its web-site, BHCIG is: • “an organisation for all those working on the analysis, design, implementation and evaluation of technologies for human use.” • As part of the recruitment process you have been invited to create a prototype learning object (LO) to explain “3D on the web” to school leavers. • You will be expected to make a web-site available and supply high quality, but brief, documentation of the site and the rationale for your design choices. • The objective is to inspire school leavers into studying both the human and technical aspects of computing. • BHCIG is about to re-brand as “interaction, a specialist group of the BCS". Professional branding materials have been prepared (see webct). • They would like you to be among the first to use the new branding guidelines, and to evaluate these.

44. Your deliverables – prototype website and documentation • You will provide the following • An online learning experience with 2-4 minutes of content that demonstrates the differences between competing 3D standards on the web, and how 3D on the web could be used in future • Due to restricted bandwidth and unresolved accessibility issues, no video is to be used in this prototype, and any audio content must also be available visually. • Tutorial Support • You will deliver the introduction screens based on the brand guidelines, for evaluation on 2nd Mar 2006 (in the week 4 tutorial) • You will deliver sample 3D work for evaluation on 16th March 2006 (in the week 6 tutorial) • Your site will be complete and ready for independent evaluation on 23rd March 2006 (in the week 7 tutorial) • Look at existing 3D learning eg at HND-level • Unit DE2N 35: 3D Modelling and Animation http://www.sqa.org.uk/files/hn/DDE2N35.pdf

45. Learning Theory HCI Theory Analyse learning requirements, Define learning outcomes, Define context, Define content. Participants: design team in consultation with teachers and learners. Information display, Information access, User Activities. Participants: design team in consultation with teachers and learners. Requirements Gathering & Specification Application Design Focus: Who? What? Why? Where? Focus: Presentation, Access and Engagement Evaluation Cairncross (2004) PhD Thesis & http://www.ics.ltsn.ac.uk/pub/HCI2004/HCIE2004CairncrossMcEwan.pdf Focus: Usability and Learning Effectiveness Development Focus: Method of Use and Fitness for Purpose Curriculum Integration Build (prototype and implement), Functionality, Testing. Participants: design team in consultation with teachers and learners. Release, Adoption. Feedback to design team from users (teachers and learners). Reflections from the design team.

46. It Involves Branding Guidelines

47. Which makes demands

48. Rules for Colours and Fonts • The primary font of the Interaction group identity is Chalet LondonNineteenSeventy. It is should be used in the logotype and in the logotype variants. It should be used for main headers but used sparingly. • The font used for the sub-header on the Interaction logotype is Century Gothic regular. When used as a sub-header it should have +35 tracking. • Century Gothic regular can also be used as a header for print material. Use bold when more definition is needed. • When designing for print use Century Gothic regular as body copy at 10pt weight with 14pt tracking. • If Century Gothic is not available use helvetica as first replacement. When designing for web, use Arial.

49. The Website • Your LO must motivate learners to study it for around 15-30 minutes, at the end of which time they should be able to • Describe the differences between de facto and de jure standards for 3D on the web • Summarise the history of VRML, Web3D and Director 3D, and the differences between each. • The site created must be stored on your space in www.dcs.napier.ac.uk • You must enable the files and folders so that anyone can view (but not edit) the content. • The site must have examples, created by you, of both VRML (or web3d) and Director3D.

50. Fundamental Requirements • Your site must contain the following statement on every page: • “Note: this fictional site has been prepared as a Napier University student assignment and does not reflect the work or views of the British HCI Group, interaction or the BCS” • The site itself must • Follow accessibility guidelines, eg PAS78 or WebXact, but you do not need to make the 3D content itself accessible – simply provide a short ALT text to describe each. • Conform to and exploit the interaction brand guidelines • Motivate 17-18 year old students who have not previously studied computer science, but who have good general experience of using PCs.