ヘルプ  --楕円機能--

 [メインメニュー]

[ぴあにしも][初心者向き手順書][オリジナルスクリプト集][オリジナルスクリプト2集][追加TIPS紹介][ソフト紹介][ソース表示はこれ][WEB用に変換][Lhaplus圧縮][ひな形配布][パスの考え方][ひな形用設定][Exma4][EML編集][ヘルプ][サンプルトップ][更新状況他][リンク][タグ掲示板][物置小屋]

[ヘルプ内サブメニュー]

[プレビュー][ソース][素材選択][基本設定][画像入れ替え][画像ボックス][曲線移動][VML+TIME][限定環境][並列動作][コンテナ][メッセージ][ポップアップ][積雪][噴射系][著作・その他][雨花火][Intel Additive][楕円機能][風機能][トラブル][Q and A]

・回転角度は0にすることはできません。この値を分母にしている計算箇所があり、0で除算するとエラーになるため、0は入れられないようになっています。
0=回転しないですから、回転するのチェックを外せばすむことです。
・IMGボックス1ではステージ1に統合するにはチェックできません。IMGボックス1がステージ1ですから。
・ステージ1に統合するにチェックを入れても、IMGボックス1で楕円配置画像1が使用しないになると自動的にステージ1に統合するのチェックは外れます。


ひな形「おもちゃのメリーゴーランド」ひな形作:TAXI MIDI:ぴあんの部屋 ぴあにしも1021もかb4−4の楕円機能だけで作成しました。

とりあえずサンプルをご覧ください。

楕円サンプル1--円・楕円配置の基本的なもの

このサンプルの左上(背景色が白)ボックスに表示されているものは、初期状態で画像をセットしただけのものです。
右上の緑の点線で囲まれたボックスは「背景色無効」にしてあります。このボックスでは「中心に配置する画像の表示倍率=100%」、「配置基準=right-top」、「Y方向扁平化率=30%」にして縦方向に押しつぶしたような楕円になっています。また回転させるようにしており、「回転角度=-2度」に設定して反時計方向に回転します。
赤い枠のボックスは「ウィンドウサイズ」にしており、背景色は無効です。このボックスでは「中心に配置する画像の表示倍率=200%」、「楕円の中心LEFT=400」、「楕円の中心TOP=300」、「半径=300」、「Y方向扁平化率=50%」、「描画終了角度=359度」にして、360度のところには画像が描かれないようにしています(0度と重複しないようにしている)。
また、「基本サイズ最大値=100px」、「基本サイズ最小値=30px」として奥にあるものほど小さく表示されるようにしています。「回転角度=3度」で時計方向に回転します。

回転角度についてですが、仰角との兼ね合いで回転していないように見えたり、逆方向に回転しているように見えたりします。これは当然で、例えば仰角を10度にして描画し、回転角度を10にすると結局角度が変わっても同じ位置に表示しているように見えます(実際には一つ一つの画像は回転しているのですが)。
仰角を5度に回転角度を4度にした場合は、-1度で回転しているように見えることでしょう。

では次のサンプルを。


サンプル2--描画角度指定して弧上に描画

サンプル1を基本に描画開始角・描画終了角・仰角を一部変更したものです。
左上のものは「描画開始角=0度」、「描画終了角=90度」です。
右上のものは「描画開始角=-30度」、「描画終了角=-270度」、「仰角=-10度」です。仰角がマイナスのため反時計方向に描画されます。
中央のものは「描画開始角=0度」、「描画終了角=180度」、「仰角=10度」です。
ここで注意しなければならないのは、仰角がマイナスの場合は、終了角度が開始角度より小さくなければなりません。
逆に仰角がプラスの場合は終了角度が開始角度より大きくなければなりません。
但し、ぴあにしもでは設定条件によっては開始角度と終了角度を反対にセットして、エラーにならないようにしています。


サンプル3-螺旋状にする

螺旋状にするには螺旋形状率を100以外にします。100より小さい場合は、半径が次第に小さくなるために、中心に向かって小さくなるような螺旋状になります。
100より大きい場合は半径が次第に大きくなるために、中心から離れていく螺旋状になります。

左上と右上のものは楕円配置の設定はほとんど同じで、「描画開始角=0度」、「描画終了角=720度」としてニ回転分描画されますが、「螺旋形状率」が違います。
左上は「螺旋形状率=99%」、右上は「螺旋形状率=101%」です。

中央のものように扁平化率を100%意外にすることも可能です。


サンプル4-渦巻き状にする

