A Realist's SMIL Manifesto, Part II
by Fabio Arciniegas A.
|
Pages: 1, 2, 3, 4, 5, 6, 7
In general, any property being animated must be initialized by providing a
value in the element's style. That is why our t:img element in
Listing 6 specifies the width and height and the complete code of Listing
4 initializes the backgroundColor property for all divs.
So far we have created the size portion of the effect, we have an image of 1000x750 pixels. Now we need to position this image so that the area we are interested in is visible in the div, as shown in figure 6.
Figure 6 Positioning the oversized image
As you can see in Figure 6, the trick is to deal with negative values in
the marginLeft and marginTop properties, so we can
position the desired portion (in this case the blue rose) in the visible area
of the div. The code needed to animate these two properties is as simple as
before, and is shown in Listing 7:
<t:animate begin="2" dur="5" fill="hold" targetElement="oSour"
attributeName="marginLeft" from="0" to "-770" />
<t:animate begin="4" dur="5" fill="hold" targetElement="oSour"
attributeName="marginTop" from="0" to="-504"/>Listing 7. Animating marginTop and marginLeft with
t:animate
Note how the duration and begin times of these elements are similar but not quite the same as those used for the width and height animations. For example, the marginLeft animation starts a second after the image started growing, so we will first see the image "zooming" and then it will start sliding to the right. Since all four animate elements work in parallel, the effects that can be achieved by playing with the start and duration values of each animation are interesting. The three lessons spawned by the buttons below illustrate some of the possibilities, feel free to play with the code and see other options.
Finally, I would like to point out two important things about this implementation:
- This is not the only way to achieve a reasonable zoom effect using HTML+TIME. In particular we could have used the zoom property of the image, but it would have only saved us one element (animating only zoom instead of width and height). We chose the shown implementation because zoom only allows proportional magnification of the image, which is more restricting than our resizing mechanism, and the final effect requires the positioning mechanism of Figure 6 anyway.
- The way start and end values are specified in the t:animate elements in the sample files is simple and straightforward but is not the only way, splines can also be applied to this purpose.
Spatial Montage and Choreography with Events
The goal of this section is to work further on the idea of events and show how the declarative nature of HTML+TIME 2.0 simplifies event-related tasks. We use two mechanisms: spatial montage and simple sound choreography.
Spatial montage -- the division of the screen area to allow several images to coexist in parallel -- is used in films like "Run, Lola Run" and even 1920's "Napoleon", but its application is most evident in multimedia pieces and the Web. In the following example we will use it to created a "directed reading" where pieces of a picture and a text are enhanced to give "close-ups" to different sections without loosing the overall context. Given the bandwidth considerations of an online article, the media chosen are a black and white picture, text, and small sounds, but the principles can be applied in SMIL 2.0 to heavier media like video.
Choreography of sound and page events has been traditionally associated with JavaScript and proprietary mechanisms, in this example we show a declarative and simple alternative using SMIL 2.
