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

Transcription

1 RealNetworks 教 育 コース RealPlayer SMIL コンテンツクリエーション コース リアルネットワークス 株 式 会 社

2 本 テキストの 情 報 は 事 前 の 告 示 なしに 変 更 される 場 合 がありま 本 テキストの 例 に 使 用 されている 会 社 名 名 前 およびデータは 特 に 断 りがない 限 り 架 空 のものでリアルネットワークス 株 式 会 社 の 書 面 による 許 可 なく い かなる 方 法 いかなる 目 的 においても 本 テキストの 一 部 または 全 部 を 複 製 転 載 することを 禁 止 しま (c)リアルネットワークス 株 式 会 社 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 SMIL の 概 要 RealPlayer 10 で 再 生 できるコンテンツ SMIL とは SMIL1.0 と SMIL2.0 の 記 述 例 SMIL を 使 う 利 点 本 コースで 扱 う 内 容 について テキストの 表 示 RealText の 概 要 RealText の 構 成 ヘッダーパートの 解 説 ボディパートの 解 説 テキストの 表 示 時 刻 言 語 フォント 色 の 設 定 テキストのレイアウトと 外 観 RealText の 例 Genneric タイプ ハイパーリンクの 例 Marquee タイプ Ticketape タイプ Scrollingnews タイプ Teleprompter タイプ SMIL ファイルの 作 成 SMIL ファイルの 構 成 SMIL2.0 タグおよび 名 前 空 間 ヘッダーパート ボディパート コンテンツのレイアウトと 時 間 ルートレイアウトと 領 域 領 域 の 指 定 方 法 領 域 の 重 ね 合 わせ クリップの 透 明 度 の 変 更 要 素 の 時 間 指 定 クリップの 再 生 終 了 後 の 挙 動 要 素 のグループ 化 シーケンスグループの 例 パラレルグループの 例 エクスクルーシブグループ イベント イベントの 記 述 方 法 イベントの 種 類 スケジュールイベントの 例 トランジションエフェクト トランジションエフェクトの 例 トランジション 境 界 幅 の 設 定 トランジションの 繰 り 返 し

4 7 アニメーション アニメーションの 例 アニメーション 変 化 量 の 指 定 ハイパーリンク <a>タグでの 単 純 なリンク <area/>タグを 使 ったリンク 時 間 で 変 わるリンクの 例 ホットスポットリンクの 例 ストリーミングメディアへのリンク HTML ページへのリンク メディアブラウザーペインへのリンク 関 連 情 報 ペインに HTML ページを 開 く 方 法 自 動 的 に URL を 開 く 方 法 付 録 1:RealText タグリファレンス...61 付 録 2:SMIL2.0 タグリファレンス...67 付 録 3:トランジションの 種 類...83 履 歴 2004/07/06 version

5 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 互 換 で 文 字 修 飾 を 行 う 日 本 語 の 表 示 も 可 能 スクロール の 有 無 など 5 種 類 のタイプがある ファイル 拡 張 子 は.rt 作 成 方 法 は 第 2 章 で 説 明 いたしま Flash Macromedia Flash で 作 成 したベクトルベースのアニ メーション ファイル 拡 張 子 は.swf 作 成 方 法 は RealPlayer コンテンツクリエーションコース の 付 録 2 を 参 照 してください 静 止 画 像 GIF JPEG などの 静 止 画 像 でSMIL タグを 利 用 すると 様 々な 効 果 をかけられまSMIL タグを 使 ってエフェクトをかける 方 法 は 第 6 章 で 説 明 しま また 上 記 の 表 以 外 のメディアも 再 生 可 能 でRealPlayer 10 のメニューから ツール -> 環 境 設 定 -> コンテンツ -> メディアの 種 類 を 選 択 して RealPlayer 10 で 再 生 したいメディアにチェックを 入 れると そのメディアはデフォ ルトで RealPlayer 10 で 再 生 されま 3

6 1.2 SMIL とは 追 加 情 報 : 再 生 可 能 なコンテンツ 上 の 表 や 環 境 設 定 のメディアの 種 類 以 外 にも RealPlayer 10 にプラグインを 追 加 することによって 様 々なデータタイプを 再 生 することができま RealPlayer 10 の ツール -> アップデートをチェック をクリックすることで 以 下 のようなプラグインの 入 手 ページが 開 くので 必 要 に 応 じてダウンロードし てください World Wide Web Consortium(W3C)で 規 格 化 されている SMIL はマルチメディアコ ンテンツを 制 御 するための 標 準 マークアップ 言 語 でこの SMIL を 使 用 すること により 前 節 で 説 明 した RealMedia ファイル テキストファイル 静 止 画 ファイルな どを 組 み 合 わせて より 効 果 的 なプレゼンテーションを 作 成 することができま SMIL コンテンツの 概 念 図 静 止 画 エンコーダー.rt RealText ファイル.smil 音 声 RealMedia ファイル SMIL ファイル 映 像 RealMedia ファイル 4

7 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=" <head> <meta name="title" content="three Clips Played Side-by-Side"/> <meta name="author" content="realnetworks, Inc."/> <meta name="copyright" content="(c)2002 RealNetworks, Inc."/> <layout> <root-layout height="230" width="510" backgroundcolor="blue"/> <region id="news_region" width="240" height="180" left="5" top="5"/> <region id="video_region" width="240" height="180" right="5" top="5"/> <region id="ticker_region" width="500" height="30" left="5" bottom="5"/> </layout> </head> <body> <par endsync="news"> <textstream src="../realtext/news.rt" id= news region="news_region" fill="freeze"/> <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> 5

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

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

10 2 テキストの 表 示 この 章 では SMIL の 中 でテキストを 表 示 する RealText ファイルの 作 成 方 法 につ いて 説 明 しまRealText の 基 本 的 な 構 造 およびタグをサンプルを 使 い 説 明 し た 後 演 習 を 行 いま 2.1 RealText の 概 要 RealText は 1つのテキストファイルで 構 成 されまHTML 互 換 のテキストを 修 飾 するタグで 表 示 するテキストを 修 飾 しま 少 ないデータ 量 でビデオファイル や RealPix ファイルのキャプションなどに 利 用 できま Real Text File 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> <br/> メリーさんのひつじ <br/><time begin="5"/> 小 さいひつじ </center> </font> </window> ヘッダ ボディ RealText ファイルを 作 成 する 場 合 は 以 下 の 点 に 注 意 してください RealText タグと 属 性 は すべて 小 文 字 で 入 力 する 対 応 する 終 了 タグがない 場 合 は 終 端 を 表 すスラッシュ( / )で 閉 じる 属 性 値 は 必 ずダブルクォーテーション で 囲 む 必 要 がありま 特 に 指 定 がない 限 り タグ 名 に 続 く 属 性 の 順 番 は 関 係 ない <! This is a comment-->のように コメント 文 を 書 くことができる 8

11 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 このバージョンで 日 本 語 を 適 切 に 扱 えま 9