平化率を100%意外にすることも可能です。「仰角」を360の割り切れる数(公約数)にすると、一周する度に同じ角度の位置にきます。そのため渦巻き状にはなりません。例えば30度は360度の公約数なので、一周すると12+1個の画像が配置されます。一周する最後を配置したくない場合は、「描画終了角度」をわざと359度などにすると360度の位置に描画されなくできます。

渦巻き状にするには、例えば31度のように「仰角」を公約数にならない数値にします。一蹴するごとにずれが生じるため、渦巻き状に見えることでしょう。

サンプルでは「描画開始角=0度」、「描画終了角=3599度」として10周分配置するよう設定、「仰角=46度」としています。46度では一周(360度)で、
「0,46,92,138,184,230,276,322」と8個画像が描画され、9個めは一個目の角度0度より368度=8度ずれが生じますね。このずれにより渦巻き状になります。


サンプル5-左右反転と上下運動

このサンプルの設定は次のようになっています。

ボックスのサイズ・・・800px×400px、楕円の中心LEFT=400、楕円の中心TOP=200、半径=300、仰角=45、描画開始角=0、描画終了角=359(360とはせずに360度の位置には描画させない
基本サイズ最大値=100、基本サイズ最小値=50、X方向扁平化率=100、Y向扁平化率=10、描画開始時間=0、描画速度=50、螺旋形状率=100
回転させる、回転角度=3(時計回り)、回転開始時間=3、回転速度=50、上下運動振幅割合=80、上下運動周期設定角度=30、左右反転設定=「中心より後ろを反転」

左右反転設定について

のように画像が左向きの場合で、時計回りに回転させる場合は、「中心より後ろを反転」に設定します。
すると右から左に動いている(Z-INDEXが0以上になっている場合)時にはそのまま表示され、左から右に移動している(Z-INDEXがマイナス)時には画像が左右反転します。反時計回りに動かす場合は「中心より前を反転」にするといいでしょう。

のように画像が右向きの場合は逆にお考えください。

上下運動ですが、「上下運動振幅割合」を大きくすると上下の動きの幅が大きくなります。
「上下運動周期設定角度」は一動作でどの程度角度を与えるかです。これは上下運動の一周期が360度として考えます。上下運動周期設定角度が30の場合は、一周期が360÷30=12です(12回動くと一周期)。「上下運動周期設定角度」を大きくすると激しく上下運動します。小さくするとゆったりと上下に動きます。
上下運動させたくない場合は0にしておいてください。


サンプル6-左右反転と上下運動(螺旋)サンプルに使用のMIDIはTAXI制作のものです(「Amazing Grace」)

螺旋状に配置して左右反転と上下運動にしてみました。

画像が右向きで反時計回りに回転するので、左右反転設定は「中心の後ろを反転する」です。
楕円の中心LEFT=400、楕円の中心TOP=250、半径=130、仰角=90(一周に4つで時計回りに描画)、描画開始角=0、描画終了角=1439(4周分)
画像の基本サイズ最大値=100、画像の基本サイズ最小値=70、Y方向扁平化率=20、螺旋形状率=108(段々広がる)
回転は回転角度=-2(反時計回り)です。
上下運動振幅割合=40%で、上下運動周期設定角度=30度にしています。

※画像の基本サイズ最大値、最小値は実際に表示される画像の一番大きいもののサイズ、一番小さいもののサイズということではありません。
扁平にしない状態で螺旋状にしない(螺旋化率=100)での一番手前に表示される画像のWidthが最大値に、一番奥に表示される画像のWidthが最小値になります。
扁平にした場合など、ではそれぞれの設定に応じて画像の表示倍率が変わり、一番大きいもの=最大値、一番小さいもの=最小値にはなりません。
あくまでも基準サイズとお考えください。
また、ボックスに回転(BasicImageフィルタ)をかけると透過gif画像の透明部分が白くなることがあります。


サンプル7-中央に表示する画像を上に100ピクセルずらし、更にソース編集したものですサンプルに使用のMIDIはTAXI制作のものです(「風立ちぬ」)
使用画像:LITTLE HOUSE

IMGボックス1で中央に画像を配置して設定し、IMGボックス2では中央には画像配置せず、ほぼIMGボックス1と同じ設定に。
回転角度を逆方向に(プラスとマイナス)、Y方向楕円の中心はIMGボックス1で300に、IMGボックス2では200に。
こんな感じで一旦ひな形を作成。
作成したひな形をサクラエディタなどのテキストエディタで開き、IMGボックス2のステージである
<div id="dastage2" style="position:absolute; visibility:hidden; border:#ffffff 0px none; width:100%; left:0px; ; height:100%; top:0px; overflow:hidden; z-index:50"></div>
を削除。

更にIMGボックス2で生成したスクリプトのステージ名をIMGボックス1のステージに変更する。
dastage2.insertAdjacentHTML('beforeEnd','<img id="dimg2'+dnum2+'" src="'+imagf4.src+'" style="position:absolute; width:'+izoom2+'px; height:'+izoom2*jyohi2+'px; z-index:'+izdx2+'; left:'+(ileft2-izoom2/2)+'px; top:'+(itop2-izoom2*jyohi2/2-jgsh2)+'px; filter:progid:DXImageTransform.Microsoft.BasicImage(Mirror='+flix2+')">')

dastage1.insertAdjacentHTML('beforeEnd','<img id="dimg2'+dnum2+'" src="'+imagf4.src+'" style="position:absolute; width:'+izoom2+'px; height:'+izoom2*jyohi2+'px; z-index:'+izdx2+'; left:'+(ileft2-izoom2/2)+'px; top:'+(itop2-izoom2*jyohi2/2-jgsh2)+'px; filter:progid:DXImageTransform.Microsoft.BasicImage(Mirror='+flix2+')">')
と書き換える。

最後にdastage2を削除したので、
<t:set id="dab2" targetElement="dastage2" attributeName="visibility" to="visible" begin="0.001" fill="hold" />
も削除する。

ふたつの楕円回転運動がdastage1で起こりますね。
※この統合機能はぴあにしも1021Mocab4-4で、対応しました。


サンプル8--複数画像の配置

魔女・妖精・トンボと3つ画像を指定。仰角は120度、開始角0度、終了角359度で、行っています。IMGボックス12のみを使用しました。

注意点!:画像はサイズは全て基本サイズ最大値と基本サイズ最小値を元に描画されます。画像個別にサイズ指定はできません。
もしそれぞれにサイズを変えたい場合は、IMGボックスを複数使用し、ステージ1に統合する機能を利用してください。


サンプル9--ステージ1に統合する

サンプル8と同じように見えますが、それぞれの画像の表示サイズや上下運動の大きさ、回転の向きがちがいますね。
これはIMGボックス1を基準にIMGボックス2とIMGボックス2も使用。IMGボックス1のステージに統合させます。
IMGボックス1には魔女を、IMGボックス2には妖精を、IMGボックス3にはトンボをセット、それぞれ設定を変えています。
中心座標はX-Y両方とも同じに、Y方向扁平率も全て同じにして、違和感がないようにセット。
主に半径や基本サイズ最大値・基本サイズ最小値・上下運動周期や回転角度などに違いをつけています。
画像はそれぞれひとつだけ描画させるために描画開始角と描画終了角は同じにしています。
IMGボックス1の描画開始角は0度、IMGボックス2の描画開始角は120度、IMGボックス3の描画開始角は240度として、楕円一周で均等に画像が配置される(それぞれひとつずつ)ようにしました。

描画開始角と描画終了角を同じにすると画像がひとつしか描かれなくなりますので、トンボを一匹だけくるくる飛ばす場合などは参考にしてください。


サンプル10

サンプル11・・・IMGボックス1とIMGボックス2それぞれによっつの画像を指定、IMGボックス2はステージ1に統合しています。
IMGボックス1とIMGボックス2それぞれ回転角度や中心(Y)・半径などを変えています。

サンプル12・・・IMGボックス1のみ使用。基本サイズ最大値=200、基本サイズ最小値=30、と大きく差をつけました。
上下運動振幅割合=150%とこれも大きくし、上下運動周期角度=2と上下運動周期を遅くします。
回転角度=4と回転も遅めにし、ゆったり動きます。

サンプル13・・・IMGボックス1のみ使用。楕円配置画像をみっつ指定。螺旋化率=99%にしています。仰角=31度で、一周するごとにずれが生じ、渦巻き状になります。

このよっつのサンプルはいずれもぴあにしも1021 Mocab4-4で、後からソースを編集することなく作成できます。


クリックすると逆回転するように改造するには

ステージをクリックすると逆回転するようにしてみましょう。
回転角度を+から-へ、-から+にすれば逆回転するので、クリックするエレメントに次のようなイベントを挿入します。

onclick="roldg*=-roldg*"・・・*は使用しているIMGボックスの番号です。

例)

