| 
具体的に開発したタグの内容について、説明する。始めに、どの様なタグ・属性があるか説明する。その後、利用される機能ごとにタグの解説を行う。最後に、そのタグを利用してどの様な映像が制作できるか作例を示す。
1.タグ説明
ここでは開発したタグの内容を見ながらどの様なタグがあるか、解説していこう。
1.1 主要タグ
主なタグは、
・<FLFR> FLFRファイル全体を表す。
・<TRgn> 名前を付けることが出来、子要素に、<Rgn>タグを持ち、クリッピングの為の時間、領域を指定する。
・<Rgn\textgreater> 実際のクリッピング開始領域と、開始時間を指定する。
・<Action> マウスやキーボードを用いての、イベントを指定する。
・<movie> 再生すべき映像ファイルや、どのTRgnと結びつけるかを指定する。
の五つになる。このタグとそれに合う、属性を組み合わせることで様々な映像表現が可能になる。それでは、個別のタグを説明していこう。
1.2 <FLFR>タグ
FLFRファイル全体を表すタグ
<FLFR>< /FLFR>の中に全てのタグを含む。
属性 version, FLFRのヴァージョンを指定する。タグや属性の、改変や追加に対応するために、用意している。
1.3 <TRgn>タグ
<Rgn>を子要素として持ち、どの時間にどの領域を操作するのかを指定する。
属性 name,cliptype 切り取るタイプを指定する。タイプには、2種類あり、clipとscaleに別れている。nameは、Actionタグ及びmovieタグで使用する。
clipは、元になる領域、例えば、座標(10,10)から、(200,200)の領域を切り取り、他の画像の、(10,10,200,200)に重ねる。
一方、scaleは、全体の領域(0,0,640,480)から指定された領域に縮小して、例えば(10,10,200,200)に重ねて表示する(clipは単なる切り取り、scaleは元映像の拡大・縮小の効果を加えることが出来る)。
1.4 <Rgn>タグ
<TRgn>を親要素として持つ。
属性 x,y,w,h,starttime どの点(x,y)からどの範囲(w,h)(Width,Height)を切り取るかを指定する。starttimeは開始される時間を指定する。時間は、ムービーの長さに対して、割合で指定する。0.1と指定した場合、10\%の時間として解釈される。
また、<TRgn>の中に<Rgn>は必ず2つ以上無ければならない。例えば、
<Rgn x="100" y="100" w="200" h="200"
starttime="0.1">
<Rgn x="20" y="20" w="100" h="100"
starttime="0.2">
というタグは、時間10\%から20\%の間に、座標(100,100)から(20,20)へ徐々に移動し、切り取る大きさは、(200,200)から(100,100)に徐々に縮小せよという指定になる。
下の図の様に、徐々に小さくなりながらクリッピングする。

図2:
Rgn
1.5 <Action>タグ
マウスやキーボードを用いて、指定したTRgnに対して、エフェクトを適応する。
属性 type,target,effect typeで入力デバイス(マウス、キーボードを指定する)。targetでエフェクトの対象になるTRgnのnameを指定する。effectで様々なエフェクトは、changeRect,changeSpeed,changeTransparent,changeLayerの四つがある。changeRectは、アクションをトリガーにターゲットの、位置や大きさを変更する。(200,200,10,10)と記述すれば、座標(200,200),大きさ(10,10)の形で切り抜かれる。
changeSpeedはスピードを変化させる。changeSpeed(2.0)は、再生速度を2.0倍にするという意味になる。
changeTransparentは、映像の透明度を完全な透明(0.0)から不透明(1.0)まで変化させる。
changeTransparent(0.5)は、ちょうど半透明にする。
changeLayerは、映像の重なり順を変える。図のように、changeLayer(-5)などのように、layerの値を変化させることで、どの映像が前面に来るのかをコントロールできる。

図3:
changeLayer
1.6 <movie>タグ
映像や音楽、テキストなどを読み込む。映像の再生位置や、再生速度、切り抜かれる領域を指定する。属性 type,filename,inTrim,outTrim,speed,tRgntypeは、読み込むファイルの属性を指定する。ファイル属性は、"movie,sound,text"の3種類ある。movieは、映像を読み込む。soundは音楽を読み込む。textはテキストファイルを読み込む。filenameは、読み込むファイル名の相対パスを指定する。inTrim,outTrimは図のように映像や音楽の再生位置を指定する。

