RealPlayer SMIL コンテンツクリエーション

(1)

RealNetworks 教育コース

RealPlayer SMIL コンテンツクリエーションコース

(2)

本テキストの情報は事前の告示なしに変更される場合があります。本テキストの例に使用されている会社名、名前およびデータは、特に断りがない限り架空のものです。リアルネットワークス株式会社の書面による許可なく、いかなる方法、いかなる目的においても、本テキストの一部または全部を複製・転載することを禁止します。 (c)リアルネットワークス株式会社 http://www.jp.realnetworks.com http://www.jp.real.com

Helix、Helix ロゴ、RealNetworks、Real "bubble" (ロゴ)、RBN、Real Broadcast Network、RealAudio、Real.com、 RealJukebox、RealMedia、RealOne、RealPix、RealPlayer、RealPresenter、RealProducer、RealProxy、RealSites、 RealStore.com、RealSystem、RealText、RealVideo、および SureStream は、RealNetworks, Inc. の商標または登録商標です。

(3)

1

目次 1 SMIL の概要... 3

1.1 RealPlayer 10 で再生できるコンテンツ

...3

1.2 SMIL とは...4

1.3 SMIL1.0 と 2.0 ...5

1.4 SMIL2.0 の記述例 ...5

1.5 SMIL を使う利点...6

1.6 本コースで扱う内容について...6

2 テキストの表示... 8

2.1 RealText の概要...8

2.2 RealText の構成...8

2.3 ヘッダーパートの解説...9

2.4 ボディパートの解説 ... 10

2.4.1 テキストの表示時刻... 10

2.4.2 言語、フォント、色の設定 ... 10

2.4.3 テキストのレイアウトと外観 ... 11

2.5 RealText の例 ... 11

2.5.1 Genneric タイプ... 11

2.5.2 ハイパーリンクの例 ... 12

2.5.3 Marquee タイプ ... 13

2.5.4 Ticketape タイプ... 14

2.5.5 Scrollingnews タイプ... 15

2.5.6 Teleprompter タイプ... 16

3 SMIL ファイルの作成 ...17

3.1 SMIL ファイルの構成... 17

3.1.1 SMIL2.0 タグおよび名前空間... 18

3.1.2 ヘッダーパート... 18

3.1.3 ボディパート ... 20

4 コンテンツのレイアウトと時間 ...22

4.1 ルートレイアウトと領域... 22

4.1.1 領域の指定方法... 22

4.1.2 領域の重ね合わせ ... 24

4.2 クリップの透明度の変更... 26

4.3 要素の時間指定 ... 27

4.3.1 クリップの再生終了後の挙動 ... 28

4.4 要素のグループ化... 29

4.4.1 シーケンスグループの例... 29

4.4.2 パラレルグループの例... 30

4.4.3 エクスクルーシブグループ... 32

5 イベント ...34

5.1 イベントの記述方法 ... 34

5.2 イベントの種類 ... 34

5.3 スケジュールイベントの例 ... 35

6 トランジションエフェクト ...37

6.1 トランジションエフェクトの例 ... 38

6.2 トランジション境界幅の設定... 39

6.3 トランジションの繰り返し ... 40

(4)

2

7 アニメーション...43

7.1 アニメーションの例 ... 43

7.2 アニメーション変化量の指定... 46

8 ハイパーリンク ...51

8.1<a>タグでの単純なリンク ... 51

8.2<area/>タグを使ったリンク ... 51

8.2.1 時間で変わるリンクの例 ... 51

8.2.2 ホットスポットリンクの例 ... 52

8.3 ストリーミングメディアへのリンク ... 54

8.4HTML ページへのリンク ... 56

8.4.1 メディアブラウザーペインへのリンク ... 56

8.4.2 関連情報ペインに HTML ページを開く方法 ... 57

8.4.3 自動的に URL を開く方法 ... 59

付録 1:RealText タグリファレンス ...61 付録 2:SMIL2.0 タグリファレンス...67 付録 3:トランジションの種類...83

履歴

2004/07/06 version 4.02

(5)

3

1 SMIL の概要

この章では、SMIL の概要と、RealPlayer 10 で SMIL を使用する利点について説明します。

1.1 RealPlayer 10 で再生できるコンテンツ

RealPlayer G2 以降では従来からのオーディオ/ビデオだけではなく、テキストデータや静止画像のストリームも再生可能です。基本的なストリーミングコンテンツの種類 RealVideo 高い圧縮率とクオリティでインターネットのスタンダダードとなった動画送信フォーマット。ファイル拡張子は「.rm」。作成方法は作成方法は「RealPlayer コンテンツクリエーションコース」の第 4 章で説明しています。 RealAudio RealVideo と同じく、高品質の音声を少ないデータ量で送信。効果音や BGM に利用できます。帯域幅が十分なら CD に匹敵する音質も利用できる。ファイル拡張子は「.rm」。作成方法は「RealPlayer コンテンツクリエーションコース」の第 4 章で説明しています。

RealPix JPEG および GIF 形式の静止画ファイルを元に、指

