Lecture17 SMIL - II

Layouts Dividing Space into Regions Arranging media in smil is done (usually) as a two-step process. First, a region is created, and then a media object is tied to that region. smil regions are always rectangular. For creating regions, smil has the element. It has a number of attributes (11 to be exact) for specifying where it should be located and how media in the region should be displayed. Here is a brief description of some: width and height : These two attributes do just as you would expect. left, right, top, and bottom : These attributes specify the values for the extremities of the region. backgroundColor and showBackground : These attributes both affect the color of a region (or at least the parts of the region not obscured by media objects).

Layouts fit : The fit of a region controls what happends to a media object when its intrinsic width and height do not match that of the region it’s tied to. regionName : You can think of the region name as being similar to an id attribute. However, the regionName need not be unique. Attributes which are screen measurements (width, height, left, right, top, and bottom) can take relative values (e.g. px), absolute values (cm, mm, in, pt), or percentages. few examples:

Grouping Regions into a Layout While a solitary region may make sense, it’s not useful in a smil document until it has been added to a element. A groups one or more regions in the same way that a synchronization container groups media objects. The difference is that there is only one for a smil document and it cannot contain another nested. Also, the element must occur in the document’s. So to use all of the regions presented above, you could write the following: <region id="half-center" left="25%" top="25%" width="50%" height="50%"/>

Tying Media Objects to Regions

Stretching and Squeezing What would happen to the if its intrinsic width and height had been different from that of the ? That depends on the value of the fit attribute of the region. By default, a region has a fit attribute of ”hidden”. What this means is that if a media object is small enough to fit inside of the region, it will be rendered starting from the top-left corner of the region and any remaining space will be filled by the region’s backgroundColor. If the object doesn’t fit within the region it will be hidden (not rendered). There are also other fit values you can use: ”slice” : Functions the same as ”hidden” except that when the media object is too large for the region it is clipped to fit. (This is spacial clipping, not to be confused with temporal clipping which you encountered earlier.) ”scroll” : Functions the same as ”hidden” except that when the media object is too large for the region, scrollbars are added. ”fill” : Automatically fills or scales (stretches or squeezes) media objects to fit exactly within the region. ”meet” : Functions the same as ”scale” except that it preserves the aspect ratio. This means that both the width and height are scaled at the same rate until either of them reach the full extent of the containing region.

Nesting Regions

Further Readings This lecture is based on the SMIL tutorial named ”Learning to SMIL” by Chris Forno available from Lot of Further information on SMIL is available from the above site.