A Realist's SMIL Manifesto, Part II
by Fabio Arciniegas A.
|
Pages: 1, 2, 3, 4, 5, 6, 7
Condensation using SMIL 2.0 Transitions
Figure 1. Condensation through fading -- Batman (TM) Warner Bros Inc. |
Most people are familiar with
condensation in movies and cartoons: a large volume of information or
a long span of time is condensed by making elliptical cuts
between scenes, which signify the passing of time, and by fading
between segments. Think for example of a scene like that in Figure 1
where a woman sits in a restaurant to wait for her partner; after she
sits, the image of the happy expectant face fades into an empty glass
of water and a bored expression. It is obvious that a long time in
the story has passed but we have seen only a condensed version that
lasted seconds.
With the ever-shrinking attention span of web users, you might need to produce shorter versions of your online multimedia content. Condensation is a valuable technique that can elegantly cut down presentation time without making your media appear "chopped off". A way to implement condensations using SMIL is by using transitions. Transitions are predefined effects of wipe and fade that can be applied to any element as long as it has a layout, which basically means images, video, paragraphs, or anything else with a height and a width. In HTML+SMIL you don't need to pre-define your areas as in standalone SMIL presentations. PreliminariesTo get started let's examine a simple a star wipe effect. Recall
from the previous article things like the |
Listing 1. Applying a star wipe effect to an image
The complete file is available (contains the template with listing 1 in the body).
As shown in Listing 1, using basic transitions is a straightforward matter
of filling in the values of self-descriptive attributes. Simply include the
t:transition element, set the begin, dur or
end attributes, the type of effect you want, a subtype
if desired, and whether you want the effect mode to be in or
out (from less visible to more visible). The complete Microsoft
reference to HTML+TIME transitions can be found on Microsoft's site.
The transition applies to the containing SMIL element (like in Listing 1) or to the element with the id specified in the attribute targetelement. The available types and subtypes of transition are summarized in Table 1. Try playing with Listing 1 to see the different effects.
| Type | Associated Subtype(s) |
| barnDoorWipe | vertical, horizontal |
| barWipe | leftToRight, topToBottom |
| clockWipe | clockwiseTwelve |
| ellipseWipe | circle |
| fade | crossfade |
| fanWipe | centerTop |
| irisWipe | rectangle, diamond |
| pushWipe | fromLeft |
| slideWipe | fromLeft |
| snakeWipe | topLeftHorizontal |
| spiralWipe | topLeftClockwise |
| starWipe | fivePoint (required) |
Condensation Project
Star effects and spiral wipes can be nice eye candy, but the most useful transition is fading, especially when you want transitions as a way to implement condensation.
The goal is to reduce the playtime of an embedded video by condensing long similar parts. To achieve a smooth effect both visually and mentally we will use fade effects. The video we will cut is a 2-minute chase segment from the movie "Monkey Business" by the Marx Brothers. The idea is to condense most of the content and present a 30 second version of the clip, while still conveying the notion of an ongoing chase. While reducing this clip hurts my Marxist Brothers sensibility, the example is a realistic project for sites dealing with video: for example, DVD stores showing clips of different durations depending on the user's preferences.
The Media
In order to insert the media, we use the t:video element as shown in Listing 2.
<body background="groucho.gif">
<div style="position:absolute; top:10px; left:13px;
width:350px; height:200px;
font-family:'Haettenschweiler','Verdana';
font-size:16pt;" class="time">
<b>The 4 Marx Brothers in MONKEY BUSINESS</b><br/>
©1931 Paramount pictures ©1958 EMKA LTD.<br/>
<t:video id="monkey" src="monkeybusiness.avi"/>
</div>
</body>
Listing 2. Inserting the media
More interesting than the t:video element itself is the fact
that it is inside a div container, which is SMIL-enabled by
virtue of including a class attribute with the value time
(declared as seen in the purple section of HTML+TIME
2.0 above). The t:video element would have inserted the
video even if the div container was not SMIL enabled; but it
was important to illustrate the enabling technique: we will be able to
play not only with transitions in the t:video element but also
on the whole div area.
