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.
Contents
Applicable Models
1.10" Digital Signboard (Model Name:XDS-101/XDS-104) from IAdea Corporation
2.10.4" EPOSTER All-IN-ONE COMMERCIAL DISPLAY ( Model Name:EP1020r/EP1021r ) from ViewSonic
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