Lecturer

Abstract

The tutorial is intended for content developers who have created HTML documents or have used tools such as Macromedia Director or Authorware. Multimedia designers, web-page creators, creators of interface prototypes such as user interface designers, human factors practitioners and industrial designers will also benefit from this course.

This tutorial can be followed usefully by participants unfamiliar with existing multimedia tools and environments. The level is introductory and expects knowledge of the Web at a user's level, not necessarily that of an HTML author. Familiarity with basic HTML constructs is desirable, though not necessary.

SMIL 2.0 specifies interactive multimedia on the Web. It has been a W3C recommendation since August 2001. It already enjoys substantial support, implemented in such Web browsers as RealNetworks' RealOne and Internet Explorer 6.0. This version of SMIL extends SMIL 1.0, a W3C recommendation since June 1998. SMIL 2.0 is 15 times as large as SMIL 1.0, and defines a family of languages rather than just one language. This tutorial presents SMIL 2.0, tools for it, how to create presentations in it, and how it has currently been adopted by the community at large.

This tutorial covers SMIL 2.0 as a specification, the sub-languages it defines, the available tools for it, and its current use on the Web. The primary constructs are described in full. All areas of SMIL 2.0 are overviewed. All languages defined with SMIL constructs, including SMIL 1.0, SMIL 2.0 Language Profile, SMIL 2.0 Basic Language Profile (SMIL Basic), XHTML+SMIL and SVG, are discussed. Available tools for playing and editing these languages are presented and demonstrated. Examples of SMIL 2.0 presentation in current use are demonstrated.

The goal of the tutorial is to explain the concepts that form the basis of the SMIL language and to provide sufficient detail on the language itself so that participants can create their own simple presentations. Participants will also understand the underlying issues of temporal and spatial layout and the complexity of creating links within multimedia. They will also be able to use available tools to play and create SMIL presentations.

SMIL 1.0 is a W3C recommendation, approved in June 1998, which provides a vendor-independent, declarative language for hypermedia presentations on the Web. With at least three players currently available, and with more and more presentations being posted on the Web, SMIL promises to do for interactive multimedia what HTML did for hypertext: bring it into every living room with an easy-to-author, readily implementable format and easily accessible players for it. Through its support in all RealNetworks media players since SMIL 1.0's release, at least 200 million SMIL players have been distributed. A large collection of SMIL documents is played frequently on RealPlayer, since SMIL defines the multimedia synchronization it uses.

SMIL 2.0 was released by the W3C in the summer of 2001. The specification document is 15 times the size of SMIL 1.0, offering many new, rich features and constructs. SMIL 2.0 also has the backing of major industrial players and has been implemented in RealNetworks' RealOne and Internet Explorer 6.0. SMIL 1.0's legacy of wide, though behind-the-scenes, distribution and use is expect to expand further with the anticipated adoption of these tools.

Before describing the details of the SMIL 2.0 language, the tutorial first presents an overview of the components required in a hypermedia document description language. The SMIL language includes features for specifying the media items included in a document, referred to with URL's, how these are temporally and spatially related to one another, and how links can be specified within the multimedia environment. Alternates for different data formats for the heterogeneous web environment are also provided.

The goal of the tutorial is to explain the concepts that form the basis of the SMIL language and to provide sufficient detail on the language itself so that participants can create their own simple presentations. Participants will also understand the underlying issues of temporal and spatial layout and the complexity of creating links within multimedia. The tutorial also describe the use of the major SMIL implementations.

Detailed Outline

Part One. Introduction
1. Overview of SMIL
   
   • What SMIL Does
     
   • Design Goals; SMIL and Other Specifications
     
   • Using SMIL 2.0: Examples
     
   • Crossing the Bridge; Happy Birthday!; The Evening News; Flags
     
   • SMIL Modules and Profiles
     
   • Application of SMIL 2.0: Formats and Tools
     
   • SMIL 1.0; SMIL Profile; SMIL Basic; Media-based SMIL; SMIL GUI Editors
     
   • SMIL Editing Accessories
     
2. Introduction to SMIL Code
   
   • XML Code
     
   • Elements; Attributes; References; Document Classes
     
   • Primary SMIL Constructs
     
   • Media Content; Layout; Timing; Linking; Adaptivity
     
   • SMIL Structure
     
   • SMIL Document Classes; The <smil> element; Core Attributes
     
   • The <head> Element; The <body> element
     
3. Streaming Media
   Part Two. Basic Constructs
   
4. Basic Media Integration
   
   • Media Object Elements
     
   • The <ref> Element; The src Attribute; Media-specific Media Object Elements
     
   • Media Creation
     
   • Images; Video; Audio; Graphics and Animations; Text
     
   • Media Typing
     
   • The mimetype Construct; Filename suffixes; The type Attribute
     
   • Communicating mimetypes through HTTP
     
   • Brush Media
     
   • The <brush> element; The color Attribute
     
