XML 2003 logo

Using SMIL Infill Templates to Invite in Media Specialists

Abstract

Presents rationale for and examples of infill templates, providing structure and also opportunities for direct coding in SMIL, in order to develop in multimedia specialists a sense of control over web-based multimedia presentations.

Keywords


Table of Contents

1. Using SMIL Infill Templates to Invite in Media Specialists
2. Using Templates
3.
3.1. Code Samples
3.1.1. Template1
Bibliography
Biography

1. Using SMIL Infill Templates to Invite in Media Specialists

The theme of xmlconference2003 is "Now We're Cooking!", symbolizing the many stakeholders in the business of developing and helping individuals learn to use XML and related systems such as SMIL for multimedia presentations. The emphasis in this presentation is to invite into the kitchen more media specialists, developers, and trainers who want to reach the widest feasible range of users. While WYSIWYGs are efficient for some tasks, real control comes only with direct coding. The intent is to help media specialists learn to code via templates in SMIL.

This target audience is diverse. Most will have had experience with complex systems in their own area of expertise, possibly even programming either via drag and drop or hand coding. Some may find no limitations in templates or tutorials that use a linear Step 1, Step 2 approach and will eventually figure out the structure. Others will being given a simple structure and a few elements to gain control.

2. Using Templates

Briefly, the approach is to provide trainees who have expertise in their own media fields with a series of Infill Templates in which structure is provided from the beginning and a variety of media elements are filled in. By early success, trainees are likely to be motivated to continue hand coding, gaining control over their multimedia presentations in SMIL.

One type of form often used to aid people in using XML and other languages consists of simplified datat entry forms that nonotechnical staff can use to input data. Another is step-by-step guidance through a linear set of processes. Each is useful; neither is in its raw state a template; either can be made ito a template by providing built-in removable hints about where the information to fill in a given blank is to be found or what kind of information is required. For example: "Get this info from 83-I form box 13b, then delete this guidance."

Infill Templates are templates with a difference. Developers of data input forms probably don't care whether users ever gain understanding of the structure as a whole and the relationship of media elements to the whole. Developers of linear tutorials probably care but assume it will all come together in the end. Developers of Infill Templates care a lot and start from the beginning to ensure both understanding of structure and mastery of elements within this structure. Instant success increases the likelihood that trainees will join the community of XML and SMIL developers as full partners.

For example, Template1 plays one graphic, one video and another graphic strictly in Sequence. After that, the media specialist says "I know I can do this because I just made a working multimedia presentation with my own hands. What's next?" Next ( Template2)is initially using exactly the same materials as before but with the change of one word, seq to par, opening the remarkable powers of SMIL, and also adding info for overlap and fade title and Closed Captioning. Template3 offers If logic for the user to choose one of the Level 4 templates. Template4 Choices might include Intro Audio, Links, and Timing.

This topic and approach should be of interest not only to the core group but to monitors of Section 508 compliance, 2nd language learning specialists and those who are receiving in their weaker language or mode. Some learners would prefer to receive information in written rather than oral form. In an international community like XML, there are many, not just those with hearing loss, who would benefit from viewing videos with closed captioning and in the language of their choice. SMIL offers these and many other options for presentation of information in various modes and media.

Template # Feature Emphasized
Subject to Change
Template1 Basic Structure, sequential ordering of various media
Template2 Effect of par command with/wo params
Template3 Simple Layout
Template4 Audio Coordinated with Graphics
Template5 Transitions between Graphics
Template6 Links, Internal and External
Template7 Switches

Table 1. Features Emphasized in Each Template

3. 

3.1. Code Samples

3.1.1. Template1

  
      
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
      xmlns:rn="http://features.real.com/2001/SMIL20/Extensions">
<head>
<meta name="Title" content="RealTemplate1" />
  <layout>
    <region id="text" />
    <region id="image1" />
    <region id="image2" />
  </layout>
</head>
<body>
<seq>
  <img region="image1" src="0002.jpg" title="Autumn Leaves" 
  dur="3" />
  <text region="text" src = "smiltext.txt" title="SmilText" 
  dur="3" />
  <img region="image2" src="0004.jpg" title="Sunflowers" 
  dur="3" />
  </seq>
</body>
</smil>

      