定した領域で画像をダイナミックに表現。フェードイン/フェードアウト、ズームなどの多彩なエフェクトをタグを用い記述する。ファイル拡張子は「.rp」。 RealText 時間軸に沿ってテキストを表示する。HTML 互換で文字修飾を行う。日本語の表示も可能。スクロールの有無など、５種類のタイプがある。ファイル拡張子は「.rt」。作成方法は第 2 章で説明いたします。 Flash Macromedia Flash で作成したベクトルベースのアニ

メーション。ファイル拡張子は「.swf」。作成方法は「RealPlayer コンテンツクリエーションコース」の付録 2 を参照してください。静止画像 GIF、JPEG などの静止画像です。SMIL タグを利用すると、様々な効果をかけられます。SMIL タグを使ってエフェクトをかける方法は第 6 章で説明します。また、上記の表以外のメディアも再生可能です。RealPlayer 10 のメニューから「ツール」 -> 「環境設定」 -> 「コンテンツ」 -> 「メディアの種類」を選択して、 RealPlayer 10 で再生したいメディアにチェックを入れると、そのメディアはデフォルトで RealPlayer 10 で再生されます。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(6)

4

追加情報：再生可能なコンテンツ上の表や環境設定のメディアの種類以外にも、RealPlayer 10 にプラグインを追加することによって、様々なデータタイプを再生することができます。 RealPlayer 10 の「ツール」->「アップデートをチェック」をクリックすることで、以下のようなプラグインの入手ページが開くので、必要に応じてダウンロードしてください。

1.2 SMIL とは

World Wide Web Consortium(W3C)で規格化されている SMIL はマルチメディアコンテンツを制御するための標準マークアップ言語です。この SMIL を使用することにより前節で説明した RealMedia ファイル、テキストファイル、静止画ファイルなどを組み合わせて、より効果的なプレゼンテーションを作成することができます。 SMIL コンテンツの概念図 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

.rt

.smiｌ

音声映像静止画 RealText ファイル SMIL ファイルエンコーダー RealMedia ファイル RealMedia ファイル

(7)

5 1.3 SMIL1.0 と 2.0

SMIL2.0 は SMIL1.0 の機能を拡張して、2001 年 8 月に W3C より正式に勧告されました。RealONE Player と最新の RealPlayer 10 は SMIL1.0 と SMIL2.0 の両方を再生できますが、RealPlayer G2、RealPlayer 7、RealPlayer 8 が再生できるのは、 SMIL1.0 のみです。これらの古いバージョンの RealPlayer が SMIL2.0 のファイルを受け取った場合は、RealPlayer 10 にオートアップデートされます。 SMIL2.0 を使うことによって、単にクリップを再生するだけではなく、プレゼンテーションにインタラクティブ性を加えたり、クリップのアニメーションやトランジション効果を加えることができるようになりました。主な SMIL1.0 と 2.0 の機能の違い SMIL1.0 SMIL2.0 各クリップの同時再生 ○ ○ 各クリップの順次再生 ○ ○ マウスクリックによるインタラクティブにクリップを選択しての再生 × ○ クリップのトランジション効果 × ○ クリップのアニメーション × ○ タグ属性の拡張 × ○ イベント URL の送出 × ○

1.4 SMIL2.0 の記述例

SMIL ファイルの中身はテキストファイルです。タグは XML ベースのマークアップ言語になっています。したがって、SMIL ファイルの作成は、基本的にはテキストエディタで行います。ファイル拡張子には.smi または.smil をつけます。詳しい作成方法は、第 3 章から学びます。 <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head>

<root-layout height="230" width="510" backgroundColor="blue"/> <region id="news_region" width="240" height="180" left="5" top="5"/>

</layout> </head>

<body>

<video src="../clips/video2.rm" region="video_region" fill="freeze" repeatCount="3"/> <textstream src="../realtext/ticker.rt" region="ticker_region" fill="freeze"/> </par> </body> </smil> ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(8)

6 1.5 SMIL を使う利点

SMIL を使用することで以下のような利点があります。・プレゼンテーションのレイアウト

RealVideo クリップと同時に RealText や静止画、Flash などを再生できます。

・ネットワーク上の様々な場所に存在するクリップが使用可能 SMIL ファイルは、それぞれのクリップを URL によって配置するので、任意のサーバー上にあるクリップを 1 つのプレゼンテーションにまとめることができます。・タイムラインの時間制御プレゼンテーションのタイムラインを制御することで、エンコードされたクリップを変更することなく、クリップ内部の時間を指定して再生を開始することができます。・インタラクティブ機能ボタンをクリックするごとに、異なるクリップを再生するような、ビデオ、オーディオジュークボックスのようなコンテンツを作成できます。・透明なクリップの重ね合わせ RealNetworks 社の提供する拡張機能を使い、クリップに透明度を追加できます。たとえば、ビデオの上に半透明のロゴを重ねることが可能です。・ Web ページ、他のクリップへのリンクハイパーリンクを用いて、ストリーミングクリップを他のストリーミングクリップ、または Web ページにリンクすることが可能です。・視聴者ごとに異なるプレゼンテーションの配信 Player の言語設定や利用可能な帯域幅に基づき、視聴者ごとに異なるプレゼンテーションを配信できます。・特殊効果トランジションエフェクト、SMIL アニメーションを使用することにより、フェードや、スクリーンを移動するクリップなどの特殊効果を作成できます。・カスタマイズされたプレゼンテーション SMIL ファイルはテキストファイルなので、視聴者ごとに自動生成が可能です。・広告挿入