12 2.4 ボディパートの 解 説 ボディパートでは 再 生 領 域 に 実 際 に 表 示 される 文 字 を 記 述 しまその 文 字 に 対 して 表 示 時 刻 位 置 文 字 色 フォントなどのタグ 記 述 しまここでは 代 表 的 なタグを 解 説 しまその 他 のタグについては 付 録 1のRealTextタグリファ レンスを 参 照 してください テキストの 表 示 時 刻 <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 バイト)を 使 う RealText のデフォルトのキャラクタセットは US ASCII なので 日 本 語 を 使 用 する 場 合 には <font charset= x-sjis > という 指 定 が 必 要 でまた <window>タグに version= 1.2 の 記 述 も 必 要 で 注 意 :MAC 版 RealPlayer 10 で 日 本 語 を 正 しく 表 示 するには さらに face= Osaka の 指 定 も 必 要 で 文 字 サイズの 設 定 文 字 のサイズは <font size= 2 > </font> タグで 指 定 しま 文 字 サイズの 指 定 とフォントのポイント 数 は 以 下 のようになりま 相 対 サイズ 絶 対 サイズ ポイント 数 point point +0(デフォルト) 3 16point point point point point 文 字 の 色 の 設 定 文 字 の 色 は <font color= blue > </font> タグで 指 定 しま RealText では HTML で 表 示 可 能 なすべての 色 をサポートしていま 文 字 の 色 10

13 は 定 義 済 みのカラー 名 か 16 進 法 数 値 で 指 定 してください ただし ticketape タイプでは<tu>と<tl>タグで 指 定 を 行 いま 各 色 の 16 進 法 数 値 は 以 下 の 通 りで white #ffffff black # silver #c0c0c0 yellow #ffff00 fuschia #ff00ff red #ff0000 lime #00ff00 olive # green # aqua #00ffff teal # blue #0000ff navy # purple # maroon # gray # テキストのレイアウトと 外 観 以 下 のタグは RealText のテキストのレイアウトと 外 観 を 設 定 しまこれらの 多 くのタグは HTML のタグと 同 様 の 機 能 を 持 ちま <br/>タグ このタグの 後 のテキストは 改 行 されて 次 の 行 から 表 示 されまtickertape と marquee ウィンドウでは テキストはウィンドウの 右 端 に 表 示 され 移 動 しま <center> </cente>タグ このタグで 囲 まれたテキストは 中 央 揃 えで 表 示 されまtickertape や marquee ウィンドウでは 影 響 しません 2.5 RealText の 例 ここでは 具 体 的 な RealText の 例 を 紹 介 しま Genneric タイプ generic タイプは 表 示 領 域 に 単 にテキストを 表 示 するタイプで generic.rt この RealText ファイルは 再 生 領 域 に 指 定 した 時 間 に 沿 って 文 字 を 表 示 しま 11

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

15 generic1.rt <window type="generic" height="100" width="320" duration="20" bgcolor="yellow" version="1.2"> <font charset="x-sjis"> くらげの 旅 立 ち <br/><br/><time begin="3"/>むかしむかしあるところに <br/><time begin="6"/>おじいさんと おばあさんくらげが <br/><time begin="9"/> 静 かにくらしていました <br/><time begin="12"/><clear/>ある 夏 のあさに 海 の 方 から <br/><time begin="15"/>おばあさんの 声 が 聞 こえてきました <br/><time begin="18"/><a href="generic2.rt" target="_player"> 続 く </a> </font> </window> generic2.rt <window type="generic" height="100" width="320" duration="12" bgcolor="yellow" version="1.2"> <font charset="x-sjis"> おじいさ~ん! <br/><time begin="3"/> こっちさ 来 て~ <br/><time begin="6"/>おじいさんが 急 いで 行 くと <br/><time begin="9"/>かわいいミズクラゲがいました </font> </window> <a href="generic2.rt" target="_player"> 続 く </a> がハイパーリンクの 指 定 でリンク 先 が RealText なので RealPlayer 10 でリン ク 先 を 再 生 するために target 属 性 に_player を 指 定 していまtarget 属 性 を 指 定 しないか あるいは target= _browser と 記 述 すると Web ブラウザーにリンク 先 を 開 きま Marquee タイプ marquee タイプはテキストが 横 にスクロールするタイプでテキストは 表 示 領 域 の 上 下 の 真 中 に 配 置 されま marquee.rt この RealText ファイルは テキストが 横 に 流 れますが 流 れる 文 字 のサイズやカ ラーを 変 えていま marquee.rt <window type="marquee" height="100" width="500" duration="10:00.5" version="1.2"> <font charset="x-sjis"> "Marquee"は 文 字 が 中 央 に 横 スクロールする タイプで 背 景 色 は 白 で 文 字 は 黒 おまけに<u>ループします </u> 13

16 <font size="+2" bgcolor="yellow">テキストのサイズを+2にして 背 景 を 黄 色 にしています</font> <font color="blue" size="+4">これは 文 字 をブルーに テキストサ イズを+4に!</font> RealTextはフォントのサイズを 自 由 に 変 えられます よ!! <font size="-2">-2 <font size="-1">-1 </font></font>+0 <font size="+1">+1 <font size="+2">+2 <font size="+3">+3 <font size="+4">+4</font></font></font></font> </font> </window> ヘッダーパート ここでは type duration height width などを 指 定 していま ボディパート ここでは はじめに 日 本 語 を 使 用 するので キャラクタセットを x-sjis に 指 定 し ていま 次 からは フォントのサイズやカラーを 指 定 していま 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"> <font charset="x-sjis"> <br/><b> <tu>マグロ 各 地 </tu> <tl>2100</tl> <tu>ブリ 関 西 </tu> <tl>1155</tl> <tu>カキ 広 島 三 陸 </tu> <tl>315</tl> <tu>ウニ 各 地 </tu> <tl>630</tl> <tu> 干 しサンマ 千 葉 開 き</tu> <tl>1 枚 </tl> <tl>32</tl> </b> </font> </window> 14

17 ヘッダーパート ここでは type duration height width などを 指 定 していまloop= true は 再 生 継 続 時 間 の 間 ボディ 部 分 のテキストをループ 表 示 しま ボディパート ここでは はじめに 日 本 語 を 使 用 するので キャラクタセットを x-sjis に 指 定 し ていま 次 からは <tu>タグでテキストを 上 端 に 配 置 し また <tl>タグで 下 端 に 配 置 して いま Scrollingnews タイプ scrollingnews はテキストが 縦 にスクロールするタイプで news.rt この RealText ファイルは 文 字 が 縦 にスクロールしままた 指 定 した 時 間 で 文 字 を 表 示 させていま news.rt <window type="scrollingnews" duration="10" height="180" width="320" bgcolor="#99ccff" scrollrate="12" version= 1.2 > <font charset="x-sjis"> <br/><br/>サバネコ 新 聞 1999 年 2 月 2 日 ( 月 曜 日 ) <br/><b><u> 主 なニュース</u></b> <p> 長 期 金 利 急 低 下 一 時 1.85%まで 下 げた </p><time begin="1"/>オルカの 大 群 が 江 ノ 島 沖 に 突 如 現 れた <p> 鯵 の 干 物 品 切 れ 続 出 昨 年 から 続 くスッポンブームの 影 響 か? </p> </font> </window> ヘッダーパート こ こ で は type duration height width bgcolor な ど を 指 定 し て い ま す scrollrate= 12 は テキストが 1 秒 間 に 縦 にスクロールするピクセル 値 で 指 定 しない 場 合 は デフォルトの 10 になりま ボディパート ここでは はじめに 日 本 語 を 使 用 するので キャラクタセットを x-sjis に 指 定 し ていま 次 からは テキストに<b>タグや<time begin= >タグや <p>タグでテキストを 修 飾 していま 15

