Wonderflを利用しよう！
出典: FlashDevelop.jp
目次 |
Wonderfl って何？
wonderfl(ワンダフル)とは、面白法人カヤックが開発したオンラインでFlashを制作できるサービス。
ブラウザから入力されたActionScript3をサーバサイドでコンパイルし、結果をリアルタイムで確認できる。
投稿されたコードはすべて公開されており、ユーザはコードをforkすることで他者のコードを元に開発を行うことができる。
(Wikipediaより引用)
「FlashDevelop」と「It's All Text!」を使ってソースを編集する
この方法ではFirefoxを使用します。
Firefoxがインストールされてない場合、下記のリンクからインストールできます。
[Step.1] Wonderflのエディターを変更する
※ブラウザ標準のフォームを使用する設定にしている人は不要なステップです。
WonderflはデフォルトでFlashエディターを使用する設定になっています。
FlashエディターだとIt's All Text!が使えないため、ブラウザ標準のテキストフォームに変更します。
まずは、自分のプロフィールページにアクセスします。
そうすると様々な情報が出てくると思います。
今回は設定を変更するだけなので、プロフィール画像の下にある編集をクリックします。
一番下にある「use HTML textarea editor」をクリックして保存します。
[Step.2] It's All Text!をインストールする
It's All Text!って何？
「It's All Text!」はWebページ上に設置されたテキスト入力フォームを外部エディターで編集できるようにするFirefoxアドオンです。
では、早速インストールしましょう
下記のリンクから、「Firefoxへ追加」をクリックするとインストールが開始されます。 インストールが完了して、Firefoxを再起動すれば、It's All Text!の準備は完了です。 [It's All Text!]
[Step.3] It's All Text!をWonderfl用に設定する
It's All Text!のインストールは完了しましたが、これではまだFlashDevelopで編集できません。
このステップでは、It's All Text!をWonderfl用に設定します。
Firefox -> ツール -> アドオン -> It's All Text! -> 設定 で It's All Text! の各種設定が出来ます。
「エディタ」にFlashDevelopを指定します。 （デフォルトではC:\Program Files\FlashDevelop\FlashDevelop.exe）
「ファイル拡張子」に「.as,.mxml」と入力します。
それ以外の設定はお好みでどうぞ。
[Step.4] 実際に使ってみよう！
フォームを右クリック -> It's All Text! -> 「.as」として編集 をクリックします。
そうすると、FlashDevelopが立ち上がるはずです。もし、FlashDevelopが立ち上がらない場合は[Step.3]をもう一度やってみてください。
試しにFlashDevelopでソースを以下のように編集してみてください（保存するのを忘れずに）
package {
import flash.display.Sprite;
public class Main extends Sprite {
public function Main():void {
var sp:Sprite = new Sprite();
sp.graphics.beginFill(0x0000FF);
sp.graphics.drawCircle(100, 100, 100);
addChild(sp);
}
}
}
数秒間待って、ブラウザに以下のような青い丸が表示されたら大成功です！
以上で、Wonderflのソース編集にFlashDevelopが使えるようになります。お疲れ様でした。