SMIL と Helix Universal Server の広告挿入機能を使い、ストリーミングプレゼンテーションに広告を挿入できます。

1.6 本コースで扱う内容について

本コースでは時間の関係上、以下の機能について説明します。・テキストを表示する RealText ・ SMIL の構成・コンテンツのレイアウトと時間・イベント・トランジションエフェクト・アニメーション・ハイパーリンク ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(9)

7

その他の機能については、「プロダクションガイド」を参照してください。プロダクションガイドは http://service.jp.real.com/help/library/encoders.html よりダウンロードできます。例えば、以下のような機能があります。・帯域幅、モニターサイズや Player のバージョンなどでコンテンツを代えるスイッチング機能・バッファリングを減少させるプレフェッチ機能・クリップの同期動作を制御する syncBehavior 機能・ RealText を使わずにテキストを表示するインラインテキスト機能・クリップのソースとして Ram、SMIL ファイルを使用する方法 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(10)

8

2 テキストの表示

この章では、SMIL の中でテキストを表示する RealText ファイルの作成方法について説明します。RealText の基本的な構造、およびタグをサンプルを使い説明した後、演習を行います。

2.1 RealText の概要

RealText は、１つのテキストファイルで構成されます。HTML 互換のテキストを修飾するタグで表示するテキストを修飾します。少ないデータ量でビデオファイルや RealPix ファイルのキャプションなどに利用できます。

2.2 RealText の構成

テキストファイルは全体を <window>…..</window> タグで括り、ヘッダーの <window>タグの中に RealText のタイプや表示領域などの情報を定義し、ボディ部分でテキストの記述します。最後に、できたテキストファイルの拡張子を「.rt」として保存します。このファイルを RealPlayer 10 で開くと、RealText ファイルが再生されます。 RealTextの記述例

<window type="generic" height="150"

width="350" duration="10" bgcolor="lime"

version=”1.2”>

<font size="3" color=”maroon”

charset="x-sjis">

<center>

メリーさんのひつじ、

<time begin="5"/>小さいひつじ。

</center>

</window>

RealText ファイルを作成する場合は、以下の点に注意してください。・ RealText タグと属性は、すべて小文字で入力する。・対応する終了タグがない場合は、終端を表すスラッシュ（ / ）で閉じる。・属性値は必ずダブルクォーテーション「”」で囲む必要があります。・特に指定がない限り、タグ名に続く属性の順番は関係ない。・ <!—This is a comment-->のように、コメント文を書くことができる。 Real Text File ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ヘッダボディ

(11)

9 2.3 ヘッダーパートの解説

RealText のヘッダーパートとなる<window>タグでは、ウィンドウのタイプを決定したり、ウィンドウの幅や高さなどの属性を指定します。属性を指定しなかった場合はデフォルトの値が適用されます。全ての属性は必須ではありません。以下に代表的な属性の解説をします。これ以外の属性については、付録 1 の RealText レファレンスを参照してください。・ type ウィンドウのタイプを指定します。ウィンドウのタイプには、以下の 5 種類があります。 generic tickertape marquee scrollingnews teleprompter 例えば、ウィンドウのタイプを tickertape に指定するには、 <window type=”tickertape”….>

と記述します。・ duration プレゼンテーション全体の長さを指定します。入力する値は、秒のみか、 dd:hh:mm:ss.xy で指定します。このフォーマットでは dd に日、hh に時間、mm に分、ss に秒、xy に 1/100 秒を入力します。ss は必ず入力し、値が小数点を含まない場合は、最後のフィールドが秒とみなされます。例えば、 duration=”1:30” は 1 分 30 秒とみなされます。 duration=”1:30:00” は 1 時間 30 分とみなされます。・ bgcolor ウィンドウの背景色を指定します。例えば、ウィンドウの背景色をブルーにする場合は、以下のように記述してください。

bgcolor=”blue” （または bgclor=”#0000ff”）・ width ウィンドウの幅をピクセル数で指定します。SMIL レイアウトで再生領域の幅を指定すると、この RealText で指定した幅は無効となります。ウィンドウの幅を 203 ピクセルに指定する場合は、以下のように記述してください。 width=”203” ・ height ウィンドウの高さをピクセル数で指定します。ウィンドウの高さを 20 ピクセルに指定する場合は、以下のように記述してください。 height=”20” ・ version 英語を表示する場合は、通常バージョンナンバーはいりません。しかし、英語以外の言語を適切に表示するためには、version を記述する必要があります。 version=”1.2” このバージョンで日本語を適切に扱えます。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(12)