18 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 > <font charset="x-sjis"> a 君 : 大 変 だ! 大 変 だ! <time begin="3.5"/><br/>a 君 : 西 の 空 に 空 飛 ぶシマウマがぁ~ <time begin="7"/><br/>b 君 : なに? <time begin="8"/>そんなバカな! <time begin="9"/><br/>b 君 : あれは ペンギンだろう <time begin="12"/><br/>a 君 : おっかしいなぁ~ <time begin="15"/> 確 かに <time begin="16"/><br/>b 君 : よくあるって 事 よ <time begin="17.5"/> 誰 にでも<br/> <time begin="20"/>b 君 : 見 間 違 いはあるからね <time begin="22"/><font color="red"><br/> 二 人 : ぉぉ!あれは まさしく </font></font> </window> ヘッダーパート ここでは type duration bgcolor height width bgcolor などを 指 定 していま ボディパート ここでは はじめに 日 本 語 を 使 用 するので キャラクタセットを x-sjis に 指 定 し ていま 次 からは <time begin= >タグでテキスト 表 示 時 間 を 指 定 していま [ 演 習 ] 1) generic.rt の 文 字 のキャラクタセットを us ascii にしてみましょう 2) generic.rt の 適 当 なテキストにリンクを 張 り そのリンクをクリックしたときに を RealPlayer 10 のメディアブラウザーペ インに 表 示 するようにしてみましょう target 属 性 を 記 述 しなければメディア ブラウザーペインに 表 示 されま 3) news.rt の 縦 方 向 のスクロール 速 度 を 1 秒 間 に 2 ピクセルにしてみましょ う 16

19 3 SMIL ファイルの 作 成 この 章 では SMIL を 使 ってマルチメディアプレゼンテーションを 作 成 する 方 法 に ついて 説 明 しまSMIL の 基 本 的 な 構 造 およびタグをサンプルを 使 い 説 明 し た 後 演 習 を 行 いま 3.1 SMIL ファイルの 構 成 SMIL ファイルは テキストファイルなので テキストエディターを 使 用 して 作 成 編 集 を 行 いま 作 成 したファイルは.smi または.smil という 拡 張 子 をつけて 保 存 しま 次 に SMIL ファイルの 基 本 的 な 記 述 例 を 示 しまこの 例 では RealVideo と RealText を SMIL で 統 合 していま video.rm smil で 統 合 basic.smil text.rt 17

20 basic.smil <smil xmlns=" <head> <meta name="title" content="sample smil file"/> <meta name="author" content="realnetworks"/> <meta name="copyright" content="(c)2002"/> <layout> <root-layout backgroundcolor="maroon" width="320" height="290"/> <region id="video_region" top="0" left="0" width="320" height="240"/> <region id="text_region" top="240" left="0" width="320" height="50"/> </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../>のように 必 ずフォワードスラッシュでタグを 閉 じま SMIL2.0 タグおよび 名 前 空 間 SMIL ファイルは<smil>タグで 始 まり </smil>タグで 終 了 しますが 開 始 タグが <smil>だけの 場 合 は そのファイルは SMIL1.0 のファイルとなりま 前 述 の 例 のように SMIL2.0 のファイルを 記 述 するためには <smil>タグに 以 下 のように 名 前 空 間 を 記 述 する 必 要 がありま <smil xmlns= ヘッダーパート メ タ 情 報 パ ー ト レ イ ア ウ ト パ ー ト ヘ ッ ダ ー パ ー ト SMIL のボディ 部 分 は 必 要 ですが ヘッダーパートは 必 ずしも 必 要 ではありませ ん ヘッダーパートは<head>と</head>タグで 囲 まれま ヘッダーパートには プレゼンテーションの 情 報 レイアウト 定 義 トランジション 定 義 などのプレゼンテーション 全 体 で 使 用 される 機 能 を 記 述 しまこの 例 では プレゼンテーションの 情 報 とレイアウトだけを 記 述 していま メタ 情 報 パート メタ 情 報 を 記 述 する<meta>タグには タイトル 著 者 コピーライト 情 報 などを 記 述 することができま ボ デ ィ パ ー ト 18

21 <meta name="title" content="sample smil file"/> <meta name="author" content="realnetworks"/> <meta name="copyright" content="(c)2002"/> はそれぞれ タイトル 著 者 コピーライト 情 報 の 指 定 でこれらの 情 報 は 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 で 指 定 しま 19

22 3.1.3 ボディパート ボディパートは<body>と</body>タグで 囲 みまボディパートでは ヘッダーの レイアウトパートで 作 成 した 各 領 域 にクリップを 割 り 当 てる 作 業 が 必 要 になりま 領 域 へのクリップの 割 り 当 ては <video/>タグなどのクリップソースタグの region 属 性 で その 値 に 割 り 当 てたい 領 域 の id 値 を 指 定 しま また この 例 の<par> </par>はこの 中 にあるクリップを 同 時 に 再 生 するという 意 味 で<par>と</par>タグの 間 に 再 生 したいクリップのタグを 記 述 しま <video src="video.rm" region="video_region"/> このタグは RealVideo のソースを video.rm に 指 定 し このクリップを 領 域 video_region に 割 り 当 てていま <textstream src="text.rt" region="text_region" dur="27.5s"/> このタグは 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 つだけ でただし シーケンスグループと 異 なり その 再 生 順 番 は 任 意 でたとえば ボタンをマウスクリップし て 再 生 するクリップを 選 択 するなどの 動 作 ができま グループについては 次 の 章 でさらに 詳 しく 説 明 しま 20

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

24 4 コンテンツのレイアウトと 時 間 第 3 章 では 基 本 的 な SMIL のレイアウトとクリップの 配 置 について 簡 単 に 記 述 し ましたが この 章 では コンテンツのレイアウトおよび 配 置 さらには 時 間 につい て サンプルを 見 ながらさらに 詳 しく 解 説 しま 4.1 ルートレイアウトと 領 域 コンテンツを 領 域 に 割 り 当 てるためには 必 ず 1 つのルートレイアウト 領 域 が 必 要 で 全 ての 再 生 領 域 は ルートレイアウト 領 域 の 中 に 作 成 しま 領 域 のサ イズを 指 定 しない 場 合 は ルートレイアウトと 同 じ 大 きさの 領 域 が 作 成 されま 領 域 は ボディパートでクリップを 割 り 当 てるために 必 ず id 属 性 でユニークな ID をつける 必 要 がありま 領 域 の 指 定 方 法 以 下 の 領 域 に RealText と RealVideo を 表 示 されるレイアウトを 考 えまこのレ イアウトを 実 現 する 方 法 は 何 通 りかありますが 以 下 に 2 通 りの 例 を 示 しま このプレゼンテーションの 表 示 例 は 以 下 のようになります(layout_topleft.smil) layout_topleft.smil <smil xmlns=" <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"/> 22

