- 2009年07月02日 (木)
- Tweet
こっそり投稿していたwonderfl作例5本
最近、Flash系ブログと別の話題が多くてすみません 汗。 ネタがないので、まだ紹介していないwonderflに投稿した作品をまとめて紹介したいと思います。
Papervision3Dのバネの動きような挙動をするSpringCamera3Dのデモです。
一時期、Box2DとPapervision3Dの連携デモを量産していた時期がありましたが(これとこれとこれ)、そのときの実験作品です。
ランダムテキストに座布団つけてみた | wonderfl build flash online
Flashサイトでよく見かける、テキストシャッフルのデモです。これはsakeさんのランダムテキストのサンプルをfolkさせて頂きました。またプチfolk祭でこれを発展させた作例ができてますので、次のデモもあわせて参考になると思います。
- forked from: ランダムテキストに座布団つけてみた
- forked from: forked from: ランダムテキストに座布団つけてみた
- forked from: forked from: forked from: ランダムテキストに座布団つけてみた
元ネタはパーティクル崩し。一度元ネタを試されてから、どうしてもクリアできない人は試すと良いかと思います。
朝にwonderflに投稿する習慣で「朝ワン」というものがありまして(参考)、ネタ的に投稿しました。缶コーヒーをデジカメで適当な撮影をして、PSでぐちゃっと貼り付けたわりに、それっぽくテスクチャを貼り付けられてちょっと満足(元の画像はこれ)。シェイディッドマテリアルを使っているので、質感がでたのかと思っています(参考)。
このほかにもwonderflにはたくさん投稿していますので、もしよければ御覧ください。
2009年07月03日(金) 00:25
Yasuさん
いつも楽しく拝見させていただいてます。
実は以前の記事について質問したいのです。（今回の記事と全く関係なくて申し訳ないです。）
以前から気になっていた記事だったので自分でトライしてみようとしたのですが結局分からず、周りにFlashについて相談できる友人もいないので投稿させていただきました。
以前投稿されたPapervision3Dの「ムービングロゴ」という記事でPapervisionでPlaneオブジェが空中をさまよっていて時間差で（TimerEvent??）様々な形変化しているサンプルSWFがあったのですが、例えばPlaneオブジェが音符の形になったりするのは、予め音符の形になる座標を割り出しておいてそれを配列に保存してたりしているのでしょうか？？
また特に気になったのはPlaneオブジェがある形集まった後にいランダムに散らばった後のアニメーションが非常に気になります。
あの散らばった後の空間を移動するようなアニメーションはどのように表現しているのかが知りたいのです。Cameraを移動させているように思えるのですが・・・無知で申し訳ないのですが、ヒントなど頂けないでしょうか？
2009年07月03日(金) 10:22
＞hiroさん
コメントありがとうございます。
あのムービングロゴのロジックですが、
[音符等の形への変形]
ご推測の通り、予め座標を割り出して配列に保存しています。割り出し方は、16×16サイズの画像を用意し、BitmapData.getPixel()を使って、黒か白かの判定を行ってます。すると16×16マスの二値化された情報が得られますので、パーティクルをとりあえず動かして二値化された情報に従って表示・非表示を切り替えてます。
(わかりにくくて申し訳ないです。)
[ランダムに散らばるロジック]
Tweener(あれはTweenMaxですが)の、_bezierプロパティを使っています。パーティクルについて、出発点と到達点の間に、ベジェプロパティで作ったランダムな点を経由するようにすると、あたかもランダムに動いているかのように見えます。
Cameraの動かし方は次の記事と同じ方法を使ってます。
http://clockmaker.jp/blog/2008/10/sou-men/
2009年07月04日(土) 18:16
Yasuさん
お返事ありがとうございます。
変形に関しては、16×16の画像をfor文で1ピクセルづつgetPixelで色情報を配列に保持しておいてパーティクルを移動せさたところが白だったら非表示という流れですかね～
_bezierを使用していたんですね!!
こちらの方はpapervisionでは使用したことないのですが、カーブを描くときに使用していたことがあるのでナントカなりそうです。
非常に助かります。ありがとうございます。