10 2.4 ボディパートの解説

ボディパートでは、再生領域に実際に表示される文字を記述します。その文字に対して、表示時刻、位置、文字色、フォントなどのタグ記述します。ここでは代表的なタグを解説します。その他のタグについては付録 1 の RealText タグリファレンスを参照してください。

2.4.1 テキストの表示時刻

・ <time…/>タグこのタグはテキストの表示開始時間と表示終了時間を指定します。テキストがスクロールしないタイプで主に使われます。このタグを記述しない場合は、 RealText の再生が開始すると同時にテキストが表示されます。表示を開始する場合は

<time begin=”hh:mm:ss.xy” />テキスト表示を終了する場合は

<time end=”hh:mm.ss.xy” />テキストと記述します。

また、

<time begin=”hh:mm:ss.xy” end=”hh:mm:ss.xy” /> と記述することも可能です。また、<time…/>タグで指定された開始時間と終了時間は、新しい値が設定されるまで、前の値を持つので、例えば、一度終了時間を指定したなら、続く全てのテキストに対して、終了時間を指定する必要があります。

2.4.2 言語、フォント、色の設定

ここでは、文字の修飾方法について説明します。・日本語（2 バイト）を使う RealText のデフォルトのキャラクタセットは US ASCII なので、日本語を使用する場合には

という指定が必要です。また、<window>タグに version=”1.2”の記述も必要です。注意： MAC 版 RealPlayer 10 で日本語を正しく表示するには、さらに face=”Osaka”の指定も必要です。

・文字サイズの設定文字のサイズは

… タグで指定します。文字サイズの指定とフォントのポイント数は以下のようになります。相対サイズ絶対サイズポイント数 -2 1 12point -1 2 14point +0（デフォルト） 3 16point +1 4 20point +2 5 24point +3 6 36point +4 7 48point ・文字の色の設定文字の色は … タグで指定します。 RealText では HTML で表示可能なすべての色をサポートしています。文字の色 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(13)

11

は定義済みのカラー名か 16 進法数値で指定してください。ただし、ticketape タイプでは<tu>と<tl>タグで指定を行います。各色の 16 進法数値は以下の通りです。 white #ffffff black #000000 silver #c0c0c0 yellow #ffff00 fuschia #ff00ff red #ff0000 lime #00ff00 olive #808000 green #008000 aqua #00ffff teal #008080 blue #0000ff navy #000080 purple #800080 maroon #800000 gray #808080

2.4.3 テキストのレイアウトと外観

以下のタグは、RealText のテキストのレイアウトと外観を設定します。これらの多くのタグは HTML のタグと同様の機能を持ちます。・ タグこのタグの後のテキストは改行されて、次の行から表示されます。tickertape と marquee ウィンドウでは、テキストはウィンドウの右端に表示され移動します。・ <center>…</cente>タグこのタグで囲まれたテキストは中央揃えで表示されます。tickertape や marquee ウィンドウでは、影響しません。

2.5 RealText の例

ここでは、具体的な RealText の例を紹介します。

2.5.1 Genneric タイプ

generic タイプは、表示領域に単にテキストを表示するタイプです。・ generic.rt この RealText ファイルは、再生領域に指定した時間に沿って文字を表示します。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(14)

12

generic.rt

<window type="generic" height="150" width="320" duration="30" bgcolor="yellow" version="1.2"> 「くらげの旅立ち」 <time begin="3"/>むかしむかしあるところに、、 <time begin="6"/>おじいさんと、おばあさんくらげが <time begin="9"/>静かにくらしていました。 <time begin="12"/>ある、夏のあさに海の方から <time begin="15"/><clear/>おばあさんの声が聞こえてきました。 <time begin="18"/>「おじいさ～ん！」 <time begin="21"/>「こっちさ、来て～」 <time begin="24"/>おじいさんが急いで行くと、 <time begin="27"/>かわいいミズクラゲがいました。 </window> ・ヘッダーパートここでは、ウィンドウのタイプを generic に指定しています。その他、幅、高さ、 duration、bgcolor などを指定しています。・ボディパートここでは、はじめに、日本語を使用するので、キャラクタセットを x-sjis に指定しています。 <time begin="3"/>むかしむかしあるところに、、は改行タグ を 2 つ入れて、プレゼンテーションの開始から 3 秒後にテキストを表示させるという指定です。 <time begin="15"/><clear/>おばあさんの声が聞こえてきました。は 15 秒後に、今現在表示されているテキストをクリアし、さらに新しくテキストを表示させる指定です。

2.5.2 ハイパーリンクの例

RealText では、HTML と同じようにテキストにハイパーリンクを作成することができます。以下はその例です。・ generic1.rt 「続く」をクリックすると、generic2.rt にリンクします。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(15)

13

generic1.rt

<window type="generic" height="100" width="320" duration="20" bgcolor="yellow" version="1.2"> 「くらげの旅立ち」 <time begin="3"/>むかしむかしあるところに、、 <time begin="6"/>おじいさんと、おばあさんくらげが <time begin="9"/>静かにくらしていました。 <time begin="12"/><clear/>ある、夏のあさに海の方から <time begin="15"/>おばあさんの声が聞こえてきました。

