ヘルプ  --風機能-- 

[メインメニュー]

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

はじめに何ができるかを書いておきます。

基本的には草花のような画像を複数配置し、一定の法則に従って変化する風をスクリプトで発生させます。
この風によって配置した画像は回転しますが、風に揺れている草花のように見せるｋとができます。

また、それとは別にセットした画像を落下させることができ（画像ボックスや積雪の雪降り機能とほぼ同じです）、その画像にも風の影響を受けて揺れ落ちるようにできます。落ち葉などを落下させると、風にあおられて揺れ落ちる落ち葉のようにも見えるでしょう。

尚、画像をセットしない場合、ゆれる画像または落ちる画像どちらか一方だけにも風の影響を与えることもできます。

回転する機能での画像は、最大20+1個まで自由に位置を設定して配置できます。

落下側は最大４種の画像を、最大100個まで落下させることができます。落下ではなく上昇にも変更可能です。うまく設定すれば風に乗って運ばれるタンポポの種のように見えるかもしれません。

回転し揺れる画像は、ぴあにしも上の画像表示画面で、クリックすると簡単に回転軸を設定できます。
風に対する抵抗率も個別に設定できます。予め傾斜させておくことも個別に設定可能です。

落下側画像では、風への影響率を設定できます。

回転・揺れする画像では、回転軸（中心）を画像の上に持ってくることで、吊るされた風鈴が風に揺れるようにもできることでしょう。

風は最大風速と最小風速を同じ値にすることで風のぶれの大きさだけで周期的変化させることも可能です。

ゆれる画像側と落下画像側別々に風の影響率を設定できます。ゆれる画像側では個別に設定でき（草花のしなり具合で設定）、落下画像側では風の影響率で設定します。落下画像側では、影響率が0%以外の場合、奥行きありでサイズ最小倍率を100%以外にすると、サイズに応じた影響（横方向に流される量）を受けます。

TAXIひな形：「秋桜の揺れる空」:  Download 137 KB (140,972 バイト)

C:\Program Files\Common Files\Microsoft Shared\Stationery\TAXI\に解凍してください。OutlookExpressから利用時は、C:\Program Files\Common Files\Microsoft Shared\Stationery\TAXI\秋桜の揺れる空\秋桜の揺れる空.htmを選択してください。
メッセージボックスは、OE編集画面をスクロールさせると、ずっと下にあります。
※使用画像は全てTAXI自作です。

説明：ぴあにしも1021 Noa SEで作成しています。
空は、Intel機能によるもので、GenerateSeedを「3:空(雲)」にしています。そのままでは青すぎるため、このボックスの透明度を30%にしています。
基本設定の背景色は薄紫色にして、空のボックスが透けてBODYの背景色が薄く見えるようにしています。
上下左右にある草むらは4つのコンテナをそれぞれ上下左右に配置し、背景画像として草むらをセットしています。
コンテナを除くボックスはウィンドウサイズにしています。
鶴は「噴射」機能を使用しています。噴射画像指定しなければなりませんが、Imagf2を指定、画像サイズ1にして、噴射画像数も1に。
噴射画像が見えないようにごまかしています。
薄ピンクの●は「積雪-snow2」です。
秋桜は「風」機能を使用。配置に際し、左右にあるものは、わざと画像の内部ではなく、外側に回転の中心を設定して、回転ではなく、移動しているように見せています。これは配置する位置の設定が結構難しいため。大きく中心軸をずらす場合は、配置画像を見失わないよう、少しずつ中心を大きくし、その都度位置の調整をしてプレビューで確認するなど、工夫した方が良いでしょう。

例えば次のような感じ

では、特に注意すべき点を中心に説明いたします。

Noaでは落ちる画像がサイズによってゆれる画像の後ろにきたり、前にきたりが可能でしたが、ゆれる画像(VML)と落ちる画像(DOM)を同じステージ上に配置すると問題発生することがわかったため、同じ属性を持つステージをそれぞれ用意し、二つのステージを重ね合わせることで、回避しています。
そのために、不可能となりました。但し、この二つのステージの重なる順番は、『二つのステージの重なり方設定」で可能です。