25 </layout> </head> <body> <par> <textstream src="../realtext/news.rt" region="news_region" fill="freeze"/> <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=" <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" right="10" bottom="10"/> </layout> </head> <body> <par> <textstream src="../realtext/news.rt" region="news_region" fill="freeze"/> <video src="../clips/video2.rm" region="video_region" repeatcount="3" fill="freeze"/> </par> </body> </smil> この 例 では news_region は left top 属 性 を 使 用 していますが video_region は right bottom 属 性 を 使 用 して 同 じレイアウトを 実 現 していま 領 域 のオフセットには 以 下 の 4 つの 属 性 が 指 定 できま left ルートレイアウトの 左 辺 の 境 界 からのオフセット 値 right ルートレイアウトの 右 辺 の 境 界 からのオフセット 値 top ルートレイアウトの 上 辺 の 境 界 からのオフセット 値 bottom ルートレイアウトの 下 辺 の 境 界 からのオフセット 値 23

26 追 加 情 報 : 領 域 の 位 置 サイズの 指 定 領 域 の 位 置 とサイズの 指 定 には 次 のようにパーセンテージ 値 を 使 用 すること も 可 能 で width= 100% left= 20% % 記 号 をつけない 場 合 は ピクセル 値 になりま 領 域 の 重 ね 合 わせ 領 域 は z-index 属 性 を 使 用 して HTML のレイヤーのように 重 ね 合 わせることが できま 以 下 の 例 は ビデオの 上 にロゴを 表 示 しています(layout_overlap.smi) layout_overlap.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="white"/> <region id="video_region" z-index="1"/> <region id="logo_region" bottom="5%" right="5%" width="58" height="49" z-index="2"/> </layout> </head> <body> <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> 24

27 この 例 では 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> 25

28 <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=" xmlns:rn=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="white"/> <region id="video_region" z-index="1"/> <region id="logo_region" bottom="5%" right="5%" width="58" height="49" z-index="2"/> </layout> </head> <body> <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=" 26

29 mediaopacity 属 性 の 値 は 0%が 完 全 に 透 明 で 100%が 完 全 に 不 透 明 になりま 追 加 情 報 : 拡 張 名 前 空 間 拡 張 名 前 空 間 についているプレフィックス rn は 拡 張 機 能 を 識 別 するプレフィッ クスでこのプレフィックスで 拡 張 機 能 と 名 前 空 間 を 結 び 付 けままた このプ レフィックスはユーザーが 定 義 できましたがって かならずしも rn を 使 用 す る 必 要 はありません 4.3 要 素 の 時 間 指 定 SMIL と HTML の 大 きな 違 いは SMIL には 時 間 の 概 念 があるということでこ こでは クリップソースタグ 内 に 記 述 している dur などの 時 間 を 指 定 する 属 性 に ついて 説 明 しまこの 時 間 指 定 をしない 場 合 は プレゼンテーションが 開 始 す ると すぐに 要 素 が 開 始 しままた その 再 生 継 続 時 間 はクリップの 内 部 時 間 になりまこの 時 間 指 定 属 性 は クリップだけではなく グループにも 適 用 でき ましたがって ここでは 要 素 という 用 語 を 使 用 しま 基 本 的 な 時 間 指 定 に は 以 下 の 5 つの 属 性 が 使 用 できま begin end dur clipbegin clipend プレゼンテーションのタイムライン 内 で 要 素 の 開 始 時 間 を 指 定 しま プレゼンテーションのタイムライン 内 で 要 素 の 終 了 時 間 を 指 定 しま 要 素 が 再 生 開 始 してからの 再 生 継 続 時 間 を 指 定 しま クリップ 内 部 の 開 始 時 間 を 指 定 しま クリップ 内 部 の 終 了 時 間 を 指 定 しま 注 意 : 画 像 などの 内 部 時 間 を 持 たないクリップには 必 ず 再 生 継 続 時 間 を 指 定 す る 必 要 がありま 例 えば 前 述 の 例 の <img src="../clips/logo.gif" rn:mediaopacity="50%" region="logo_region" dur="10s" fill="freeze"/> では logo.gif は 内 部 時 間 を 持 たない GIF 画 像 なので 必 ず dur= 10s などの 再 生 継 続 時 間 を 指 定 する 必 要 がありま 時 間 値 の 指 定 には dur= 20s などの 省 略 形 と hh:mm:ss.xy 形 式 の 標 準 形 が 使 用 できま 省 略 形 では 以 下 の 4 つが 使 用 できま h 時 を 表 しま min 分 を 表 しま s 秒 を 表 しま ms ミリ 秒 を 表 しま また 標 準 形 では ss フィールドのみが 必 須 で それそれの 意 味 は 以 下 のように なりま hh 時 を 表 しま mm 分 を 表 しま ss 秒 を 表 しま x 1/10 秒 を 表 しま y 1/100 秒 を 表 しま 例 えば 1 時 間 30 分 を 指 定 するには 以 下 の 方 法 がありま dur= 90min ( 省 略 形 ) dur= 1.5h ( 省 略 形 ) dur= 1:30:00.0 ( 標 準 形 ) dur= 90:00 ( 標 準 形 ) dur= 5400 ( 標 準 形 ) 27

30 前 述 の laypout_overlap_opacity.smil を 変 更 してでロゴの 表 示 時 間 を 5 秒 遅 らせ てみま layout_overlap_5laterlogo.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="white"/> <region id="video_region" z-index="1"/> <region id="logo_region" bottom="5%" right="5%" width="58" height="49" z-index="2"/> </layout> </head> <body> <par> <video src="../clips/video3.rm" region="video_region" fill="freeze"/> <img src="../clips/logo.gif" region="logo_region" begin="5s" dur="10s" fill="freeze"/> </par> </body> </smil> <img./>タグの begin= 5s でロゴの 表 示 が 5 秒 後 からになりま 次 に layout_overlap.smil を 変 更 して ビデオをその 始 めから 再 生 するのではなく 内 部 の 10 秒 後 から 表 示 してみま layout_overlap_10after.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="white"/> <region id="video_region" z-index="1"/> <region id="logo_region" bottom="5%" right="5%" width="58" height="49" z-index="2"/> </layout> </head> <body> <par> <video src="../clips/video3.rm" region="video_region" clipbegin="10s" fill="freeze"/> <img src="../clips/logo.gif region="logo_region" dur="10s" fill="freeze"/> </par> </body> </smil> clipbegin= 10s でビデオはその 初 めからではなく 内 部 の 10 秒 後 から 再 生 され ま クリップの 再 生 終 了 後 の 挙 動 クリップソースタグに 記 述 している fill 属 性 は クリップの 再 生 終 了 後 のクリップの 挙 動 を 定 義 しまfill 属 性 を 記 述 しない 場 合 は クリップは 再 生 終 了 後 に 画 面 28

