Transitions with SMIL 2.0 Profile

Click on the Transition Element in SMIL code to view Tutorial.

RealPlayer SMIL 2 player.

In this presentation sub-region attributes are declared in the image element.

<smil xmlns="http://www.w3.org/2001/SMIL20/Language">
 <head>
  <meta name="title" content="Three Year Old Eyes" />
  <layout>
   <root-layout id="Eyes" title="Three Year Old Eyes" width="600" height="400" />
   <region id="region_one" title="Eyes" top="0" left="0" width="600" height="400" z-index="1" />
  </layout>
  <transition id="fade_1" dur="2s" type="fade" />
  <transition id="clockWipe_1" dur="1.5s" type="clockWipe" />
  <transition id="clockWipe_2" dur="1.08s" type="clockWipe" />
  <transition id="slideWipe_1" dur="3.66s" type="slideWipe" />
  <transition id="starWipe_1" dur="2s" type="starWipe" />
   <transition id="barWipe_1" dur="1s" type="barWipe" />
  <transition id="clockWipe_3" dur="1.35s" type="clockWipe" />
  <transition id="clockWipe_4" dur="1.85s" type="clockWipe" />
  <transition id="fade_2" dur="6.28s" type="fade" />
 </head>
 <body>
  <seq>
   <prefetch src="media/wood_mus_1b.mp3" mediaSize="100%" />
   <prefetch src="media/m_1a.jpg" mediaSize="100%" />
   <prefetch src="media/garden_8a.jpg" mediaSize="100%" />
   <prefetch src="media/m_15a.jpg" mediaSize="100%" />
   <prefetch src="media/garden_17a.jpg" mediaSize="100%" />
   <prefetch src="media/corona1_5a.jpg" mediaSize="100%" />
   <prefetch src="media/corona1_3a.jpg" mediaSize="100%" />
   <prefetch src="media/corona1_2a.jpg" mediaSize="100%" />
   <prefetch src="media/corona1_4a.jpg" mediaSize="100%" />
   <prefetch src="media/garden_5a.jpg" mediaSize="100%" />
   <prefetch src="media/garden_7a.jpg" mediaSize="100%" />
   <prefetch src="media/credits.jpg" mediaSize="100%" />
  </seq>
  <par>
   <audio id="audio_1" begin="1" dur="60.00s" src="media/wood_mus_1b.mp3" />
   <img id="m_1a" region="region_one" top="119" left="30" width="540" height="162"
     transIn="fade_1" src="media/m_1a.jpg" begin="2.00s" dur="5.00s" />
   <img id="garden_8a" region="region_one" top="85" left="0" width="600" height="230"
     transIn="fade_1" src="media/garden_8a.jpg" begin="8.00s" dur="5.00s"/>
   <img id="m_15a" region="region_one" top="53" left="100" width="400" height="293"
     src="media/m_15a.jpg" begin="14.90s" end="20.52s"/>
   <img id="garden_17a" region="region_one" top="49" left="140" width="319" height="302"
     transIn="clockWipe_1" src="media/garden_17a.jpg" begin="21.52s" end="23.22s"/>
   <img id="corona1_5a" region="region_one" top="0" left="162" width="275" height="400"
     transIn="clockWipe_2" src="media/corona1_5a.jpg" begin="23.22s" end="24.80s"/>
   <img id="corona1_3a" region="region_one" top="0" left="164" width="271" height="400"
     transIn="fade_1" src="media/corona1_3a.jpg" begin="24.80s" end="30.54s"/>
   <img id="corona1_2a" region="region_one" top="0" left="46" width="507" height="400"
     transIn="slideWipe_1" src="media/corona1_2a.jpg" begin="31.54s" end="37.20s"/>
   <img id="flower_2c" region="region_one" top="33" left="0" width="600" height="334"
     transIn="starWipe_1" src="media/flower_2c.jpg" begin="38.20s" end="43.86s"/>
   <img id="garden_5a" region="region_one" top="110" left="0" width="600" height="179"
     transIn="barWipe_1" src="media/garden_5a.jpg" begin="44.86s" end="48.17s"/>
   <img id="garden_7a" region="region_one" top="16" left="68" width="464" height="368"
     transIn="clockWipe_3" src="media/garden_7a.jpg" begin="49.17s" end="51.02s"/>
   <img id="credits" region="region_one" top="50" left="100" width="400" height="300"
     transIn="clockWipe_4" transOut="fade_2" src="media/credits.jpg" begin="52.02s" end="61.97s"/>
  </par>
 </body>
</smil>

View this SMIL 2.0 profile example (about 1MB and 1 minute long) online or a HTML+SMIL version of it (latest IE 6 required).

Let me know what you think.
Back to Homepage

Jose Ramirez 2001