図4:
inTrim,outTrim
tRgnは、上の<TRgn>タグにつけた名前を元に、どの領域を切り取るのか指定する。
2.機能に応じたタグ説明
上記では、個々のタグの機能を説明してきたが、これからは実際の利用を想定しながら、タグの説明を行う。
2.1 ファイルの読み込みと再生
ファイルを読み込む場合は、以下の様に指定する。
<Play>
<movie type="movie" filename="movie/candle.mov"
speed="1.0" tRgn="background"/>
</Play>
そうすると、./movie/candle.movファイルを、tRgn(background)に結び付けて、再生スピード一倍にて読み込む。
基本的には、QuickTime 形式のファイルの読み込みを想定している。いくつか実験を行った結果、h263形式で動画を圧縮すれば、綺麗でかつ軽く再生できる。また、
<movie type="movie" filename="movie/candle.avi"
inTrim="0.0"
outTrim="0.0" speed="1.0" tRgn="background"/>
の様に指定すれば、avi形式のファイルも再生できる。ただし、divxやxvdなどで符号化された動画は、あらかじめwindowsなどにcodecがインストールされていないと再生できない。また、mpeg1,mpeg2形式のファイルは、現時点では再生できない。
2.2 領域を切り出し、背景動画を重ねる方法
動画を背景と重ねるには、以下の方にxmlを記述する。わかりやすくする為に、xml中に漢字で表す。また、xml表記を一部省略する。
<TRgn name='手前領域' >
<Rgn x=10,y=10,w=100,h=100,starttime=0.0 />
<Rgn x=10,y=10,w=100,h=100,starttime=1.0 />
</TRgn>
<TRgn name='背景領域'>
<Rgn x=0,y=0,w=720,h=480,starttime=0.0 />
<Rgn x=0,y=0,w=720,h=480,starttime=1.0 />
</TRgn>
<Play>
<movie filename="背景動画" tRgn="背景領域"/>
<movie filename="手前の動画" tRgn="手前領域"/>
</Play>
つまり、まずTRgnに領域名を名づけ、ついで、動画にその領域を結びつける。動画の重なり順は、<Play>タグ内の、<movie>タグの書かれた順によって決まる。後に書かれるほど、手前に表示される。また、
<TRgn name='手前領域1' >
<Rgn x=10,y=10,w=100,h=100,starttime=0.0 />
<Rgn x=10,y=10,w=100,h=100,starttime=1.0 />
</TRgn>
<TRgn name='手前領域2' >
<Rgn x=40,y=200,w=100,h=100,starttime=0.0 />
<Rgn x=40,y=200,w=100,h=100,starttime=1.0 />
</TRgn>
<TRgn name='手前領域3' >
<Rgn x=300,y=20,w=100,h=100,starttime=0.0 />
<Rgn x=300,y=20,w=100,h=100,starttime=1.0 />
</TRgn>
<TRgn name='背景領域'>
<Rgn x=0,y=0,w=720,h=480,starttime=0.0 />
<Rgn x=0,y=0,w=720,h=480,starttime=1.0 />
</TRgn>
<Play>
<movie filename="背景動画" tRgn="背景領域"/>
<movie filename="手前の動画" tRgn="手前領域1"/>
<movie filename="手前の動画" tRgn="手前領域2"/>
<movie filename="手前の動画" tRgn="手前領域3"/>
</Play>
と記述すれば、複数の領域(この場合は、3つの領域)を図の様に手前から領域3,2,1,背景の順に重ねて再生できる。実施計画書では、矩形以外の任意の形状で、切り抜けることを目指したが、現時点では、矩形でしか切り抜けない。
2.3 複数領域に別々の時間を与える方法
上に見たように、複数の領域を重ね合わせて表示する方法を応用して、個々の領域に別々の再生時間を割りあてられる。
その方法には、
・あらかじめ再生スピードを指定する方法、
・マウスなどが領域の上にきたらスピードを変化させる方法
の2種類を実装している。
・1のあらかじめ再生スピードを指定する方法は<movie>タグで、再生スピードを指定することで実現している。具体的には、
<TRgn name='手前領域1' >
<Rgn x=10,y=10,w=100,h=100,starttime=0.0 />
<Rgn x=10,y=10,w=100,h=100,starttime=1.0 />
</TRgn>
<movie filename="背景動画" speed=1.0 tRgn="背景領域"/>
<movie filename="手前の動画" speed=2.0 tRgn="手前領域1"/>
という様に指定すれば、背景動画は、一倍の再生速度、手前の動画は、2倍の再生速度で再生される。手前の動画は、切り取られた領域で再生されており、結果的に、画面上には、1倍速で再生される動画と、2倍速で再生される動画の二つを同時に表示することができる。
・2のマウスによって動的にスピードを変化させる方法上記の例ではあらかじめ、再生速度を指定しておかなければならなかったが、TRgn領域に、マウスを持ってくることで、事後的に再生速度をコントロールすることができる。
その際は、<Action>タグを利用する。
<Action type="マウスオーバー" target="手前領域" effect="チェンジスピード(2.0)"
/>
の様に、Action タグを用いて、アクションのタイプ(マウスオーバー)と、影響を受ける領域(target="手前領域")、影響の種類(effect=チェンジスピード)を指定することで、マウスの動きをトリガーにして、後から手前領域の再生速度を変えることができる。
2.4 領域を移動させる方法
切り取られる領域を移動させる方法も、再生速度を変化させる方法と同じく、2種類の指定方法がある。ひとつは、TRgnタグ内のRgnタグを利用して、切り取る領域を移動させる方法。もうひとつは、Actionタグを利用して後から、領域を移動させる方法である。
1,あらかじめ移動する領域を指定する方法として、切り取る領域を移動させるには、Rgnの値を指定すればよい。
<TRgn name='手前領域' >
<Rgn x=10,y=10,w=100,h=100,starttime=0.0 />
<Rgn x=660,y=380,w=100,h=100,starttime=1.0 />
</TRgn>
と指定すれば、手前の領域の座標(x,y)は、(10,10)から(660,380)へと変化し、左上(開始時間0)から右下(開始時間1.0=つまり終了時間)へとゆっくり落ちていく。
2,手動(マウス)を用いて切り取り領域を移動させる方法領域の移動には、再生スピードの変更と同じく、Actionタグを利用する。
<Action type="マウスオーバー" target="手前領域" effect="領域移動(400,10,100,100)"
/>
の様に指定すれば、マウスを手前領域に重ねた瞬間、手前領域は、座標(400,10)の場所へ移動する。以上の様に、タグを組み合わせることで、多彩な表現が可能になる。
いくつかのサンプルと、その結果の動画のキャプチャーを、提示する。
3.flfrを利用した映像の実例
鏡の中の私、外の私
<?xml version="1.0" encoding="Shift_JIS"?>
<FLFR version="0.001">
<!-- Define Region and time space TRgn mean [Time Region]-->
<TRgn name="r01" cliptype="clip">
<Rgn x="440" y="0" w="280" h="480"
starttime="0.0" />
<Rgn x="440" y="0" w="280" h="480"
starttime="1.0" />
</TRgn>
<TRgn name="r02" cliptype="clip">
<Rgn x="0" y="0" w="440" h="480"
starttime="0.0" />
<Rgn x="0" y="0" w="440" h="480"
starttime="1.0" />
</TRgn>
<TRgn name="background" cliptype="clip">
<Rgn x="0" y="0" w="720" h="480"
starttime="0.0"/>
<Rgn x="0" y="0" w="720" h="480"
starttime="1.0"/>
</TRgn>
<!-- Attach Event use Action Tag-->
<Action type="onMouseOver()" target="r01"
effect="changeLayer(-5);"/>
<Action type="offMouseOver()" target="r01"
effect="changeLayer(+5);"/>
<Action type="onMouseOver()" target="r02"
effect="changeLayer(-5);"/>
<Action type="offMouseOver()" target="r02"
effect="changeLayer(+5);"/>
<!--Play Tag define movie file to play and combine movie and
TRgn-->
<Play>
<movie type="movie" filename="movie/makeup01.mov"
speed="1.0" tRgn="background"/>
<movie type="movie" filename="movie/makeup02.mov"
speed="1.0" tRgn="r01"/>
<movie type="movie" filename="movie/makeup02.mov"
speed="1.0" tRgn="r02"/>
</Play>
</FLFR>
マウスを左右に動かすことによって、鏡の中の人間と外の人間が入れ替わる。