</window> generic2.rt

<window type="generic" height="100" width="320" duration="12" bgcolor="yellow" version="1.2"> 「おじいさ～ん！」 <time begin="3"/>「こっちさ、来て～」 <time begin="6"/>おじいさんが急いで行くと、 <time begin="9"/>かわいいミズクラゲがいました。 </window>

がハイパーリンクの指定です。リンク先が RealText なので、RealPlayer 10 でリンク先を再生するために target 属性に_player を指定しています。target 属性を指定しないか、あるいは target=”_browser”と記述すると Web ブラウザーにリンク先を開きます。

2.5.3 Marquee タイプ

marquee タイプはテキストが横にスクロールするタイプです。テキストは表示領域の上下の真中に配置されます。・ marquee.rt この RealText ファイルは、テキストが横に流れますが、流れる文字のサイズやカラーを変えています。 marquee.rt

<window type="marquee" height="100" width="500" duration="10:00.5" version="1.2"> "Marquee"は文字が中央に、横スクロールするタイプです。背景色は白で、文字は黒。おまけにループします 。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(16)

14

テキストのサイズを+2にして、背景を黄色にしています

これは文字をブルーに、テキストサイズを+4に！

RealTextはフォントのサイズを自由に変えられますよ！！

-2 -1 +0 +1 +2 +3 +4 </window> ・ヘッダーパートここでは、type、duration、height、width などを指定しています。・ボディパートここでは、はじめに、日本語を使用するので、キャラクタセットを x-sjis に指定しています。次からは、フォントのサイズやカラーを指定しています。

2.5.4 Ticketape タイプ

tickertape タイプは marquee と同じくテキストが横にスクロールするタイプですが、テキストを<tu>…</tu>タグで上端に配置し、<tl>…<tl>タグで下端に配置することができます。・ ticker.rt この RealText ファイルは、文字が横に流れますが、魚の名前が上端に、値段が下端に表示されます。 ticker.rt

<window type="tickertape" duration="2:00" height="40" width="350" loop="true" version="1.2"> <tu>マグロ・各地</tu> <tl>2100</tl> <tu>ブリ・関西</tu> <tl>1155</tl> <tu>カキ・広島・三陸</tu> <tl>315</tl> <tu>ウニ・各地</tu> <tl>630</tl> <tu>干しサンマ・千葉・開き</tu> <tl>１枚・</tl> <tl>32</tl> </window> ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(17)

15

・ヘッダーパート

ここでは、type、duration、height、width などを指定しています。loop=”true”は再生継続時間の間、ボディ部分のテキストをループ表示します。・ボディパートここでは、はじめに、日本語を使用するので、キャラクタセットを x-sjis に指定しています。次からは、<tu>タグでテキストを上端に配置し、また、<tl>タグで下端に配置しています。

2.5.5 Scrollingnews タイプ

scrollingnews はテキストが縦にスクロールするタイプです。・ news.rt この RealText ファイルは、文字が縦にスクロールします。また、指定した時間で文字を表示させています。 news.rt

<window type="scrollingnews" duration="10" height="180" width="320" bgcolor="#99ccff" scrollrate="12" version=”1.2”> サバネコ新聞 1999年2月2日(月曜日) 主なニュース 長期金利急低下、一時1.85%まで下げた。 <time begin="1"/>オルカの大群が江ノ島沖に突如現れた。 鯵の干物品切れ続出。昨年から続くスッポンブームの影響か？ </window> ・ヘッダーパート

ここでは、 type 、 duration 、 height 、 width 、 bgcolor などを指定しています。 scrollrate=”12”は、テキストが 1 秒間に縦にスクロールするピクセル値です。指定しない場合は、デフォルトの 10 になります。・ボディパートここでは、はじめに、日本語を使用するので、キャラクタセットを x-sjis に指定しています。次からは、テキストにタグや<time begin=”…”>タグや、タグでテキストを修飾しています。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(18)

16 2.5.6 Teleprompter タイプ

teleprompter タイプは、テキストが表示されて、表示領域の下まで表示されたときに、1 行上にスクロールするタイプです。・ prompter.rt この RealText ファイルは、会話形式の文章を指定した時間で表示させます。また、表示領域の下まで表示されると 1 行上にスクロールします。 prompter.rt

<window type="teleprompter" height="60" width="320" duration="25" bgcolor="#99ff99" version=”1.2”> a君: 大変だ！大変だ！ <time begin="3.5"/> a君: 西の空に空飛ぶシマウマがぁ～。 <time begin="7"/> b君: 「なに？」 <time begin="8"/>そんなバカな！ <time begin="9"/> b君: あれは、ペンギンだろう。 <time begin="12"/> a君: おっかしいなぁ～ <time begin="15"/>確かに。。。。 <time begin="16"/> b君: よくあるって事よ。 <time begin="17.5"/>誰にでも <time begin="20"/>b君: 見間違いはあるからね。