31 から 消 えまこれは fill= remove と 明 示 的 に 記 述 した 場 合 と 同 じになりま fill 属 性 は 次 に 説 明 するグループタグにも 記 述 することができまfill 属 性 の 値 には 以 下 の 値 を 取 ることができま freeze hold remove transition 4.4 要 素 のグループ 化 要 素 が 終 了 した 時 に 要 素 の 表 示 をそのままに 保 ちま グループが 終 了 するまで 要 素 の 表 示 をそのままに 保 ちま 要 素 が 終 了 した 時 に 要 素 を 画 面 から 消 しま トランジションエフェクトが 起 こっている 間 クリップの 表 示 をそのままに 保 ちまこれはクリップだけに 適 用 で きま 詳 しくは 6 章 のトランジションエフェクトで 説 明 し ま 3 章 では 要 素 をグループ 化 するタグについて 簡 単 に 説 明 しましたが ここでは さらに 詳 細 にグループ 化 を 説 明 しま シーケンスグループの 例 シーケンスグループは<seq> </seq>タグで 囲 まれ このタグ 内 の 要 素 を 上 から 順 番 に 再 生 しま 以 下 の 例 は 3 つのビデオクリップを 順 番 に 再 生 しま group_sequece.smil の 再 生 例 group_seqence.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="black"/> <region id="video_region" left="40" top="30" width="240" height="180" fit="fill"/> </layout> </head> <body> <seq> <video src="../clips/video1.rm" region="video_region"/> <video src="../clips/video2.rm" region="video_region"/> <video src="../clips/video3.rm" region="video_region"/> </seq> 29

32 </body> </smil> この 例 では 各 video1.rm video2.rm video3.rm のサイズがそれぞれ 異 なるの で <region />タグの fit= fill で 領 域 のサイズに 適 合 するようにしていま パラレルグループの 例 パラレルグループは <par> </par>タグで 囲 まれ このタグで 囲 まれた 要 素 を 同 時 に 再 生 しまパラレルグループの 例 は 前 節 で 説 明 していますので ここ では グループのグループ 化 を 説 明 しま 以 下 の 例 は シーケンスグループ の 3 番 目 の 要 素 がパラレルグループになっていまこのようにグループは 入 れ 子 にすることができま group_sequence_para.smil の 再 生 例 group_sequence_para.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="black"/> <region id="video_region" left="40" top="30" width="240" height="180" fit="fill" z-index="1"/> <region id="logo_region" right="5%" bottom="5%" width="58" height="49" z-index="2"/> </layout> </head> <body> <seq> <video src="../clips/video1.rm" region="video_region"/> <video src="../clips/video2.rm" region="video_region"/> <par> <video src="../clips/video3.rm" region="video_region"/> <img src="../clips/logo.gif" dur="10s" region="logo_region" fill="freeze"/> </par> </seq> </body> </smil> 30

33 追 加 情 報 :シーケンスグループでのバッファリング 例 えば 以 下 のように 単 純 に <seq> <video src= video1.rm /> <video src= video2.rm /> </seq> としてシーケンスグループを 作 成 した 場 合 SMIL1.0 では video1.rm の 再 生 が 終 了 してから video2.rm を 再 生 開 始 の 間 にバッファリングが 起 こりまこれを 避 けるためには 以 下 のようにシーケンスグループ 自 体 をパラレルグループに 入 れま <!--SMIL1.0 でのバッファリングを 避 ける 記 述 -- > <par> <seq> <video src= video1.rm /> <video src= video2.rm /> </seq> </par> しかし SMIL2.0 では このようにグループを 入 れ 子 にしなくても バッファリング は 起 こりません 31

34 4.4.3 エクスクルーシブグループ エクスクルーシブグループは<excl> <excl>タグで 囲 まれ このタグで 囲 まれた 要 素 は 1 度 に 1 つの 要 素 しか 再 生 しません シーケンスグループも 1 度 に 1 つ の 要 素 しか 再 生 しませんが シーケンスグループの 場 合 は 要 素 は 予 め 決 めら れた 順 番 (<seq> </seq>タグの 間 の 最 初 の 要 素 から 最 後 の 要 素 )で 再 生 され まこれに 対 して エクスクルーシブグループでは 再 生 の 順 番 は 決 まってい ないので 例 えばユーザーがマウスでボタン 画 像 をクリックした 時 に 選 択 した ビデオが 再 生 されるようなプレゼンテーションが 作 成 できま 以 下 の 例 では プレゼンテーションを 再 生 したばかりの 状 態 ではビデオは 表 示 さ れません ユーザーがボタン 1 ボタン 2 ボタン 3 のどれかをクリックすると ビ デオが 再 生 されます(group_excl.smil) 再 生 したばかりの 状 態 ボタン 1 を 押 した 場 合 ボタン 2 を 押 した 場 合 ボタン 3 を 押 した 場 合 group_excl.smil <smil xmlns=" <head> <layout> <root-layout width="384" height="240" backgroundcolor="black"/> <region id="video_region" width="240" height="180" top="30" 32

35 left="40" fit="fill"/> <region id="button_region1" height="64" width="64" top="8" left="300"/> <region id="button_region2" height="64" width="64" top="88" left="300"/> <region id="button_region3" height="64" width="64" top="168" left="300"/> </layout> </head> <body> <par> <img src="../clips/number1.png" id="button1" region="button_region1" dur="10s" fill="hold"/> <img src="../clips/number2.png" id="button2" region="button_region2" dur="10s" fill="hold"/> <img src="../clips/number3.png" id="button3" region="button_region3" dur="10s" fill="hold"/> <excl dur="indefinite"> <video src="../clips/video1.rm" begin="button1.activateevent" region="video_region" fill="remove"/> <video src="../clips/video2.rm" begin="button2.activateevent" region="video_region" fill="remove"/> <video src="../clips/video3.rm" begin="button3.activateevent" region="video_region" fill="remove"/> </excl> </par> </body> </smil> この 例 では レイアウトパートで 1 つのビデオ 表 示 領 域 (video_region)と 3 つの ボタン 画 像 領 域 (button_region1 button_region2 button_region3)を 作 成 してい まボディパートでは 2 つのボタン 画 像 と 1 つのエクスクルーシブグループを <par> </par>タグで 囲 み 同 時 再 生 しまボタン 画 像 は パラレルグループが 終 了 するまで 表 示 を 続 けるように fill= hold 属 性 を 使 用 していまさらに 各 ボ タン 画 像 にはユニークな id をつけています(button1 button2 button3) エクスクルーシブグループは dur= indefinite によって 再 生 時 間 は 無 限 すな わち 常 にアクティブな 状 態 にしておきまエクスクルーシブ 内 の 各 ビデオクリ ップの 開 始 時 間 は begin= ボタン ID.activateEvent を 指 定 することで ボタン 画 像 がクリックされた 時 に 再 生 を 開 始 しままた 再 生 が 終 了 したら fill= remove でビデオクリップは 非 表 示 になりまビデオの 開 始 時 間 をマウス クリックでインタラクティブに 設 定 する 方 法 は 次 の 第 5 章 で 説 明 しま 33