尚、ステージ1(id="yrstage1")はゆれる画像(画像1〜画像20)が配置され、ステージ2(id="yrostage")は落ちる画像と画像21が配置されます。

揺れる画像の設置と設定

回転揺れする画像は20+1個まで、画像1〜画像21のボタンを切り替えて、それぞれに設定を施してください。画像指定がないものは利用されませんので、安心ください。
画像21のみ落ちる画像との重なり方がz-indexによって変わります。画像1〜21のz-indexはそれらゆれる画像の重なり方を変更する時に使用します。

それぞれに拡大率設定ができますが、これは整数値になるような数値でなければ、拡大縮小しません。あまり使わない方が良いです（100%のままで使用ください）。
拡大縮小したい場合は、100の公約数(1,2,4,5,10,20,25,50)か100の整数倍(200,300,400など)にしてください。150%などにしても150%にはなりません。
※拡大縮小は<v:group />のcoordsizeかwidthとheightの値を変えることで行っています。例えば60%ではcoordsize="1.66666666666667,1.66666666666667"となりますが、小数点以下の値は四捨五入が行われるため、coordsize="2,2"と同じになります。
120%の場合はwidth:1.2px; height:1.2px; となりますが、こちらは小数点以下は無視され、width:1px; height:1px; と同じになり、等倍になります。

画像1〜画像21のボタンを切り替えて画像を指定すると、四角い升目に指定画像が表示されます。回転の中心軸はこの表示されたイメージ内をクリックすることで中心座標(中心X,中心Y)をセットできます。中心X,中心Yの数値を変更することでも可能です。<<==画像21は回転しませんので、セットできません。

画像の横方向配置・画像の縦方向配置をそれぞれ個別に設定してください。BOTTOMですとステージの一番下になります(0pxならば)。数値を入れる部分で位置をずらせます。TOPですとステージの一番上にぶら下がります。

最初の状態角度・・・これは傾斜を個別に自由に設定できるようにしたものです。少し傾けて画像を配置したいとか自由にどうぞ。画像21のみ初期傾斜角度は0度です。

草花のしなり具合・・・茎の硬い草もあれば柳の枝のようにやわらかいものもあるように、風速に対しどのくらい揺れるかという風の抵抗とお考えください。
例えばこの値が0%の画像に対しては、風速が30の場合、30度回転します。50%では15度回転します。この値が100%の場合はどんなに風が吹いても揺れません。
画像21ではMatrix傾斜角度に影響します。

回転を逆にする・・・地面から生えている草花の場合、回転軸は地面（茎の根元）にすることでしょう。この場合は、風の方向に対しそのまま回転させるようにすれば良いので、「回転を逆にする」にはチェックを入れません。
風鈴のように上から吊るされたものは吊るした糸の上側に回転軸がくることでしょう。この場合、風の方向に対しそのまま回転させると風に逆らっているようになってしまいます。このような場合「回転を逆にする」にチェックを入れてみてください。

画像1〜画像21いずれにも画像指定しなかった場合は、この揺れる画像は起こりません。但し、落下する画像に画像指定がひとつでもあれば、風による落下機能は起きます。

Noa SEでは、Matrix変形して風による揺らぎを表現する画像21が追加されています。これは回転ではなく、マトリックスフィルタで傾斜させています。
横長い画像などに向くでしょう。

サンプルMatrix・・・こちらをご覧ください。

風の設定

風は最大風速と最小風速の間を変化します。この値が逆でも構いません。マイナスの値でもOKです。変化は正弦という三角関数を使用して変化します。
この正弦(sin)での変化の激しさは、風速変化の激しさ最大値と風速変化の激しさ最小値の間で変化します。説明が難しいのでいろいろと試してみて、感覚的に把握してくださいませ。

