A Realist's SMIL Manifesto, Part II
by Fabio Arciniegas A.
|
Pages: 1, 2, 3, 4, 5, 6, 7
Implementing a zoom
The goal of this section is to generalize the tool discussed in the previous section and create a reusable declarative solution to create progressive zooms of images in HTML pages (without GIF89 animation, Flash, or even SVG). The guiding example we will construct is a series of hypothetical online lessons that explain different parts of a photograph (see Figure 4).
Figure 4. Snapshots of the final result at 1.0 sec and 6.0 sec
Strategy and Preliminaries
The idea is to maximize the versatility of a generic XHTML+SMIL zoom
effect, so the strategy on this project will be to play with the margins and
dimensions of a picture using the t:animate element. Although
the syntax of the t:animate element and its partners
t:animateColor and t:animateValue is intuitive, the
values in the zooming application may not be the simplest one to start with,
so before jumping into the main example, we will get some hands-on experience
with the syntax by colorizing some arbitrary div elements.
Figure 5 shows the start and end snapshots of the result of running Listing 4
(complete listing)
in Internet Explorer 6.
<body>
<DIV id="om1"
style="width:224; height:184; top: 0; left:74;
border-right-width:0px; border-top-width: 0px;">
</DIV>
<DIV id="om2"
style="width:215; height: 96; top: 140; left: 74;">
</DIV>
<!-- other divs, one for each rectangle go here -->
<t:animateColor targetElement="om1"
attributeName="backgroundColor"
from="black" to="#292152"
begin="0" dur="3" fill="hold"/>
<t:animateColor targetElement="om2"
attributeName="backgroundColor"
from="white" to="#ADA5B5"
begin="0" dur="3" fill="hold"/>
<!-- other t:animateColor go here -->
</body>Listing 4 Colorizing divs with animateColor (abridged)
Figure 5. Listing 5 snapshots
The Media
Back to our main project, the idea is to explain the significance of different parts of an unusual image and in the process create a reusable method to expand explanations with images that are zoomed to show particular details. Our explanation of the image is divided in three lessons, all sharing the same basic layout coded in Listing 4 (and shown in Figure 4), namely a title, a left div with the explanation text, and a right div with the image being analyzed.
<h1>Gordon Coles' Code 101</h1>
<!-- A tribute to David Lynch's Fire Walk With Me -->
<h3>Lesson 2: The Fist</h3>
<!-- undecorated left div for the explanation -->
<div style="width:180; height:180; top: 70; left:10; position: absolute">
The authorities will be belligerent, that is why Lil's hand becomes a fist.
</div>
<!-- Decorated right div for the image. dashed gray border -->
<div style="width:240; height:180; overflow-x:hidden; overflow-y:hidden;
top: 60; left:200; position: absolute; border-style: dashed;
border-color: gray; z-index:1;" >
<t:img src="lili.jpg" id="oSour" style="width:240; height:180"/>
</div>Listing 5. Static Explanation
Listing 5 doesn't show some aesthetic details of the complete file
(like the background and font specifications), but it makes clear the simple
layout we adopted. One important detail of the code is in the second div, in
the value of the overflow-x and overflow-y styles.
These styles allow the div to behave as a SMIL region with the
fit attribute set to "slice", that is to discard the image
information that exceeds the dimensions of the div. This will prove key for
our strategy as we animate the size of the image.
The Animation
Now that we have the static explanation in place we will add
t:animate elements to pass from the initial image to the zoomed
image shown in Figure 4. The t:animate element is similar to
t:animateColor which we saw in Listing 4, but unlike it or its
partner animateMotion, t:animate has no special
semantics associated with any specific attribute (like color and motion) and
can be used to animate any scalar property. We will use
t:animate to animate the width and height properties of the
image, as shown in Listing 6:
<t:animate begin="1" dur="5" fill="hold" targetElement="oSour"
attributeName="width" from="240" to="1000"/>
<t:animate begin="1" dur="5" fill="hold" targetElement="oSour"
attributeName="height" from="180" to="750"/>Listing 6 Animating width and weight with t:animate
The animate elements of Listing 6 begin acting one second after their
container's timeline has started (i.e. since the div is displayed), they act
for 5 seconds, after which the final state is preserved
(fill="hold"). Both t:animate elements act
simultaneously over the same element, namely the t:img with
id="oSour". Finally, by default, the t:animate element
iterates the given attribute between the specified values linearly, so the
width changes at a steady rate from 240 to 1000 pixels during the 5 seconds
the animation lasts.
