SMIL Europe Paris, France Patrick Schmitz cogit@ludicrum.org 10:00 AM PT Feb 6, 2003

Title slide for talk at SMIL Europe 2003

Waterman_destiny-l2.jpg clocks2.gif bandh3.jpg Not a general XSLT tutorial Specific to timing and animation Broad range of use-cases and approaches trivial effects: hover, transitions slideshows like this one synchronized presentations IE6 and SVG viewers assumed target I use mostly client-side XSLT, but most of talk applies to server side as well Assume some knowledge of involved technologies. Can ask, but people really need to know basics of SMIL, SVG and XSLT.
Can mention that this is a slide show example, but perhaps want to wait until get to that slide. Multiple output formats For different rendering agents For different cases: screen versus print For adaptation to users or content Data-driven content (of course) Templates and parameterization Just for quick discussion - do not get bogged down. Can mention research work with Peter and Simon on Templates and P14N Trivial slideset schema One stylesheet produces this presentation in XHTML+SMIL Another produced the handouts Others can produce SVG, static HTML etc. Much cheaper (smaller, simpler) than PowerPoint No WYSIWYG editor L Target language support for inline timing (XHTML+SMIL versus SVG) Pure XML (XHTML or SVG) output as well as output plus script/stylesheets, etc. Pure XML easier to use in data islands Full document output simpler for ancillary files Authoring and process model for timing and animation Can hint at some of the issues, but take care not to talk about Nervana work. The real point is that if you need to add script or external CSS, data islands can be a pain - need to work around with script to inject stylesheets, into parent etc. OTOH, full doc makes it hard to switch and swap views within a framework (nicer not to refresh the boilerplate). Next slide talks about process model so just transition... Apply animations, transitions, consistent durations, etc. like style Can use static expressions as well, with some tools Good for presentation-class effects, but not for broad synchronization Prototype in an HTML editor and then convert to XSLT Describe some of the use cases for this approach. Emphasize the comparison to styling. Note that can process elements with addition timing markup - just setting consistent duration, e.g. Synthesize content from a pattern with more flexibility than symbol/use SVG does not allow animation of instances No way to vary animations within instances For XHTML+SMIL, can generate animated tables, etc. Needed for varying animation and timing on instances Parameterization really needed to make this useful Template-based content is what XSLT is all about. But can make the source xml effectively invoke a content-generation template with parameters. When calling from script or code, can directly use parameters to XSLT to achieve P14N on instatiation. Note that script generation of content common in HTML world (doc.write). Describe timing on content, and impose complete control Easy way to produce slide sequence like these Convert MMDB query results into a synchronized presentation Simplifies cases like exclusive menus, popups, etc. Adapt layout transformations to add timing, e.g. for zooming table Facilitates better navigation and orientation models Reiterate this application and approach Mention Cuypers as a case for generated presentations Exclusive menus: talked about this in the morning. Can say that author will put *semantics* of interrupt or layering model in XML, and then stylesheet can deal with applying the timing. Talk about problem of scaling script or other solutions for things like orientation outline. Namespace and behavior binding Namespace and extension prefixes in stylesheet
Namespace on output html element
]]> When using data-island model, do not bind time behavior with IMPORT Talk about the fudge on the namespaces and imports Event-base defaults do not work in IE use explicit targets (generate-id()) No negative begin times in ASV3 Generate 2 animations (sometimes) Watch origins with animateTransform E.g. a bunch of rotating logos Add the extra SVG to simplify the transforms Position at 0, rotate and translate Add the extra SVG to move origin Talk about sync-arcs and the problems of ids in general - and note that can synthesize ids with prefix or suffix to a unique-id (for regular dependents/animation elements, etc.). Same principles apply to proxies (to keep naming a little more sane). Hand-editing XML not as nice as WYSIWYG Professional xml tools like xmlspy can help PowerPoint plug-in to generate XHTML+SMIL needed (good research project!) Would be interesting to try inverse XSLT transform tools Stylesheets should allow inline timing Use CSS (not HTML) for presentation Mention Nabil's work on incremental editing with XHTML inversion Talk about why need to allow inline work (template gets working and then gets reused, but authors will need escaping mechanism or additinal tools. Mention "extra" nodes in slideset Pound the drum for "Separation of Content and Presentation" Don't overdo animation - it reduces comprehension Don't scale or rotate text (or do it fast!) Use motion for transitions, etc. Use color animations - cheaper than filters Just whip through these Animate SVG island in XHTML+SMIL E.g. use SVG in place of an image Do motion, transitions, etc. in XHTML+SMIL Allow margins to deal with drawing bugs In IE6 with ASV3, can target XHTML+SMIL animations at svg elements Coordinate SVG effects with host document Leverage time manipulations support Take care with namespaces Mention bugs in drawing - e.g. transitions and opacity-filters Use for TimeManips: Can 'fix' color animations with accel/decel Coordinating the timelines - approach 1 Define SVG animations relative to a dummy Begin dummy when the SVG element begins in the parent doc
svgEl.window.document.getElementById('dummy').beginElement(); Qualify as current experiments. This is like the iframe bridge described in my other talk Coordinating the timelines - approach 2 Hide SVG element in parent doc pauseAnimations and setCurrentTime(0) unpauseAnimations when the SVG element begins in the parent doc Qualify as current experiments. This is like the iframe bridge described in my other talk Client side transforms For simple cases (e.g. client-side sorting), cache output HTML For complex or longer documents, consider model that allows incremental (local) transformation and insertion. Client and server - MSXML Cache stylesheets (MSXML::IXSLTemplate) For incremental tip, mention something like a side-bar display that supports variants, and then just reprocess in that mode and inject into HTML, rather than reprocessing whole page (or whole data-island output). Mention that IXSLTemplate and IXSLProcessor