風の変化速度・・・風速計算を繰り返して風速変化を行っていますが、その繰り返しさせるタイマーです(setTimeout)。

最小風速になる割合・・・時折正弦での変化停止し、最小風速を維持することがあります。この出現率です。0%ですと、常に変化します。
100%ですと、ずっと最小風速を維持することでしょう。

風のぶれの大きさ・・・最大風速と最小風速とは別に小さく風を変化させるブレを発生します。0ですとぶれはなくなります。第二風速と考えてください。
風のぶれの幅はこの値の2倍です。2度ならば最大-2〜2の角度変化します。

風速については下図のようなイメージで計算されます。

振幅・周期用角度はある条件に達した時にだけそれぞれ最大値と最小値の間の値でランダムに算出されます。
振幅=(風速最大〜風速最小間のランダムな値)×2・・・三角関数は半径1の円で導かれる値なので。
周期用変化角度=風速変化の激しさ最大値〜風速変化の激しさ最小値間のランダムな値

変化の激しさが45°の場合は下図のようになります。

サインカーブのようになだらかに変化させるには、変化の激しさがあまり大きくならないように、風速変化の激しさ最大値と風速変化の激しさ最小値に小さな値を設定します。
逆に強風と弱風が入り乱れるような大きくジグザグに変化させるには、風速変化の激しさ最大値と風速変化の激しさ最小値に大きな値を設定します。

ぶれの周期角度・・・風のぶれは一定の周期で変化をします。その周期を決定するものです。360度を1周期として360度に達するまでの増加量角度をここに設定します。
初期値45度では360÷45=8ですから、風の量を計算する関数が8回実行されるとぶれは最初の大きさに戻ります。ぶれの大きさは風のぶれの大きさで設定した値をaとすると、-a〜aの範囲で変化します。変化は正弦（sin）で算出。変化量は一定ではなく、sinによるものになります。

極端にいうとぶれの周期角度が1度の場合下図のようなイメージで変化します。

実際に受ける風速は風速+風のぶれになります。上記２つのサイン波形を合成したようなイメージです。

吹き始め時間・・・風が吹き始める時間ですが、ステージの表示設定にあるステージ自身の表示時間からになります。例えば20秒にするとステージが表示され始めて、20秒経たないと風は発生しません。

ステージボックス設定

説明の必要はないと思いますが、表示効果（開始と終了）は、HTML+TIMEではなく、RevealTransitionフィルタでの効果をスクリプトで行っています。

RevealTrasitionフィルタでは、まず現在の表示状態を凍結させ-Apply()-、次に変化させたい状態をスクリプトでセット（凍結されているのでスクリプトで属性値を変更しても変化が見られなくなる）、その後にトランジション開始-Play()-、Play()によって凍結状態からスクリプトで変化させた状態にトランジション効果で表示変化が起こります。

尚、ステージはまったく同じ属性値のDIVエレメントを二つ使用します。この二つのステージを重ね合わせて、一つに見せかけています。
※利用の仕方（設定）によってはどちらか一方が使用されます。このステージのIDはyrstage1とyrostageです。重なる順番はz-indexが同じ値のとき、HTMLドキュメントの後から現れるエレメントが前面に表示されることを利用して、どちらを先にHTMLソースに現れるか変えています。

<DIV ID="yrstage1" style="position:absolute; z-index:50; left:0px: top:0px; width:100%; height:100%"><DIV>
<DIV ID="yrostage" style="position:absolute; z-index:50; left:0px: top:0px; width:100%; height:100%"><DIV>
 ならば、yrostageが前面に表示される。

<DIV ID="yrostage" style="position:absolute; z-index:50; left:0px: top:0px; width:100%; height:100%"><DIV>
<DIV ID="yrstage1" style="position:absolute; z-index:50; left:0px: top:0px; width:100%; height:100%"><DIV>
 ならば、yrostageが後面に表示される。