<time begin="22"/> 二人: ぉぉ！あれは、まさしく。 </window> ・ヘッダーパートここでは、type、duration、bgcolor、height、width、bgcolor などを指定しています。・ボディパートここでは、はじめに、日本語を使用するので、キャラクタセットを x-sjis に指定しています。次からは、<time begin=”…”>タグでテキスト表示時間を指定しています。 [演習] 1) generic.rt の文字のキャラクタセットを us ascii にしてみましょう。 2) generic.rt の適当なテキストにリンクを張り、そのリンクをクリックしたときに http://www.jp.realnetworks.com/ を RealPlayer 10 のメディアブラウザーペインに表示するようにしてみましょう。target 属性を記述しなければメディアブラウザーペインに表示されます。 3) news.rt の縦方向のスクロール速度を、1 秒間に 2 ピクセルにしてみましょう。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(19)

17

3 SMIL ファイルの作成

この章では、SMIL を使ってマルチメディアプレゼンテーションを作成する方法について説明します。SMIL の基本的な構造、およびタグをサンプルを使い説明した後、演習を行います。

3.1 SMIL ファイルの構成

SMIL ファイルは、テキストファイルなので、テキストエディターを使用して作成、編集を行います。作成したファイルは.smi または.smil という拡張子をつけて保存します。次に SMIL ファイルの基本的な記述例を示します。この例では、RealVideo と RealText を SMIL で統合しています。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. basic.smil video.rm text.rt smil で統合

(20)

18

basic.smil

<root-layout backgroundColor="maroon" width="320" height="290"/>

</layout> </head> <body>

<par>

<video src="video.rm" region="video_region"/> <textstream src="text.rt" region="text_region"

dur="27.5s"/> </par> </body> </smil> SMIL ファイルを記述する基本的な約束事は以下の通りです。・ SMIL ファイルは<smil>と</smil>タグで全体を囲みます。・タグと属性は大文字・小文字を区別します。・属性の値は必ずダブルクォーテーション記号で囲みます。・コメントは HTML と同じようにで記述します。・終了タグが無いタグは<region../>のように必ずフォワードスラッシュでタグを閉じます。

3.1.1 SMIL2.0 タグおよび名前空間

SMIL ファイルは<smil>タグで始まり、</smil>タグで終了しますが、開始タグが <smil>だけの場合は、そのファイルは SMIL1.0 のファイルとなります。前述の例のように SMIL2.0 のファイルを記述するためには、<smil>タグに以下のように名前空間を記述する必要があります。 <smil xmlns=http://www.w3.org/2001/SMIL20/Language>

3.1.2 ヘッダーパート

SMIL のボディ部分は必要ですが、ヘッダーパートは必ずしも必要ではありません。ヘッダーパートは<head>と</head>タグで囲まれます。ヘッダーパートには、プレゼンテーションの情報、レイアウト定義、トランジション定義などのプレゼンテーション全体で使用される機能を記述します。この例では、プレゼンテーションの情報とレイアウトだけを記述しています。・メタ情報パートメタ情報を記述する<meta>タグには、タイトル、著者、コピーライト情報などを記述することができます。メタ情報パートレイアウトパートヘッダーパートボディパート ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(21)

19

はそれぞれ、タイトル、著者、コピーライト情報の指定です。これらの情報は RealPlayer 10 のステータスバーにも表示されますが、メニューの「ファイル -> クリッププロパティ -> クリップ情報を表示」を選択し、さらに「プレゼンテーション」タブで表示されます。または、ステータスバーに表示される情報をクリックしても、以下の画面が開きます。・レイアウトパートレイアウトパートは、<layout>タグと</layout>タグで囲み、この中にプレゼンテーションのレイアウトを記述します。レイアウトパートでは、始めにプレゼンテーション全体の大きさを<root-layout>タグで記述します。

<root-layout backgroundColor="maroon" width="320" height="290"/> この例では、プレゼンテーション全体の大きさを幅 320 ピクセル、高さ 290 ピクセルに指定しています。背景の色は backgroundColor 属性でマルーンに指定しています。色の指定は定義済みの 16 色あるいは、16 進数値で指定できます。次に、それぞれのクリップを表示する領域を<region/>タグで作成します。 <region id="video_region" top="0" left="0" width="320" height="240"/> <region id="text_region" top="240" left="0" width="320" height="50"/> この例では、表示領域全体を 2 つの領域に分けて、それぞれ video_region と text_region とういう ID をつけています。領域の指定は、表示領域全体の左上が (0,0)の起点になり、そこからの x 座標と y 座標のオフセット値を left と top 属性で指定します。幅と高さは width と height で指定します。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(22)

20 3.1.3 ボディパート

ボディパートは<body>と</body>タグで囲みます。ボディパートでは、ヘッダーのレイアウトパートで作成した各領域にクリップを割り当てる作業が必要になります。領域へのクリップの割り当ては、<video/>タグなどのクリップソースタグの region 属性で、その値に割り当てたい領域の id 値を指定します。また、この例の<par>…</par>はこの中にあるクリップを同時に再生するという意味です。<par>と</par>タグの間に、再生したいクリップのタグを記述します。 <video src="video.rm" region="video_region"/>

