A Realist's SMIL Manifesto, Part II
by Fabio Arciniegas A. | Pages: 1, 2, 3, 4, 5, 6, 7

Highlighting The document 

The highlighting of the document is done through classic CSS. Each link is marked with a class, as shown below, 

<a id="maureen1" href="#" class="maureen">Maureen 
Tucker's delicate drumming</a> 

and the stylesheet is provided in an external document like the following:

.maureen
    { 
     background-color: #855FB9;
     color: white;
        border-style: dashed;
        border-width: thin; 
        border-color: black;
    border-bottom-width= 0;
    }

In order to highlight different parts depending on each selection on the graphic, we use multiple external stylesheets and load them dynamically, according to the selection. 

Declarative Sound Triggers

Finally, there is the nice simplicity of declarative sound triggers in HTML+TIME 2.0. Just as the animations are associated with events in the SVG image, the sounds (namely the t:audio elements) specify their beginning to be tied to the firing of an event as shown in Listing 11. Because of our requirements we associate it with simply clicks, but this mechanism can be replicated for any SMIL 2 event, like the end of a seq element.

<t:audio src="thesedays.wav" begin="nico1.onclick; nico2.onclick;"/>
<t:audio src="hallelujah.wav" begin="cale1.onclick"/>
<t:audio src="andyIntroduces.wav" volume="10"
begin="andy1.onclick; andy2.onclick; andy3.onclick"/>
<t:audio src="wildside.wav" volume="8"
              begin="andy2.onclick; andy3.onclick; lou1.onclick; 
                     lou2.onclick; lou3.onclick; lou4.onclick"/>

Listing 11. Declarative Sound Triggers

The advantages of this mechanism versus, say, embedding proprietary sound plug-ins, include not only the simplicity of the code, but the fact that sounds and events can be combined at will in a simple way, allowing for an event to fire many sounds, or many events to be associated with the same sound. In the example above, the file wildside.wav is played in parallel with andyIntroduces.wav when the user clicks on the andy2 link, which makes for a nice effect of music in the background mixed with dialog in the foreground. In our example we have used only src, volume, and begin; see the documentation for 

All the attributes and properties of t:audio.

You can click on the following button to see the final result.

Summary

This article discussed some of the techniques and mechanisms available to the SMIL 2 developer working on the HTML+TIME 2.0 implementation. The discussion was directed by narrative strategies common to traditional and new media and how to implement them, instead of dry API descriptions. Three main strategies were discussed through the use of three SMIL 2 mechanisms, namely transitions, declarative animation, and SMIL 2 events.  

References

[1] HTML+TIME documentation, Microsoft 2002
[2] SMIL 2.0 Specification  W3C 2002
[3] Envisioning Information Edward R. Tufte; Graphics Press; 10/1990
[4] Understanding Animation Paul Wells, Routledge 1998
[5] The Language of New Media Lev Manovich, MIT Press 2000
[6] The Film Form Sergei Eisenstein, Harcourt 1972

---

---

2. Very good article on SMIL2
   2002-07-21 17:55:10 Pablo Fernicola
4. If you are not a beginner and not an expert: Dive in here.
   2002-07-21 11:52:41 Rich Andrews