Transitions with SMIL 2.0 ProfileClick 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 |