7.7.1. Deciding what to show

The TechWeb production team decided to develop a segmented presentation to offer a more targeted user experience. Instead of a linear news program, the show is comprised of four five-minute distinct segments: an introductory segment and three topical sub-channels.

The introductory segment begins by announcing the day's programming on the sub-channels, then offers a three-minute video newscast. Viewers can click to visit any sub-channel during or at the end of the presentation. All three sub-channels have the same basic structure: while a video plays, text and explanatory graphics augment the video.

Once you have established your basic content plan and design, the next step is to roll up your sleeves and start coding to build the presentation piece by piece.

Figure 7-9. The four regions: background, date, video, and caption

7.7.2. Synchronizing media types

For example, to get the background image (handle="1") to appear at the beginning of the show, Leah Goldberg used the <fadein/> tag to introduce the image. The fade-in effect starts precisely at the beginning of the show (start="0") and lasts one second (duration="1000").

Remember that the duration attribute refers to the duration of the effect, not the duration the image will display. The background graphic fades in over the course of one second, then stays in place for the show's duration. The line of code looks like this:

<fadein start="0" duration="1000" target="1"/>

Once the background has faded in, the first of the three channel photos appears in the same area where the video eventually appears. Unlike the background image, these are smaller images (176 x 131), and the idea was to get them to appear in a precise area of the display window, on top of the background image. Goldberg used the destination attributes to precisely place the upper-left corner of the photo at (32,105):

<fadein start="1000" duration="1000" target="2" dstx="32"
    dsty="105" dstw="176" dsth="131"/>

For this effect, use both the source and destination attributes to specify the beginning and destination size and placement of the image. Between the 9- and 10-second marks, the photo will shrink from its original size of 176 x 131 to 55 x 40 (maintaining its aspect ratio). As it is shrinking, it also moves across the display window from having a top-left coordinate of (32,105) to (295,54):

<viewchange start="9000" duration="1000" srcx="32" srcy="105"
     srcw="176" srch="131" dstx="295" dsty="54" dstw="55"
     dsth="40"/>

Similar fade-ins and viewchanges are used in the rest of the file to describe the behavior of the next two channel photos.

As described earlier, any text used in a presentation must reside within a RealText file. The date.rt file in this case simply contains the date of the show. It appears in one location and never moves or changes:

<window type="generic" height="14" width="180">
<center><font size="1" face="arial" color="#993300">
Updated November 1, 4 p.m. PDT</font></center>
</window> 

The file captions.rt contains the three captions that appear beneath each channel graphic consecutively in the same area, according to the following time settings:

<window type="generic" width="176" height="60">
<time begin="1.0" end="9.5"/>
<font face="arial" size="1">Channel 1 caption</font>
<time begin="10.0" end="19.5"/>
<font face="arial" size="1">Channel 2 caption</font>
<time begin="20.0" end="29.5"/>
<font face="arial" size="1">Channel 3 caption</font>
</window>

7.7.3. Problems and workarounds

When TechWeb Today 's interface was first designed, the designers had intended that the channel photos would serve as clickable buttons that viewers could use to access the sub-channels. You will notice, however, that you must click on the text links and arrows that appear on the right side of the display window above the photos to view any of the sub-channels. If you try to click on the channel photos, either at their full or reduced size, you will not be linked to the sub-channel. The TechWeb team constructed the show this way because at present, a graphic can link to a web page that will load in a browser window, but a graphic cannot link to another SMIL file. Only text can link to other SMIL files.

Another frustration with coding for G2 is that a number of attributes and syntaxes are inconsistent across the three markup languages. For example, the syntax and default values for time are different in all three languages.

In SMIL, the attribute is begin, and time is denoted with a number followed by the abbreviations h (hours), min (minutes), s (seconds), or ms (milliseconds). Two-and-a-half seconds is written as begin="2.5s". Time can also be written according to the formula npt:hh:mm:ss.xy. Two-and-a-half seconds would be written as begin="npt:2.5". If you use that syntax, you must put npt: (normal play time) before the number.

In RealPix markup languageRealPix, by default, time is written simply as the number of milliseconds, and the attribute is start. Two-and-a-half seconds in RealPix is written as start="2500". However, you can specify a different time format in the header of the file, for example, timeformat="dd:hh:mm:ss.xyz". If you do this, all the time values in your RealPix file must follow that format, and two-and-a-half seconds is then written as start="2.5".