5. Layout
   
   • SMIL Layout Overview
     
   • SMIL's Approach to Layout; SMIL Layout Modules
     
   • Presentation Windows
     
   • The <layout> Element - Packaging One Entire Layout
     
   • The <topLayout> Element - General-purpose Window
     
   • The <root-layout> Element - The Main or Only Window
     
   • The width and height Attributes - Window Size
     
   • The backgroundColor Attribute - Display Backdrop
     
   • Color Names; RGB Color Specifications; System Colors
     
   • Transparent Window Background; The inherit Value; The background-color Attribute
     
   • The <region> Element - Where and How to Play the Media
     
   • Referencing <region> Elements; Region Positioning
     
   • The backgroundColor Attribute for <region> Elements - Region Background
     
   • The z-index Attribute - Overlapping; The soundLevel attribute
     
   • Placing Images within Regions
     
   • The fit Attribute - When Image and Region Sizes Don't Match
     
   • Sub-regions - Precise Image Positioning within Regions
     
   • Registration Points - Advanced Alignment within Regions
     
   • Opening and Closing Regions and Windows
     
   • Active Regions and Windows; The showBackground Attribute for Regions
     
   • Opening and Closing Windows
     
   • CSS and SMIL Layout
     
   • CSS and SMIL Layout Comparison; CSS for Media-based SMIL
     
   • The type Attribute; CSS Code for SMIL Layout
     
6. Basic Timing
   
   • Basic Inline Timing
     
   • Numeric Timestamps; The begin attribute; The end attribute; The dur attribute
     
   • The "indefinite" Attribute Value
     
   • Time Slot Filling
     
   • The fill attribute; The fillDefault attribute
     
   • Repeat Timing
     
   • The repeatCount Attribute; The repeatDur Attribute
     
   • Syncbase Timing
     
   • Introduction to Fine-tuned Synchronization; The "begin" Attribute Value Sub-string
     
   • The "end" Attribute Value Sub-string
     
   • Introduction to Temporal Composition
     
   • Introduction to Broad Synchronization; The <seq> element - Sequential Presentation
     
   • The <par> element - Parallel Presentation; The endsync Attribute
     
7. Basic Content Control
   
   • Principles of Selectivity
     
   • The <switch> element
     
   • Adaptation to User
     
   • The systemLanguage Attribute; The systemCaptions Attribute
     
   • The systemOverdubOrSubtitle Attribute; The systemAudioDesc Attribute
     
   • Adaptation to Hardware
     
   • The systemBitrate Attribute; The systemCPU Attribute
     
   • The systemScreenSize Attribute; The systemScreenDepth Attribute
     
   • Adaptation to Software
     
   • The systemOperatingSystem Attribute; The systemComponent Attribute
     
   • The systemRequired Attribute
     
   • Custom Test Attributes
     
   • The <customAttributes> Element; The <customTest> Element
     
   • The customTest Attribute; The uid Attribute
     
   • The defaultState attribute; The override Attribute
     
8. Basic Linking
   
   • The <a> Element and href Attribute
     
   • The <a> Element; The href Attribute
     
   • Linking within SMIL Presentations
     
   • The href="#" Attribute Assignment
     
   • Play Spaces for the Link Destination
     
   • The show Attribute; The external Attribute; The target Attribute
     
   • Play States
     
   • The sourcePlaystate Attribute; The destinationPlaystate Attribute
     
   • Sound
     
   • The sourceLevel Attribute; The destinationLevel Attribute
     
9. Transitions
   
   • The <transition> Element
     
   • Transition Types
     
   • The type Attribute; The subtype Attribute
     
   • Selecting a Transition for the Presentation
     
   • The transIn Attribute; The transOut Attribute
     
   • Controlling the Transition
     
   • The direction Attribute; The fadeColor Attribute; The startProgress Attribute
     
   • The endProgress Attribute
     
   • Inline Transitions
     
   • The <transitionFilter> Element; The targetElement Attribute; The mode Attribute
     
   • Transition Modifiers
     
   • The horzRepeat Attribute; The vertRepeat Attribute; The borderColor Attribute
     
   • The borderWidth Attribute
     
10. Animation
    
    • Animation Elements
      
    • The <animate> Element; The <animateMotion> Element
      
    • The <animateColor> Element; The <set> Element
      
    • Specifying the Animation Target
      
    • The href Attribute; The targetElement Attribute
      
    • The attributeName Attribute; The attributeType Attribute
      
    • Listing the Animation Values
      
    • The values Attribute; The from Attribute; The to Attribute; The by Attribute
      
    • Defining the Animation Function
      
    • The calcMode Attribute; The accumulate Attribute
      
    • The additive Attribute; The origin Attribute
      
    • Spline Animation
      
    • The path Attribute; The keyTimes Attribute; The keySplines Attribute
      
    Part Three. Advanced Constructs
    
