SMIL - RealPix & RealText

最終更新日:2006年11月29日

　

  1. イメージ画像：上、テキスト：下

　RealPixとRealTextを組み合わせて配信する場合は、まずその表示レイアウトを考える必要があります。
　テキスト表示は「フォントの大きさ」、「改行位置」など自由に変更できることより、RealTextによる表示画面サイズも自由に決めることが出来ます。
その反面、イメージ画像は「画像ファイルの縦：横比」、「フェードアウト等の効果による全体のレイアウト」などの制限により、ReaPixによる表示画面サイズはある程度固定化されてきてしまいます。
　したがって、RealPixとRealTextを組み合わせSMILによる配信を行う場合は、まずイメージ画像（RealPix）の表示画面サイズを決定し、それにあわせてテキスト（RealText）の表示画面サイズを指定すると全体表示のレイアウトを決めやすいでしょう。

１．イメージ画像：上、テキスト分：下

◎イメージ画像（RealPix）の作成。
４枚のイメージ画像を「表示開始 => 四隅に移動」の順でそれぞれ表示するサンプル。

<imfl>
<head title="SMIL サンプル"
        author="まゆぱぱ"
        copyright="(c)1998 seagull's Home."
        timeformat="dd:hh:mm:ss.xyz"
        duration="25"
        bitrate="20000"
        height="240"
        width="320"
        url="http://www.eizou.info/"
        aspect="true"/>

    <!-- Assign handle numbers to images -->
    <image handle="1" name="img/pht_026.jpg"/>
    <image handle="2" name="img/pht_028.jpg"/>
    <image handle="3" name="img/pht_060.jpg"/>
    <image handle="4" name="img/pht_063.jpg"/>

    <!-- Effect images -->
    <fill start="0" color="white"/>
    <fadein start="1" duration="2" target="1"/>
    <viewchange start="4" duration="2" dstx="0" dsty="0" dstw="160" dsth="120"/>

    <crossfade start="7" duration="2" target="2"/>
    <viewchange start="10" duration="2" dstx="160" dsty="0" dstw="160" dsth="120"/>

    <crossfade start="13" duration="2" target="3"/>
    <viewchange start="16" duration="2" dstx="160" dsty="120" dstw="160" dsth="120"/>

    <crossfade start="19" duration="2" target="4"/>
    <viewchange start="22" duration="2" dstx="0" dsty="120" dstw="160" dsth="120"/>
</imfl>

このRealPix単体での動き。=>smisp31p
（再生開始まで、少々時間がかかると思います。）

◎テキスト（RealText）の作成。
上で作成したRealPixでの表示サイズは、「縦：240pixel、横：320pixel」となりました。
テキスト表示全体のサイズをRealPixでの表示サイズにあわせる必要はありませんが、あわせることでより見栄えの良いものになるでしょう。
　ここでは、イメージ画像の下にテキストを表示するので、表示の横幅を320pixelにあわせることにします。（縦[高さ]は、テキスト表示する内容にしたがって調整すれば良いでしょう。）

<window type="generic" height="40" width="320" duration="25" bgcolor="black">
<font charset="x-sjis" face="osaka" color="#ff8000">
<time begin="1"/><b>グランドでサッカーでもやってるのかな？</b>
<time begin="3"/><br/><b>　　それとも、野球かな？！</b>
<time begin="7"/><clear/><b>こちらでは、野球をしています。</b>
<time begin="9"/><br/><b>　　一緒にできたら楽しいでしょう〜〜</b>
<time begin="13"/><clear/><b>次は一転して、リンゴ３つです。</b>
<time begin="15"/><br/><b>　　フムフム　m(__)m</b>
<time begin="19"/><clear/><b>どこかにお買い物でしょうか。</b>
<time begin="21"/><br/><b>　　グーとおなかがなってしまいそう。</b>
<time begin="24"/><clear/><b>　　　　　☆彡　おしまい　☆彡</b>
</font>
</window>

このRealPix単体での動き。=>smisp31t

◎SMILの作成。
元になるRealPixファイル、RealTextファイルが完成しましたら、それらのレイアウトと同時再生のためにSMILファイルを作成します。

<smil>
    <head>
        <meta name="author" content="SMIL Sample"/>
        <meta name="title" content="mayupapa"/>
        <meta name="copyright" content="(c) 1999 seagull's Home"/>
        <layout>
            <root-layout height="280" width="320"/>
            <region id="img_reg" left="0" top="0" height="240" width="320"/>
            <region id="text_reg" left="0" top="240" height="40" width="320"/>
        </layout>
    </head>
    <body>
        <par>
            <img src="http://url/smismp31.rp" region="img_reg" fill="freeze"/>
            <textstream src="http://url/smismp31.rt" region="text_reg" fill="freeze"/>
        </par>
    </body>
</smil>

<smil>.....</smil>　=>　SMILの始まりと終わりを指定。(必須)
<head>.....</head>　=>　タイトル、表示レイアウト等の指定宣言。
<body>.....</body>　=>　クリップ、表示レイアウトとファイルの関連付け等の指定宣言。

<meta name="title" content=".."/>　=>　タイトルを記述。
<meta name="author" content=".."/>　=>　作者名を記述。
<meta name="copyright" content="(c) 1998,1999 ..."/>　=>　著作権等の情報を記述。

<layout>.....</layout>　=>　イメージ画像、テキスト表示のレイアウト配置の宣言。
<root-layout height="280" width="320"/>　=>　表示する範囲全体のサイズを指定。単位はpixel。
（高さは、イメージ画像：240pixel＋テキスト：40＝280pixelとなります）
<region id="img_reg" left="0" top="0" height="240" width="320"/>　=>　『root-layout』で指定した範囲内で、idで指定するクリップの表示位置を指定。
この場合、"img_reg"というidでイメージ画像範囲を、「左詰め、上詰め、高さ：240pixel、幅：320pixel」で指定。単位はpixel。（idは何でも良い）
<region id="text_reg" left="0" top="240" height="40" width="320"/>　=>　同様に、"text_reg"というidでテキスト表示範囲を、「左詰め、上から240pixel、高さ：40pixel、幅：320pixel」で指定。単位はpixel。（idは何でも良い）

<par>.....</par>　=>　パラレル再生（並列／同時再生）を指定。
<img src="..."　=>　このクリップ(イメージ画像）のURLを指定。
region="img_reg"　=>　上記レイアウト指定（イメージ画像位置）と関連付けるための指定。
fill="freeze"/>　=>　再生終了後には、表示をそのままにしておくように指定。
<textstream src="....."　=>　このクリップ(テキスト）のURLを指定。
region="text_reg"　=>　上記レイアウト指定（テキスト表示位置）と関連付けるための指定。
fill="freeze"/>　=>　同上。

この内容を記述したファイルを拡張子.smiとして保存する。
これで、SMILファイルは完成です。
SMILファイルをページへリンク設定。
このサンプルを再生する　＝＞　Click Here!!

　

＜トップページへ＞　＜SMILのトップページへ＞

　

(C)Copyright 1998,2000 seagull's Home. All rights reserved