Transition

From A-SMIL.org
Jump to: navigation, search

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