IE5.0以降のみ(Macintosh版IE5.0では正しく表示されない場合があります)
ダイナミックアニメーションを使うと、図形を立体的に回転させることができます。ここでは、ロゴマークを描いて立体的に回転させる方法を考えてみましょう。回転するオブジェクトを作成し、ダイナミックアニメーションの種類を設定します。
<object id="Rect" classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="position:absolute;top:150;left:200;width:400;height:400">
<param name="Line0001" value="SetFillStyle(1)">
<param name="Line0002" value="SetFillColor(0, 0, 255)">
<param name="Line0003" value="Rect(-100, -100, 100, 100, 0)">
</object>ダイナミックアニメーションを使ってx軸・y軸・z軸を中心として図形を回転させる関数を作動させるボタンを設定します。
<BUTTON onclick="x=!x;">X axis</BUTTON>
<BUTTON onclick="y=!y;">Y axis</BUTTON>
<BUTTON onclick="z=!z;">Z axis</BUTTON>
<BUTTON onclick="Rect.setIdentity();">Set Identity</BUTTON>ダイナミックアニメーションを使ってx軸・y軸・z軸を中心として図形を回転させる関数を定義します。
x=false;
y=false;
z=false;function axis() {
if (x) Rect.rotate(5,0,0);
if (y) Rect.rotate(0,5,0);
if (z) Rect.rotate(0,0,5);
status='x:'+x+' y:'+y+' z:'+z;
setTimeout('axis()',100);
}「DrawSurface」
☆.DrawSurface.fillcolor(☆.library★)
☆.DrawSurface.rect(△,▲,○,●)
☆.DrawSurface.oval(△,▲,○,●)
☆.rotate(□,■,◆)
☆=データソースオブジェクト名★=色
△=中心から左までの距離
▲=中心から上までの距離
○=図形の幅
●=図形の高さ
□=X方向への回転角度
■=Y方向への回転角度
◆=Z方向への回転角度ダイナミックアニメーションを使ってオブジェクトを描画すると、環境によっては一部のオブジェクトが表示されないことがあります。
例では、この問題を解決するために、「setTimeout」を使ってページをリロードしています。