Transition
SMIL allows you to quickly put together a slide show. To make your deck of static images look alive, you can use the transition tags.
Using Transition in SMIL
A SMIL sample that uses transition effects and applicable to the XDS-104 device is as the following:
<?xml version="1.0" encoding="utf-8"?>
<smil>
<head>
<layout>
<root-layout id="display:0" width="800" height="480" />
<region id="screen" top="0" left="0" width="800" height="480" z-index="0" fit="fill" mediaAlign="center" />
<transition xml:id="bwt" type="barWipe" subtype="leftToRight" dur="1s" />
</layout>
</head>
<body>
<seq region="screen" repeatCount="indefinite">
<img id="I01" region="screen" src="media/001.jpg" fill="transition" dur="7s" transIn="bwt"/>
<img id="I02" region="screen" src="media/002.jpg" fill="transition" dur="7s" transIn="bwt"/>
</seq>
</body>
</smil>Declaring a Transition
In the example above, note the line
<transition xml:id="bwt" type="barWipe" subtype="leftToRight" dur="1s" />declares a "barWipe" transition that reveals the next image from the left of the screen towards right.
Popular SMIL transitions include:
| Type | Subtype | Parameters | Explanation |
|---|---|---|---|
| barwipe | leftToRight | (none) | Progressively revealing the object from left to right |
| barwipe | topToBottom | (none) | Progressively revealing the object from top to bottom |
| fade | crossfade | (none) | Progressively revealing the object by dimming out the previous and showing the new |
| fade | fadeFromColor (black only) | fadeColor (must be #000) | Progressively revealing the object by appearing out of black background |
Note: availability of SMIL transition effects depends on the hardware you use. Consult your hardware vendor on the transitions available on your device.
Applying a Transition
To apply a declared transition to the beginning of an image object, refer to the id of the transition in the transIn attribute of the object and designate "transition" as its fill attribute.
<img id="I01" region="screen" src="media/001.jpg" fill="transition" dur="7s" transIn="bwt"/>
<img id="I02" region="screen" src="media/002.jpg" fill="transition" dur="7s" transIn="bwt"/>Note that depending on the capability of your hardware player, transition may not be applicable to all media objects (such as video). Consult your hardware vendor for details.
Related
- SMIL Media Objects: video, image, and audio objects
- SMIL Playlists: seq, par, and excl playlists
- Animation: making crawls out of long pictures