落下画像の設置と設定

落下画像の個数は2〜100までです。1に設定できないようにしています。ソースで1に変更しても動きません。
この画像に対し四つまでの異なる画像を割り当てることができます。落ちる画像1から順番に割り当てられますので、例えば落下個数を10にし、落ちる画像1と落ちる画像2と落ちる画像3に画像指定した場合は、落ちる画像1=>落ちる画像2=>落ちる画像3=>落ちる画像1=>落ちる画像2=>落ちる画像3=>落ちる画像1=>落ちる画像2=>落ちる画像3=>落ちる画像1というようにセットされることになります。

「透過なし」「次第に消える」について・・・落下する距離によって次第に透明にするかどうかを決定します。

 「奥行きなし」・・・画像は本来の画像サイズで表示されます。サイズ最小倍率の設定は無視されます。
「奥行きあり」・・・画像はサイズ最小倍率と等倍(100%)の間で表示されます。この時100%の倍率の画像は前面に、より最小倍率に近いものほど奥に表示されます(z-index値が違う）。落下速度や風から受ける横揺れの大きさも倍率に合わせて異なるように表示されます。

落下開始時間・・・ステージが表示開始されてからの時間です。ここの値が0の時はステージ表示開始と同時に落下が始まります。10秒ですと、ステージ表示開始が起こって、10秒経たないと落下画像は表示されませんし、落下も起きません。
風の吹き始めも設定できるため、始めは風が吹いていなくて、落下が始まり、後から風が吹き始めるということも可能です。

風の影響率・・・100%ならば、風の大きさ（本来は角度です）がそのまま横方向に流れていく強さになります。30度の風速が吹いた場合は、30ピクセル横に流されます。50%の影響率ならば、15ピクセル流されるということになります。但し奥行きありの場合、流される大きさは落下画像の表示倍率に比例します。小さなものほど横流れが小さいということです。100%以上にも設定できます。

「二つのステージの重なり方設定」・・・これは説明が難しいのですが、落ちる画像(画像21も)が配置されるステージと、ゆれる画像が配置されるステージとの重なり方が変わります。z-indexはステージのz-index設定値になります。

「落下開始エリアLEFT」・・・ステージにおける落下画像の横方向配置の下限です。これより左に配置されませんが、風や落下画像自身の揺れで大きく横方向に流されることはあります。この値が例えば-300とします。すると最初はステージに対しLEFT=-300px以上にセットされます。-300pxということはステージの左に大きく隠れているわけですが、+の風が吹くことで右に流されていきますから、風速によってはステージの左から流されてくる画像が表示されることでしょう。

「落下開始エリア横幅」・・・落下開始エリアLEFTが下限値で、上限値をこの横幅設定で行います。
例えば「落下開始エリアLEFT」が100で、「落下開始エリア横幅」が552の場合、落下画像のleftは必ず100〜652の範囲内でセットされます。
表示範囲ではありません。風の影響を受けてこの範囲を外れてもステージ内では表示されます。

他の設定部分は説明不要でしょう。

使用画像1〜使用画像4いずれにも画像指定しなかった場合は、この落下は起こりません。この時ゆれる画像で画像指定がひとつでもあれば、そちらの機能は起こります。

サンプルで理解してみてください。

サンプル１・・・風は表示開始してから4秒後に発生。ステージの表示開始は[2:サークルイン]効果。
落下画像にはひとつも画像を指定していないので、ゆれる画像だけ表示される。
上にあるさくらんぼのみ「回転を逆にする」有効にしています。さくらんぼはTOP基準で配置、それ以外はBOTTOM基準で配置させました。

サンプル2・・・ゆれる画像と落下画像を両方指定。サンプル１に落下画像を追加設定したものです。
落下開始時間は0なので、風が吹き始める前から落下する。途中から風が吹き始めるため、吹き流される。
落下画像は10個、指定画像は1〜3のみっつ(落下画像1・落下画像2落下画像3に画像を指定）。
落下画像のステージがゆれる画像のステージより前の場合です。

サンプル3・・・サンプル2で奥行きありにして、サイズ最小倍率を30%にしたものです。
落下画像のステージがゆれる画像のステージより後ろの場合です。

サンプル4・・・サンプル3で、下から上に上昇・次第に消える・落下画像のステージがゆれる画像のステージより前の場合です。

サンプル5・・・ゆれる画像側に画像指定をまったくしなかった場合。落下画像の方はサンプル5に同じ。風の影響率を200%と大きくしましたので、風が吹くと大きく流されます。

サンプル6・・・「お詫び猫」。最大風速=0、最小風速=0、風の変化速度=50、風の変化の激しさ最大値=10、風の変化の激しさ最小値=10、最小風速になる割合=0、風のぶれの大きさ=20、ぶれの周期角度=45。
お詫び猫は風のぶれによる風速変化でペコペコしてます。落下画像の風の影響率は0に設定。風の影響を受けずに落下してます。

 サンプル6-2・・・サンプル7で風のぶれの大きさ=360、ぶれの周期角度=10とした場合。360度分(360/2=180なので左右180度分)回転を繰り返します。

サンプル7・・・振り子。ぶれの周期角度=5とした場合。風のぶれの大きさ=60度、最大風速=0、最小風速=0、風の変化速度=10、風の変化の激しさ最大値=0、風の変化の激しさ最小値=0、最小風速になる割合=0です。60度の半分は30度なので、-30度〜+30度の範囲で振り子運動します。「お詫び猫」と基本は同じ。

サンプル8・・・振り子とヤジロベエ。風のぶれ変化がわかるように落下画像も配置してみました。落下画像の風の影響率は50%なので、実際には2倍のぶれ量です。
落下画像がサインカーブを描きますね。

サンプル9・・・あひると木馬の喧嘩・・・(￣∇￣；）

サンプル10・・・「薄と猫じゃらし？？と落葉と風鈴」・・・風鈴の頭部分と栞部分は画像が分かれています。頭部分が11番目、栞部分が12番目として編集しています。

風鈴の頭・・・ 風鈴の栞・・・・・・わかりやすくするためboderをつけてます。
風鈴の頭の糸の一番上が回転軸で、栞の方も同じにしている。(中心X=18、中心Y=0）

・落下画像の数を100個より多くしたい場合・・・ソースのysnowmany0<=に個数を入れてください。
下は60個にした場合

for(ysnowmany0=1;ysnowmany0<=100;ysnowmany0++){
yrstage1.innerHTML+='<img id="yobj0" style="position:absolute; left:-2000px; top:-2000px; z-index:1; zoom:1">'
}
var yaflag0=0//0：透過無、1：だんだん消える

・ぶれる周期角度は1度単位でしか設定できませんが、ソース編集すれば小数点単位でも可能です。
 var ykbur1=1//ぶれ周期角度・・・ここを書き換えます。

（例）サンプル11・・・う〜ん。何に使える？ソース編集をしました。
var ykb1=14400//ぶれる角度(正の整数)・・・ソース編集しました
var ykbur1=0.1//ぶれ周期角度・・・ソース編集しました 。

サンプル12・・・こうなるともうわけわからず。えっとソースをいじって、風のぶれの量を赤い点で表してみました。風のぶれの量変化が視覚的にわかるかと思います。
サインカーブを描いていますね。

サンプル13・・・「くるくるチェリー」・・・意味不明

サンプル14・・・画像21-Matrix変形。画像がTOP配置の場合

サンプル15・・・画像21-Matrix変形。画像がBOTTOM配置の場合

サンプル16・・・画像21-Matrix変形。全て「風」機能で作成。全てBOTTOM基準で配置

お遊びサンプル・・・ぴあにしもだけではできません。

お遊びサンプル・・・ぴあにしもだけではできません。

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

[メインメニュー]

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

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