このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

世の中、不景気真っ只中です。

こんな今だからパーっと花吹雪でも咲かせませんか？

というお話です。

よりによってAS2.0ですが。。。

では花吹雪を実装してみましょう。要点をあげると、

1.まず表示させる。

2.揺らしながら降下させる。

3.ある程度まで落ちるとフェードイン

4.また表示させる。

シンプルに作成を行いたいと思います。細かい設定等は任意で行って下さい。

ではまず、表示させる花吹雪をグラフィックツールを用いて作成。

【花吹雪】

任意でネームをつける。とりあえずflower.pngとネーム付け。

ライブラリに読み込み。

一応、手順。ライブラリにドラッグ＆ドロップをするか、

ファイル＞読み込み＞ライブラリに読み込み

で読み込みます。

読み込み時はもちろんビットマップの状態なので、ムービークリップのシンボル化を行います。

一応手順。ライブラリからステージへドラッグ＆ドロップ。

修正＞シンボルに変換

で行えます。

シンボルをダブルクリックし、ムービークリップ自体にscriptを記述。

ActionScript2.0

function init(){
this._alpha = 100;
this._y = 0;
this._x = Math.round (Math.random()*500);
}
onEnterFrame = function(){
this._y += 2;
this._x += Math.round (Math.random()*2)-1;
if (this._y == 0) {
this._alpha = 100;
}
if (this._y > 180) {
this._alpha -= 1;
}
if (this._y > 290) {
init();
}
}

init（）でシンボルの初期化を行います。

Math.randomメソッドは0~1の浮動小数の値が返るので、

Math.random()*500で0〜500pxのx座標を算出、のちMath.roundで四捨五入を行っております。

onEnterFrameで毎フレームの処理を行います。

this._x += Math.round(Math.random()*2)-1;

で花吹雪の揺らぎを発生。-1px〜1pxの揺らぎとなります。

if(this._y>180){〜

でy座標180px超えると徐々に透明に、y座標290pxを超えるとまたopxから降り始めます。

scriptを記述したムービークリップを更にステージにダーっと追加しインスタンス化すると、

即興花吹雪の出来上がり！

デモページ

http://webcyou.com/demo/flash/flower.html