このタグは、RealVideo のソースを video.rm に指定し、このクリップを領域 video_region に割り当てています。

このタグは、RealText のソースを text.rt に指定し、このクリップを領域 text_region に割り当てています。また、dur=”27.5s”で再生時間を 27.5 秒に指定しています。クリップを割り当てるクリップソースタグは以下の種類があります。 <animation/> Flash(.swf)などのアニメーションクリップ <audio/> RealAudio(.rm)などのオーディオクリップ <brush/> 色のブロック <img/> JPEG(.jpg)、GIF(.gif)、PNG(.png)などの画像クリップ <ref/> RealPix(.rp)、Ram(.ram)などの各種クリップ <text/> 静的なテキストクリップ(.txt) <textstream/> RealText(.rt)などのストリーミングテキストクリップ <video/> RealVideo(.rm)などのビデオクリップクリップのグループ化をするタグには以下の種類があります。クリップをグループ化しない場合、すなわち、クリップソースタグを順番に記述しただけの場合は順番に再生されます。 <seq>…</seq> このタグで囲まれたクリップは、上から順番に再生されます。シーケンスグループと呼びます。 <par>…</par> このタグで囲まれたクリップは、同時に再生されます。パラレルグループと呼びます。 <excl>…</excl> このタグはエクスクルーシブグループと呼び、このタグ内のクリップは 1 度に再生するクリップは、1 つだけです。ただし、シーケンスグループと異なり、その再生順番は任意です。たとえば、ボタンをマウスクリップして再生するクリップを選択するなどの動作ができます。グループについては、次の章でさらに詳しく説明します。 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(23)

21

追加情報：ヘッダーパートの無い SMIL ファイル通常はヘッダーパート作成しますが、ヘッダーパートを記述しないことも可能です。たとえば、以下の SMIL はヘッダーを記述していませんが、正常に再生されます。この例では、ヘッダーパートのメタ情報パート、レイアウトパートがありません（<head>…</head>タグそのものが省略されています。ボディパートでは、3 つのクリップは順番に再生されます。 <smil smlns=”http://www.w3.org/2001/SMIL20/Language”> <body> <video src=”video1.rm”> <vdeo src=”video2.rm”> <video src=”video3.rm”> </body> </smil> ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(24)

22

4 コンテンツのレイアウトと時間

第 3 章では、基本的な SMIL のレイアウトとクリップの配置について簡単に記述しましたが、この章では、コンテンツのレイアウトおよび配置、さらには時間について、サンプルを見ながらさらに詳しく解説します。

4.1 ルートレイアウトと領域

コンテンツを領域に割り当てるためには、必ず 1 つのルートレイアウト領域が必要です。全ての再生領域は、ルートレイアウト領域の中に作成します。領域のサイズを指定しない場合は、ルートレイアウトと同じ大きさの領域が作成されます。領域は、ボディパートでクリップを割り当てるために、必ず id 属性でユニークな ID をつける必要があります。

4.1.1 領域の指定方法

以下の領域に RealText と RealVideo を表示されるレイアウトを考えます。このレイアウトを実現する方法は何通りかありますが、以下に 2 通りの例を示します。このプレゼンテーションの表示例は以下のようになります（layout_topleft.smil）。 layout_topleft.smil <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout>

<root-layout height="200" width="520" backgroundColor="black"/> <region id="news_region" width="240" height="180" left="10" top="10"/>

<region id="video_region" width="240" height="180" left="270" top="10"/> ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(25)

23

</layout>

</head> <body>

<par>

<video src="../clips/video2.rm" region="video_region" repeatCount=”3” fill="freeze"/> </par> </body> </smil> この例では、ルートレイアウト領域の大きさを幅 510 ピクセル、高さ 190 ピクセルに指定しています。背景は backgroundColor=”black”で黒に指定しています。 RealText を表示する new_region は幅 240、高さ 180 ピクセルに指定しています。また、RealVideo を表示する video_region は幅 240、高さ 180 ピクセルに指定しています。領域の原点からのオフセットは、縦方向が 10 ピクセルで、横方向がそれぞれ 10 ピクセルと 270 ピクセルに指定しています。クリップは、<par>タグで囲まれているので、同時に再生されます。fill=”freeze”とはクリップの再生が終了した時に、クリップを消すのではなく、そのまま表示しておくという意味です。また、repeatCount=”3”で 3 回再生を繰り返します。結果的に、3 回再生した後にクリップ画面をそのままに表示して停止します。次の例では、オフセットの指定を top、left ではなく bottom、right で指定します。 layout_bottomright.smil <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout>

<root-layout height="200" width="520" backgroundColor="black"/> <region id="news_region" width="240" height="180" left="10" top="10"/>

<par>

</par> </body> </smil>

