CO42002 MT4 Unit 3

Vector Animation

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

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.

Unit 3

SMIL

Nature of VectorsReview ISD/MDM concepts

Flash

Browser Standardisation

SVG

DOM v SAX

A Philosophy

What it is

DOM Animation - SMIL

MCIBTYC

Application Areas

Tutorial

Flash - Opportunisti

c?

Flash v SVGA history

Adobe

Alternatives

Vectors• 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

Shape=Cuboid Width=20 pixels, Height=20pixels, Depth=15pixels,

Location=20,10,5 transparency=50%

colour=#97B8FF

xyyx 224

See also http://en.wikipedia.org/wiki/

Image:Spline01.gif (accessed 22/2/07)

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

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

Unit 4

SMIL

Nature of VectorsReview ISD/MDM concepts

Flash

Browser Standardisation

SVG

DOM v SAX

A Philosophy

What it is

DOM Animation - SMIL

MCIBTYC

Application Areas

Tutorial

Flash - Opportunisti

c?

Flash v SVGA history

Adobe

Alternatives

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

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?

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

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/V

ector_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

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

Unit 4

SMIL

Nature of VectorsReview ISD/MDM concepts

Flash

Browser Standardisation

SVG

DOM v SAX

A Philosophy

What it is

DOM Animation - SMIL

MCIBTYC

Application Areas

Tutorial

Flash - Opportunisti

c?

Flash v SVGA history

Adobe

Alternatives

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)

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

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

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/

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

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,

break

• Back in 5

Unit 4

SMIL

Nature of VectorsReview ISD/MDM concepts

Flash

Browser Standardisation

SVG

DOM v SAX

A Philosophy

What it is

DOM Animation - SMIL

MCIBTYC

Application Areas

Tutorial

Flash - Opportunisti

c?

Flash v SVGA history

Adobe

Alternatives

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

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?)

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

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/20

001031realnetworks.html– But focuses less on SMIL, and more on the “ability to export

RealNetworks compatible video”

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!

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

Unit 3

SMIL

Nature of VectorsReview ISD/MDM concepts

Flash

Browser Standardisation

SVG

DOM v SAX

A Philosophy

What it is

DOM Animation - SMIL

MCIBTYC

Application Areas

Tutorial

Flash - Opportunisti

c?

Flash v SVGA history

Adobe

Alternatives

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”

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

Traditional Multimedia Development Lifecycle

• concept development• requirements specification• design• prototype• production• testing and evaluation• delivery

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.

User Stories

Conceptualscenarios

Concretescenarios

Usecases

Implementation

Prototyping Design ideas evaluationGenerating ideas

Understanding requirements

What people want?What people do?What they know?

Abstract from experience

Design Constraints

Specify and code

Scenarios in Design

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

Scenarios in Task-Artefact Cycle

Factors constraining

design

Design moveshave many

effects

Scientific knowledge lags

behind experience

Reflectionson designs Requirements

Possibilities

Activity Artefact

Carroll 1990

Revised Task-Artefact Cycle

Task Analysis

Design

Designed Artefact

Task Context

Evaluation/ Claims Analysis

ClaimsRepository of HCI Knowledge

TheoryArtefact

What Why How

Based on Carroll & Rosson 1992, Carroll 2002

Software engineering traditions: prototyping

Outline Specification

Evaluate Prototype

Specify System

Design & Implement System

Yes

No

Prototyping Section

Develop Prototype

Acceptable ?

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.

Sw. Eng. tradition (continued): Exploratory Programming

Develop Outline Specification

Write Software Evaluate Software

Deliver Software

No

Yes

SoftwareAdequate ?

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.

Rapid Application Development

Design

RequirementsSpecification

Completion

ReviewEvaluate

Implement

ISO 13407: Human-Centred Design (HCD)

Based on http://www.usabilitynet.org/tools/13407stds.htm

1. Plan the human-centred process

2. Specify the context of use

3. Specify user & organisational requirements

4. Produce design solutions

5. Evaluate designs against user requirements

Meets requirements

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

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.

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

Release,Adoption.Feedback to design team from users (teachers and learners).Reflections from the design team.

Analyse learning requirements,Define learning outcomes,Define context, Define content.Participants: design team in consultation with teachers and learners.

Requirements Gathering

& Specification

Evaluation

Application Design

Curriculum Integration

Information display, Information access, User Activities.Participants: design team in consultation with teachers and learners.

Learning Theory

HCI Theory

Focus: Usability and Learning Effectiveness

Focus: Who? What? Why? Where? Focus: Presentation,

Access and Engagement

Focus: Method of Use and Fitness for Purpose

DevelopmentBuild (prototype and implement),Functionality, Testing.Participants: design team in consultation with teachers and learners.

Cairncross (2004)PhD Thesis &

http://www.ics.ltsn.ac.uk/pub/HCI2004/HCIE2004CairncrossMcEwan.

pdf

It Involves Branding Guidelines

Which makes demands

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.

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.

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.

Marking Scheme (out of 50)• 20 for the site

– Creativity within conformance to brand and accessibility guidelines• 2/5 – the site has no serious contraventions of the accessibility or brand guidelines• 3/5 – the site displays creativity in meeting the guidelines• 4/5 or higher – the site is professional or exemplary in meeting the guidelines

– The educational effectiveness of the site• 2/5 – all content there but target users would not learn very effectively• 3/5 – target users achieve the desired learning outcomes within the 30 minutes• 4/5 or higher – the site provides a quality learning experience for the target users

– Quality and relevance of the sample 3D content• 2/5 –3D content is simply the output from completing the tutorials• 3/5 –3D content reflects the brand guidelines / desired learning outcomes for this site• 4/5 or higher –3D content particularly relevant to the site and of distinctive quality

– Coherence of the site – how well structured it is and easy to extend• 2/5 – the site has no broken links and no missing graphics• 3/5 – logical site structure – easy for a developer to extend site• 4/5 or higher – templates and stylesheets makes the site particularly easy to maintain

• 30 for the documentation

Marking – Documentation out of 30• Basic documentation (10 Marks) :

– a statement of objectives (50-100 words)– 300-500 words on users and their technology– Release letter (file-list and bugs) (1 page)– Design Spec (1 page)– Navigation map (1 page)

• Educational Evaluation (600-800 words - 10 marks), – Motivational/educational effectiveness of your site for the target learners, – Based upon the peer evaluations carried out in week 7 tutorials #

• Accessibility Evaluation (750-1000 words -10 marks).– Compliance with regulations/guidelines in UK, USA and Australia, – A briefing to BHCIG for what could be done to make the 3D content accessible.

• For each the documentation earns– 4/10 – adequate – but the quality is disappointing– 5/10 – good – exceeds minimum requirements– 6/10 – very good –impressive presentation, deeper understanding of the issues– 7/10 – excellent – high quality critiques of own and others' work.– 8/10 and above – acceptable in a professional or research situation.

Summary - now you understand... The evolution of the use of scalable vector

animations on the web

The tensions between standards bodies and their membership

The basics of using scalable vectors, and the criteria for selecting tools

The need to design educational multimedia!

Unit 3

SMIL

Nature of VectorsReview ISD/MDM concepts

Flash

Browser Standardisation

SVG

DOM v SAX

A Philosophy

What it is

DOM Animation - SMIL

MCIBTYC

Application Areas

Tutorial

Flash - Opportunisti

c?

Flash v SVGA history

Adobe

Alternatives