図6:
鏡の中の私と外の私
蝋燭
<?xml version="1.0" encoding="Shift_JIS"?>
<FLFR version="0.0003">
<!-- Define Region and time space TRgn mean Time Region-->
<TRgn name="background" cliptype="clip">
<Rgn x="0" y="0" w="720" h="480"
starttime="0.0" />
<Rgn x="0" y="0" w="720" h="480"
starttime="1.0" />
</TRgn>
<TRgn name="r00_00" cliptype="clip">
<Rgn x="150" y="100" w="400" h="19"
starttime="0.0" />
<Rgn x="150" y="100" w="400" h="19"
starttime="1.0" />
</TRgn>
<TRgn name="r00_01" cliptype="clip">
<Rgn x="150" y="119" w="400" h="19"
starttime="0.0" />
<Rgn x="150" y="119" w="400" h="19"
starttime="1.0" />
<!--////////////////////////////////////////
中略
/////////////////////////////////////////-->
<TRgn name="r00_17" cliptype="clip">
<Rgn x="150" y="423" w="400" h="19"
starttime="0.0" />
<Rgn x="150" y="423" w="400" h="19"
starttime="1.0" />
</TRgn>
<TRgn name="r00_18" cliptype="clip">
<Rgn x="150" y="442" w="400" h="19"
starttime="0.0" />
<Rgn x="150" y="442" w="400" h="19"
starttime="1.0" />
</TRgn>
<TRgn name="r00_19" cliptype="clip">
<Rgn x="150" y="461" w="400" h="19"
starttime="0.0" />
<Rgn x="150" y="461" w="400" h="19"
starttime="1.0" />
</TRgn>
<!-- Attach Event use Action Tag-->
<Action type="onKey(k)"
target="r00_00,r00_01,r00_02,r00_03,r00_04,r00_05,r00_06,r00_07,r00_08,
r00_09,r00_10,r00_11,r00_12,r00_13,r00_14,r00_15,r00_16,r00_17,r00_18,r00_19"
effect="changeLayer(-30);" />
<Action type="onKey(v)"
target="r00_00,r00_01,r00_02,r00_03,r00_04,r00_05,r00_06,r00_07,
r00_08,r00_09,r00_10,r00_11,r00_12,r00_13,r00_14,r00_15,r00_16,r00_17,r00_18,r00_19"
effect="changeLayer(+30);" />
<Action type="onMouseOver()"
target="r00_00,r00_01,r00_02,r00_03,r00_04,r00_05,r00_06,r00_07,r00_08,
r00_09,r00_10,r00_11,r00_12,r00_13,r00_14,r00_15,r00_16,r00_17,r00_18,r00_19"
effect="changeLayer(-40);" />
<Action type="offMouseOver()"
target="r00_00,r00_01,r00_02,r00_03,r00_04,r00_05,r00_06,r00_07,r00_08,
r00_09,r00_10,r00_11,r00_12,r00_13,r00_14,r00_15,r00_16,r00_17,r00_18,r00_19"
effect="changeLayer(+40);" />
<!--Play Tag define movie file to play and combine movie and
TRgn-->
<Play>
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.080000" speed="1.0" tRgn="r00_00"/>
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.123500" speed="1.0" tRgn="r00_01"/>
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.167000" speed="1.0" tRgn="r00_02"/>
<!--/////////////////////////////////////
中略
///////////////////////////////////////-->
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.819500" speed="1.0" tRgn="r00_17"/>
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.863000" speed="1.0" tRgn="r00_18"/>
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.906500" speed="1.0" tRgn="r00_19"/>
<movie type="movie" filename="movie/candle2.mov"
outTrim="0.0"
inTrim="0.0" speed="1.0" tRgn="background"/>
</Play>
</FLFR>
キーボードの「k」を押すことで、炎の軌跡が、一度に現れる。