<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
xmlns:rn="http://features.real.com/2001/SMIL20/Extensions">
  <head>
    <meta name="Title" content="RealTemplate3" />
    <layout>
    <root-layout height="600" width="600" />
        <region id="image1" width="360" height="240" />
        <regPoint id="topMargin" top="10" left="10" 
        regAlign="topLeft" />

        <region id="image2" width="360" height="240" />    
        <regPoint id="bottomMargin" top="300" left="350"
                  regAlign="bottomRight" />

        <region id="video" width="360" height="240" />
    </layout>
  </head>

  <body>
    <seq>
      <ref id="leaves" region="image1" src="0002.jpg"
           regPoint="topMargin" dur="4" />  
      <ref id="sunflowers" region="image2" src="0004.jpg"
           regPoint="bottomMargin"  dur="4"/>
      <video region="video" src="glassblow.rm" 
      title="Glass Blowing" />
    </seq>
  </body>
</smil>
<!--You can manipulate regPoint and regAlign to position     -->
<!-- elements' display, or use a style sheet for this.       -->
<!--On a later Template on switches there's a better example.-->

      
      
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
      xmlns:rn="http://features.real.com/2001/SMIL20/Extensions">
  <head>
    <meta name="Author" content="RealTemplate4" />
    <layout>
      <topLayout id="base" width="600" height="500" />
        <region id="image1" width="300" height="250" />
        <region id="audio" />
        <region id="image2" />
    </layout>
  </head>

  <body>
    <par>
      <img region="image1" src="0002.jpg" title="Autumn Leaves" />  
        <audio region="audio" src = "piano.rm" title="Piano" 
        dur="6.2" />
    </par>
    <par>
      <img region="image2" src="0004.jpg" title="Sunflowers" />
      <audio region="audio" src = "piano.rm" title="Piano" 
      begin="8.7" dur="18" />
      <audio region="audio" src = "guitar.rm" title="Guitar" 
      dur="8.6" />
    </par>
  </body>
</smil>

      
      
<smil xmlns="http://www.w3.org/2001/SMIL20/Language"
xmlns:rn="http://features.real.com/2001/SMIL20/Extensions">
  <head>
    <meta name="Title" content="RealTemplate5" />
    <transition id="trans1" type="irisWipe" horzRepeat="2" 
    vertRepeat="2" />
    <transition id="trans2" type="barnZigZagWipe" 
    subtype="horizontal" dur="6s" />
    <transition id="trans3" type="bowTieWipe" />
    <transition id="trans4" type="boxSnakesWipe" 
    subtype="fourBoxHorizontal" />
    <transition id="trans5" type="spiralWipe" />
  </head>
  <body>
    <seq>
      <ref id="image1" src="pz1.jpg" title="Panzer I" 
      width="300" height="223" dur="2" />
      <ref id="image2" src="pz1red.jpg" title="Panzer I" 
      width="300" height="223" transIn="trans1" dur="2" />
      <ref id="image3" src="pz1green.jpg" title="Panzer I" 
      width="300" height="223" transIn="trans2" dur="2" />

      <ref id="image4" src="cv33.jpg" title="Panzer I"  
      width="300" height="223" transIn="trans3" dur="2" />
      <ref id="image5" src="cv33red.jpg" title="Panzer I" 
      width="300" height="223" transIn="trans4" dur="2" />
      <ref id="image6" src="cv33green.jpg" title="Panzer I" 
      width="300" height="223" transIn="trans5" dur="2" />
      <ref id="image7" src="black.jpg" title="End" 
      width="300" height="223" transIn="trans5" dur="2" />
    </seq>
  </body>
<!--To let 2nd image show through, insert fill="transition"-->
</smil>

    

Bibliography

[Ford, Bradley, et al. (2002). Revolutionary Quicktime Pro 5&6.] DVision.http://www.friendsofed.com/

[Kennedy, Tim, and Slowinski, Mary (2002). SMIL: Adding Multimedia to the Web.] Sams Publishing.http://www.samspublishing.com

[Menin, Eyal (2002).The Streaming Media Handbook.] Prentice Hall PTR http://www.phptr.com/

[Williamson, Heather (2001). SMIL for Dummies. ] IDG Books Worldwide.http://www.dummies.com

[World Wide Web Consortium (2000). Synchronized Multimedia Integration Language (SMIL) 1.0 Specification.] iUniverse.com http://www.iUniverse.com/

[World Wide Web Consortium (2002). SMIL Specifications 2.0.] w3.com http://www.w3.com/

Biography

Barbara Hutson is currently a desk officer working at EPA through a contract from NAPCADC, and is Professor Emerita, Virginia Polytechnic Institute and State University.