1 FL チュートリアルFlashにおける圧縮作業 Sun Mar 20, 2011 4:56 am
Admin
Admin
イントロダクション
このチュートリアルではダイナミックな雪を降らせる方法を紹介しようと思います。クリスマスに向けて最後の仕上げに使えるんじゃないでしょうか?この雪は
アクションスクリプトによって制御されており、それぞれの雪片をトウィーン制御しているわけではありません。雪はマウスを動かした方向に刺激を受けて流れ
ます。また、それぞれの雪片はそのスピードもまちまちです。小さな雪(遠くにある)はゆっくりと降ります。少しだけランダムな効果を与えてやれば、雪片は
同じ方向に降ることもなくなります。
ステージの設定
フレームレートを25fpsに設定します。違うフレームレートを使いたければ、コードを編集してください。そうしなければ、速過ぎるか、遅すぎる結果に
なってしまいます。では、小さな円をステージに作ってください。サイズはあなたが、雪片にしたい大きさにします。それをシンボルに変換します、名前は
”snowflake”として、右下にある”詳細”ボタンを押してください。”アクションスクリプトに書き出し”のボックスにチェックして、リンケージと
して識別子に”snowflake”と入力してください。
[You must be registered and logged in to see this image.]
コード
グラフィックの方が片付いたら、このコードを最初のフレームに貼り付けてください。幅と高さ、トータルの変数をあなたの目的の値に設定することを忘れずに!
width = 550;
height = 400;
total = 200;
for (var t = 0; t != total; t++) {
var mc = _root.attachMovie("snowflake", "snowflake"+t, _root.getNextHighestDepth());
mc._x = (Math.random()*(width+20))-10;
mc._y = (Math.random()*(height+20))-10;
mc.yspeed = (Math.random()*1.75)+0.25;
mc.speed = (Math.random()*3)+2;
mc._xscale = mc._yscale=(mc.speed+mc.yspeed)*10;
mc.onEnterFrame = function() {
var angle = Math.atan2(_root._xmouse-(width/2), _root._ymouse)+1.5707963267949;
this._y += Math.sin(angle)*this.speed+this.yspeed;
this._x += Math.cos(angle)*this.speed;
if (this._x>width+10) {
this._x = -10;
} else if (this._x<0-10) {
this._x = width+10;
}
if (this._y>height+10) {
this._y = -10;
} else if (this._y<0-10) {
this._y = height+10;
}
};
}
このコードがなぜ動作するかを知りたければ、続きを読んでください。もし、その必要がなければ作業は終了です。コードが何を行うかを制御するために、2,3の変数を定義することから始めます。最初の2つは、ステージの幅と高さです。最後の変数は、創られる雪の総数です。
次に、雪片を創りだすループとなります。ループの中では、まず、”snowflake”シンボルをライブラリの中から取り出し、ステージ上に
attachMovieを使って配置します。AttachMovieは3つのパラメータを持っており、linkage(シンボル名)、the
instance name(ステージ名)とdepthです。depthに達するために、getNextHighestDepth関数を用います。
次に雪片をステージの範囲内でランダムに配置していきます。Math.randomは0と1でランダムな値を返します。
ここで、yspeedとspeed変数を定義します。Yspeed変数は縦方向に沿った、雪片のスピードを制御します。speed変数はどの方向にも対したスピードを制御します。実数x、yスピードがこれらの関数によって制御されます。
そして、x、yscaleプロパティがスピードによって変化します。大きなspeed、yspeed値は寄り大きな雪片ということになります。
EnterFrame関数まで来ました。この関数は、雪片を動かすものです。関数の中では、最初に、相対的なポイント(0、幅/2)に対するマウスの角度
を計算します。Math.atan2がラジアンでその角度を返します。ここでは、雪片が落下してくように(Flashでは右が0°)、90°(ラジアン
で)を加えています。
そして、ムービークリップをy-方向に沿って動かします。角度のsinを取り、スピードと掛け合わせています。Math.absは雪片が上向きに昇らないように常に正の値を返すために使われる関数です。yspeedを加えて、雪片が同じ向きに降らないようにしています。
ムービークリップを角度のcosをとってスピードと掛け合わせることで、x軸方向に動かします。
引用:Web Design Library著者:Bluegelmedia.com翻訳:atuk]
このチュートリアルではダイナミックな雪を降らせる方法を紹介しようと思います。クリスマスに向けて最後の仕上げに使えるんじゃないでしょうか?この雪は
アクションスクリプトによって制御されており、それぞれの雪片をトウィーン制御しているわけではありません。雪はマウスを動かした方向に刺激を受けて流れ
ます。また、それぞれの雪片はそのスピードもまちまちです。小さな雪(遠くにある)はゆっくりと降ります。少しだけランダムな効果を与えてやれば、雪片は
同じ方向に降ることもなくなります。
ステージの設定
フレームレートを25fpsに設定します。違うフレームレートを使いたければ、コードを編集してください。そうしなければ、速過ぎるか、遅すぎる結果に
なってしまいます。では、小さな円をステージに作ってください。サイズはあなたが、雪片にしたい大きさにします。それをシンボルに変換します、名前は
”snowflake”として、右下にある”詳細”ボタンを押してください。”アクションスクリプトに書き出し”のボックスにチェックして、リンケージと
して識別子に”snowflake”と入力してください。
[You must be registered and logged in to see this image.]
コード
グラフィックの方が片付いたら、このコードを最初のフレームに貼り付けてください。幅と高さ、トータルの変数をあなたの目的の値に設定することを忘れずに!
width = 550;
height = 400;
total = 200;
for (var t = 0; t != total; t++) {
var mc = _root.attachMovie("snowflake", "snowflake"+t, _root.getNextHighestDepth());
mc._x = (Math.random()*(width+20))-10;
mc._y = (Math.random()*(height+20))-10;
mc.yspeed = (Math.random()*1.75)+0.25;
mc.speed = (Math.random()*3)+2;
mc._xscale = mc._yscale=(mc.speed+mc.yspeed)*10;
mc.onEnterFrame = function() {
var angle = Math.atan2(_root._xmouse-(width/2), _root._ymouse)+1.5707963267949;
this._y += Math.sin(angle)*this.speed+this.yspeed;
this._x += Math.cos(angle)*this.speed;
if (this._x>width+10) {
this._x = -10;
} else if (this._x<0-10) {
this._x = width+10;
}
if (this._y>height+10) {
this._y = -10;
} else if (this._y<0-10) {
this._y = height+10;
}
};
}
このコードがなぜ動作するかを知りたければ、続きを読んでください。もし、その必要がなければ作業は終了です。コードが何を行うかを制御するために、2,3の変数を定義することから始めます。最初の2つは、ステージの幅と高さです。最後の変数は、創られる雪の総数です。
次に、雪片を創りだすループとなります。ループの中では、まず、”snowflake”シンボルをライブラリの中から取り出し、ステージ上に
attachMovieを使って配置します。AttachMovieは3つのパラメータを持っており、linkage(シンボル名)、the
instance name(ステージ名)とdepthです。depthに達するために、getNextHighestDepth関数を用います。
次に雪片をステージの範囲内でランダムに配置していきます。Math.randomは0と1でランダムな値を返します。
ここで、yspeedとspeed変数を定義します。Yspeed変数は縦方向に沿った、雪片のスピードを制御します。speed変数はどの方向にも対したスピードを制御します。実数x、yスピードがこれらの関数によって制御されます。
そして、x、yscaleプロパティがスピードによって変化します。大きなspeed、yspeed値は寄り大きな雪片ということになります。
EnterFrame関数まで来ました。この関数は、雪片を動かすものです。関数の中では、最初に、相対的なポイント(0、幅/2)に対するマウスの角度
を計算します。Math.atan2がラジアンでその角度を返します。ここでは、雪片が落下してくように(Flashでは右が0°)、90°(ラジアン
で)を加えています。
そして、ムービークリップをy-方向に沿って動かします。角度のsinを取り、スピードと掛け合わせています。Math.absは雪片が上向きに昇らないように常に正の値を返すために使われる関数です。yspeedを加えて、雪片が同じ向きに降らないようにしています。
ムービークリップを角度のcosをとってスピードと掛け合わせることで、x軸方向に動かします。
引用:Web Design Library著者:Bluegelmedia.com翻訳:atuk]