11. Media Fragmentation and Alteration
    
    • Temporal Clipping
      
    • Media Clipping; Linking from Clips; Linking to Clips
      
    • Spatial Cropping
      
    • Cropped Displays; Linking from Image Portions
      
    • Named Media Components
      
    • Media Clip Markers; Media Marker Timing; Object Linking
      
    • Media Parameters
      
    • The <param> Element; The name Attribute; The value Attribute
      
    • The valueType Attribute; The erase Attribute; The mediaRepeat Attribute
      
    • The sensitivity Attribute
      
12. Advanced Timing Attributes
    
    • Advanced Inline Timing Attribute Values
      
    • Wallclock Timing; Repeat Value Timing; Multiarc Timing
      
    • Restart Timing
      
    • The restart Attribute; The restartDefault Attribute
      
    • MinMax Timing
      
    • The min Attribute; The max Attribute
      
    • Time Manipulations
      
    • The speed Attribute; The accelerate Attribute
      
    • The decelerate Attribute; The autoReverse Attribute
      
13. Advanced Temporal Composition
    
    • SMIL 1.0 Timing Model - The Timeline
      
    • Synchronization Behavior
      
    • The syncBehavior Attribute; The syncTolerance Attribute
      
    • Synchronization Behavior Defaults; Synchronziation Master
      
    • Temporal Exclusion - The <excl> Element
      
    • The <excl> Element; The <priorityClass> Element; The peers Attribute
      
    • The lower Attribute; The higher Attribute; The pauseDisplay Attribute
      
    • Time Containers for Non-native SMIL
      
    • The timeContainer Attribute; The timeAction Attribute
      
    • SMIL 2.0 Timing Model - The Time Graph
      
14. Advanced Interaction
    
    • Principles of Interaction in SMIL
      
    • User Interaction as Unpredictable Events in Time
      
    • SMIL LInk Elements are Forward-reaching LInks
      
    • SMIL Inline Synchronization Attributes are Backward-reaching LInks
      
    • Interaction Through the Keyboard
      
    • The tabindex Attribute; The accesskey Attribute
      
    • The ".accesskey()" Inline Timing Attribute Value Substring
      
    • Event Timing
      
    • The ".event()" Attribute Value Substring for Inline Timing
      
    • Non-Interactive Events; Interactive Events
      
    • Link Elements as Forward-reaching Events
      
15. Advanced Adaptation
    
    • Metainformation
      
    • The <meta> Element; The <metadata> Element
      
    • The content Attribute; The name Attribute
      
    • Media Description Attributes
      
    • The abstract Attribute; The author Attribute; The copyright Attribute
      
    • Media Accessibility Attributes
      
    • The alt Attribute; The longdesc Attribute; The readIndex Attribute
      
    • XML Attributes for Adaptation
      
    • The title Attribute; The xml:lang Attribute
      
    • Skip Content Control
      
    • The skip-content Attribute
      
    • Prefetch Control
      
    • The <prefetch> Element; The mediaSize Attribute
      
    • The mediaTime Attribute; The bandwidth Attribute
      
    • Alternative and Adaptive Layouts
      
    Part Four. Advanced Concepts
    
16. SMIL Family Formats
    
    • SMIL 1.0
      
    • The SMIL 2.0 Profiles
      
    • SMIL Profile; SMIL Basic; XHTML+SMIL
      
    • The SMIL 2.0 Extended Family
      
    • SVG; XMT; Digital Talking Books; Other Uses of SMIL Constructs
      
    • Make Your Own SMIL Family Format
      
17. XML, SMIL and the Web
    
    • Namespaces, DTD and Schemas
      
    • Conformance to SMIL 2.0 Family Languages
      
    • Related Formats
      
    • XHTML; CSS; XPointer; XLink; MPEG-4; MPEG-7
      
18. The Future of SMIL
    
    • The SMIL Profile for High-End, Large-scale Media Distribution
      
    • SMIL Basic and the Emerging Mobile Media Market
      
    • Future SMIL Formats
      
    • Further Development of SMIL Itself
      
19. More Resources
    
    • Formats
      
    • SMIL Family Formats; Other XML-related Formats; Other Multimedia Formats
      
    • Tools
      
    • Web Pages
      
    • Research Publications
      
    • Books
      

Lecturer's Biography

Lloyd Rutledge is a researcher at CWI, the Dutch national center for computer science and mathematics research. His research involves adaptable hypermedia, generated hypermedia and hypermedia standards such as SMIL. He received his Sc.D. from the University of Massachusetts Lowell, where he worked with the Distributed Multimedia Systems Laboratory (DMSL) on developing the HyOctane HyTime-based hypermedia environment. Dr. Rutledge is a member of the W3C working group that developed SMIL. He is also co-author of "SMIL: Interactive Multimedia on the Web", to be published in May by Pearson Education.

Relevant references

W3C SMIL Webpage: http://www.w3.org/AudioVideo/
SMIL 2.0 specification: http://www.w3.org/TR/smil20/
XHTML+SMIL Profile specification: http://www.w3.org/TR/XHTMLplusSMIL/
SVG specification: http://www.w3.org/TR/SVG/
This tutorial series Website: http://www.cwi.nl/~media/SMIL/Tutorial/