36 5 イベント この 章 では イベントについて 説 明 しまイベントが 発 生 することによって 要 素 を 開 始 または 停 止 することができましたがって イベントはイベントを 起 こ す 要 素 とイベントを 受 け 取 る 要 素 の 2 つの 要 素 から 構 成 されま 5.1 イベントの 記 述 方 法 前 述 の group_excl.smil の 例 では イベントを 起 こす 要 素 は 各 ボタン 画 像 で イベ ントを 受 け 取 る 要 素 は 各 ビデオクリップになりまイベントを 起 こす 要 素 には 以 下 のように ID を 記 述 する 必 要 がありま <img src="../clips/number1.png" id="button1" region="button_region1" dur="10s" fill="hold"/> また イベントを 受 け 取 る 要 素 には その 開 始 時 間 (begin 値 )あるいは 終 了 時 間 (end 値 )にイベントを 起 こす 要 素 の IDとイベントの 種 類 を ドット でつないで 記 述 しま 前 述 の 例 では 以 下 のようになりま <video src="../clips/video1.rm" begin="button1.activateevent" region="video_region" fill="remove"/> この 例 では 開 始 時 間 (begin 値 )は ID が button1 という 要 素 がマウスクリックされ たらという 指 定 になりま 5.2 イベントの 種 類 イベントには マウスクリックのようなインタラクティブイベントとある 要 素 が 開 始 した 時 にイベントを 起 こすようなスケジュールイベントがありま 代 表 的 なイベ ントの 種 類 には 以 下 のようなものがあります(その 他 のイベントについては 付 録 の SMIL タグリファレンスを 参 照 してください) ID.activateEvent インタラクティブ マウスクリックでイベント 発 生 ID.begin スケジュール 要 素 の 開 始 でイベント 発 生 ID.end スケジュール 要 素 の 終 了 でイベント 発 生 ID.inBoundsEvent インタラクティブ マウスオーバーでイベント 発 生 ID.outOfBoundsEvent インタラクティブ マウスが 外 れた 時 にイベント 発 生 [ 演 習 ] ここでは 前 述 の group_excl.smil を 変 更 して マウスクリックではなく マウスオ ーバーでビデオクリップを 切 り 替 えるように 変 更 してみてください group_excl_over.smil <smil xmlns=" <head> <layout> <root-layout width="384" height="240" backgroundcolor="black"/> <region id="video_region" width="240" height="180" top="30" left="40" fit="fill"/> <region id="button_region1" height="64" width="64" top="8" left="300"/> <region id="button_region2" height="64" width="64" top="88" left="300"/> <region id="button_region3" height="64" width="64" top="168" left="300"/> 34

37 </layout> </head> <body> <par> <img src="../clips/number1.png" id="button1" region="button_region1" dur="10s" fill="hold"/> <img src="../clips/number2.png" id="button2" region="button_region2" dur="10s" fill="hold"/> <img src="../clips/number3.png" id="button3" region="button_region3" dur="10s" fill="hold"/> <excl dur="indefinite"> <video src="../clips/video1.rm" begin="button1.inboundsevent" region="video_region" fill="remove"/> <video src="../clips/video2.rm" begin="button2.inboundsevent" region="video_region" fill="remove"/> <video src="../clips/video3.rm" begin="button3.inboundsevent" region="video_region" fill="remove"/> </excl> </par> </body> </smil> マウスオーバーでイベントを 発 生 させるために 各 ビデオクリップの begin 値 には button1.inboundsevent などを 記 述 しま 5.3 スケジュールイベントの 例 次 にスケジュールイベントの 例 として 各 ビデオが 順 番 に 再 生 され 各 ビデオが 再 生 されている 時 に の 画 像 を 表 示 する 例 を 以 下 に 示 しま group_excl_schedule.smil <smil xmlns=" <head> <layout> <root-layout width="384" height="240" backgroundcolor="black"/> <region id="video_region" width="240" height="180" top="30" left="40" fit="fill"/> <region id="button_region1" height="64" width="64" top="8" left="300"/> <region id="button_region2" height="64" width="64" top="88" left="300"/> <region id="button_region3" height="64" width="64" top="168" left="300"/> </layout> </head> <body> <par> <excl end="video3.end"> <img src="../clips/number1.png" begin="video1.begin" end="video1.end" region="button_region1" fill="remove"/> <img src="../clips/number2.png" begin="video2.begin" end="video2.end" region="button_region2" fill="remove"/> <img src="../clips/number3.png" begin="video3.begin" end="video3.end" region="button_region3" fill="remove"/> 35

38 </excl> <seq> <video src="../clips/video1.rm" id="video1" region="video_region" fill="remove"/> <video src="../clips/video2.rm" id="video2" region="video_region" fill="remove"/> <video src="../clips/video3.rm" id="video3" region="video_region" fill="remove"/> </seq> </par> </body> </smil> この 例 では 各 ビデオは 順 番 に 再 生 されるので <seq> </seq>タグで 囲 みシー ケンスグループ 内 に 配 置 しままた 各 ビデオの ID をそれぞれ video1 video2 video3 とし イベントを 起 こす 要 素 としての ID を 設 定 しま 各 画 像 は 3 つのうち どれかが 再 生 されるので<excl> </excl>タグで 囲 みエク スクルーシブグループに 配 置 しまこのシーケンスグループとエクスクルーシ ブグループを 同 時 再 生 させるので <par> </par>タグで 囲 みま 各 画 像 は それぞれのビデオが 再 生 開 始 されると 表 示 されるので その 開 始 時 間 begin 値 は ビデオの ID.begin となりままた 表 示 終 了 時 間 は ビデオの ID.end となりま 最 後 に エクスクルーシブグループも video3 が 終 了 した 時 に 終 了 するので end= video3.end を 記 述 しま 注 意 : 上 の 例 でビデオ 1(video1.rm)が 再 生 開 始 したときに ボタン 1 の 画 像 (number1.png)が 表 示 されない 場 合 がありまこれは SMIL の 開 始 と 同 時 にビ デオ 1 が 再 生 開 始 され さらにボタン 1 を 表 示 させるイベントが 重 なって 起 こるた め RealPlayer 10 がイベントを 受 け 取 れないためと 思 われまこれを 回 避 する には 以 下 の 追 加 情 報 で 述 べている 方 法 で ボタン 1 の 再 生 開 始 を 0.1 秒 だけ 遅 らせると うまく 表 示 されま 具 体 的 には <img src="../clips/number1.png" begin="video1.begin + 0.1s" end="video1.end" region="button_region1" fill="remove"/> と 記 述 しま 追 加 情 報 : 時 間 のオフセット イベントの 時 間 指 定 には オフセット 時 間 を 与 えることができまたとえば 前 述 の 例 では id= video1 が 再 生 開 始 したのと 同 時 に 画 像 1 が 表 示 されまし たが begin= video1.begin + 2s と 記 述 すると id= video1 が 再 生 開 始 してから 2 秒 後 に 画 像 1 が 表 示 されま 同 様 に end= video1.end 2s と 記 述 すると id= video1 が 再 生 終 了 する 2 秒 前 に 画 像 1 の 表 示 が 消 えま 36