この例では、news_region は left、top 属性を使用していますが、video_region は right、bottom 属性を使用して同じレイアウトを実現しています。領域のオフセットには以下の 4 つの属性が指定できます。・ left ルートレイアウトの左辺の境界からのオフセット値・ right ルートレイアウトの右辺の境界からのオフセット値・ top ルートレイアウトの上辺の境界からのオフセット値・ bottom ルートレイアウトの下辺の境界からのオフセット値 ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(26)

24

追加情報：領域の位置、サイズの指定領域の位置とサイズの指定には、次のようにパーセンテージ値を使用することも可能です。 width=”100%” left=”20%” 「%」記号をつけない場合は、ピクセル値になります。

4.1.2 領域の重ね合わせ

領域は z-index 属性を使用して、HTML のレイヤーのように重ね合わせることができます。以下の例は、ビデオの上にロゴを表示しています（layout_overlap.smi）。 layout_overlap.smil <smil xmlns="http://www.w3.org/2001/SMIL20/Language"> <head> <layout>

<root-layout width="320" height="240" backgroundColor="white"/> <region id="video_region" z-index="1"/>

<par>

<video src="../clips/video3.rm" region="video_region" fill="freeze"/> <img src="../clips/logo.gif" region="logo_region" dur="10s"

fill="freeze"/> </par> </body> </smil> ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(27)

25

この例では、logo_region の z-index 値が video_region の z-index 値より大きいので、logo_region が video_region の前面に表示されます。video_region は位置とサイズの属性が指定されいないので、ルートレイアウト領域と同じ大きさになります。 z-index 値は以下の値をとります。・負、0（ゼロ）、正の整数・値は連続している必要はありません。大きい値の領域が前面に表示されます。追加情報：サブ領域 z-index 属性による領域の重ね合わせと似たような機能として、サブ領域があります。サブ領域とは、領域内の領域で、メインの領域と同じくサブ領域にクリップを配置することができます。サブ領域の定義は、メインの領域と同じく <region/>タグで行いますが、以下のようにサブ領域を含む領域は<region/>タグが<region>…</region>に変化し、このタグの間にサブ領域を定義します。 <head> <layout>

<root-layout width=”350” height=”270”/> <layout>

<region id=”video_region” top=”15” left=”15” width=”320” height=”240”>  <region id=”logo” bottom=”5%” right=”5%” width=”20” height=”20”/>  </region> </layout> </head> サブ領域を使う利点は、第 7 章で説明するアニメーションで、領域を移動させた時などに、その領域内のサブ領域も相対的に移動するという点があげられます。サブ領域を使わない場合は、その相対位置を保つためには、個々の領域をアニメーションさせる必要があります。追加情報：レジストレーションポイントクリップは通常、領域の左上を基準にして配置されます。したがって、クリップのサイズより領域のサイズが大きい場合は、領域の残りの部分は、背景色で満たされます。クリップを領域の左上ではなく、任意のポイントに整列させたい場合は、レイアウトパートに<regPoint/>タグでレジストレーションポイントを作成し、このポイントにクリップのどこを（たとえば、真中、あるいは右下のコーナーなど）整列させるかという定義を記述します。さらにクリップソースタグ内では、整列させるレジストレーションポイントの ID を指定します。たとえば、以下の例では、領域の左から 1/2、上から 1/4 の位置にレジストレーションポイントを作成し、そのポイントにクリップの上辺の真中を整列させます。 <head> <layout> <root-layout…../> <region …./>

<regPoint id=”reg1” left=”50%” top=”25%” regAlign=”topMid”/> </layout> </head> <body> ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

(28)

26

<video src=”video.rm” regPoint=”reg1”…/> </body> また、領域のサイズとクリップのサイズが違うときに、クリップを領域に適合させる属性が fit 属性になります。fit=”fill”を使用すると、領域はクリップが拡大・縮小されて、クリップで満たされるようになります。この場合、クリップのアスペクト比は守られません。

4.2 クリップの透明度の変更

z-index で領域を重ね合わせたら、前面に表示されるクリップの透明度を変更してみます。以下の前述の例（layout_overlap.smil）を変更して、ロゴを半透明にしています（layout_overlap_opacity.smil）。 layout_overlap_opacity.smil <smil xmlns="http://www.w3.org/2001/SMIL20/Language" xmlns:rn="http://features.real.com/2001/SMIL20/Extensions"> <head> <layout>

<root-layout width="320" height="240" backgroundColor="white"/> <region id="video_region" z-index="1"/>

<par>

<video src="../clips/video3.rm" region="video_region" fill="freeze"/> <img src="../clips/logo.gif" rn:mediaOpacity="50%"

region="logo_region" dur="10s" fill="freeze"/> </par> </body> </smil> rn:mediaOpacity=”50%”でロゴ画像の透明度を半分にしています。この透明度の変更は SMIL2.0 の標準の機能ではなく、RealNetworks 社が独自に拡張した機能です。したがって、この属性を使用するためには、 <smil> タグに以下の RealNetworks 社の拡張名前空間を記述する必要があります。 xmlns:rn="http://features.real.com/2001/SMIL20/Extensions" ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ……….. ………..

RealPlayer SMIL コンテンツクリエーション

RealNetworks 教育コース