<div id="dastage1" style="position:absolute; visibility:hidden; border:#ffffff 0px none; width:100%; left:0px; ; height:100%; top:0px; overflow:hidden; z-index:50; background-color:#ffffff"></div>
<script>
dastage1.insertAdjacentHTML('beforeEnd','<img id="dcimg1'+dnum1+'" src="'+imagf3.src+'" style="position:absolute; width:141px; height:258px; z-index:0; left:329px; top:121px">')
var gx1=400//原点X座標
var gy1=250//原点Y座標

これをみると番号が1ですので、onclick="roldg1=-roldg1"を入れます。

<div id="dastage1" onclick="roldg1=-roldg1" style="position:absolute; visibility:hidden; border:#ffffff 0px none; width:100%; left:0px; ; height:100%; top:0px; overflow:hidden; z-index:50; background-color:#ffffff"></div>
<script>
dastage1.insertAdjacentHTML('beforeEnd','<img id="dcimg1'+dnum1+'" src="'+imagf3.src+'" style="position:absolute; width:141px; height:258px; z-index:0; left:329px; top:121px">')
var gx1=400//原点X座標
var gy1=250//原点Y座標

ということでサンプル14 サンプル15


上下運動波長角度・・・意味わかりませんね (;゚(エ)゚) アセアセ

