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
[hide]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.
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
Related
- SMIL Media Objects: video, image, and audio objects
- SMIL Playlists: seq, par, and excl playlists
- Animation: making crawls out of long pictures
