wonderfl：サイト上でFlashを作成できる！
　 ActionScriptを勉強できる！

今月号の記事

「wonderfl」は、面白法人KAYACが昨年12月に公開した、Webサイト上でFlashを作ることができるサービスです。サイトにあるフォームにActionScriptを書いて、そのコンパイル結果をWebブラウザ上でリアルタイムに見ることができます。インターネット環境とWebブラウザがあれば誰でも手軽にコードベースのFlash制作を体験することができます。しかも、他のユーザが投稿したコードを派生・分岐（Fork）させて、改造などいろいろと試すこともできます。ActionScriptの勉強やノウハウ共有の場としても最適です。tne Edge newsletterとしては、Flashコミュニティを活性化するツールとしてwonderflに注目しています。そこで、本記事ではwonderflの使い方と注目の作品を紹介します。

wonderflの使い方

wonderflの作業画面

wonderflの使い方はとてもシンプルです。まずは、以下の画面を見て下さい。

作品をForkした時の画面
作品をForkした時の画面

左側のペインがActionScriptコードを記述するフォーム、右側のペインがコードのコンパイル結果、下側のペインがコンパイル状況の出力です。自分でゼロからコードを作成したい場合は、トップページの「Build from scratch」ボタンをクリックします。他のユーザが投稿したコードを派生・分岐したい場合は、その作品を表示して「Fork」ボタンをクリックします。また、作成したコードは、「Download」ボタンをクリックして、コードファイルとして入手することも可能です。

複雑なセットアップや環境構築は必要なく、すぐさま利用でき、コーディングだけに専念できます。なお、コーディング中に一定時間キー入力が無いと、自動的にコンパイルを行い、右側のFlashをリロードします。そして、コンパイルが完了し、コード内容にエラーが無ければ、自動的にコードを保存します。

※サイト上に使い方のデモビデオがあります。

コーディング時の注意点

wonderflで記述できるのは、1つのActionScriptファイル／mxmlファイルです。ActionScriptファイルの場合、flexsdkを使用しているため、「パッケージ宣言→クラスを定義→コンストラクタを定義」というようにflexsdkを使用する時の文法に従う必要があります。最も基本的なテンプレートは以下のようになります。

package {
    import flash.display.Sprite;
    public class test extends Sprite {
        public function test() {
        }
    }
}

※SpriteのところはMovieClipなどにも変更可能

また、Flash Player 10以降で使用可能なVector型などが使えるほか、以下のライブラリをimportして使用することができます（追加して欲しいライブラリをリクエスト可能）。

ユーザ画面

登録したユーザはマイページを持つことができます。マイページでは、投稿したコードやお気に入り登録したコードを管理できるほか、自分の作業履歴などが表示されます（他のユーザのマイページを閲覧することもできます）。

マイページの例
マイページの例

そのほかにも、「コードランキング」「ユーザのアクション」をRSSで購読したり、作成したコードをブログに貼り付けたりすることができます。

次々と投稿されるコード、Forkで生まれるコラボレーション

サービスインして間もないwonderflですが、すでに数多くのユーザが登録し、さまざまなコードが投稿されています。サイトでは、アクセス数に基づいた「コードランキング」と「ユーザランキング」が発表されています。

「コードランキング」と「ユーザランキング」

wonderflで作成できるFlashの領域は465x465ピクセルですが、その限られた領域の中でもFlashが持つ素晴らしい表現力を実現している作品が数多く見られます。

Worm Study04
fladdictさんによる「Worm Study04」。ワームのような線がランダムに描画され、幾何学的模様を作り出します

動体検知5
ll_koba_llさんによる「動体検知5」。Webカメラの映像を表示し、被写体の動きに反応してエフェクトがかかります

※http://clockmaker.jp/blog/2008/12/wonderfl/では、秀逸作品がカテゴリごとにまとめられています。ぜひチェックしてみて下さい。

また、Fork機能を通して、ユーザ同士のコラボレーションが生まれています。たとえば、下記の作品群は、もともとゲームの背景だけだったコードを、音を追加したり、敵を追加したり、弾を撃てるようにしたり 、当たり判定を追加したりして、遊べるゲームへと発展させたものです。

「なんとかディウスっぽい背景」
元となった背景： gyuqueさんによる「なんとかディウスっぽい背景」

keim_at_Siさんはサウンドと自機を追加
keim_at_Siさんはサウンドと自機を追加

nemu90kWwさんはサウンドと自機、そして敵を追加
nemu90kWwさんはサウンドと自機、そして敵を追加

これらのほかにも、海外のクリエイターが投稿していたり、Flash未経験者がFlash上級者のコードをForkして勉強していたりと、いろいろな人がさまざまな目的で活用しています。

開発を手掛けた面白法人KAYACの大塚雅和さんによれば、今後、以下の項目を検討されているようです。

みなさん、ぜひwonderflを活用してFlash／ActionScriptのスキル向上に役立てて下さい。

‹ 戻る