SMIL - II

1
Lecture17

• SMIL - II

2
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
  ltregiongt. 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).

3
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 its 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
• ltregion id"CIF-NTSC" width"352px"
  height"240px"/gt
• ltregion id"US-photo" width"6in" height"4in"/gt
• ltregion id"half-center" left"25" top"25"
  width"50" height"50"/gt

4
Grouping Regions into a Layout

• While a solitary region may make sense, its not
  useful in a smil document until it has been added
  to a ltlayoutgt element. A ltlayoutgt groups one or
  more regions in the same way that a
  synchronization container groups media objects.
  The difference is that there is only one ltlayoutgt
  for a smil document and it cannot contain another
  nested ltlayoutgt. Also, the ltlayoutgt element must
  occur in the documents ltheadgt.
• So to use all of the regions presented above, you
  could write the following
• ltheadgt
• ltlayoutgt
• ltregion id"CIF-NTSC" width"352px"
  height"240px"/gt
• ltregion id"US-photo" width"6in"
  height"4in"/gt
• ltregion id"half-center" left"25" top"25"
• width"50" height"50"/gt
• lt/layoutgt
• lt/headgt

5
Tying Media Objects to Regions

• ltheadgt
• ltlayoutgt
• ltregion id"half-center" left"25" top"25"
  width"50" height"50"/gt
• lt/layoutgt
• lt/headgt
• ltbodygt
• ltimg src"photo.jpg" alt"picture of a snowman
  in a blizzard region"half-center"/gt
• lt/bodygt

6
Stretching and Squeezing

• What would happen to the ltimggt if its intrinsic
  width and height had been different from that of
  the ltregiongt? 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 regions
  backgroundColor. If the object doesnt 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.

7
Nesting Regions

• ltregion id"two-column" width"100"
  height"100"gt
• ltregion id"column1" left"0" top"0"
  width"50" height"100"/gt
• ltregion id"column2" left"50" top"0"
  width"50" height"100"/gt
• lt/regiongt

8
Further Readings

• This lecture is based on the SMIL tutorial named
  Learning to SMIL by Chris Forno available from
  http//www.w3.org/AudioVideo/
• Lot of Further information on SMIL is available
  from the above site.