携帯Flashの作製方法 雪を降らせてみよう!

今回は1個のMCを複製して、それをランダムに配置、さらに雪っぽい動きで上から下に落ちて行くようにします。全てタイムラインではなくActionScriptで行います。

どうですかね?雪っぽいですか?今回はかなりASバシバシになりますです。まあそんなに理解できなくても、サンプルを落として雪の画像を違うのにしてみたり、雪の量を増やしたりはできますんで…。

ではまず「snow」とかいう名前のMCを作り、ステージ内にテキトーに配置します。で、そのMC内にASを記述していくのですが…、Flash Lite1.1ではonClipEvent(load)やonClipEvent(EnterFrame)が使用できないんで、それをなんとかしないといけないです。

MC「snow」にはまず丸い雪を書いておきます。で違うレイヤーをactionって名前にして(別にどんな名前でもいいんですが…)1、2、3フレーム全てをキーフレームにしておきます。

08-1

まずは1フレーム目にonClipEvent(load)にあたるASを書き込みます。

//(1)MC「snow」の大きさを定義
movieWidth = 240;
movieHeight = 320;

//(2)MC「snow」の大きさ、落下速度、透明度で共通して使う変数zの定義
z = 20+Math.random()*100;

//(3)MC「snow」の落下速度
i =1+ z/30;
 
//(4)_xscaleと_yscaleにランダムな数字を与えて、MC「snow」の大きさをランダムにする
_xscale = _yscale = 80+z*1.2;

//(5)_alphaにランダムな数字を与えて、MC「snow」の透明度をランダムにする
_alpha = z;

//(6)MC「snow」の最初の発生位置をランダムにする
_x = -10+Math.random()*movieWidth;
_y = -10+Math.random()*movieHeight;

と、ActionScriptを書きます。

(1)はMC「snow」大きさを定義して下さい。QVGA端末で画面全体に降らすのであれば、movieHeightは400になりますね。

(2)はMC「snow」の大きさ、落下速度、透明度で共通して使う変数zの定義です。この3つを共通で使用することにより、MC「snow」が小さければ連動して落下速度も遅く、 また透明度も上がって薄暗くなり、画面に奥行きが出ます。

(3)はMC「snow」の落下速度です。z/30の右の数字の数を減らすと落下速度は早くなり、数字を増やせば落下速度は遅くなります。

(4)は_xscaleと_yscalに共通のランダムの値を代入することで、様々な大きさのMC「snow」を生成します。

(5)は_alpha(透明度)にランダムの値を代入させます。

(6)MC「snow」の最初の発生位置を画面の大きさ(少し余幅あり)の中で、ランダムに発生させます。

これで1フレーム目は終了です。

次の2フレーム目にはonClipEvent(EnterFrame)にあたるASを記述します。

//(1)MC「snow」のゆらゆらする動きに使用する値kの数値の定義
k = Math.random()*10;

//(2)x軸ゆらゆらの振り幅とy軸の落下速度
rad += (k/180)*3;
_x -= Math.cos(rad)*3;
_y += i;

//(3)MC「snow」がy軸でmovieHeightより下になった時に位置を移動させる
if (_y>=movieHeight) {
_y = -5;
}
//(4)MC「snow」がx軸で-15になった時に位置を移動させる
if ((_x>=movieWidth) || (_x<=-15)) {
_x = -10+Math.random()*movieWidth;
_y = -5;
}

(1)はMC「snow」が降ってくる時のゆらゆらした動きを表現する為に必要な変数kの式です。一番右の数字を大きくすると左右の振り幅が狭くなります。かなり忙しない動きになりますです。

(2)は(1)のkを利用し、MC「snow」の横軸のゆらゆら具合w と1フレーム目で定義した落下速度を代入します。

(3)と(4)は書いてある通り、画面外に消えてしまったMC「snow」を画面の上に移動させます。

で、最後に2フレーム目のASを連続で読み込ませるために、3フレーム目に

gotoAndPlay(2);

を書きます。これでMC「snow」は終了です。

08-1

そしたらば、一番上のシーン1に戻って、テキトーな場所にMC「snow」を配置し、そのMCのインスタンス名をsnowにします。そしたら新しいレイヤー「action」を作って、そこに複製のASを記述します。

for (s=0; s<30; s++) {
//sが0〜29までだった場合、MovieClipを複製する
duplicateMovieClip("snow", "snow"add s, s);
}

まずfor文により繰り替えし処理を行います。sが雪の数で、まずはsを=0で初期値として定義します。そしてsが0〜29までだった場合、sを+1して繰り返させます。s<30の数字を増やせば雪が増え、 減らせば雪の数が減ります。

duplicateMovieClipの()内は複製するMCの名称、複製した時の名称、ムービーの深度がそれぞれ入ります。複製した時の名称は"snow"add sなので、snow1とかsnow23とかになります。 ムービーの深度は複製したMCの重なり順です。

これで終了です。

08-1

注意点としては、Math.PIなどを使わないで計算を簡単にしているのですが、それでも古い端末では速度が全体的に遅くなってしまいます。 ですので、あまり雪を増やし過ぎると携帯ではコマ送り状態になってしまいます。うまく使ってみて下さい。下のような感じにしちゃうと、もう携帯はいっぱいいっぱいでほとんで動きがなくなりますw

今回作製したflaファイル