楕円状に配置される画像の上下運動される周期角度の初期値を決めています。
djgd1[dnum1]=hacyou1*dd1*dnum1*jgfr1/roldg1という部分がそれに当たります。
hacyou1---これにセットされるのが上下運動波長角度です。
いったい何をしているのか。
jgfr1/roldg1はもし1度だけ回転した場合、周期角度はどのくらい変化するのかを求めています。
仰角によって回るように描画されていきますから、配置される画像のそれぞれの仰角は一番最初に描画される画像に対しては、dd1*dnum1だけ回転した位置になります。その位置での周期角度はその仰角に1度回転した場合の周期角度(jgfr1/roldg1)--単位あたりでの周期角度--をかけたもの、つまりdd1*dnum1*jgfr1/roldg1度となります。これだけですと設定に自由度がありません。360度回転した場合の周期角度が最初(0度回転した位置のもの)のものの周期角度と一致するだけです。
そこで上下運動波長角度と名づけ、一周に対し割合的な角度を設定できるようにしています。

これ以上は難しくなりますので省きますが、配置される画像の上下運動のシンクロ状態が変わると思ってください。
上記計算式を見れば、仰角(dd1)・周期角度(jgfr1)・回転角度(roldg1)も関わっています。dnum1は配置される画像のナンバーです(0から始まる)。
例えば仰角45度で描画開始角度=0・描画終了角度=360度ならば0度の位置に最初の画像が配置されます。これがdnum1=0になります。
次は45度回転した位置に描画されます。これがdnum1=1ですね。
次は更に45度回転した位置つまり90度の位置です。これがdnum1=2となります。
このように考えると135度の位置=dnum1=3、180度の位置=dnum1=4、225度の位置=dnum1=5、270度の位置=dnum1=6、315度の位置=dnum1=7、360度の位置=dnum=8となります。
描画の条件判断部分で描画終了角を越えない限り描画されますから、360度が45度で割り切れるため360度まで描画されます。
360度の位置には0度の位置(最初に描画される画像)があり、重複します。
もし360度の位置に描画したくない場合は描画終了角度=359などとします。

描画される個数は{(描画終了角度-描画開始角度)÷仰角}+1です。

尚画像を一個だけ配置したい場合は、描画終了角と描画開始角を同じにし、仰角を0以外にすると可能です。

サンプルで確認して見ましょう。サンプルの主な設定は下記のようになっています。

上下運動波長角度=2の場合:サンプル16

それぞれの画像はまったく同じ上下運動(波のように動く)していませんが、バラバラでもありませんね。

上下運動波長角度=1の場合:サンプル17

サンプル16よりもゆったりしていませんか?

上下運動波長角度=0の場合:サンプル18

これですと同じように上下運動しますね。

上下運動波長角度=360の場合:サンプル19

これは0の場合と同じです。0=360度だからですね。
このように上下運動する感じが変わります。回転角度・仰角・上下運動周期設定角度の値によってはもっと面白い動きになるのでお試しくださいね。

では、最後にサンプル20

上下運動が3重になってます。一応設定は下記のようにしました。


「応用編」---ぴあにしもでひな形を作成して、ソース編集します。

この楕円のステージを曲線移動機能を使って動かしてみましょう。

