co42002 mt4 unit 3 vector animation schedule tutorials – flash mx vectors, information and...
Post on 20-Dec-2015
242 views
TRANSCRIPT
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,
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.
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.
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!