図7:
蝋燭
いっぱいのろうそく
<?xml
version="1.0" encoding="Shift_JIS"?>
<FLFR version="0.0004">
<TRgn name="background" cliptype="clip">
<Rgn x="0" y="0" w="720" h="480"
starttime="0.0" />
<Rgn x="0" y="0" w="720" h="480"
starttime="1.0" />
</TRgn>
<TRgn name="r00_00" cliptype="scale">
<Rgn x="0" y="0" w="120" h="120"
starttime="0.000000" />
<Rgn x="120" y="120" w="120" h="120"
starttime="0.166667" />
<Rgn x="0" y="0" w="120" h="120"
starttime="0.333333" />
<Rgn x="120" y="120" w="120" h="120"
starttime="0.500000" />
<Rgn x="0" y="0" w="120" h="120"
starttime="0.666667" />
<Rgn x="120" y="120" w="120" h="120"
starttime="0.833333" />
<Rgn x="120" y="120" w="120" h="120"
starttime="1.00" />
</TRgn>
<TRgn name="r00_01" cliptype="scale">
<Rgn x="0" y="120" w="120" h="120"
starttime="0.000000" />
<Rgn x="120" y="0" w="120" h="120"
starttime="0.166667" />
<Rgn x="0" y="120" w="120" h="120"
starttime="0.333333" />
<Rgn x="120" y="0" w="120" h="120"
starttime="0.500000" />
<Rgn x="0" y="120" w="120" h="120"
starttime="0.666667" />
<Rgn x="120" y="0" w="120" h="120"
starttime="0.833333" />
<Rgn x="120" y="0" w="120" h="120"
starttime="1.00" />
</TRgn>
<!--/////////////////////////////////
中略
//////////////////////////////////-->
<TRgn name="r05_00" cliptype="scale">
<Rgn x="600" y="0" w="120" h="120"
starttime="0.000000" />
<Rgn x="480" y="120" w="120" h="120"
starttime="0.166667" />
<Rgn x="600" y="0" w="120" h="120"
starttime="0.333333" />
<Rgn x="480" y="120" w="120" h="120"
starttime="0.500000" />
<Rgn x="600" y="0" w="120" h="120"
starttime="0.666667" />
<Rgn x="480" y="120" w="120" h="120"
starttime="0.833333" />
<Rgn x="480" y="120" w="120" h="120"
starttime="1.00" />
</TRgn>
<TRgn name="r05_01" cliptype="scale">
<Rgn x="600" y="120" w="120" h="120"
starttime="0.000000" />
<Rgn x="480" y="0" w="120" h="120"
starttime="0.166667" />
<Rgn x="600" y="120" w="120" h="120"
starttime="0.333333" />
<Rgn x="480" y="0" w="120" h="120"
starttime="0.500000" />
<Rgn x="600" y="120" w="120" h="120"
starttime="0.666667" />
<Rgn x="480" y="0" w="120" h="120"
starttime="0.833333" />
<Rgn x="480" y="0" w="120" h="120"
starttime="1.00" />
</TRgn>
<TRgn name="r05_02" cliptype="scale">
<Rgn x="600" y="240" w="120" h="120"
starttime="0.000000" />
<Rgn x="480" y="360" w="120" h="120"
starttime="0.166667" />
<Rgn x="600" y="240" w="120" h="120"
starttime="0.333333" />
<Rgn x="480" y="360" w="120" h="120"
starttime="0.500000" />
<Rgn x="600" y="240" w="120" h="120"
starttime="0.666667" />
<Rgn x="480" y="360" w="120" h="120"
starttime="0.833333" />
<Rgn x="480" y="360" w="120" h="120"
starttime="1.00" />
</TRgn>
<TRgn name="r05_03" cliptype="scale">
<Rgn x="600" y="360" w="120" h="120"
starttime="0.000000" />
<Rgn x="480" y="240" w="120" h="120"
starttime="0.166667" />
<Rgn x="600" y="360" w="120" h="120"
starttime="0.333333" />
<Rgn x="480" y="240" w="120" h="120"
starttime="0.500000" />
<Rgn x="600" y="360" w="120" h="120"
starttime="0.666667" />
<Rgn x="480" y="240" w="120"
h="120" starttime="0.833333" />
<Rgn x="480" y="240" w="120" h="120"
starttime="1.00" />
</TRgn>
<Play>
<movie type="movie" filename="movie/candle.mov"
speed="1.000000" tRgn="background"/>
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r00_00"/>
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r00_01"/>
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r00_02"/>
<!--///////////////////////////////////////
中略
/////////////////////////////////////////-->
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r05_00"/>
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r05_01"/>
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r05_02"/>
<movie type="movie" filename="movie/candle.mov"
outTrim="0.0"
inTrim="0.000000" speed="1.0" tRgn="r05_03"/>
</Play>
</FLFR>

図8:
いっぱいのろうそく
複数の蝋燭を縮小して一度に動かすことが出来る。
|