39 6 トランジションエフェクト RealPlayer SMIL コンテンツクリエーション コース トランジションエフェクトとは クリップの 再 生 開 始 時 にいきなりクリップが 表 示 さ れるのではなく たとえば フェードインで 表 示 されるなどのエフェクトをいいま この 章 では 各 クリップが 再 生 開 始 再 生 終 了 する 時 のトランジションエフェクト について 説 明 しま 注 意 :ビデオからビデオへトランジションを 適 用 した 場 合 に PC のビデオカード の 種 類 によっては トランジションがうまく 適 用 されない 場 合 がありまその 場 合 は 以 下 のように RealPlayer 10 の 環 境 設 定 を 調 節 してください トランジショ ンが 問 題 なく 表 示 される 場 合 は 特 に 行 う 必 要 はありません RealPlayer 10 のメニューから[ツール] -> [ 環 境 設 定 ]を 選 択 すると 以 下 の 環 境 設 定 ウィンドウが 表 示 されるので 左 側 のメニューから[ハードウェア]を 選 択 しま 以 下 のハードウェアの 設 定 画 面 になるので その 中 の[ビデオカードの 互 換 性 ] のスライダーを[ 高 信 頼 性 ]のほうに 動 かして 調 節 しま 37

40 6.1 トランジションエフェクトの 例 4 章 のシーケンスグループで 説 明 した layout_sequence.smil にトランジションエ フェクトを 適 用 した 例 を 以 下 に 示 します(layout_sequence_transition.smil) layout_sequence_transition.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="black"/> <region id="video_region" left="40" top="30" width="240" height="180" fit="fill"/> </layout> <transition id="fromgreen" type="fade" subtype="fadefromcolor" fadecolor="#87cf87" dur="2s"/> <transition id="togreen" type="fade" subtype="fadetocolor" fadecolor="#87cf87" dur="2s"/> <transition id="wipe1" type="iriswipe" subtype="rectangle" dur="2s"/> <transition id="xfade" type="fade" subtype="crossfade" dur="2s"/> </head> <body> <seq> <video src="../clips/video1.rm" region="video_region" transin="fromgreen" fill="transition"/> <video src="../clips/video2.rm" region="video_region" transin="wipe1" fill="transition"/> <video src="../clips/video3.rm" region="video_region" transin="xfade" transout="togreen" fill="remove"/> </seq> </body> </smil> トランジションの 定 義 はヘッダーパートのレイアウトパートの 次 に 記 述 しまこ こでは 4 つのトランジションを 定 義 していま 各 トランジションは<transition/>タ グで 定 義 し id 属 性 type 属 性 subtype 属 性 トランジションの 継 続 時 間 の dur 属 性 を 記 述 しま 色 からフェードまたは 色 へのフェードの 場 合 は fadecolor 属 性 も 記 述 しま この 例 では 緑 色 からフェードインする fromgreen 緑 色 へフェードアウトする togreen アイリスワイプの wipe1 クロスフェードの xfade を 定 義 していま 定 義 したトランジションをクリップに 定 義 するには 各 クリップソースタグに transin または transout 属 性 を 記 述 し 値 にはトランジションの ID を 記 述 しま 38

41 トランジションが 起 こっている 間 クリップの 表 示 をそのままにしておくために fill= transition 属 性 をクリップソースタグに 記 述 していま トランジションの 継 続 時 間 と fill の 関 係 は 以 下 のようになりま fill= remove の 場 合 fill= remove の 場 合 は video1.rm はその 再 生 時 間 が 終 了 すると 画 面 から 消 えま したがって video2.rm の 開 始 時 に 適 用 されるトランジション wipe1 は 背 景 に 対 して 適 用 されま fill= transition の 場 合 fill= transition の 場 合 は トランジション wipe1 が 継 続 している 間 video1.rm は 画 面 に 表 示 されたままになり トランジションが 終 了 すると 消 えま その 他 のトランジションタイプとサブタイプは 付 録 を 参 照 してください 6.2 トランジション 境 界 幅 の 設 定 ワイプなどのフェード 以 外 のトランジションは 前 のクリップとの 境 界 を 持 ちま この 境 界 幅 はデフォルトで 0 ですが <transition/>タグに borderwidth 属 性 を 記 述 することで 任 意 の 幅 を 設 定 することができま 前 述 の 例 の wipe1 トランジシ ョンに 境 界 幅 を 設 定 した 例 を 以 下 に 示 しま 39

42 layout_sequence_transition_border.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="black"/> <region id="video_region" left="40" top="30" width="240" height="180" fit="fill"/> </layout> <transition id="fromgreen" type="fade" subtype="fadefromcolor" fadecolor="#87cf87" dur="2s"/> <transition id="togreen" type="fade" subtype="fadetocolor" fadecolor="#87cf87" dur="2s"/> <transition id="wipe1" type="iriswipe" subtype="rectangle" borderwidth="20" bordercolor="blend" dur="2s"/> <transition id="xfade" type="fade" subtype="crossfade" dur="2s"/> </head> <body> <seq> <video src="../clips/video1.rm" region="video_region" transin="fromgreen" fill="transition"/> <video src="../clips/video2.rm" region="video_region" transin="wipe1" fill="transition"/> <video src="../clips/video3.rm" region="video_region" transin="xfade" transout="togreen" fill="remove"/> </seq> </body> </smil> この 例 では wipe1 トランジションに borderwidth= 20 で 境 界 幅 を 20 ピクセルにし 境 界 の 色 は bordercolor= blend で 前 のクリップとブレンドしてぼかす 設 定 をして いま bordercolor 属 性 の 値 に 色 名 あるいは 16 進 数 値 での 色 の 値 を 指 定 すると 境 界 には 色 が 設 定 されま 6.3 トランジションの 繰 り 返 し トランジションは 水 平 方 向 と 垂 直 方 向 に 繰 り 返 すことができます( 位 置 的 な 繰 り 返 し) 以 下 の 例 では wipe1 トランジションを 水 平 方 向 に 2 回 繰 り 返 していま 40

43 layout_sequence_transition_multi.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="black"/> <region id="video_region" left="40" top="30" width="240" height="180" fit="fill"/> </layout> <transition id="fromgreen" type="fade" subtype="fadefromcolor" fadecolor="#87cf87" dur="2s"/> <transition id="togreen" type="fade" subtype="fadetocolor" fadecolor="#87cf87" dur="2s"/> <transition id="wipe1" type="iriswipe" subtype="rectangle" horzrepeat="2" dur="2s"/> <transition id="xfade" type="fade" subtype="crossfade" dur="2s"/> </head> <body> <seq> <video src="../clips/video1.rm" region="video_region" transin="fromgreen" fill="transition"/> <video src="../clips/video2.rm" region="video_region" transin="wipe1" fill="transition"/> <video src="../clips/video3.rm" region="video_region" transin="xfade" transout="togreen" fill="remove"/> </seq> </body> </smil> この 例 では wipe1 トランジションを horzrepeat= 2 で 水 平 方 向 に 2 回 繰 り 返 して いま 垂 直 方 向 に 繰 り 返 す 場 合 は vertrepeat 属 性 を 使 いま [ 演 習 ] layout_sequence_transition_multi.smil を 変 更 して 縦 方 向 にもトランジションを 繰 り 返 すようにしてみましょう layout_sequence_transition_multi2.smil <smil xmlns=" <head> <layout> <root-layout width="320" height="240" backgroundcolor="black"/> <region id="video_region" left="40" top="30" width="240" height="180" fit="fill"/> </layout> <transition id="fromgreen" type="fade" subtype="fadefromcolor" fadecolor="#87cf87" dur="2s"/> <transition id="togreen" type="fade" subtype="fadetocolor" fadecolor="#87cf87" dur="2s"/> <transition id="wipe1" type="iriswipe" subtype="rectangle" horzrepeat="2" vertrepeat= 2 dur="2s"/> <transition id="xfade" type="fade" subtype="crossfade" dur="2s"/> </head> <body> <seq> <video src="../clips/video1.rm" region="video_region" transin="fromgreen" fill="transition"/> 41

