HTML+TIMEには、TimeAction（タイムを使った表現）を行うための複数のタグを１つのTimeContainer（タイムコンテナ=時間を管理する箱のようなもの）
に入れて、効率よく動かすための、独特のタグがあります。
それは、
t:par t:seq t:excl の3つです。
t:par は、いろいろなタイム表現をひとまとめにできる便利なコンテナです。ひな形作成では、いろいろな場面で頻繁に使われるコンテナで、
t:seq のコンテナや
t:excl のコンテナの中に入れて使うこともできます。
t:seq は、コンテナに入った表現を順番に表示するときに使うコンテナです。スライドショーのようなものと作るときに便利です。
t:excl は、コンテナ内に入ったものが動くときに、他の動き影響されることなく動くようにするコンテナです。
これらは、
<t:par></t:par> <t:seg></t:seq> <t:excl></t:excl>というように、
タイムコンテナの始まりを表す
<t:○○>と、タイムコンテナの終わりを表す
</t:○○>の閉じタグとセットで使います。
1.t:par
t:parの使い方から練習しましょう。
まず、次のようなTimeActionを使う場合を考えてみましょう。
<div align="center">
<img class="time" id="img1" src="clip1.gif" begin="0" dur="2" timeAction="display">
<img class="time" id="img2" src="clip2.gif" begin="img1.end" dur="2" timeAction="display">
<img class="time" id="img3" src="clip3.gif" begin="img2.end" dur="2" timeAction="display">
</div>
これは、imgのインライン要素としてtimeを使った画像を3つ表示した例です。
「clip1.gifという画像が2分表示されて、それが終わったらclip2.gifが2分間表示されて、それが終わったらclip3.gifが2分間表示される」
つまり、「clip1.gif→clip2.gif→clip3.gif」という表示です。この一連の動きを連続して行い、「clip1.gif→clip2.gif→clip3.gif→clip1.gif→clip2.gif→clip3.gif」
というように、clip3.gifが終わったら、また、clip1.gifからの動きを始めるには、普通に記述すると、次のようになってしまいます。
<div align="center">
<img class="time" id="img1" src="clip1.gif" begin="0" dur="2" timeAction="display">
<img class="time" id="img2" src="clip2.gif" begin="img1.end" dur="2" timeAction="display">
<img class="time" id="img3" src="clip3.gif" begin="img2.end" dur="2" timeAction="display">
<img class="time" id="img4" src="clip1.gif" begin="img3.end" dur="2" timeAction="display">
<img class="time" id="img5" src="clip2.gif" begin="img4.end" dur="2" timeAction="display">
<img class="time" id="img6" src="clip3.gif" begin="img5.end" dur="2" timeAction="display">
<img class="time" id="img7" src="clip1.gif" begin="img6.end" dur="2" timeAction="display">
<img class="time" id="img8" src="clip2.gif" begin="img7.end" dur="2" timeAction="display">
<img class="time" id="img9" src="clip3.gif" begin="img8.end" dur="2" timeAction="display">
</div>
表示例これで、一連の動きを3回繰り返せますが、大変な労力です。
そこで、
t:par を使うと、
次のような簡単な記述で同じ動きが表現できます。clip1.gifのbeginを、
begin="0;img3.end"と記述しているのは、
「0秒から始まる、そして、img3というidを付けられた動きが終わったら始まる」という意味で、この記述によって、「clip3.gif→clip1.gif」（clip3.gifが終わったらclip1.gif）という一連の動きのスタートに戻ることができます。
<div align="center">
<t:par begin="0" repeatcount="3">
<img class="time" id="img1" src="clip1.gif" begin="0;img3.end" dur="2" timeAction="display">
<img class="time" id="img2" src="clip2.gif" begin="img1.end" dur="2" timeAction="display">
<img class="time" id="img3" src="clip3.gif" begin="img2.end" dur="2" timeAction="display">
</t:par>
</div>
もちろん、3回繰り返すだけなら、最初の表示例のようにt:parを使わなくてもかまいません。
ところが、一連の動きを永遠に繰り返したい場合はどうでしょう。
t:parを使った例の場合、
<t:par begin="0" repeatcount="
indefinite">と記述するだけでOK
です（
表示例par1）が、t:parを使わないと一連の動きを永遠に繰り返すことはできません。
<t:par> </t:par>で括られたコンテナの中の一つ一つの動きに他のタイム表現を付け加えることもできます。
<div align="center">
<t:par begin="0" repeatcount="indefinite">
<img class="time" id="img1" src="clip1.gif" begin="0;img3.end" dur="4" timeAction="display">
<img class="time" id="img2" src="clip2.gif" begin="img1.end" dur="4" timeAction="display">
<img class="time" id="img3" src="clip3.gif" begin="img2.end" dur="4" timeAction="display">
</t:par>
</div>
<t:transitionFilter id="irisWipe1p" targetElement="img1" type="progid:DXImageTransform.Microsoft.Iris(irisStyle='plus')" mode="in" begin="img1.begin" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="RandomDissolve1" targetElement="img1" type="progid:DXImageTransform.Microsoft.RandomDissolve()" mode="out" begin="irisWipe1p.end" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="ellipseWipe1" targetElement="img2" type="ellipseWipe" subtype="circle" mode="in" begin="img2.begin" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="RandomDissolve2" targetElement="img2" type="progid:DXImageTransform.Microsoft.RandomDissolve()" mode="out" begin="ellipseWipe1.end" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="irisWipe1d" targetElement="img3" type="irisWipe" subtype="diamond" mode="in" begin="img3.begin" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="RandomDissolve3" targetElement="img3" type="progid:DXImageTransform.Microsoft.RandomDissolve()" mode="out" begin="irisWipe1d.end" dur="2" autoreverse="false" repeatcount="1" />
表示例par2このように、それぞれの画像が現われるときと消えるときに、いろいろなトランジッション効果をつければ、
変化にとんだスライドショーが作れます。
1.t:seq
スライドショーのように、何かを順番に表示したい場合は、t:parより、さらに便利な
t:seqというコンテナがあります。
<div align="center">
<t:seq begin="0" repeatcount="indefinite" timeAction="display">
<img class="time" src="clip1.gif" dur="2">
<img class="time" src="clip2.gif" dur="2">
<img class="time" src="clip3.gif" dur="2">
</t:seq>
</div>
こちらが表示例（
表示例seq1）です。
表示例par1と同じ表示をするのに、
それぞれの画像ごとにbeginで始まりの時間を指定していません。t:seqのコンテナの始まりだけ指定しておけば、あとは自動的に順番に表示されます。また、par1ではそれぞれの画像ごとに指定されていたtimeAction="display" も、
t:seqタグのところにまとめて記述するだけですんでいます。ちなみに、表示例par1でそれぞれの画像ごとのtimeAction="display"を省略すると画像が表示される位置が変わってしまいます。
このように、t:seqのコンテナは、defaultの状態で、「同じ位置で、同じ表現を、順番どおりにできる」という特徴があります。
t:seqを使って、トランジッション効果をつけたスライドショーを作ってみましょう。
<div align="center">
<t:seq begin="0" repeatcount="indefinite" timeAction="display">
<IMG class="time" id="img1" src="clip1.gif" dur="4">
<IMG class="time" id="img2" src="clip2.gif" dur="4">
<IMG class="time" id="img3" src="clip3.gif" dur="4">
</t:seq>
</div>
<t:transitionFilter id="irisWipe1p" targetElement="img1" type="progid:DXImageTransform.Microsoft.Iris(irisStyle='plus')" mode="in" begin="img1.begin" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="RandomDissolve1" targetElement="img1" type="progid:DXImageTransform.Microsoft.RandomDissolve()" mode="out" begin="irisWipe1p.end" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="ellipseWipe1" targetElement="img2" type="ellipseWipe" subtype="circle" mode="in" begin="img2.begin" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="RandomDissolve2" targetElement="img2" type="progid:DXImageTransform.Microsoft.RandomDissolve()" mode="out" begin="ellipseWipe1.end" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="irisWipe1d" targetElement="img3" type="irisWipe" subtype="diamond" mode="in" begin="img3.begin" dur="2" autoreverse="false" repeatcount="1" />
<t:transitionFilter id="RandomDissolve3" targetElement="img3" type="progid:DXImageTransform.Microsoft.RandomDissolve()" mode="out" begin="irisWipe1d.end" dur="2" autoreverse="false" repeatcount="1" />
表示例はこちら（
表示例seq2）です。このスライドショーは、
表示例par2と同じスライドショーですが、
t:seqのコンテナを使ったほうが、t:parを使った表示例par2より簡単な記述ですんでいます。
1.t:excl
t:exclは、defaultでは時間を持っていないコンテナで、コンテナ内に置かれたそれぞれの要素が独立して動きます。
また、コンテナ内の1つの要素が動いているとき、他の要素は動かないという特徴があります。
ソースと表示例はこちら（
表示例excl）です。
<div align="center">
<t:excl>
<img class="time" src="clip1.gif" begin="0" dur="2" timeAction="display">
<img class="time" src="clip2.gif" begin="2" dur="2" timeAction="display">
<img class="time" src="clip3.gif" begin="4" dur="2" timeAction="display">
<span class="time" begin="6" dur="indefinite">これで終わり</span>
</t:excl>
</div>
これだと、t:parを使っても同じことができ、わざわざt:exclを使うメリットがありません。
t:exclの特徴を生かした使い方をしてみましょう。
<div align="center">
<span class="time" id="text1">イラスト1</span>
<span class="time"id="text2">イラスト2</span>
<span class="time" id="text3">イラスト3</span>
</div>
<div align="center">
<t:excl>
<img class="time" src="clip1.gif" begin="text1.onMouseOver" dur="indefinite" timeAction="display">
<img class="time" src="clip2.gif" begin="text2.onMouseOver" dur="indefinite" timeAction="display">
<img class="time" src="clip3.gif" begin="text3.onMouseOver" dur="indefinite" timeAction="display">
</t:excl>
</div>
表示例excl1上のイラスト1、イラスト2、イラスト3の文字にマウスが触れると、画像が表示されます。
それぞれの画像には、dur="indefinite"で「永遠に動く(表示される）」と指定してあるのでどの画像も消えないはずですが、t:exclコンテナに入っていることによって、他の画像が現われたら前の画像は消えることができます。
このように、ジュークボックスのように、何かを選んで動かすとき、t:exclの特長が生きてきます。この特長を生かすと、トランジッションのページで紹介した
トランジッションSampleSourcemakerのようなものも簡単に作れます。