楕円機能でボックスのサイズ部分はウィンドウサイズにしないで、サイズと位置設定します。
サンプルでは初期状態のままにしました。

それとは別に曲線移動で画像を動かす設定をします。曲線パスなど設定してくださいね。後でソースを編集して曲線移動で使用する画像のボックス部分は削除しますので、曲線移動で使用する画像は適当で構いません。

できましたらひな形にして保存します。

サンプル21

このサンプルではろうそくが曲線移動で動いていますね。
この動きを楕円のステージ(dastage1)に当てはめます。

ソースの内、曲線移動のボックス(ろうそく画像があるエレメント)は不要なので削除します。

<div id="ibox0" class="time" style="width:0px; height:0px; position:absolute; top:0; left:0; z-index:80; filter:progid:DXImageTransform.Microsoft.BasicImage(Invert=0, XRay=0, Grayscale=0, Opacity=1) alpha(Opacity=100)" begin="0">

<script>
document.write('<img id="igazou0">');
igazou0.src=imagf2.src
</script>
</div>
を削除。

次にHTML+TIMEでろうそくを動かしていたソースの動かす目標物(ターゲット)であるtargetelement="ibox0"をdastage1に書き換えます。複数あるので全て書き換えます。

<t:seq id="seq0" repeatcount="indefinite">
<t:animatemotion id="kyokusen01" targetelement="ibox0" begin="0" dur="5" path="m 0 0 c 94 77 231 44 308 194" fill="hold" />
<t:animatemotion id="kyokusen02" targetelement="ibox0" begin="0" dur="5" path="m 0 0 c 154 147 128 305 -34 293" fill="hold" />
<t:animatemotion id="kyokusen03" targetelement="ibox0" begin="0" dur="5" path="m 0 0 c -49 -48 58 -216 139 -202" fill="hold" />
<t:animatemotion id="kyokusen04" targetelement="ibox0" begin="0" dur="5" path="m 0 0 c -81 -14 -188 154 -139 202" fill="hold" />
<t:animatemotion id="kyokusen05" targetelement="ibox0" begin="0" dur="5" path="m 0 0 c 162 12 188 -146 34 -293" fill="hold" />
<t:animatemotion id="kyokusen06" targetelement="ibox0" begin="0" dur="5" path="m 0 0 c -77 -150 -214 -117 -308 -194" fill="hold" />
</t:seq>

これを

<t:seq id="seq0" repeatcount="indefinite">
<t:animatemotion id="kyokusen01" targetelement="dastage1" begin="0" dur="5" path="m 0 0 c 94 77 231 44 308 194" fill="hold" />
<t:animatemotion id="kyokusen02" targetelement="dastage1" begin="0" dur="5" path="m 0 0 c 154 147 128 305 -34 293" fill="hold" />
<t:animatemotion id="kyokusen03" targetelement="dastage1" begin="0" dur="5" path="m 0 0 c -49 -48 58 -216 139 -202" fill="hold" />
<t:animatemotion id="kyokusen04" targetelement="dastage1" begin="0" dur="5" path="m 0 0 c -81 -14 -188 154 -139 202" fill="hold" />
<t:animatemotion id="kyokusen05" targetelement="dastage1" begin="0" dur="5" path="m 0 0 c 162 12 188 -146 34 -293" fill="hold" />
<t:animatemotion id="kyokusen06" targetelement="dastage1" begin="0" dur="5" path="m 0 0 c -77 -150 -214 -117 -308 -194" fill="hold" />
</t:seq>

と書き換えてます。これでろうそくの動きがdastage1に適用されるようになりました。保存して終了です。

サンプル22

 


[ヘルプ内サブメニュー]

[プレビュー][ソース][素材選択][基本設定][画像入れ替え][画像ボックス][曲線移動][VML+TIME][限定環境][並列動作][コンテナ][メッセージ][ポップアップ][積雪][噴射系][著作・その他][雨花火][Intel Additive][楕円機能][風機能][トラブル][Q and A]

 [メインメニュー]

[ぴあにしも][初心者向き手順書][オリジナルスクリプト集][オリジナルスクリプト2集][追加TIPS紹介][ソフト紹介][ソース表示はこれ][WEB用に変換][Lhaplus圧縮][ひな形配布][パスの考え方][ひな形用設定][Exma4][EML編集][ヘルプ][サンプルトップ][更新状況他][リンク][タグ掲示板][物置小屋]

 


Copyright(c) 2004 My Software. All rights reserved.