A Realist's SMIL Manifesto, Part II
by Fabio Arciniegas A.
|
Pages: 1, 2, 3, 4, 5, 6, 7
The Transitions
The fist transition filter we will use is a fade out right after the chase begins, that is, about 9 seconds into the action.
<t:transitionfilter begin="9" id="firstfade"
dur="3"
type="fade" mode="out"/>The second transition filter completes the condensation by fading in on a particular frame, about 2 minutes after the fade out. This is done by using the seekToFrame method of the t:video object as soon as the transition begins. Figure 2 shows snapshots of the result so far.
<t:transitionfilter begin="firstfade.end" id="secondfade"
dur="6"
type="fade" mode="in"
onbegin="monkey.seektoframe(425)" />
Figure 2. Snapshots of Condensation using two fade transitions
Finally, to end the clip elegantly and leave the notion of continuity (an eternal Marx Bros. chase!), we end with another fade out:
<t:transitionfilter begin="secondfade.end+23" dur="10"
type="fade" mode="out">Putting it all together, our resulting document looks like listing 3. The
effect is not only successful but even somewhat impressive if you
consider the alternative: editing the video itself.
<html xmlns:t ="urn:schemas-microsoft-com:time">
<head>
<style>
.time {behavior: url(#default#time2);}
</style>
<?import namespace="t" implementation="#default#time2">
</head>
<body background="groucho.gif">
<b style="font-family:'Haettenschweiler','Verdana';font-size:16pt;">
The 4 Marx Brothers in MONKEY BUSINESS</b><br/>
©1931 Paramount pictures ©1958 EMKA LTD.<br/>
<div style="position:absolute; top:70px; left:200px;
width:350px; height:200px;"
class="time">
<t:video id="monkey" src="monkeybusiness.avi"/>
<t:transitionfilter begin="9" id="firstfade" dur="3"
type="fade" mode="out"/>
<t:transitionfilter begin="firstfade.end" id="secondfade" dur="6"
type="fade" mode="in"
onbegin="monkey.seektoframe(425)" />
<t:transitionfilter begin="secondfade.end+23" dur="10"
type="fade" mode="out">
</div>
</body>
</html>
Listing 3. Complete Code for Monkey Business Condensation
Let's look at of the most notable advantages of using SMIL for this task :
You don't need to change your video. You don't even need control over the video to condense it. It can be fetched from another site and it still can be tailored to your needs. It is all done at presentation time.
You don't need video editing software for simple coordination tasks like this, a simple text processor would do.
Automating the production of HTML files like Listing 3 is considerably easier than automating the production of different videos for different user preferences.
The results are scriptable at runtime, everything from the source movie to the speed of the transition can be changed dependent on bandwidth demands or preferences. Furthermore, the scripting technologies involved are ordinary JavaScript over the DOM, something most web developers are somewhat familiar with. You can leverage existing knowledge.
The code is simple and highly reusable. The code above is basically a general solution for simple post-production web video condensation.
The main problem in this and all other HTML+TIME examples is the fact that they currently work only on Internet Explorer. Another important issue is the scarcity of tools (editing the video to do the same fade in is a matter of four seconds in an editing tool like Adobe Premiere).
Focusing attention using animate
The synecdoche is a narrative tool wherein you substitute a part for the whole. As a form of speech you can recognize it in phrases like "you should see my new wheels", where the wheels (a part) is used to refer to a car (the whole). As a visual narrative strategy you can recognize it in images that isolate a particular detail to signify a whole event, like a hand shooting a gun in a Hitchcock movie encapsulating the whole act of a murder.
Zooming into details, in general, serves as a way of concentrating the attention of the user and disambiguating the object of attention. Think for example of an online gallery that provides analysis of the exhibited works (see Figure 3). Wouldn't it be nice if, instead of trying to describe in the text the position of a detail in a painting, users could simply zoom in an out of details as the explanation progresses?
Figure 3. Static Images with verbose textual directions vs. Progressive Zoom
In Figure 3 a progressive zoom into the details, instead of verbal directions, focuses the reader's attention, disambiguates, and clarifies the object of discussion. It also enables the text to focus only on the explanation and analysis. In this section you will see how to create such zoom effects over existing media, such as a JPEG image, in a declarative way using SMIL.
