アニメーション変化量の指定 - テキストの表示 - RealPlayer SMIL コンテンツクリエーション

2 テキストの表示

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

46

</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"/>

47

<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"

from="180" to="320" dur="750ms" fill="freeze"

begin="button1.activateEvent"/>

<animate targetElement="video_region" attributeName="left"

from="70" to="0" dur="750ms" fill="freeze"

begin="button1.activateEvent"/>

<animate targetElement="video_region" attributeName="width"

from="300" to="200" dur="750ms" fill="freeze"

begin="button2.activateEvent"/>

<animate targetElement="video_region" attributeName="left"

from="10" to="60" dur="750ms" fill="freeze"

begin="button2.activateEvent"/>

</par>

</body>

</smil>

この例では、button1 をクリックすると、ビデオ領域の幅が一気に 180 ピクセルになり、その後 750ms で 320 ピクセルになります。また、button2 をクリックすると、

ビデオ領域の幅は一気に 300 ピクセルになり、その後 750ms で 200 ピクセルになります。

このように from 属性を使用した場合は、アニメーション属性は、一度 from 属性の値になってから、to 属性の値までアニメーションします。

次に、values 属性を使用して、アニメーションの変化値をリストし、複数の値にアニメーションさせる例を示します。

………..

48

この例では、button1 をクリックすると、ビデオ領域の左辺のオフセット値は、一気に 10 ピクセルになり、その後、3 秒間で、20、50、0 ピクセルに移動します。

values 属性の値はセミコロンで区切ります。

………..

49

animation_offset_value_change.smil

<head>

<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"/>

</layout>

</head>

<body>

<par>

<video src="../clips/video2.rm" id="video1" region="video_region"

repeatCount="3"/>

<img src="../clips/move.gif" id="button1" region="button_region1"

dur="10s" fill="freeze"/>

<animate targetElement="video_region" attributeName="left"

values="10;20;50;0" dur="3s" fill="freeze"

begin="button1.activateEvent"/>

</par>

</body>

</smil>

追加情報：アニメーションの流れ方

values 属性を使用する場合、デフォルトでは、ポイント間のアニメーションに要する時間は等しくなります。すなわち、前述の例でいうと、最初の 10 から 20 の 10 ピクセルの移動には 1 秒間かかりますが、20 から 50 と、50 から 0 の移動にも同じように 1 秒間かかります。したがって、50 から 0 への移動は変化スピードが速くなります。これは<animate/>タグに calcMode=”linear”属性（デフォルト）を記述したのと同じになります。

また、ポイント間の変化速度を同じにするには calcMode=”paced”を記述します。

ポイント間の変化を離散的にするには vcalcMode=”discrete”と記述します。

[演習]

animation_width_offset_change.smil を変更して、ボタン 1、2 をクリックした時にビデオクリップが幅だけでなく、高さも同時に変化するようにしてみましょう。幅と高さの比は 4:3 です。

animation_width_height_offset_change.smil

<head>

<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>

………..

50

<body>

<par>

<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="height"

by="18" dur="750ms" fill="freeze" begin="button1.activateEvent"/>

<animate targetElement="video_region" attributeName="top" by="-9"

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"/>

<animate targetElement="video_region" attributeName="height"

by="-18" dur="750ms" fill="freeze"

begin="button2.activateEvent"/>

<animate targetElement="video_region" attributeName="top" by="9"

dur="750ms" fill="freeze" begin="button2.activateEvent"/>

</par>

</body>

</smil>

高さも変更するには、<animate/>タグで height 属性を変更するようします。

button1 がクリックされた時、高さを高くしますが、幅と高さの比が 4:3 なので、変化量は by=”18”と記述します。また、オフセットも変更しなしと、中心がずれるので、top 属性を 18 の半分、by=”-9”にします。button2 は button1 の逆になります。

………..

51

8 ハイパーリンク

SMIL では、クリップにハイパーリンクを作成することができます。作成できるハイパーリンクは HTML と同様に<a>…</a>タグと使用する単純なハイパーリンクと

<area/>タグを使用するホットスポットなどのハイパーリンクがあります。この章では、ハイパーリンクの作成について説明します。

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

<a>….</a>タグはソースクリップ全体を他のクリップにリンクさせる時に使用します。HTML と違いクリップソースタグ全体を<a>…</a>タグで囲みます。記述例は以下のようになります。

</a>

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

<area/>タグは<a>タグと異なり、クリップソースタグを囲むのではなく、クリップソースタグの内側に記述します。記述例は以下のようになります。

</video>

注意： <area/> タグを使用する場合は、例えば、 <video/> タグは

<video>…</video>タグに変更します。

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

<area>タグを使うと、時間でリンク先を変化させることができます。以下にその例を示します。

0～5秒の間

5～10秒の間

………..

52

link_timed.smil

<head>

<root-layout width="320" height="240" backgroundColor="black"/>

<region id="video_region" width="240" height="180" top="30"

left="40" fit="fill"/>

</layout>

</head>

<body>

</video>

</body>

</smil>

この例では、0～5 秒の間は、video2.rm にリンクし、5～10 秒の間は video3.rm にリンクします。

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

<area/>タグを使うとホットスポット形式のリンクも作成できます。以下にその例を示します。

………..

上半分をクリック下半分をクリック

53

link_hotsopt.smil

<head>

<root-layout width="320" height="240" backgroundColor="black"/>

<region id="video_region" width="240" height="180" top="30"

left="40" fit="fill"/>

</layout>

</head>

<body>

<area href="../clips/video3.rm" shape="rect"

coords="0,90,240,180"/>

</video>

</body>

</smil>

この例では、ビデオクリップの上半分をクリックすると video2.rm にリンクし、下半分をクリックすると video3.rm にリンクします。

ホットスポットの形状を定義するには shape 属性を使用します。形状には矩形、

円形、多角形があります。また、ホットスポットの座標を定義するには coords 属性を使用します。

・矩形ホットスポットの定義

shape=”rect” coords=”x1,y1,x2,y2”

・円形ホットスポットの定義

shape=”circle” coords=”x,y,r”

………..

54

・多角形ホットスポットの定義

shape=”poly” coords=”x1,y1,x2,y2,x3,y3”

注意：ホットスポットの定義領域が重なった場合、SMIL ファイルの最初に定義されたホットスポットが有効になります。

[演習]

link_hotspot.smil を変更して、中心が(100,100)で半径が 50 のホットスポットを作成し、video2.rm へリンクするようにしてみましょう。

link_hotspot_circle.smil

<head>

<root-layout width="320" height="240" backgroundColor="black"/>

<region id="video_region" width="240" height="180" top="30"

left="40" fit="fill"/>

</layout>

</head>

<body>

</video>

</body>

</smil>

円形のホットスポットを作成するには、shape=”circle”と記述します。また、中心が（100,100）で半径が 50 なので coords=”100,100,50”と記述します。

ドキュメント内 RealPlayer SMIL コンテンツクリエーション (ページ 48-56)