ブラウザだけでできる!wonderflではじめるFlash制作

第1回 wonderflでFlashのHello World!をつくる

この記事を読むのに必要な時間:およそ 2 分

wonderflでコードを書く

login後,wonderflトップページで画面中央にある「Build from scratch」ボタンを押すと,以下のような画面になります。

図2 ⁠Build from scratch」ボタンを押した後の画面

図2 「Build from scratch」ボタンを押した後の画面

ページ上部に,⁠Flash on 2009-2-**」と表示されているのは,ここでつくるFlashのタイトルです。タイトル部分をクリックすることで,タイトル自体を編集することができます。

ページ左側の黒いエリアは,Flashをつくるために,Actionscript3のコードを記述するテキストエリアです。

このテキストエリアに書いてあるコードをコンパイルすることで,swfファイルを生成します(以降,このエリアをコードエリアと呼びます⁠⁠。

ページ右側では,コンパイルされたswfファイルをロードして見ることができます。

ページ下部の黒いエリアには,コンパイル状態やサーバサイドからのメッセージを表示します(以降,このエリアをメッセージエリアと呼びます⁠⁠。

wonderfl上でのコンパイル

コードのコンパイルは,コードエリアに変更があり,キー操作が一定期間無い場合に自動的に行われます。

コンパイルが成功した場合には,コンパイル成功の旨メッセージエリアに表示され,コードの自動保存,およびswfファイルのリロードを行います。

なお,コンパイルが失敗した場合には,どの行のどこに問題があるか,メッセージエリアに表示されます。

では,コードエリアに以下のコードをコピー&ペーストして,コンパイルしてみましょう。

リスト1 Hello World!

package {
   import flash.display.Sprite;
   import flash.text.TextField;
   public class HelloWorld extends Sprite {
       public function HelloWorld() {
           var tf :TextField = new TextField;
           tf.text = "Hello, world!";
           addChild( tf );
       }
   }
}

ペースト後,メッセージエリアに"Compile Complete"と表示され,右側に "Hello, world!"と表示されましたか?

図3 "Hello, world!"と表示された

図3 Hello, world!と表示された

第1回のまとめ

このようにして,wonderflではブラウザのみを使用して,簡単にFlashの作成を始められる環境をオンラインで用意しています。興味のある方はぜひご覧ください。

次回は,wonderflで実際にコードを書ていきます。

著者プロフィール

大塚雅和(おおつかまさかず)

面白法人カヤックのWebプログラマー。数々のマッシュアップサービスで受賞するうちに,ついには「マッシュくん」と呼ばれるように。今回取り上げたwonderfl build onlineをはじめ,日本最大の音声コミュニティサイト「こえ部」をゼロから作ったスマッシュコンテンツ仕掛け人。

面白法人カヤックの「技術部」,「BM11」(研究開発ラボ)のメンバーとして在籍中。

URLhttp://www.kayac.com/member/ohtsuka
URLhttp://maaash.jp/