webの人だったらご存知だと思いますが、中村勇吾さんの作品で、amaztypeっていうのがありますよね。

amaztype

こんな感じに、検索した言葉を、amazonでの検索結果の画像で形作っちゃう、というもの。

あと、最近ではauのISシリーズ(androidケータイ)のサイトでも
こんな感じに、文字やシェイプを画像の集合で作る、ってのをやってます。

どちらも、MovieClipを文字や図形の形に並べるというものですね。

こういうのをやってみたくて、作ったのがこちら。

500枚のカードを並べています。

これは、さて、どうやってやったら良いでしょう?



考え方はこうです。

500枚の位置を、forループで一点一点決めていきます。

まず、x、y座標をMath.random()を使って、ランダムで設定します。

設定したあと、並べたい形(これはflash上で自分で書いておきます。movieclipのフレームを使えば服す設定できますね。)の上にかるかどうかをhitPointで調べます。

形の上に乗っていれば、それがx、y座標となります。
乗っていなければ、再度同じことをhitするまで繰り返します。


ポイントは、上記の位置は、これから向かう位置、ってこと。
パンッとその位置に切り替えるのもありだけど、せっかくFLASHだから、イージングをつけてその位置に行きたいですよね。
なので、上記で決めた位置は、決めた位置として保持して、現在地からは徐々に動かします。

x += (toX - x)/2

という感じです。
エンターフレームのイベントが起こるたびに、目的地と現在地の真ん中に、動かすようにする。
これで、動く軌道も見えるようになります。


また、形から形に移る際に、一旦すべてを分散させています。
上記の位置決めのうち、hitPointでの判定を省くだけですね。
3秒毎に、目的の位置の座標を、形→分散→形→分散 で変えるようにしています。
これで、ふわっとしたリズムのある動きになります。


考え方さえ解れば、作るのは簡単。
是非チャレンジして下さい。

ブログランキング このエントリーをはてなブックマークに追加

カテゴリ:FLASH/FLEX/AIR