このフィルタ自身は再描画される際、呼び出されれば形状を変化させるようです。
このフィルタにスクリプトなどで直接働きかける必要は無く、再描画が起これば動きが見られます。
例えば次のボタンをクリックして見てください。
ボタンを押すと<t:animatemotion>を開始させて移動が起こります。
この時特にAdditiveフィルタになにかをしているわけではないのに、炎の変化が起こります。
そしてこれは移動している時だけ起こります。
次にこのエレメントにかかっているAlphaフィルタのOpacityを100から0にデクリメントさせてみます。
JavaScriptでやってみます。
どうです、やはりAdditiveフィルタに働きかけなくてもAlphaフィルタのパラメータ値が変わり、再描画が起こるために炎が動いて見えます。
では最後にWAVEフィルタのStrengthをスクリプトで変化させてみます。
waveの強さが大きくなりゆがみますが、炎も動きます。
やはりAdditiveフィルタにはなにも働きかけてはいません。
このようにAdditiveフィルタで変化が起こっているようにするためには、なにもパラメータを変化させる必要はありません。
むしろAdditiveフィルタがかかっているエレメントが再描画が起こると動いてしまうともいえます。
「Additiveフィルタは再描画という間接的に呼び出される度に変化が起こる」ということです。
ちなみにこのページを[F5]キーを繰り返し押して更新させてみてください。それでも動いて見えます。
また上記では左のみ操作しており、右は何も操作していませんが、一緒に動いたり重なる部分のみ動いたりしますよね。これについては後述
さて、このフィルタを有効に使うために注意する点があります。
まず、パラメータに値をセットする際はスクリプトを使用しなくても良いが、
Additiveフィルタ使用は次のようにフィルタをかけるエレメントのスタイルシートに書きます。
style="filter:IntelAdditive(GenerateSeed=1,ColorKey=16776959,MaskMode=0,Harmonics=5,NoiseOffset=0,ScaleX=0,ScaleY=0,ScaleT=0,TimeY=3,TimeX=3,enabled=1)"
NoiseScale以外はこれで一応OKです。
しかしNoiseScaleを同様にセットしてもうまく炎になりません。
例)
IntelAdditive(GenerateSeed=1,ColorKey=16776959,MaskMode=0,NoiseScale=8,Harmonics=5,NoiseOffset=0,ScaleX=0,ScaleY=0,ScaleT=0,TimeY=3,TimeX=3,enabled=1)とした場合
そこでNoiseScaleのみスクリプトで後がけしてみますと、
例)
IntelAdditive(GenerateSeed=1,ColorKey=16776959,MaskMode=0,Harmonics=5,NoiseOffset=0,ScaleX=0,ScaleY=0,ScaleT=0,TimeY=3,TimeX=3,enabled=1)とNiseScaleを設定せず、スクリプトで設定する。
<script>
honoo2.filters("IntelAdditive").NoiseScale=8
</script>
このようにスクリプトでNoiseScaleを設定すると巧く活きます。
NoiseScale以外はスクリプトで設定しなくても炎になります。
尚、以上のことからスクリプトで動かしたい場合にNoiseScaleでいじる必要はありません。
次はTimeXをそのまま回帰的にセットするものです。
ボタンを押して見てください。
<IMG id="honoo3" style="filter:IntelAdditive(GenerateSeed=1,ColorKey=16776959,MaskMode=0,Harmonics=5,NoiseOffset=0,ScaleX=0,ScaleY=0,ScaleT=0,TimeY=3,TimeX=3,enabled=1); width:300px; height:200px">
<script>
honoo3.filters("IntelAdditive").NoiseScale=8
var txf=0
function txstart(){
if(txf==1)return
txf=1
txchange()
}
function txchange(){
honoo3.filters("IntelAdditive").TimeX=honoo3.filters("IntelAdditive").TimeX
setTimeout("txchange()",10)
}
</script>
以上、炎を動かしたくない場合でも、再描画が起こると動いてしまいまうことには注意が必要です。
上で「NoiseScale以外はこれで一応OKです。」と書きました。ここは注意するところで、実際にパラメータの値が設定通りになっていないことがわかりました。
実は他のパラメータもスクリプトでセットした方がうまくいきます。
次の二つを見比べましょう。
左はNoiseScale以外はスクリプトでセットしていません。
それに対し右はTimeY,TimeX,ScaleX,ScaleY,NoiseOffset,Harmonics,ScaleTそれにNoiseScaleをスクリプトでセットしています。
右の場合
honoo6.filters("IntelAdditive").TimeY=10
honoo6.filters("IntelAdditive").TimeX=-5
honoo6.filters("IntelAdditive").ScaleY=4
honoo6.filters("IntelAdditive").ScaleX=4
honoo6.filters("IntelAdditive").Harmonics=6
honoo6.filters("IntelAdditive").ScaleT=0
honoo6.filters("IntelAdditive").NoiseOffset=-50
honoo6.filters("IntelAdditive").NoiseScale=10
「結論」
[1]パラメータはできる限りスクリプトであとがけした方が良い様だ。
特にNoiseScaleは必ずスクリプトであとがけすること。
[2]変化を与えるには直接的にAdditiveフィルタに働きかける必要はない。
[2]の追加情報
再描画で動くということはTIMEやVMLアニメーション領域ではどうなるか？を試してみました。
結論だけいいますと、アニメーション領域の部分で再描画が起こると、Additiveフィルタのかかっているエレメントとそのアニメーション領域の重なり合う部分でのみ動きが起こります。
そしてそれはアニメ−ション領域が消えると元に戻ります(戻る際の再描画で動きが見られる）。
ぴあにしもでテストできるのでお試しあれ。
先に右も一緒に動くと書きましたが、それも再描画で同時に呼び出されてしまうからなんですね。
次のサンプルはともにAdditiveフィルタに直接的な働きかけはしていません。
が、サンプル１ではVNLアニメーション空間での再描画の度に動きが見られ、サンプル２ではTIMEアニメーション空間での再描画の度に動きが見られます。
サンプル１中央四角はVML花火の上がるエレメント
サンプル２中央四角はHTML+TIMEで表示されるエレメント