Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

 ぐるぐる回転するタイトル文字を作成する

IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)

ダイナミックアニメーション(または、ダイレクトアニメーション)を利用すると、ホームページの一定範囲を動くアニメーションを簡単に作成できます。ここでは、ダイナミックアニメーションでぐるぐる回るタイトル文字を作成する方法を考えてみましょう。

■ 回転させる文字列の設定

回転させる文字内容にはIDとして名前をつけ、フォントサイズ・文字色・配置位置の設定を行います。

<<DIV ID="kuru1" STYLE="position:absolute;width:380px;height:45px; color:#ffff00;font-size:30pt;left:29px;top:200px">
チャンスの★をつかまえて!
</DIV>

文字の表示位置の基準(position)を指定しないと、文字列を回転させることができないので注意が必要です。
■ ダイナミックアニメーションの設定

ダイナミックアニメーションを利用するには、<OBJECT>タグに「CLASSID」を記述し、アニメーションの動きを個別に設定します。

<OBJECT CLASSID="CLSID:d7a7d7c3-d47f-11d0-89d3-00a0c90833e6">
<PARAM NAME="AutoStart" VALUE="-1">
<PARAM NAME="Repeat" VALUE="-1">
<PARAM NAME="Bounce" VALUE="0">
<PARAM NAME="Duration" VALUE="3">
<PARAM NAME="Shape" VALUE="oval(30,210,400,100)">
<PARAM NAME="Target" VALUE="kuru1">
</OBJECT>

上例では、ホームページを読み込んだタイミングで実行するように設定しています。

■ ダイナミックアニメーションのパラメータ

ダイナミックアニメーションとは、ホームページ上の文字列・画像データを指定した範囲で動かす方法です。複数の画像データを作成することなく、「CLASSID」コードと書く動作内容(パラメータ)をHTML文書に書き込むだけで実行できるので、ファイルサイズに負担をかけずにアニメーションを楽しめます。「CLASSID」コードを記述し、ActiveXコントロールとして扱われます。

上例で設定したダイナミックアニメーションのパラメータには、下のようなものがあります。

パラメータの記述
意味
<PARAM NAME="AutoStart" VALUE="値"> ページを読み込み時にアニメーションを動作ささせるかどうかを指定。「-1」を指定すると読み込み時に動作させ、「0」を指定すると動作しない(スクリプトなどで動作を指定する)
<PARAM NAME="Repeat" VALUE="回数"> アニメーションを南海繰り返すかを指定。「-1」を指定するとページを開いている間中繰り返す
<PARAM NAME="Bounce" VALUE="値"> スタート点に戻ってきたときの動作方向を変更するかどうかを指定。「0」を指定すると変わらない。「-1」を指定すると移動方向を逆にする
<PARAM NAME="Duration" VALUE="秒数">

アニメーションを行う速度(秒数)を指定。「3」を指定すると3秒間に1回転する

<PARAM NAME="Shape" VALUE="動き方(左,下,幅,高さ)"> 動き方を指定。「Oval(30,210,400,100)」と指定すると、ページ左から30ピクセル、下に210ピクセルの位置を要素の左上位置として、幅400ピクセル×高さ100ピクセルの四角形内を動く。動き方には「Oval」の他に「Polygon」「Polyline」「Rect」「Spline」などを指定できる
<PARAM NAME="Target" VALUE="ID"> 動かす要素の指定。事前に設定したID名を指定する

<<<戻る

R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box