44 <video src="../clips/video2.rm" region="video_region" transin="wipe1" fill="transition"/> <video src="../clips/video3.rm" region="video_region" transin="xfade" transout="togreen" fill="remove"/> </seq> </body> </smil> 追 加 情 報 :トランジションとオーディオレベル トランジションを 使 用 しても クリップのオーディオレベルは 変 更 されません た だし 領 域 の soundlevel 属 性 をアニメーションさせることで オーディオレベル を 変 更 することができまアニメーションについては 次 の 章 で 説 明 しま 42

45 7 アニメーション この 章 では SMIL 中 でクリップを 拡 大 する あるいは 移 動 するなどのアニメーシ ョンについて 説 明 します(アニメーション GIF あるいは Flash ファイルではありませ ん) 7.1 アニメーションの 例 次 の 例 は ボタンをクリックすると ビデオの 幅 が 変 化 するアニメーションの 例 で す(animation_width_change.smil) ananimation_width_change.smil <smil xmlns=" <head> <layout> <root-layout width="384" height="240" backgroundcolor="black"/> <region id="video_region" width="240" height="180" top="30" left="40" z-index="0" fit="fill"/> <region id="button_region1" width="64" height="64" top="50" left="300" z-index="1"/> <region id="button_region2" width="64" height="64" top="126" left="300" z-index="2"/> </layout> </head> <body> <par> <video src="../clips/video2.rm" id="video1" region="video_region" repeatcount="3"/> <img src="../clips/wide.gif" id="button1" region="button_region1" dur="10s" fill="freeze"/> <img src="../clips/narrow.gif" id="button2" region="button_region2" dur="10s" fill="freeze"/> <animate targetelement="video_region" attributename="width" by="24" dur="750ms" fill="freeze" begin="button1.activateevent"/> <animate targetelement="video_region" attributename="width" by="-24" dur="750ms" fill="freeze" begin="button2.activateevent"/> </par> </body> </smil> 43

46 アニメーションは<animate/>タグで 定 義 しま<animate/>タグはボディパートに クリップソースタグと 同 様 に 記 述 しまtargetElement 属 性 では アニメーション させる 要 素 の ID を 指 定 しまattributeName 属 性 はアニメーションさせる 属 性 を 値 に 指 定 しまby 属 性 は アニメーションさせる 量 を 指 定 しま この 例 では button1 がクリックされると video_region 領 域 の 幅 を 750ms で 24 ピ クセル 増 やしままた button2 をクリックすると video_region 領 域 の 幅 を 24 ピクセル 減 らしま 44

47 アニメーションは ルートレイアウト 領 域 領 域 クリップに 適 用 できますが アニ メーション 可 能 な 領 域 の 属 性 は 以 下 の 表 になりま backgroundcolor bottom height left regionname right soundlevel top width z-index 領 域 の 背 景 色 を 変 更 しま 領 域 の 下 辺 オフセットを 変 更 しま 領 域 の 高 さを 変 更 しま 領 域 の 左 辺 オフセットを 変 更 しま 領 域 の 名 前 を 変 更 しまこれによって ある 領 域 か ら 他 の 領 域 にクリップを 移 動 させま 領 域 の 右 辺 オフセットを 変 更 しま クリップのサウンドレベルを 調 整 しま 領 域 の 上 辺 オフセットを 変 更 しま 領 域 の 幅 を 変 更 しま 領 域 の 重 なり 順 を 変 更 しま 追 加 情 報 :クリップ 属 性 のアニメーション クリップ 属 性 もアニメーションできますが そのほとんどは 領 域 と 同 じ 幅 高 さ オフセット 値 でただし クリップの 属 性 に 固 有 なものとして たとえば ク リップの 透 明 度 を 変 化 させるには rn:mediaopacity をアニメーションさせま また <brush/>オブジェクトの 色 を 変 化 させるには color をアニメーションさせ ま 前 述 の 例 (animation_width_change.smil)は 領 域 の 幅 が 変 更 されますが オフセ ットはそのままなので 領 域 内 のビデオは 右 側 に 大 きくなりまビデオの 中 心 が 移 動 しないようにオフセットもアニメーションさせた 例 が 次 になります (animation_width_offset_change.smil) animation_width_offset_change.smil <smil xmlns=" <head> <layout> <root-layout width="384" height="240" backgroundcolor="black"/> <region id="video_region" width="240" height="180" top="30" left="40" z-index="0" fit="fill"/> <region id="button_region1" width="64" height="64" top="50" left="300" z-index="1"/> <region id="button_region2" width="64" height="64" top="126" left="300" z-index="2"/> 45

48 </layout> </head> <body> <par> <video src="../clips/video2.rm" id="video1" region="video_region" repeatcount="3"/> <img src="../clips/wide.gif" id="button1" region="button_region1" dur="10s" fill="freeze"/> <img src="../clips/narrow.gif" id="button2" region="button_region2" dur="10s" fill="freeze"/> <animate targetelement="video_region" attributename="width" by="24" dur="750ms" fill="freeze" begin="button1.activateevent"/> <animate targetelement="video_region" attributename="left" by="-12" dur="750ms" fill="freeze" begin="button1.activateevent"/> <animate targetelement="video_region" attributename="width" by="-24" dur="750ms" fill="freeze" begin="button2.activateevent"/> <animate targetelement="video_region" attributename="left" by="12" dur="750ms" fill="freeze" begin="button2.activateevent"/> </par> </body> </smil> この 例 では button1 をクリックした 時 に 領 域 の 幅 を 24 ピクセル 広 げるので ビ デオの 中 心 をそのままにするには 領 域 の left 属 性 を 以 下 の<animate/>タグで -12 ピクセル 移 動 させま <animate targetelement="video_region" attributename="left" by="-12" dur="750ms" fill="freeze" begin="button1.activateevent"/> 同 様 に button2 をクリックした 時 は 領 域 の left 属 性 を 12 ピクセル 増 やしま <animate targetelement="video_region" attributename="left" by="12" dur="750ms" fill="freeze" begin="button2.activateevent"/> 7.2 アニメーション 変 化 量 の 指 定 前 述 の 例 では アニメーションの 変 化 量 を by 属 性 で 指 定 していましたが 他 にも from to 属 性 と 値 をリストで 指 定 する values 属 性 が 使 用 できまby 属 性 はサ イズと 位 置 の 変 化 量 しか 指 定 できませんが from to 属 性 は 色 やクリップの 透 明 度 などにも 適 用 できま 次 に from to 属 性 を 使 用 した 例 を 示 しま animation_width_offset_fromto_change.smil <smil xmlns=" <head> <layout> <root-layout width="384" height="240" backgroundcolor="black"/> <region id="video_region" width="240" height="180" top="30" left="40" z-index="0" fit="fill"/> <region id="button_region1" width="64" height="64" top="50" left="300" z-index="1"/> 46